@charset "utf-8";
/* CSS Document */

/* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
.clearfloat {
	clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}

body {
	background: url(../images/mainBackground.png) repeat-x;
	margin: 0px;
	padding: 0px;
	}
	
	.mainWrapper {
		width: 100%;
		}
	
		.headerWrapper {
			background: url(../images/headerBackground.png) no-repeat;
			margin: 0px auto 0px auto;
			width: 1237px;
			height: 129px;
			}
			
			.headerFrame {
				float: left;
				margin: 0px 0px 0px 225px;
				width: 131px;
				height: 119px;
				}
							
		.mainBannerWrapper {
			/* background: url(../images/contentBackground.png) no-repeat; */
			position: relative;
			margin: 0px auto 0px auto;
			width: 1237px;
			height: 438px;
			}
			
			.mainBanner {
				float: left;
				/* background: url(../images/homepageBanner_rotation1.png) no-repeat; */
				width: 920px;
				height: 436px;
				margin: 0px 0px 0px 158px;
				}
				
				.bannerContentWrapper 
				{
				    position: absolute;
					z-index: 1000;
					width: 843px;
					height: 318px;
					margin: 95px 0px 0px 33px;
					}
					
					.bannerheadline 
					{
					    position: absolute;
					    width: 630px;
						height: 230px;
						margin: 181px 0px 0px 33px;
						z-index: 11000;
						}
						
						h1 {
							font: bold 50px Arial, Helvetica, sans-serif;
							color: #FFF;
							margin: 0px;
							}
							
						h2 {
							font: 20px Arial, Helvetica, sans-serif;
							color: #FFF;
							margin: 0px 0px 20px 0px;
							}
							
						#bannerRotationFrame 
						{
						    position: absolute;
						    width: 75px;
							height: 20px;
							margin: 290px 0px 0px 30px;
							z-index: 15000;
							left: 200px;
							top: 100px;
							}
							
							#bannerRotationFrame div {
								float: left;
								margin: 0px 10px 0px 0px;
								}
					
					.navigation {
						position: absolute;
                        z-index: 15000; 
                        top: 90px; 
                        left: 825px;
                        background: #FFF;
						width: 210px;
						height: 256px;
						opacity: 0.5;
						filter: alpha(opacity=50); /* ie 6-7 */
						-moz-opacity:0.5; /* older Mozilla */
					}
												
		.additionalLinksOuterWrapper {
			background: url(../images/footerBackground.png) no-repeat;
			margin: 0px auto 0px auto;
			width: 1237px;
			height: 275px;
			}
		
		.additionalLinksWrapper {
			float: left;
			margin: 10px auto 0px 158px;
			width: 920px;
			height: 100%;
			}
			
			.headlineFrame {
				background: url(../images/headerBackground.jpg) repeat-x;
				height: 67px;
				}
				
				.headlineFrame .headline {
					float: left;
					width: 175px;
					margin: 35px 0px 0px 30px;
					font: bold 18px Arial, Helvetica, sans-serif;
					color: #FFF;
					}
					
				.headlineFrame .image {
					float: left;
					width: 83px;
					text-align: center;
					}
			
			.contentFrame {
				height: 195px;
				}
				
				.contentFrame .left {
					float: left;
					width: 301px;
					height: 195px;
					background: url(../images/grayGradient.jpg) repeat-x;
					}
					
						.contentFrame .left .content {
							margin: 8px 0px 0px 30px;
							color:#333;
							font: 14px Arial, Helvetica, sans-serif;
							line-height: 24pt;
							}
							
						.contentFrame .left .content a {
							color:#333;
							text-decoration: none;
							}
						
						.contentFrame .left .content a:hover {
							text-decoration: underline;
							}
				
				.contentFrame .center {
					float: left;
					width: 301px;
					height:195px;
					margin: 0px 0px 0px 9px;
					background: url(../images/greenGradient.jpg) repeat-x;
					}
					
					.contentFrame .center .logo1 {
						float: left;
						width: 91px;
						height: 76px;
						margin: 40px 0px 0px 35px;
						}
					
					.contentFrame .center .logo2 {
						float: left;
						width: 109px;
						height: 77px;
						margin: 40px 0px 0px 32px;
						}
				
				.contentFrame .right {
					float: left;
					width: 301px;
					height:195px;
					margin: 0px 0px 0px 8px;
					background: url(../images/brownGradient.jpg) repeat-x;
					}
					
					.contentFrame .right .content {
						margin: 12px 0px 0px 33px;
						color:#333;
						font: 14px Arial, Helvetica, sans-serif;
						line-height: 16pt;
						}
					
					.contentFrame .right .content a {
						color:#333;
						text-decoration: none;
						}
					
					.contentFrame .right .content a:hover {
						text-decoration: underline;
						}
					
			.contentFrame .footerLeft {
				margin: 11px 0px 0px 0px;
				}
				
			.contentFrame .footerCenter {
				margin: 179px 0px 0px 0px;
				}
				
			.contentFrame .footerRight {
				margin: 18px 0px 0px 0px;
				}
				
		.footerOuterWrapper {
			margin: 0px auto 0px auto;
			width: 1237px;
			height: 275px;
			}
		.footerWrapper {
			width: 922px;
			height: 100px;
			margin: 12px auto 50px auto;
			}
			
			.footerWrapper .content {
				color: #5A8110;
				font: 10px Arial, Helvetica, sans-serif;
				line-height: 12pt;
				margin: 10px 0px 0px 15px;
				}
				
				.footerWrapper .content a{
					color: #5A8110;
					text-decoration: none;
					}
					
				.footerWrapper .content a:hover{
					text-decoration: underline;
					}
			
			.footerWrapper .box1 {
				float: left;
				border: 1px solid #CCC;
				background: #F7F7F7;
				width: 193px;
				height: 100px;
				}
				
				.footerWrapper .box1 .logo {
					float: left;
					color: #666666;
					width: 50px;
					margin: 30px 0px 0px 20px;
					}
					
				.footerWrapper .box1 .copyright {
					float: left;
					color: #666666;
					margin: 35px 0px 0px 2px;
					font: 10px Arial, Helvetica, sans-serif;
					}
					
			.footerWrapper .box1a {
				float: left;
				border: 1px solid #CCC;
				border-style: solid solid solid none;
				background: #F7F7F7;
				width: 75px;
				height: 100px;
				}
				
			.footerWrapper .box2 {
				float: left;
				border: 1px solid #CCC;
				border-style: solid solid solid none;
				background: #F7F7F7;
				width: 143px;
				height: 100px;
				}	
			
			.footerWrapper .box3 {
				float: left;
				border: 1px solid #CCC;
				border-style: solid solid solid none;
				background: #F7F7F7;
				width: 130px;
				height: 100px;
				}
				
			.footerWrapper .box4 {
				float: left;
				border: 1px solid #CCC;
				border-style: solid solid solid none;
				background: #F7F7F7;
				width: 122px;
				height: 100px;
				}
				
			.footerWrapper .box5 {
				float: left;
				border: 1px solid #CCC;
				border-style: solid solid solid none;
				background: #F7F7F7;
				width: 144px;
				height: 100px;
				}
				
			.footerWrapper .box6 {
				float: left;
				border: 1px solid #CCC;
				border-style: solid solid solid none;
				background: #F7F7F7;
				width: 103px;
				height: 100px;
				}

