@charset "utf-8";

body, html, * { padding: 0; margin: 0;}
body, html{width: 100%; height: 100%; min-height: 100%;}
body { background: url(../gfx/body_bg.jpg) no-repeat; background-position: center bottom; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; }

/* site architecture */
#wrapper 			{ width: 990px; height: 750px; margin: 0 auto 0 auto; position: relative; text-align: left; font-size: 12px;}

#logo { position: absolute; top: 25px; left: 0; height: 100px; width: 128px; z-index: 50;}
#logo img {behavior: url('js/iepngfix.htc')}
#navigation 		{ position: absolute; top: 0; left: 0; height: 100px; width: 990px; }
#content { position: absolute; left: 0; top: 100px; width: 990px; height: 395px; color: #333333;}
#blackboard_left { position: absolute; left: 0px; top: 493px; height: 257px; width: 495px; background: url('../gfx/blackboard_left_bg.png'); behavior: url('js/iepngfix.htc')}
#blackboard_right { position: absolute;	left: 495px; top: 493px;	height: 257px; width: 495px;  }

#content div.content_left		{ position: absolute; left:  38px; top: 33px; width: 180px;}
#content div.content_right	{ position: absolute; left: 235px; top: 33px; width: 720px; }
#content div.content_center	{ position: absolute; left:  38px; top: 33px; width: 910px; }

#content div.content_about_us	{ position: absolute; left:  38px; top: 33px; width: 400px; }

div.background {behavior: url('js/iepngfix.htc'); width: 100%; height: 100%;}
#content div.background { background:url('../gfx/content_bg.png') no-repeat;  position: absolute; left: 0; top: 0px;}
#content div.about_us { background:url('../gfx/content_about_us_bg.png') no-repeat;  position: absolute; left: 0; top: 0px;}


#navigation div.background { background:url(../gfx/navigation_bg.png) no-repeat; }
#blackboard_right div.background { background:url(../gfx/blackboard_right_bg.png) no-repeat; }


a img {border: 0}

ul#main_navigation {position: absolute; left: 119px; top: 57px; list-style: none; width: 400px; height: 43px; }
ul#main_navigation li{float: left; height: 42px; }
ul#main_navigation li img{border: 0; width: 42px; height: 43px; width: 100%;}

ul.index 				{ background: url(../gfx/navigation_start_bg.jpg) no-repeat; }
ul.about_us			{ background: url(../gfx/navigation_about_us_bg.jpg) no-repeat; }
ul.contact			{ background: url(../gfx/navigation_contact_bg.jpg) no-repeat; }
ul.products			{ background: url(../gfx/navigation_products_bg.jpg) no-repeat; }
ul.products_detail	{ background: url(../gfx/navigation_products_bg.jpg) no-repeat; }

ul#main_navigation li.index 	{width: 100px;}
ul#main_navigation li.products	{width: 95px;}
ul#main_navigation li.about_us	{width: 95px;}
ul#main_navigation li.contact	{width: 100px;}

ul#impress { position: absolute; top: 70px; right: 17px; list-style: none;}
ul#impress a {color: #333333; text-decoration: underline; font-weight: bold;}

noscript {color: red; display: block; margin: 0 0 12px 0; font-weight: bold;}


#content h2 { font-family: Georgia, "Times New Roman", Times, serif; color: #F00; margin: 0 0 12px 0; font-size: 18px;}
#content h3 { font-weight: bold; font-size: 12px;}
#content strong {}
#content a	{color: #F00; text-decoration: underline; }
#content p.text {line-height: 18px; margin: 0 0 12px 0; clear: both;}

.contact_icon {margin: 0 6px -1px 0; }

img.left 	{float: left;}
img.right	{float: right; margin: 0 0 0 12px;}


#blackboard_left p.text 						{ position: absolute; left: 60px; top: 87px; width: 380px; color: #FFF; line-height: 18px;}

#blackboard_right p.text 						{ position: absolute; left: 50px; top: 87px; width: 250px; color: #FFF; line-height: 18px;}
#blackboard_right p.image_link 			{ position: absolute; left: 50px; top: 180px; }
#blackboard_right p.image_link img	{ border: 0; width: 132px; height: 25px; }

#blackboard_right p.teaser_link			{ position: absolute; left: 310px; top: 60px;}
#blackboard_right p.teaser_link img	{ border: 0; width: 130px; height: 130px;  }


#content ul#product_list	{ position: absolute; top: 29px; left: 35px; list-style: none; width: 179px; z-index: 50; }
#content ul#product_list li	{ float: left; margin: 0 0 4px 0; width: 171px !important; max-width: 179px; height: 21px !important; max-height: 26px; padding: 5px 0 0 8px; background: url(../gfx/product_li_bg.png) no-repeat; }
#content ul#product_list a	{ font-weight: bold; color: #333; text-decoration: none; cursor:default; display: block; width: 165px; height: 16px; padding: 4px; margin: -4px;}

#content ul#product_list li.active {background: url(../gfx/product_li_active_bg.png) no-repeat;}
#content ul#product_list li.active a{color: #FFF;}


div#product_submenu { position: absolute; top: 27px; left: 220px; z-index: 100; color: #FFFFFF; visibility: visible; 0; line-height: 18px;  }
div#product_submenu ul {list-style: none; background: #d70000; color: #FFFFFF; width: 300px;}
div#product_submenu li {padding: 0 0 0 6px; font-size: 12px;}
div#product_submenu a{color: #FFFFFF;} 

div#product_submenu img.top { position: absolute; top: -5px; left: 0;}
div#product_submenu img.bottom{position: absolute; bottom: -5px; left: 0;}

div#flash_teaser { position: absolute; top: 5px; left: 2px;}

div#nutrition_list { position: absolute; top: 160px; left: 0px; width: 360px; }
div#nutrition_list dl {margin: 0 0 12px 0;}
div#nutrition_list dt, div#nutrition_list dd {float: left; width: 180px; line-height: 18px;}
div#nutrition_list p.text {margin: 12px 0 0 0; float: left; width: 360px; font-size: 12px;}

div#storability { position: absolute; top: 160px; left: 361px; width: 360px; }

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


form#contact{}
form #info, form #success { padding: 3px 0; }
form #error { padding: 2px 5px; font-weight: bold; color: red; background: #FFE6E6; border: 1px solid red; }
form#contact fieldset{ margin: 0 0 12px 0; border: 0; width: 650px; }

form#contact option {float: left; width: 110px}
form#contact label {float: left; width: 150px; padding: 3px 0 6px 0; margin: 0 0 0 0; height: 17px !important; max-height: 26px;  }
form#contact input {float: left; width: 128px !important; max-width: 130px; margin: 0 20px 6px 0; border: 1px solid #CCC; height: 18px !important; max-height: 20px;}
form#contact input.error, form#contact textarea.error { border: 1px solid red; }
form#contact textarea {float: left; width: 424px !important; max-width: 426px; height: 50px; border: 1px solid #CCC;}