// Eric Meyers CSS Reset
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Avoncourt specifics */
	BODY { background-color: white; font-family: "Lucida Grande", Geneva, Arial, sans-serif; font-size: 10pt; color: black; text-align: left; line-height: 1.25 }	
	HR { color: #e0e0e0; clear: both; margin: 3px 0px 2px 0px; }
		
	#pageframe { background-color: white; width: 960px; margin: 0px auto; }
	#infoframe { background-color: white; width: 800px; margin: 0px auto; }
	#content { width: 100%; clear: left; overflow: hidden; float:left }
	#heightspacer { float: right; width: 0px; height: 400px }


	#content p { margin: 0px; padding: 5px 10px 5px 10px }
	#content #mainimage { float: right; height: 435px; width: 240px }
	#content #mainimage2 { float: left; height: 435px; width: 240px }
	#content a { text-decoration: none; color: #c0362c; text-decoration: underline; }
	#content a:hover { color: #ff0000 }
	#content #bodyimages { float: left; clear: left; margin: 0px 100px }
	img.bodyimage { margin: 10px 0px; width: 240px; height: 160px }
	#contenttextbox { float: left; width: 720px; height: 265px }
	
	div.pageheadertextshell { width: 450px; height: 37px }
	div.pageheadertext { font-size: 19pt; color: white; font-weight: bold; padding: 5px 10px 0px 10px }
	
	div.outlinebox { border: 5px solid #cccccc; width: 320px; margin: 10px 2px 2px 2px; padding: 5px; float: left; font-size: 9pt }
	div.outlinebox img { float: left }
	
	.graybroundfl { background-color: #eeeeee; float: left }

/* for the 2 split pages e.g. location.php */
	#left-area { width: 50%; float: left }
	#left-areax h1 { background-color: #c0362c; font-size: 14pt; color: white; padding: 5px; margin: 1px }
	#left-areax h2 { background-color: #aaaaaa; font-size: 12pt; color: white; padding: 5px; margin: 1px; clear: both; border: 1px solid black }
	#left-areax p { margin: 4px 5px }

	#right-area { width: 50%; float: right }
	#right-areax h1 { background-color: #c0362c; font-size: 14pt; color: white; padding: 5px; margin: 1px }
	#right-areax h2 { background-color: #aaaaaa; font-size: 12pt; color: white; padding: 5px; margin: 1px; clear: both }
	#right-areax p { margin: 4px 5px }
	/* end of 2 split */
	
/* titlebar */	
	#titlebar { width: 960px; height: 55px }
	#tblogo { margin: 15px 20px 0px 20px; float: left }
	#tbcompanyname { color: white; font-weight: bold; font-size: 24pt; margin: 10px 10px 0px 10px; float: left }

	/* menubar */
	#menubar { width: 100%; height: 20px; clear: both; margin: 0px 0px 5px 0px }
	#menubar A { font-weight: bolder; font-size: 12pt; text-decoration: none; color: #c0362c; }
	#menubar A:hover { color: #ff0000 }	
	#nav { float:left; width: 100% }
	#nav, #nav ul { margin: 0px; list-style: none; line-height: 1 }
	#nav a { display: block; width: 180px; padding: 2px }
	#nav li { float: left; width: 190px; }
	#nav li ul { position: absolute; background: #eeeeee; width: 190px; left: -999em; background: #eeeeee; border: 1px solid black; padding:2px; font-size: 10pt; z-index: 1000 }
	#nav a:hover { background: white }
	#nav li:hover ul, #nav li.sfhover ul { left: auto; }
/* titlebar end */
	
/* footer */
	#footer { width: 100%; clear: both; font-size: 9pt; } 
	#footeremail { margin: 2px 5px; float: right } 
	#footeremail A { text-decoration: none; color: #c0362c; }
	#footeremail A:hover { color: #ff0000; }
/* footer end */

/* index page */	
	#indexpageframe { width: 960px; background: #c0362c; margin: 0px auto; height: 500px; overflow: hidden }
	#flashcontainer { display: block; float: left; width: 580px; height: 400px; margin: 50px 0px }
	#flashContent { float: left }
	#flashContent img { width: 580px; height: 400px }
	#indexcontent { display: block; float: left; width: 330px; height: 500px }
	#indexlogo { display: block; float: left; width: 300px; height: 300px; margin: 0px 15px }
	#indexlogo img { width: 300px }
	#indextext { float: left; text-align: center; clear: left; background: #ac302a; padding: 5px; width: 320px; height: 40px }
	#indextext a { font-size: 9pt; display: block; text-decoration: none; color: white; }
	#indextext div a { display: block; text-decoration: none; font-size: 12pt; font-weight: bold; color: white; vertical-align: middle; padding: 0px 30px 0px 30px }
	#indextext a:hover { color: #dddddd }
	#indextext a img { margin: 0px 2px; height: 10px }
	#indexaddress { font-size: 9pt }
	#indexaddress div { float:left; padding: 5px; margin: 5px 0px 5px 10px }
	#indexspacer1 { width: 50px; height: 300px; overflow: hidden; float: right; clear: right }
	#indexspacer2 { width: 50px; height: 50px; overflow: hidden; background: #ac302a; float: right; clear: right}
	#indexcontainer { overflow: hidden; position: relative; width: 960px; height: 515px }
/* end index page */
	


/* Individual page stuff below */

/* automation */
	#automation .rightbox img { margin: 0px 0px 0px 100px }
	#automation .leftbox img { margin: 0px 0px 0px 120px }
        #automation #bottom { clear: both }
	
/* bakery */
#bakery .clearfix { height: 180px; padding: 15px 0px 0px 0px; padding: 0px; color: #444444; font-size: 10pt }
#bakery .clearfix img { width: 150px; margin: 0px 1px }

/* contact */
	#contact-area { width: 100% }
	#contact-area input, #contact-area textarea { padding: 5px; width: 341px; margin: 0px 0px 10px 0px; border: 2px solid #ccc }
	#contact-area textarea { height: 120px; }
	#contact-area textarea:focus, #contact-area input:focus { border: 2px solid #900; }
	#contact-area input.submit-button { width: 100px; float: right; margin: 0px 23px 0px 0px }
	label { float: left; text-align: center; margin-right: 15px; width: 100px; padding-top: 5px }
	div.contactaddressbox { clear: both; overflow: hidden }
	div.contactaddressbox img { float: left; margin: 25px .5% 0px .5%; width: 24% }
	div.contactaddressbox div { float: right; width: 75% }
	div.contactaddressbox p { margin 0px; padding 5px }
	#contactdirlink { float: right; font-size: 12pt; margin: 2px 75px 0px 0px }

/* chocolates */
#chocolates .leftbox { width: 470px }
#chocolates .rightbox { width: 470px }
#chocolates .leftbox img { float: left; margin: 0px 5px; }
#chocolates .rightbox img.horiz { width: 250px; height: 167px }
#chocolates .rightbox img.vert { width: 167px; height: 250px }
#chocolates .rightbox img.chocright { float: right; clear: right }
#chocolates .rightbox img.chocleft { float: left; clear: left }

#chocolates .leftbox  p { float: left }
#chocolates .leftbox  img { float: left; padding: 10px 22px }
#chocolates .leftbox  p strong { float: left; font-size: 14px }

#chocolates .clearfix p { color: #444444; font-size: 10pt }
#chocolates .rightbox .clearfix { height: 420px; padding: 20px 15px 5px 14px }
#chocolates .leftbox .clearfix { height: 420px; padding: 20px 5px 5px 5px }

		
/* development */
	#development #contenttextbox2 { float: left; width: 720px; height: 435px }
	#development #contenttextbox2 img { float: left; width: 70px; height: 60px; margin: 0px 5px }
	#development #contenttextbox2 div.pdbox { height: 60px; padding: 10px 0px 0px 0px }
	
	/* clear: both; float: left; overflow: hidden; position: relative } */
	
	#development div.pdtext { height: 60px; font-size: 9pt; position: relative }
	#development b.stepno { float: left; font-size:28pt; font-weight: bold; padding: 6px 15px; width: 180px }
	#development #packaginglink { padding: 20px }

/* direction */
#directions div.outlinebox ul { list-style: circle }
#directions div.outlinebox div { height: 170px }

/* environment */
	#environment { background-image: url('images/environmentbg.jpg'); background-position: bottom; background-repeat: no-repeat; width: 100%; height: 480px; margin: 0px auto }
	#environment img { display: inline; margin: 5px }
	#environment div.outlinebox { width: 500px; background: white; border-color: green; font-size: 9pt }
	#environment p b { font-size: 11pt }
	.downloadcert { float: right }
	#packaginglink { width: 100%; text-align: center; font-size: 12pt; font-weight: bold }
	
/* end environment */

/* directions */
	#directions .outlinebox { width: 47%; float: left; clear: none }
/* end directions */

/* facilities */
	#facilities div.bodyimages { height: 180px; width: 700px; float: left }
	#facilities img.bodyimage { width: 200px; height: 130px; padding: 10px 10px 0px 10px }
/* end facilities */

/* foodservice */
#foodservice { width: 960px; height: 400px; background: url(images/delibg.png) no-repeat center; }
#foodservice .rightbox img { float: right; margin: 0px 5px 0px 30px }
#foodservice .leftbox img { float: left; margin: 0px 30px 0px 5px }
#foodservice .clearfix p { color: #444444; font-size: 10pt }
#foodservice .rightbox .clearfix { height: 340px }
#foodservice .leftbox .clearfix { height: 340px }
#foodservice #bottom { text-align: center }

/* fruitvegetables */
#fruitvegetables .leftbox img { width: 250px; float: right; margin: 0px 5px }
#fruitvegetables .rightbox img { width: 250px; float: left; margin: 0px 5px }
#fruitvegetables .clearfix p { color: #444444; font-size: 10pt }
#fruitvegetables .rightbox .clearfix { height: 370px; padding: 15px 0px 0px 0px }
#fruitvegetables .leftbox .clearfix { height: 370px; padding: 15px 0px 0px 0px }


/* general */
#general .leftbox img { width: 250px; float: right; margin: 5px }
#general .rightbox img { width: 250px; float: left; margin: 5px }
#general .clearfix p { color: #444444; font-size: 10pt }
#general .rightbox .clearfix { height: 350px }
#general .leftbox .clearfix { height: 350x }
#general #bottom { text-align: center }
	
/* history */
#history { background-image: url('images/factory.jpg'); background-position: bottom; background-repeat: no-repeat; height: 500px }
#history p { clear: both }
#timelineshell { height: 150px; width: 100%; float:left }
div.timeline { width: 190px; float: left; margin: 1px }
div.timeline div.roundedtop { display: block; color: white; background: #c0362c; font-weight: bold; text-align: center; padding-bottom: 6px }
div.timeline div.timelinetop { font-weight: bold; text-align: center; }
div.timelinecontentshell { width: 100%; height: 120px }
div.timelinecontent { padding: 5px; height: 115px; font-size: 9pt }
div.timeline div.roundedbottom { display: block; background: #dddddd }
/* end history */
	
/* home */
	#home #contenttextbox2 { float: left; width: 480px; height: 435px }
	#home #contenttextbox2 div.pdbox { vertical-align: middle; width: 450px; padding: 5px; overflow: hidden; z-index: 1; position: relative }
	#home div.pdtext { font-size: 9pt; height: 85px }
	#home b.stepno { float: left; font-size:20pt; font-weight: bold; padding: 6px 15px; width: 150px; height: 73px; text-align: left; position: relative; z-index: 3 }
	#home b.bigletter { position: absolute; top: -15px; left: 0px; font-size: 100px; width: 100%; text-align: left; color: #bbbbbb; z-index: 2 }
	#home #flashcontainer { display: block; float: right; width: 480px; height: 435px; margin: 0px }
	#home #flashContent { position: relative }
	#home #flashContent img { width: 480px; height: 435px }
	#missionstatement { width: 100%; font-size:10pt; font-weight: bold; padding: 5px }
	#missionstatement div { font-size: 22pt; float: left; padding: 0px 10px 5px 0px }
	
/* end home */

/* location */
	#location #left-area p b { font-size: 12pt }
	#location #left-area { height: 359px }
	/* #location #left-area div { background: #dddddd; width: 100%; height: 100px; padding: 5px } */
	#location #right-area img { margin: 5px 0px 0px 20px; height: 351px }
	/*#location #right-area div { background: #dddddd; width: 100%; height: 100px; padding: 5px; text-align: center }*/
	#location div.leftbox { width: 440px }
	#location div.rightbox { width: 440px  }
	#location div.bottombox { float: left; width: 960px }
	#location div.bottombox .clearfix { height: 120px }
/* end location */

/* logistics */
#logistics .rightbox .clearfix { height: 338px; padding: 20px 2px 5px 2px }
#logistics .leftbox .clearfix { height: 338px; padding: 20px 5px 5px 5px }

/* end logistics */

/* materials */
	div.materialscontainer { border: 5px solid #cccccc; padding: 5px; margin: 5px; float: left; width: 930px; overflow: hidden }
	div.materialscontainerinvisible { border: 5px solid white; padding: 0px 5px; margin: 0px 5px; float: left; width: 930px }
	div.materialscontainer h1 { float:left; width: 918px; font-size: 14pt; padding: 2px 5px; background: #c0362c; color: white; border: 1px solid black; margin: 2px auto }
	div.materialsbox { border: 5px solid #cccccc; padding: 5px; margin: 5px; float: left; width: 435px; height: 250px; background: #eeeeee; position: relative }
	div.materialsbox h1 { float:left; width: 423px; font-size: 12pt; padding: 2px 5px; background: #c0362c; color: white; border: 1px solid black; margin: 2px auto }
	div.materialsbox img { float: right; width: 180px; position: relative }
	div.materialsbox .ticks { margin: 0px; overflow: hidden }
	div.materialsbox .ticks div img { float: left; width: 30px; height: 30px; clear: left; background: green; position: relative }
	div.materialsbox .ticks div { float: left; font-size: 10pt; width: 100%; line-height: 30px; font-size: 9pt }
	div.materialsbox p { margin: 2px; height: 100px }
	div.blankmaterialsbox { padding: 10px; margin: 5px; float: left; width: 435px; height: 250px; background: #eeeeee; position: relative }
/* end materials */

/* materialsinfo */
	#materialsinfo table { border-collapse:collapse; margin: 0px 0px 20px 0px; }
	#materialsinfo table, #packaginginfo td { border: 1px solid black; margin: 0px 8px }
	#materialsinfo table caption { background: #999; font-weight: bold; color: white; border: 1px solid black; margin: 10px 0px 0px 0px }
	#materialsinfo thead { background: #c0362c; color: white; border: 1px solid black }
	#materialsinfo thead th { text-align: center }
	#materialsinfo tr td { text-align: center }
	#materialsinfo tr.rowhighlight { background: #dddddd }
	#materialsinfo th.micat { width: 130px }
	#materialsinfo th.micol { width: 80px }
	#materialsinfo td.micat { text-align: left; background: #999; font-weight: bold; color: white; border: 1px solid black; }
/* end packaginginfo */	

/* meatfishpoultry */
	#meatfishpoultry .meatbox { width: 280px; float: left }
	#meatfishpoultry .clearfix { padding: 20px 5px 5px 5px }
	#meatfishpoultry .meatbottombox { width: 700px; float: left }
	#meatfishpoultry #meatetc { width: 240px; float: right; padding: 10px }
	
/* general */
	#meatfoodservice .leftbox img { width: 250px; float: right; margin: 0px 5px }
	#meatfoodservice .rightbox img { width: 250px; float: left; margin: 0px 5px }
	#meatfoodservice .clearfix p { color: #444444; font-size: 10pt }
	#meatfoodservice .rightbox .clearfix { height: 340px }
	#meatfoodservice .leftbox .clearfix { height: 340px }
	#meatfoodservice #bottom { text-align: center }

/* packaginginfo */
	#packaginginfo table { border-collapse:collapse; margin: 0px 0px 20px 0px; }
	#packaginginfo table, #packaginginfo td { border: 1px solid black; margin: 0px 8px }
	#packaginginfo table caption { background: #999; font-weight: bold; color: white; border: 1px solid black; margin: 10px 0px 0px 0px }
	#packaginginfo thead { background: #c0362c; color: white; border: 1px solid black }
	#packaginginfo th.pitype { width: 50px }
	#packaginginfo th.pidimensions { width: 450px }
	#packaginginfo th.piweight { width: 80px }
	#packaginginfo th.pimaterial { width: 100px }
	#packaginginfo th.pirecyclable { width: 90px }
/* end packaginginfo */	
	
/* productbrowse */	
	#productcontainer { width: 940px; overflow: hidden } /*padding: 10px; background-color: #c0362c; overflow: hidden; float: left; margin: 5px 0px 0px 0px }*/
	
	
	.productbox { width: 293px ; height: 195px; float: left; text-align: center; position: relative; margin: 10px }
	.productbox img { width: 293px; height: 195px } 
	.producttextbox { position:absolute; bottom: -2px; left: 20px; width: 243px; z-index: 99; padding: 5px; color: black; text-align: center; font-size: 14pt; font-weight: bold  }
	/* note - these two divs are required to give transparent bg but non transparent text */
	.producttextbg { background-color: #cccccc; filter:alpha(opacity=60); opacity:0.6; width: 100%; height: 2em; overflow: hidden}
	.producttext { position: relative; bottom: -1.5em; z-index: 100 }
/* end productbrowse */

/* productpage */
	#productpageinfopanelcontainer { float: left; width: 600px; position: relative}
	#productpageinfopanel { width: 550px; clear: both; padding: 10px 10px 25px 10px }
	#productpageinfopanel h1 { padding: 1px 1px 11px 1px; font-size: 20pt; margin: 0px 0px 10px 0px } 	
	#productpageinfopanel div { width: 250px; float: left; border: 5px solid #cccccc; margin: 2px; padding: 5px 5px 0px 5px; font-size: 18pt; font-weight: bold; text-align: center; background: white; color: black }
	#productpageinfopanel a { font-size: 10pt; position: relative; bottom: 4px  }
	#productpageinfopanel h2 { width: 246px; background-color: #c0362c; color: white; padding: 2px; font-size: 16pt; font-weight: bold; float: left; margin: 0px }
	
	#productpageimagepanel { float: right; text-align: center; max-width: 350px }
	#productpageimagepanel img.productimage { width: 300px; margin: 15px 10px 0px 10px; border: 5px; border-color: #cccccc; border-style: solid }
	
	#productpage div.outlinebox { width: auto; float: left; clear: left; font-size: 14pt; font-weight: bold; margin: 20px 0px 20px 40px }
	#searchback { float: right; clear: both }
	#searchback a { text-decoration: none; color: #777; font-size: 10pt }
	
/* productsearch */
	#productsearch { background-image: url('images/searchbg.jpg'); background-position: bottom; background-repeat: no-repeat; width: 960px; height: 480px }
	#searchwrapper { width: 620px; height: 350px; position: relative; float: left; margin-left: 20px }
	#searchformarea { overflow: hidden; position: relative; padding: 10px 0px 0px 0px }
	#searchformarea div.searchgroup { float: left; clear: left; width: 100% }
	#searchformarea div.searchgroup div { float: left; overflow: hidden; padding: 3px 3px 0px 3px }
	#searchformarea input, #searchformarea select  { padding: 5px; width: 110px; margin: 0px 0px 10px 0px; border: 2px solid #ccc; float: left }
	#searchformarea select { width: 100px }
	#cavityshape { width: 120px; margin: 0px }
	#searchformarea input:focus { border: 2px solid #900 }
	#searchformarea input.submit-button { width: 100px; margin-right: 5px }
	#searchformarea label { float: left; text-align: center; margin-right: 5px; width: 150px; padding-top: 5px }	
	#productsearch #searchinstructionswrapper { width: 320px; float: left; position: relative }
	#productsearch #searchinstructions { padding: 5px; color: #333333 }
	#productsearch #searchinstructions ul { list-style: circle }
	#searchformarea select { width: 160px; padding-bottom: 3px }
	#searchformarea #desc label { width: 70px }
	#searchformarea #cavityshape { width: 125px }
	div.productsearchspacer { width: 223px; height: 40px; float: left; overflow: hidden }
	div.productsearchspacer2 { width: 299px; height: 40px; float: left; overflow: hidden }
	#productpage #searchback { float: left; margin: 5px 0px 0px 20px }
	#buttons { margin-left: 150px }
	div.clearleft { clear: left }
	
	
/* searchresults */
	#searchexplanation { font-weight: bold; font-size: 12pt; color: #c0362c; float: left }	
	#searchpageinfo { font-size: 10pt; color: black; float: right; font-weight: bold }
	#searchpageinfo A { text-decoration: none; color: #c0362c; font-size: 10pt }	
	#searchresults div.outlinebox { width: auto; float: right; text-align: center }
	
	#productlist { margin: 3px auto; clear: left; }
	#productlist th { padding:4px; color: white; background-color: #c0362c; font-size: 12pt;  }
	#productlist td img { width: 46px; padding: 0px; margin: 0px; float: left; }
	#productlist td { text-align: center; padding: 1px 4px }
	
	#search-area { width: 214px; margin: 0 auto; float: right }
	#search-area input { padding: 5px; width: 200px; border: 2px solid #ccc }
	#search-area input:focus { border: 2px solid #900; }
	#search-area input.submit-button { width: 70px; float: right; }
	#search-area label { float: left; text-align: left; width: 210px; background-color: #888888; color: white; padding: 2px }
	#search-area h2 { width: 210px; background-color: #c0362c; color: white; padding: 2px; margin: 0px }
	
	#mouldno { width: 100px }
	#description { width: 250px }
	#dimensions { width: 200px }
	
	.oddrow { background-color: #dddddd }
	.evenrow { background-color: #eeeeee }
	
/* shelfdisplay */
	#shelfdisplay { width: 960px; height: 600px; background: url(images/shelfdisplaybg.png) no-repeat center; }

	div.sppbox img { height: 85px; margin: 5px }
	div.sppbox { width: 440px; min-height: 100px; padding: 10px 5px 0px 5px; color: #444444 }
	div.sppbox div { padding: 5px }
	div.leftbox { width: 470px; padding: 5px; float: left }
	div.rightbox { width: 470px; padding: 5px; float: right }
	div.leftbox div.sppbox img { float: left }
	div.rightbox div.sppbox img { float: right }
	
/* quality */
	#quality { width: 960px; height: 400px; margin: 0px auto }
	#quality p { margin: 0px 0px 0px 0px }
	#quality img { margin: 5px }
	#quality #contenttextbox { width: 687px } 
	#quality div.outlinebox { height: 140px }
/* end */

#tooltip {
	position:absolute;
	border:1px solid #333;
	background:#f7f5d1;
	padding:2px 5px;
	color:#333;
	display:none;
}