/***************************/
/* start sub page styles */
/***************************/

.headerWrapper_subpage {
			background: url(../images/headerBackground_subPage.png) no-repeat;
			margin: 0px auto 0px auto;
			width: 1237px;
			height: 130px;
			}

.mainBannerWrapper_subpage {
	/*background: url(../images/bannerBackground_subPage.png) no-repeat;*/
	margin: 0px auto 0px auto;
	width: 1237px;
	height: 304px;
	position: relative;	
	}
	
	.mainBanner_subpage {
		float: left;
		/* background: url(../images/banner_subpage.png) no-repeat; */
		width: 920px;
		height: 264px;
		margin: 0px 0px 0px 158px;
		}
			
		.subNavigationWrapper_subpage 
		{
		    float: left;
		    /* background: url(../images/banner_subpage.png) no-repeat; */
		    width: 920px;
		    height: 41px;
		    margin: 0px 0px 0px 158px;
		    background-color: #F5F5F5;
		}	
		.subNavigation_subpage {
			float: left;
			width: 800px;
			margin: 11px 0px 0px 30px;
			}
			
			.subNavigation_subpage .links {
				float: left;
				font: 16px Arial, Helvetica, sans-serif;
				color: #666666;
				margin: 0px 20px 0px 0px;
				}
				
				.subNavigation_subpage .links a {
					color: #666666;
					text-decoration: none;
					}
					
				.subNavigation_subpage .links a:hover {
					color: #000;
					text-decoration: underline;
					}

