body {background: #fff; margin: 0; padding: 0; font-family: verdana}
h1, h2 {padding:0;margin:0}
a:link, a:visited {color: #CCFF66;}
a:hover {color: #fff ;}
#wrapperx a:link, #wrapperx a:visited {color: #000;}
#wrapperx a:hover {color: #007843 ;}
.hidden {display:none}
.show {display: block}
#blind {display:none;}

.left-align {float: left; text-align: left;  margin-left: 10px}
.right-align {float: right; text-align: right; margin-right: 10px}

#container {width: 90%; background: #fff; margin: 0 auto}
#top-menu {height: 20px; background: #339933}
#top-menu span {font: normal 10px verdana; color: #ccc; line-height: 18px}
#top-menu a:link, #top-menu  a:visited {color: #CCFF66;}
#top-menu a:hover {color: #fff ;}
#header {height: 220px; background: url(images/green-bg.png) repeat top left;}
#logo-wrapper {float:left; margin-top: 0px; width: 460px; height: 100%}
#logo {float: left;margin-top: 0px;margin-left: 10px;  
	background: url(images/afruka-lion.png) no-repeat center left; width:166px; height:220px;
		_background-image:none;
		_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='image', src='./css/images/afruka-lion.png');
		}					
#brandname {float:left; margin-top: 60px;margin-left: 10px;
	background: url(images/afruka-brand.png) no-repeat top left; width:271px; height:88px;
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='image', src='./css/images/afruka-brand.png');
	}
	
#logo-links { float: left; margin-top: -10px;margin-left: 25px; width: 250px; height: 20px; font: normal .8em/1.3em verdana;color: #eee}

#header-pic {float: right; margin-right: 63px; margin-top: 10px;
	background: #cce006  url(images/header/rotator.php) /*url(images/header/wheat.jpg)*/  no-repeat center center; width: 269px; height: 195px}

#wrapper {border-left: 1px solid #007843;}
	
#column-wrapper {margin-top: 0px; margin-bottom: 0px}
#column-wrapper {border-left: 0px solid #007843;
	background: #fff url(images/349px-white.gif) repeat-y right;}

#left-container {
	width: 100%;
	background: #fff url(images/349px-white.gif) repeat-y right;
	float: left;
	margin-right: -350px;}

#left-content {font: normal 12px/15px verdana;
	background: #fff;
	margin-right: 349px; padding: 15px; padding-right: 35px;}
	
#left-content h1 {font: bold 15px verdana; color: #007843; line-height: 25px; padding-left: 10px;}
#left-content p {padding-left: 35px;}
#news-block {line-height: 18px}


#link-block ul { list-style: none; padding-left: 25px}
#link-block a:link, #link-block a:visited {color: #000;}
#link-block a:hover {color: #007843 ;}
#link-block li {padding-left: 15px;	line-height: 18px;background: url(images/arrow.gif) no-repeat 0 .4em;}
#link-left {float: left; width: 200px; }
#link-right {float: left; width: 200px; }

#main-content-block h1 {font: bold 2em verdana;}
.maincontentblock {margin: 15px 0 20px 0}
.contentblock {margin: 15px 0 5px 0; padding-left: 15px;}
.contentblock a:link, #link-block a:visited {color: #000;}
.contentblock a:hover {color: #007843 ;}

#right-col {background: transparent;
	width: 349px;
	float: right;}

#search-block {float: left;background: white url(images/search-block-bg-notrans.png) no-repeat top left; width:349px; height:67px;}
	
