/*============================================================================
[Screen Stylesheet]
==============================================================================
Project: Healthy Stuff - Banner
Version: 1.0
Last Modified: 07/28/2009 
Assigned to:   Meili Chen - 07/28/2009
Primary use:    Banner
==============================================================================*/

/* Global reset*/
	/*please change the body background color as necessary */
	body {font: 62.5%/1.4 Arial,Verdana,Helvetica,sans-serif;  background: #fff; color: #fff; margin: 0; padding: 0; background-repeat: repeat-x;}
	img {border: 0;}
	a {color: #009bc9; text-decoration: none; font-weight: bold;}
	a:hover {text-decoration: underline;}
	
/*  Layout Wrapper      /div#wrapper */                                                                                                                           

	#wrapper {color: #000; font-size: 1.2em; margin: 15px auto ; width: 973px; padding: 5px; background: transparent; overflow: hidden;}
	html>body #wrapper {width: 973px;}/*hide from ie6*/
	#wrapper p {margin-bottom: 1em!important;}

/* Banner section / div#banners */
	
	#banners {width: 100%; overflow: hidden;}
	#banners img {}
	.bannerTop {height: 21px; background: #fff;}
	.bannerBottom {height: 21px; background: #fff;}
	.bannerBody {padding: 0 21px 0px 21px; background: #fff;overflow: hidden;}
	#animatedBody {float: float; width: 931px; height: 351px; background: url(../images/banners/animated_bg.jpg) no-repeat 0 0; overflow:hidden;}
	
	/*hide from IE 6 */
	html>body .bannerTop {background: url(../images/banners/banner_top_bg.png) no-repeat 0 0;}
	html>body .bannerBottom {background: url(../images/banners/banner_bottom_bg.png) no-repeat 0 0;}
	html>body .bannerBody {background: url(../images/banners/banner_body_bg.png) repeat-y 0 0; }
	html>body #animatedBody {background: #fff url(../images/banners/animated_bg.jpg) no-repeat 0 0;}
	
	/* actual animation area */
	#slideshow {background: url(../images/banners/animated_bg.jpg) no-repeat 0 0;width: 930px; height: 287px; }
	#slideshow .single { list-style: none; width:900px; margin: 0 auto; height: 287px; }
	#slideshow ul {margin: 0; padding: 0;}
	#slideshow li {float:left; margin: 0; padding: 0;display: inline; }
	#slideshow .single img { width: 351px; display: block; float: left; margin: 0px auto; text-align: center;	}
	#slideshow .single .description img {float: none; width: auto; margin: 0;}
	#slideshow .description {float: left; margin: 4px 10px 5px 55px; width: 450px;}
	#slideshow .description .animatedTitle {padding: 0 0 5px 10px; border-bottom: 1px dotted #fff;}	
	#slideshow .description .text {color: #fff; margin: 10px 10px 10px 15px;}
	#slideshow .description .link {margin: 30px 10px 5px 15px;}
	
	/*bottom category  list*/
	.category {margin: 6px 0px; width:930px; padding-top: 5px; display: block;  background: url(../images/banners/category_bar_bg.gif) no-repeat 0 0; overflow: hidden;}
	html>body .category{margin: 6px 10px;}
	#categoryList { padding: 0 180px; margin: 0px; list-style: none; overflow: hidden;}
	#categoryList li {font-size: 1.1em; display: inline; padding: 0px; margin: 0;}
	.category  ul#categoryList li a{color: #fff; background: url(../images/banners/category_arrow_off.gif) no-repeat 50% 0; display: block; float: left; display: block;  padding: 21px 10px 5px 10px;font-weight: bold; color: #fff; text-align: center;}
	.category  ul#categoryList li a.activeSlide, .category  ul#categoryList li a:hover{text-decoration: none; color: #ffff66!important; background: url(../images/banners/category_arrow_on.gif) no-repeat 50% 0; display: block; vertical-align: middle; font-weight: bold; color: #fff; text-align: center;}