.mainContentOuterWrapper {
	background: url(../images/mainContentBackground_subpage.png) no-repeat;
	margin: 0px auto 25px auto;
	width: 1237px;
	height: 100%;
	min-height: 356px;
	}
	
	.mainContentOuterWrapper .left {
		float: left;
		width: 610px;
		height: 100%;
		margin: 15px 0px 0px 158px;
		}
		
		.mainContentOuterWrapper .left h1 {
			font: bold 15px Arial, Helvetica, sans-serif;
			color: #000;
			margin: 0px 0px 5px 30px;
			}
			
		.mainContentOuterWrapper .left p {
			font: 13px Arial, Helvetica, sans-serif;
			color: #333;
			line-height: 17px;
			margin: 0px 0px 20px 30px;
			}
			
			.mainContentOuterWrapper .left p a {
				color: #333;
				}
				
			.contentImage {
				float: right;
				padding: 0px 0px 20px 25px;
				}
			
		.mainContentOuterWrapper .left li {
			font: 13px Arial, Helvetica, sans-serif;
			color: #333;
			line-height: 17px;
			margin: 5px 0px 0px 50px;
			}
			
		.mainContentOuterWrapper .left ul {
			font: 13px Arial, Helvetica, sans-serif;
			line-height: 17px;
			margin: 10px 0px 15px 0px;
			}
			
			.imageFrame {
				width: 560px;
				height: 225px;
				margin: 0px 0px 0px 30px;
				}
				
				.imageFrame .single {
					float: left;
					width: 180px;
					height: 225px;
					}
					
					.imageFrame .single .title {
						font: bold 14px Arial, Helvetica, sans-serif;
						color: #333;
						text-align: center;
						height: 25px;
						}

	.mainContentOuterWrapper .right {
		float: left;
		width: 260px;
		height: 100%;
		margin: 15px 0px 0px 50px;
		}
		
		.mainContentOuterWrapper .right .navigation {
			float: right;
			background: #FFF;
			width: 210px;
			height: 256px;
			}
						
			.mainContentOuterWrapper .right .navigation .frame {
				float: left;
				border: 1px solid #557911;
				background: url(../images/navigationBackground.png) repeat-x;
				width: 198px;
				height: 43px;
				margin: 5px 0px 0px 5px;
				}
						
			.navigationStyle {
				font: bold 16px Arial, Helvetica, sans-serif;
				color: #FFF;
				text-align: center;
				}
							
				.navigationStyle a {
					color: #FFF;
					text-decoration: none;
					display: block;
					width: 198px;
					height: 43px;
					}
								
				.navigationStyle a:hover {
					display: block;
					background: url(../images/navigationBackgroundRO.png) repeat-x;
					color: #FFF;
					width: 198px;
					height: 43px;
					}
		

ul.topnav {  
    list-style: none;  
    padding: 5px 5px;  
    margin: 0;  
    position: absolute;
    width: 200px;  
    background: #222;  
    font-size: 1.2em;  
    background: url(topnav_bg.gif) repeat-x;  
    z-index: 15001; 
    top: 90px; 
    left: 825px;                        
} 
                
ul.topnav li {  
    float: left;
	width: 180px;
	height: 43px;
	margin: 0px 0px 0px 0px;
    padding: 0px 15px 7px 0;  
    position: relative; /*--Declare X and Y axis base for sub navigation-- */
}  

ul.topnav li a {  
    border: 1px solid #557911;
	background: url(../images/navigationBackground.png) repeat-x;
	color: #fff;  
    display: block;  
    width: 198px;
	height: 30px;
	text-decoration: none;  
    float: left;  
    font: bold 16px Arial, Helvetica, sans-serif;
    text-align: center;
    padding-top: 13px;
    
}  