#search-block h2, #footer-right h2 {font: bold 12px tahoma;color: #CCFF66; padding-top: 5px}
#search-field {margin-top:0px; }
.search-form {margin-left: 15px; }
.search-form a {font: bold 10px verdana;}
.search-form a:link, .search-form a:visited {color: #CCFF66;}
.search-form a:hover {color: #fff ;}
.search-form input {width: 265px}
#search-links {font: normal 10px verdana; color: #ccc; margin-left: 0px;}
#search-links a:link, #search-links a:visited {color: #CCFF66;}
#search-links a:hover {color: #fff;}

#product-header {float: left; font: normal 12px tahoma; padding-top: 10px; padding-left: 10px}
#product-header a {color: #000}
#product-wrapper {width: 320px; float: right; margin-right: 10px}
.product-block {background: url(images/prod-block-bg.gif) no-repeat top left; width:320px; height:144px; margin-top: 15px;}
#product-block2,#product-block4 { }
.prod-pic-container {float: left; margin-top: 6px; margin-left: 7px; background: transparent url(images/prod-pic-bg.png) no-repeat top left; width:128px; height:128px;}
.prod-pic {background-color: transparent ; background-repeat: no-repeat;background-position: 50% 50%; width: 128px ;height:128px;}
#prod-code-text {float:left; font: normal 10px verdana; color: #000; padding:2px; width: 20px; }
.prod-pic-container a {text-decoration: none;}
.prod-title {float: left; margin-top: 7px; margin-left: 5px;  padding: 0px; padding-left: 5px;background: url(images/prod-title-bg.png) no-repeat top left; width:170px; height:28px; overflow: hidden;}
.prod-title h2 {font: bold 11px tahoma; line-height: 25px; color: #007843; text-transform: uppercase}
.prod-title a {color: #007843; text-decoration: none}
.prod-blurb {float: left; margin-top: 3px; margin-left: 6px;  padding: 2px; width: 150px; height: 80px; overflow: hidden; border: 0px solid #cee006}
.prod-blurb span {font: normal 10px/12px verdana; color: #cee006}
.prod-more {float: right; margin-top: 5px; margin-right: 10px;  padding: 0px;  border: 0px solid #cee006}
.prod-more span {font: normal 10px/12px verdana; color: #CCFF66}


#footer { padding-top: 10px; font: normal 9px/14px verdana;border-left: 0px solid #007843; }
#footer-left {float: left;padding-top: 10px; width: 100%;margin-right: -350px;   }
#footer-left {margin-left: 0px;color:#333; text-align: center;width: 50%;  }
#footer-left a:link, #footer-left a:visited {color:#333}
#footer-left a:hover {color:#000}
#footer-right {float: right; background:  url(images/footer-block-bg-notrans.png) no-repeat top left; width:349px; height:67px;}

#footer-bottom {height: 15px; background: url(images/green-bg.png) repeat top left; width: 100%; }
.clearing {height: 0; clear: both;}

/*
	| liquidcorners.css; feel free to adapt the style!
	| ================================================
	| use: 4 corners with borderline outside a contentbox with class="inside"; 
	|      image  = upper half: top left corner, long borderline, top right corner
	|               under half: bottom left corner, long borderline, bottom right corner
	|      CHANGE = you have to change this for fitting to your image
	|      YCC    = You Can Change (or omit), if wanted
	|      DNC    = Do Not Change
	| credits: original by francky kleyneman, see article/tutorial in Francky's Developers Corner:
	|          http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
	| adapted
	| by.....: ... (your name and site?!)
	|
	| + please let this text & links intact for a next user +
*/
.top-left, .top-right, .bottom-left, .bottom-right { 
	background-image: url('images/rounded-corner.gif'); /* CHANGE: path and name of your image */
	height: 25px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
	font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
	}
.top-left, .bottom-left { 
	margin-right: 25px; /* CHANGE: replace by the width of one of your corners */
	}
.top-right, .bottom-right { 
	margin-left: 25px;  /* CHANGE: replace by the width of one of your corners */
	margin-top: -25px;  /* CHANGE: replace by the height of one of your corners */
	}
.top-right {
	background-position: 100% 0;    /* DNC: position right corner at right side, no vertical changes */
	}
.bottom-left  { 	margin-top: -13px;
	background-position: 0 -25px;    /* CHANGE: replace second number by negative height of one of your corners */
	}
.bottom-right { 
	background-position: 100% -25px; /* CHANGE: replace second number by negative height of one of your corners */
	}
.inside {margin-top: -13px;
	border-left: 0px solid #C00000; /* YCC: color & properties of the left-borderline */
	border-right: 0px solid #C00000;/* YCC: color & properties of the right-borderline */
	background: #f0f6f3;            /* YCC: background-color of the inside */
	color: #000000;                 /* YCC: default text-color of the inside */
	padding-left: 10px;             /* YCC: all texts at some distance of the left border */
	padding-right:10px;             /* YCC: all texts at some distance of the right border */
	}
.notopgap    { margin-top: 0; }    /* DNC: to avoid splitting of the box */
.nobottomgap { margin-bottom: -1px; padding-bottom: 1px; } /* DNC: to avoid splitting of the box */

.usingie {display: none;}


/********** sub page */
		

#header-sub {height: 120px; background: url(images/green-bg.png) repeat top left;}
#logo-wrapper-sub {float:left; margin-top: 0px; width: 100%; height: 100%}
#logosub {float: left;margin-top: 0px;margin-left: 10px;  
	background:  url(images/afruka-logo-small.png) no-repeat center left; width:264px; height:100%;
		_background-image:none;
		_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='image',src='./css/images/afruka-logo-small.png');}					

#logo-linkssub { float: right; margin-top: 30px;padding-left: 20px; width: 329px; height: 100px; font: normal .8em/1.3em verdana;color: #eee;}	


#leftbox {float:left;width: 60px;height: 30px; text-align: right;}
#rightbox {float:left;width: 200px;height: 30px; text-align: left; padding-left: 5px;}
#minilinkbox {padding-top: 10px;}

#pagetitle-block h1 {font: bold 2em verdana;}
.pagetitleblock {margin: 0px 0 15px 0;  border-bottom: 0px solid #ccc}
#left-content-sub {font: normal 12px/15px verdana;	background: #fff;	margin-right: 349px; padding: 10px; }

#full-page {margin: 0 auto; width: 100%;padding: 0px;}

#mtpage-wrapper {width: 60%;font: normal 12px/14px verdana; padding-left: 0px; margin: 15px 0 5px 0; padding-left: 15px;border-left: 1px solid #007843;}

/********** products.asp */

#product-gallery-wrapper {margin: 0 auto; border-left: 1px solid #007843; margin-left: 20px; }
.gallery-block {float: left; margin: 5px 2px 5px 2px; background: url(images/prod-block-bg.gif) no-repeat top left; width:320px; height:144px; }



/************ productpage.asp   *******/

#prodlist {float: right;}

#product-item-wrapper {font: normal .7em verdana;}
#product-item-wrapper a {color: #000}
#product-item-wrapper h2 {padding: 5px; border: 1px solid #007843;font: bold 1.2em verdana; color: #007843; margin-bottom: 5px; }
#prod-name {float: left;}
#prod-code {}


#left-prodcontainer {
	width: 70%;
	background: #fff ;
	float: left;
	}

#left-prodcontent {font: normal 12px/15px verdana;
	background: #fff;
	margin-left: 10px; padding-left: 10px; padding-right: 0px;}
	
#left-prodcontent h2 {margin-left: 0px;}	
#left-prodcontent span {text-indent: 20px}

#right-prodcol {background: transparent;
	width: 182px;padding-left: 20px; 
	float: left;}

	#prod-image {float: left; width: 180px;  padding: 1px;}
	#prod-image img {width: 160px; border: 1px outset #007843;padding: 5px;}
	#pdf img {width: 40px; padding: 3px 0px 0 0;vertical-align: middle}
	#otherversions {margin: 3px 0px 0 40px}
	#prod-description {float: left; width: 100%; margin: 0px 0px 5px 0px;}
	#prod-ingredients {float: left; width: 100%; margin: 0px 0px 5px 0;}

	#prod-benefits {float: left; width: 45%; margin: 5px 0px 5px 0px;}
	#prod-directions {float: right; text-align: left; width: 45%;margin: 5px 0px 5px 10px;}
	#prod-warnings {float: left; width: 45%;margin: 5px 0px 5px 0px;}
	#prod-warnings h2 {color: red}
	#prod-details {float: right; width: 45%;margin: 5px 0px 5px 10px;}
	
	
/******* ingredients.asp *****/


#NewIngredientText  {text-align: left; font: normal 8px verdana; color: #000; text-decoration:none; height: 13px; }
#NewIngredientText a:link,#NewIngredientText a:visited {text-align: left; font: normal 11px verdana; color: blue; text-decoration:none; line-height: 13px}
#NewIngredientText a:hover {background: white; text-align: left; font: normal 11px verdana; color:black; text-decoration:none}

#NewIngredient   {margin-left: 20px;border-bottom: 1px solid #666633; width: 100%; ;padding-bottom: 100px}

#ingredient_body h3 {margin-top: 20px;background:#007843; color: white; padding: 5px } 

.alphaindex {display: inline; width: 15px;font: bold 15px verdana; color: #007843; margin-right: 5px}


/***** news.asp ****/
#news-wrapper {border-left: 0px solid #007843; }
#news-listing {width: 60%;font: normal 12px/14px verdana; padding-left: 0px; margin: 15px 0 5px 0; padding-left: 15px;}

#news-listing h1 {font: bold 15px verdana; color: #007843; line-height: 25px; padding-left: 0px;}
#news-listing .inside {padding: 0px 15px 0px 15px;}

a#morelink, a#hidelink   {color: #000; font-size:10px;}

/****** stockists.asp ****/
#Stockists   {margin-left: 20px;border-bottom: 1px solid #666633; width: 100%; ;padding-bottom: 10px}
#stockists_body {}
.stockist-content {margin-left: 20px;}