@charset "utf-8";

@import url("browser_resets.css");
@import url("subnav.css");
@import url("floaters.css");



/*---------------------------------------------

Filename: print.css
Title: Print Styles for www.myflavia.co.uk
Author: Dave Whitehead - dave.whitehead@energycell.co.uk

---------------------------------------------*/

* {margin: 0px; padding: 0px; float: none; clear: none;}


body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 100%;
	text-align: center;
	margin: 0px;
	padding: 0px;
	background-color: #f4f4f4;
}



/*======================================================== Framework ==*/

.main_nav {display: none;}
.left_col {display: none;}
.content {width: 100%;}
.pagetools {display: none;}
.footer_outer {display: none;}


	
/*======================================================== Masthead ==*/

.masthead {
	width: 900px;
	height: 60px;
}
.masthead h1 {
	font-size: 1em;
	color: #000;
}
.masthead ul.masthead {display: none;}



/*======================================================== Breadcrumbs ==*/

.breadcrumbs {font-size: .7em;}
	


/*======================================================== Main Image ==*/

.bannerwide, .bannernarrow {width: 100%;}
.bannernarrow_picright, .bannerwide_picleft, .bannerwide_picright {display: none;}
.bannerwide_head, .bannernarrow_head {width: 100%;}

body.flaviapurple .bannerwide_head, body.flaviapurple .bannernarrow_head {border-top: 15px solid #571c1f;}
body.darkgreen .bannerwide_head, body.darkgreen .bannernarrow_head {border-top: 15px solid #006066;}
body.emerald .bannerwide_head, body.emerald .bannernarrow_head {border-top: 15px solid #6a8012;}
body.darkpurple .bannerwide_head, body.darkpurple .bannernarrow_head {border-top: 15px solid #642566;}
body.red .bannerwide_head, body.red .bannernarrow_head {border-top: 15px solid #d30044;}
body.orange .bannernarrow_head, body.orange .bannernarrow_head {border-top: 15px solid #ef8200;}
body.green .bannerwide_head, body.green .bannernarrow_head {border-top: 15px solid #00694e;}
body.purple .bannerwide_head, body.purple .bannernarrow_head {border-top: 15px solid #872434;}
body.brown .bannerwide_head, body.brown .bannernarrow_head {border-top: 15px solid #9c3c25;}
body.burgundy .bannerwide_head, body.burgundy .bannernarrow_head {border-top: 15px solid #af292e;}
body.yellow .bannerwide_head, body.yellow .bannernarrow_head {border-top: 15px solid #ecac00;}
body.gold .bannerwide_head, body.gold .bannernarrow_head {border-top: 15px solid #ba8b00;}
body.limegreen .bannerwide_head, body.limegreen .bannernarrow_head {border-top: 15px solid #8d9200;}
body.cream .bannerwide_head, body.cream .bannernarrow_head {border-top: 15px solid #cb8f42;}
body.pink .bannerwide_head, body.pink .bannernarrow_head {border-top: 15px solid #ac003e;}

.bannerwide h1, .bannernarrow h1 {
	font-size: 2.2em;
	line-height: 1.2em;
	font-weight: normal;
	padding: 30px 0px 0px 0px;
}



/*======================================================== Main Content ==*/

/*--Master typography--*/

div.content h2 {
	font-size: 1.5em;
	line-height: 1.1em;
	font-weight: normal;
	margin: 0em 0em .4em 0em;
	padding-right: 0px;
}
div.content h3 {
	font-size: 1em;
	line-height: 1.3em;
	font-weight: normal;
	margin-bottom: .5em;
	padding-right: 0px;
	color: #571c1f;
}
div.content h4 {
	font-size: 1.3em;
	line-height: 1.1em;
	font-weight: normal;
	margin: 0em 0em .2em 0em;
}
div.content h5 {
	font-size: .85em;
	line-height: 1.3em;
	font-weight: normal;
	margin-bottom: .5em;
	padding-right: 0px;
	color: #571c1f;
}

/*-- Heading colour variations --*/

body.flaviapurple div.content h2, body.flaviapurple div.content h4, body.flaviapurple h1 {color: #571c1f;}
body.burgundy div.content h2, body.burgundy div.content h4, body.burgundy h1 {color: #af292e;}
body.yellow div.content h2, body.yellow div.content h4, body.yellow h1 {color: #ecac00;}
body.limegreen div.content h2, body.limegreen div.content h4, body.limegreen h1 {color: #8d9200;}
body.cream div.content h2, body.cream div.content h4, body.cream h1 {color: #cb8f42;}
body.pink div.content h2, body.pink div.content h4, body.pink h1 {color: #ac003e;}
body.darkgreen div.content h2, body.darkgreen div.content h4, body.darkgreen h1 {color: #006066;}
body.emerald div.content h2, body.emerald div.content h4, body.emerald h1 {color: #6a8012;}
body.darkpurple div.content h2, body.darkpurple div.content h4, body.darkpurple h1 {color: #642566;}
body.red div.content h2, body.red div.content h4, body.red h1 {color: #d30044;}
body.orange div.content h2, body.orange div.content h4, body.orange h1 {color: #ef8200;}
body.green div.content h2, body.green div.content h4, body.green h1 {color: #00694e;}
body.purple div.content h2, body.purple div.content h4, body.purple h1 {color: #872434;}
body.brown div.content h2, body.brown div.content h4, body.brown h1 {color: #9c3c25;}


div.content p {
	font-size: .85em;
	line-height: 1.5em;
	margin-bottom: 1em;
	padding: 0px;
}
.photo_left {
	float: left;
	margin: 0px 25px 0px 0px;
}
.photo_right {
	float: right;
	margin: 0px 0px 0px 10px;
}

/* Default Lists */

div.content ul.defaultlist {margin: 0px; padding: 0px; list-style: none;}
div.content ul.defaultlist li {font-size: .75em;}
div.content ul.defaultlist li a:link, div.content ul.defaultlist li a:visited {
	background: url(../assets/pageframework/bullett_master.gif) no-repeat left center;
	padding-left: 10px; text-decoration: none; color: #666;}
	






/*======================================================== Home Page ==*/

/*--Tier 1--*/

div.home_tier1 {height: 240px; float: left; margin: 1px 0px 20px 0px;}
div.tier1_a {float: left; width: 100%; height: 240px;}
div.tier1_a h1 {
	color: #f8d7a5;
	padding: 15px 40px 0px 25px;
	font-size: 2em;
	line-height: 1em;
	margin-bottom: 1em;
}
div.tier1_a p {color: #fff; padding: 0px 15px 0px 25px;}
div.tier1_b, div.tier1_c {display: none;}
div.tier3_a {display: none;}





/*======================================================== About FLAVIA ==*/

div.sss_intro p {padding: 0px; color: #FFF;}

div.history_intro {
	background: url(../assets/pageframework/history_introback.jpg) no-repeat top center;
	height: 260px;
	color: #FFF;
	margin: 20px 0px 25px 0px;
	padding-top: 0px
}
div.content div.history_intro h4 {
	padding: 15px 0px 0px 15px;
	color: #cb8f42;
	font-size: 1em;
	font-weight: bold;
	margin-bottom: .5em;
}
div.history_intro p {
	padding: 0px 445px 0px 15px;
	color: #FFF;
}
div.flaviafuture {
	background: url(../assets/pageframework/future_back.jpg) no-repeat top center;
	height: 180px;
	color: #FFF;
	margin: 20px 0px 25px 0px;
	padding-top: 0px
}
div.content div.flaviafuture h4 {
	padding: 0px 15px 0px 345px;
	font-size: .95em;
	line-height: 1.3em;
	margin-bottom: .7em;
	color: #FFF;
	font-weight: bold;
}
div.flaviafuture p {
	padding: 20px 25px 0px 345px;
	color: #FFF;
}
div.ingredients_intro {
	background: url(../assets/pageframework/sourcesealserve_introback2.jpg) no-repeat top center;
	height: 110px;
	color: #FFF;
	margin: 20px 0px 25px 0px;
	padding-top: 20px
}
div.ingredients_intro p {
	padding: 0px 15px 0px 300px;
	color: #FFF;
}
div.merchandiser_intro {
	background: url(../assets/pageframework/merchandiser_introback.jpg) no-repeat top center;
	height: 140px;
	color: #FFF;
	margin: 20px 0px 25px 0px;
	padding-top: 20px
}
div.merchandiser_intro p {
	padding: 15px 450px 0px 20px;
	color: #FFF;
}


/*------------------------------------------- Distributor List --*/

div.distributor {
	float: left;
	width: 210px;
	margin: 0px 18px 20px 0px;
	font-size: .75em;
	text-align: center;
}
div.distributor img {
	border: 1px solid #CCC;
	margin-bottom: .3em;
}
div.distributor dt {
	text-transform: uppercase;
	color: #571c1f;
	font-weight: bold;
	margin-bottom: .3em;
}
div.distributor a:link, div.distributor a:visited {
	text-decoration: none;
	color: #666;
}
div.distributor a:hover {
	color: #571c1f;
	text-decoration: underline;
}


/*------------------------------------------- News --*/

div.news1col {width: 100%;}

div.news2col_left {width: 320px; float: left;}
div.news2col_right {width: 320px; float: right;}

div.story {
	margin-bottom: 1.5em;
}

div.story img {border: 3px solid #FFFFFF; float: left;}
div.news_photothumb { border: solid 1px #999999; margin: 4px 7px 10px 0px; float: left;}

div.story p.newsdate {margin: 0px 0px 2px 0px; color: #999; font-size: .7em;}
div.story p.newstitle {margin: 0px 0px 4px 0px;}
a.newstitle:link, a.newstitle:visited {
	color: #571c1f;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.1em;
}
a.newstitle:hover {
		text-decoration: underline;
		color: #642566;
}
div.story p.intro {margin: 0px; color: #666;}

div.pagination {
	font-size: .8em;
	color: #999;
	margin-top: 20px;
	border-top: 1px solid #CCC;
	padding-top: 10px;
}
div.pagination p {
	float: left;
	margin: 5px 15px 0px 0px;
}
input.gotopage {
	width: 30px;
	margin-right: 5px;
}

/*--News Detail page--*/

div.newsdetail_col {width: 460px; float: left;}
div.newsdetail_col h2 {padding-right: 50px;}
div.content div.newsdetail_col h3 {
	color: #999;
	font-size: .9em;
	}

div.alsoin_col {
	width: 200px;
	float: right;
	background: url(../assets/pageframework/newsdetail_divider.jpg) no-repeat top left;
	padding-bottom: 200px;
	margin-top: 80px;
}

div.alsoin_col h5 {
	font-size: .75em;
	font-weight: bold;
	padding-left: 30px;
	color: #571c1f;
	margin-bottom: .8em;
}
.alsoin_col ul {
	margin: 0px 0px 0px 30px;
	padding: 0px;
	list-style: none;
}
.alsoin_col li {
	border-bottom: 1px dotted #CCC;
}
.alsoin_col li a:link, .alsoin_col li a:visited {
	display: block;
	text-decoration: none;
	font-size: .7em;
	line-height: 1.2em;
	padding: 8px 0px;
	color: #642566;
}
.alsoin_col li a:hover {
	text-decoration: underline;
}

div.newsdetail_col img {border: 4px solid #FFFFFF; float: right;}
div.newsdetail_col div.newsdetailphoto_wrapper {
	border: solid 1px #999999; 
	margin: 4px 0px 5px 10px; 
	float: right; 
	width: 268px; /* IE Hack */
}

h4.h4_downloads {
	background: url(../assets/pageframework/downloads_icon.jpg) no-repeat center left;
	font-size: .8em;
	padding: 5px 0px 5px 25px;
	border-bottom: 1px solid #CCC;
	margin-bottom: 10px;
}

.newsdetail_col ul {
	font-size: .7em;
	margin-left: 0px;
	color: #999;
	list-style: none;
}
.newsdetail_col ul li {
	background: url(../assets/pageframework/bullett_master.gif) no-repeat left center;
}
.newsdetail_col ul li a:link, .newsdetail_col ul li a:visited {
	text-decoration: none;
	color: #5a2c34;
	font-weight: bold;
	padding-left: 10px;
}
.newsdetail_col ul li a:hover {
	text-decoration: underline;
	color: #642566;
}



/*======================================================== Testimonials ==*/


blockquote {width: 80%; float: right;}




/*======================================================== Machines Page ==*/

ul.quicklinks {display: none;}

ul.machine_usp {
	margin: 0px 0px 20px 0px;
	padding: 0px;
	list-style: none;
	float: left;
	background: url(../assets/pageframework/machineusp_back.jpg) no-repeat top center;
	z-index: 0;
}
ul.machine_usp li {
	float: left;
	margin: 230px 1px 0px 0px;
	position: relative;
}
ul.machine_usp li a:link, ul.machine_usp li a:visited {
	display: block;
	width: 196px; /* Actual width 226px. Adjust for padding */
	height: 53px; /* Actual height 78px. Adjust for padding */
	background: url(../assets/pageframework/machine_button_up.jpg) no-repeat top center;
	color: #FFF;
	text-decoration: none;
	font-size: .9em;
	line-height: 1.3em;
	font-weight: bold;
	padding: 25px 15px 0px 15px;
}
ul.machine_usp li a:hover {
	background: url(../assets/pageframework/machine_button_over.jpg) no-repeat top center;
}

#usp_first {

	width: 75%;
	top: 0px;
	left: 0px;
	margin: 20px 0px 0px 0px;
	padding: 0px;
}

ul.machine_usp li div.usp_hidden {
	display: block;

	width: 220%;
	top: -230px;
	margin: 20px 0px 0px 0px;
	padding: 0px;
}
ul.machine_usp li:hover ul {display: block;}

ul.machine_usp li:hover div.usp_hidden {display: block;}
ul.machine_usp li.usp1 div.usp_hidden {left: 0px;}
ul.machine_usp li.usp2 div.usp_hidden {left: -226px;}
ul.machine_usp li.usp3 div.usp_hidden {left: -452px;}

div.usp_hidden h2, #usp_first h2 {font-size: 1em; line-height: 1.5em; margin-bottom: 2em;}
div.usp_hidden h3, #usp_first h3 {font-size: .8em; color: #666;}

li.usp1 a:hover div.usp_first {
	display: block;
}


/* --Creation 400--*/

div.creation400_image {display: none;}
div.intuitive {background: url(../assets/pagephotos/intuitive_back.jpg) no-repeat top center;
	height: 210px; /* Actual height 245px */ padding: 0px;}


/*======================================================== Drinks ==*/

.drink_selector {display: none;}






/*======================================================== Sustainability ==*/


div.content div.thirstyforchange_intro h4 {padding: 0px;}
div.thirstyforchange_intro p {padding: 0px;}


div.threecol_one, div.threecol_two, div.threecol_three {
	width: 210px;
	float: left;
	margin: 0px 40px 0px 0px;
}


div.energy_intro {
	background: url(../assets/pageframework/energy_introback.jpg) no-repeat top center;
	height: 200px;
	color: #FFF;
	margin: 20px 0px 25px 0px;
}
div.content div.energy_intro h4, div.content div.waste_intro h4, div.content div.others_intro h4 {
	padding: 0px;
	font-size: .95em;
	line-height: 1.4em;
	margin-bottom: .7em;
	color: #FFF;
	font-weight: bold;
	
}
div.waste_intro {
	background: url(../assets/pageframework/waste_introback.jpg) no-repeat top center;
	height: 200px;
	color: #FFF;
	margin: 20px 0px 25px 0px;
}

div.others_intro {
	background: url(../assets/pageframework/others_introback.jpg) no-repeat top center;
	height: 200px;
	color: #FFF;
	margin: 20px 0px 25px 0px;
}

div.supportintro {
	background: url(../assets/pageframework/supportintro_back.jpg) no-repeat top center;
	height: 180px;
	padding: 0px;
}