ul.topnav li a:hover{  
    background: url(../images/navigationBackgroundRO.png) repeat-x;
}  

ul.topnav li ul.subnav {  
    list-style: none;  
    position: absolute;
    left: -210px; top: -2px;  
    margin: 0; padding: 0;  
    display: none;  
    float: left;  
    width: 210px;  
    z-index: 10000;
    /*border: 1px solid #111;  */
}  

ul.topnav li ul.subnav li{  
    margin: 0; padding: 0;  
    clear: both;  
    width: 210px;  
    position: static;
}    

ul.topnav li ul.subnav li a{  
    margin: 0; padding: 0;  
    clear: both;  
    width: 210px;  
    background: #FFFFFF;
    height: 30px;
    color: #809F46;
    padding-top: 13px;  
    border: 0px;
    
}    

ul.topnav li ul.subnav li a:hover {  
    text-decoration: underline;  
}    

/*-------------------------------
	PROMO PANEL
-------------------------------*/

#promo_panel{
	position:absolute;
	width:920px;
	height:436px;
	margin-bottom:5px;
	z-index:100;
	overflow:visible;
}


/*---------------------
	SLIDER AND CONTENT
*/

#promo_window{
	position:relative;
	width:920px;
	height:436px;
	overflow:hidden;
}

#promo_slider{
	position:absolute;
	left:0;
	top:0;
	width:10000px;
	height:436px;
	z-index:100;
}

#promo_slider .promo_content {
	float:left;
	width:920px;
	height:436px;
	margin:0 5px 5px 0;
}

#promo_slider .promo_content img.preload {
	display:none;
}


/*---------------------
	THUMBS
---------------------*/

#promo_thumbs {
	position:absolute;
	left:0; top:-88px;
	width:833px;
	height:88px;
	background:#000;
	z-index:101;
}

#promo_thumbs .corners {
	display:none;
	position:absolute;
	left:0;
	bottom:-8px;
	width:833px;
	height:8px;
	background:url(/assets/giraffe/images/homepage/thumbs_corners.png);
}

#promo_thumbs div {
	position:absolute;
	left:50%; top:0;
	padding-left:14px;
	z-index:111;
}

#promo_thumbs div a {
	display:block;
	float:left;
	padding:2px;
	margin:10px 14px 0 0;
}

#promo_thumbs div a:hover {
	padding:0;
}

#promo_thumbs div a.on {
	padding:0 0 15px;
	background:url(/assets/giraffe/images/homepage/thumbs_arrow.gif) 50% 100% no-repeat;
}

#promo_thumbs div a img {
	padding:2px;
	margin:0;
	border-radius: 3px;
	background:#FFF;
	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

#promo_thumbs div a:hover img,
#promo_thumbs div a.on img {
	padding:4px;
	border-radius: 5px;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}


/*---------------------
	THUMBS NAV
*/

#thumbs_nav {
	position:absolute;
	right:0; bottom:-38px;
	height:20px;
	padding:8px 3px 10px 10px;
	background:url(/assets/giraffe/images/homepage/thumbs_nav.png) 0 100% no-repeat;
	cursor:pointer;
	z-index:110;
}

#thumbs_nav li {
	display:block;
	float:left;
	width:20px;
	height:20px;
	margin-right:5px;
	background:url(/assets/giraffe/images/homepage/thumbs_nav_state.png) 0 0 no-repeat;
}

#thumbs_nav li.on {
	background-position:0 100%;
}


/*---------------------
	NEXT AND PREVIOUS
*/
#promo_nav {
    display: none;
}

#promo_nav li{
	display:block;
	position:absolute;
	top:118px;
	width:76px;
	height:76px;
	z-index:200;
}
#promo_nav li.prev{
	left:-38px;
}
#promo_nav li.next{
	right:-38px;
}

#promo_nav li a{
	display:block;
	width:100%;
	height:100%;
	text-indent:-5000px;
	background:url(/assets/giraffe/images/homepage/promo_nav.png);
}
#promo_nav li.prev a{
	background-position:left bottom;
}
#promo_nav li.prev a:hover{
	background-position:left top
}
#promo_nav li.next a{
	background-position:right bottom;
}
#promo_nav li.next a:hover{
	background-position:right top
}


/*---------------------
	CORNER OVERLAYS
*/

#promo_panel span.overlay_left,
#promo_panel span.overlay_right{
	position:absolute;
	top:0;
	width:8px;
	height:312px;
	background:url(/assets/giraffe/images/homepage/promo_overlay.png);
	z-index:110;
}
#promo_panel span.overlay_left{
	left:0;
	background-position:right top;
}
#promo_panel span.overlay_right{
	right:0;
	background-position:left top;
    left: 825px;
}

#mainBannerMask 
{
    position: absolute; z-index: 1000; width: 1000px; height: 58px; overflow: hidden; left: 158px; top: 0px;
}

#mainBannerMaskLeft
{
    position: absolute; z-index: 1000; width: 210px; height: 438px; overflow: hidden; left: 0px; top: 0px;
}

#mainBannerMaskLeft img 
{
    position: absolute;
}

#mainBannerMaskRight
{
    position: absolute; z-index: 1000; width: 200px; height: 438px; overflow: hidden; left: 1077px; top: 0px;
}

#mainBannerMaskRight img
{
    position: absolute;
}

ul.subpagetopnav {  
    list-style: none;  
    padding: 5px 5px;  
    margin: 0;  
    position: absolute;
    width: 200px;  
    background: #222;  
    font-size: 1.2em;  
    background: url(subpagetopnav_bg.gif) repeat-x;  
    z-index: 15001; 
  
} 
                
ul.subpagetopnav li {  
    float: left;
	width: 180px;
	height: 43px;
	margin: 0px 0px 0px 0px;
    padding: 0px 15px 7px 0;  
    position: relative; /*--Declare X and Y axis base for sub navigation-- */
}  

ul.subpagetopnav li a {  
    border: 1px solid #557911;
	background: url(../images/navigationBackground.png) repeat-x;
	color: #fff;  
    display: block;  
    width: 198px;
	height: 30px;
	text-decoration: none;  
    float: left;  
    font: bold 16px Arial, Helvetica, sans-serif;
    text-align: center;
    padding-top: 13px;
    
}  

ul.subpagetopnav li a:hover{  
    background: url(../images/navigationBackgroundRO.png) repeat-x;
}  

ul.subpagetopnav li ul.subnav {  
    list-style: none;  
    position: absolute;
    left: -210px; top: -2px;  
    margin: 0; padding: 0;  
    display: none;  
    float: left;  
    width: 210px;  
    z-index: 10000;
    /*border: 1px solid #111;  */
}  

ul.subpagetopnav li ul.subnav li{  
    margin: 0; padding: 0;  
    clear: both;  
    width: 210px;  
    position: static;
}    

ul.subpagetopnav li ul.subnav li a{  
    margin: 0; padding: 0;  
    clear: both;  
    width: 210px;  
    background: #FFFFFF;
    height: 30px;
    color: #809F46;
    padding-top: 13px;  
    border: 0px;
    
}    

ul.subpagetopnav li ul.subnav li a:hover {  
    text-decoration: underline;  
}    

#mainBannerMask_subpage
{
    position: absolute; z-index: 1000; width: 1000px; height: 58px; overflow: hidden; left: 158px; top: 0px;
}

#mainBannerMaskLeft_subpage
{
    position: absolute; z-index: 1000; width: 210px; height: 438px; overflow: hidden; left: 0px; top: 0px;
}

#mainBannerMaskLeft_subpage img 
{
    position: absolute;
    top: 0px;
    left: 0px;
}

#mainBannerMaskRight_subpage
{
    position: absolute; z-index: 1000; width: 200px; height: 438px; overflow: hidden; left: 1077px; top: 0px;
}

#mainBannerMaskRight_subpage img
{
    position: absolute;
}

.socialMediaWrapper 
{
    margin: 10px auto 0px auto;
	width: 922px;
	height: 28px;
    }

.socialMediaContent 
{
    float: left;
    margin: 10px 0px 0px 630px;
    font: 12px Arial, Helvetica, San Serif;
    color: #666666;
    }
    
.socialMediaContentLogos
{
    float: left;
    margin: 0px 0px 0px 10px;
    }