/**
 * HOME.CSS
 * 
 * @note		Homepage unique styles.
 * @author		NavigationArts (tstephens@navigationarts.com)
 **/
 
 @media screen {
	/**
	 * @workaround		can't use overflow: auto due to a rendering bug with lightbox, so we're using
	 * 					the clearfix code.
	 **/
	#contentBody:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}
		* html #contentBody {
			height: 1%;
		}
	
/**
 * @section DCC, Dynamic Content Carosel
 * @note	this is the rotating content slides in the upper left of the main content.
 **/
	#contentDcc {
		margin: 0 0 0 -10px;
		padding: 10px 0 0 0;
		position: relative;
	}
		/**
		 * @workaround	IE adjusts the height of the page during the DCC animation if a set height isn't here.
		 **/
		* html #contentDcc {
			height: 240px;
		}
		*+html #contentDcc {
			height: 240px;
		}
		/**
		 * @note	the CMS configuration has the ability to include a lot of junk HTML in the slide.
		 * 			to prevent the display we are removing styles of all of the common elements that
		 * 			may be inserted by accident.
		 * 			slides are all positioned absolutely on top of each other. so the fade in/out doesn't
		 * 			shift the content underneath.
		 * 			the content of the slide (LI) should just be P>A>IMG. the image should be 250x670.
		 **/
		#contentDccSlides { }
			#contentDccSlides ul {
				position: relative;
				height: 250px;
				width: 670px;
			}
			#contentDccSlides ul,
			#contentDccSlides p {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#contentDccSlides a,
			#contentDccSlides img {
				display: block;
			}
			#contentDccSlides li {
				position: absolute;
				top: 0;
				left: 0;
				display: none; /* @note	by default hide all slides */
			}
				#contentDccSlides #contentDccSlidesLi0 {
					display: block; /* @note	show the first slide, ID written via JS. */
				}
			
			/**
			 * @note	the nav is hidden until the JS tells it to fadein.
			 **/
			#contentDccNav {
				background-color: #000;
				height: 30px;
				position: absolute;
				top: 230px;
				left: 0;
				width: 670px;
				opacity: .7;
				display: none;
			}
				* html #contentDccNav {
					filter: alpha(opacity='70') !important;
				}
				*+html #contentDccNav {
					filter: alpha(opacity='70') !important;
				}
				#contentDccNav ul {
					height: 17px;
					float: left;
					margin: 0;
					padding: 0;
				}
				#contentDccNav p {
					height: 17px;
					float: left;
					margin: 0;
					padding: 6px 12px 0 9px;
				}
				#contentDccNav li,
				#contentDccNav a {
					height: 17px;
					width: 17px;
					float: left;
					overflow: hidden;
					margin: 0;
					padding: 6px 4px 0 0;
				}
				#contentDccNav a {
					padding: 0;
					text-indent: -9999px;
					background: url(../img/design/content/dcc/slide1.gif) top left no-repeat;
				}
				
				#contentDccNav0 a { background-image: url(../img/design/content/dcc/slide1.gif); }
				#contentDccNav1 a { background-image: url(../img/design/content/dcc/slide2.gif); }
				#contentDccNav2 a { background-image: url(../img/design/content/dcc/slide3.gif); }
				#contentDccNav3 a { background-image: url(../img/design/content/dcc/slide4.gif); }
				#contentDccNav4 a { background-image: url(../img/design/content/dcc/slide5.gif); }
				#contentDccNav5 a { background-image: url(../img/design/content/dcc/slide6.gif); }
				#contentDccNav6 a { background-image: url(../img/design/content/dcc/slide7.gif); }
				#contentDccNav7 a { background-image: url(../img/design/content/dcc/slide8.gif); }
				#contentDccNav8 a { background-image: url(../img/design/content/dcc/slide9.gif); }
				
				#contentDccNav li.on a { 
					background-position: 0 -17px;
					cursor: default;
				}
		
		#dccPlayPause {
			cursor: pointer;
		}

/**
 * @section COLUMNS
 **/
	#contentColumn1 {
		width: 315px;
		float: left;
		margin: 0 20px 0 0;
	}
	#contentColumn2 {
		width: 315px;
		float: left;
	}

/**
 * @section SPONSOR
 * @note	content is inserted into the columns with no particular styling assoicated with them.
 * 			the sponsor content is unique, it needs some additional styling. the CLASS is applied
 * 			within the CMS when the content is created.
 **/
	#contentBody div.sponsor {
		background: url(../img/design/content/body/sponsorBottom.gif) bottom left no-repeat;
		margin: 24px 0 7px 0;
	}
		#contentBody div.sponsor h2 {
			background: url(../img/design/content/body/sponsorTop.gif) top left no-repeat;
			font: normal 10px/10px Arial, Helvetica, sans-serif;
			color: #000;
			margin: 0;
			padding: 10px;
			border-bottom: 1px solid #babab9;
			text-transform: uppercase;
		}
		#contentBody div.sponsor p {
			text-align: center;
			padding: 10px;
		}

/**
 * @section TABS (Conservation News and Updates, lower right)
 * @note	typical HTML tabs, click one, the link is a pointer to the ID of the DIV that it is to show.
 * 			the sliding doors approach is used for these tabs. might have been able to get away with just
 * 			solid BG images since the width isn't flexible.
 **/
	#contentNewsUpdates ul.tabs {
		margin: 0;
		padding: 0 0 0 2px;
		list-style:none;
		background: url(../img/design/content/body/tabBg.gif) 0 25px no-repeat;
		min-height: 26px;
		position: relative;
	}
		* html #contentNewsUpdates ul.tabs {
			height: 1%;
		}
	#contentNewsUpdates ul.tabs li {
		float:left;
		background: url(../img/design/content/body/tabOffLeft.gif) no-repeat left top;
		margin:0 3px 0 0;
		padding:0 0 0 9px;
		height: 26px;
	}
		#contentNewsUpdates ul.tabs li.last-child {
			margin-right: 0;
		}
	#contentNewsUpdates ul.tabs a {
		float:left;
		display:block;
		background:url(../img/design/content/body/tabOffRight.gif) no-repeat right top;
		padding: 7px 15px 2px 6px;
		text-decoration:none;
		font-weight:bold;
		color:#fff;
		font: bold 12px/12px Arial, Helvetica, sans-serif;
		margin: 0;
		height: 17px;
		width: 124px;
	}
		/**
		 * @workaround	IE needed the :visited psudeo selector.
		 **/
		#contentNewsUpdates ul.tabs a:visited {
			color:#fff;
		}
	#contentNewsUpdates ul.tabs li.on {
		background-image:url(../img/design/content/body/tabOnLeft.gif);
	}
	/**
	 * @workaround	IE needed the :visited psudeo selector.
	 **/
	#contentNewsUpdates ul.tabs li.on a,
	#contentNewsUpdates ul.tabs li.on a:visited {
		background-image:url(../img/design/content/body/tabOnRight.gif);
		color:#333;
	}
	
	/**
	 * @note	a negative left and right margin is to accomidate for the drop shadow BG image.
	 **/
	#contentNewsUpdates div {
		border-top: 0;
		background: url(../img/design/content/body/newsUpdatesBg.gif) bottom left no-repeat;
		margin: 0 -1px;
		padding: 0 2px 2px 2px;
		display: none;
	}
		*+html #contentNewsUpdates div {
			zoom: 1;
		}
		#contentNewsUpdates div ul {
			margin: 0;
			padding: 0 0 12px 0;
			list-style: none;
		}
		#contentNewsUpdates div li {
			padding: 0;
			list-style: none;
		}
		#contentNewsUpdates div li h3 {
			display: block;
			padding: 0;
			margin: 0;
			font: normal 12px/16px Arial, Helvetica, sans-serif;
		}
			/*
			 * @note Conservation News doesn't have A tags, so we must style the H3 to look like an A 
			 */
			#contentNewsUpdates #contentNews h3 {
				color: #362f2d;
				display: block;
				padding: 4px 10px 4px 18px;
				background: url(../img/design/content/body/newsUpdatesLiOffBg.gif) 8px 10px no-repeat;
			}
		#contentNewsUpdates div li p {
			padding: 0 0 0 18px;
			margin: 0;
			font: normal 12px/16px Arial, Helvetica, sans-serif;
			color: #666;
		}
		#contentNewsUpdates div li h3 a {
			color: #362f2d;
			display: block;
			padding: 4px 10px 4px 18px;
			background: url(../img/design/content/body/newsUpdatesLiOffBg.gif) 8px 10px no-repeat;
		}
			#contentNewsUpdates div li.alt {
				background-color: #f5f5f5;
			}

		/**
		 * @note	link after the list of news items.
		 **/
		#contentNewsUpdates div p {
			padding: 0 0 0 18px;
		}

/**
 * @section GO TO THE MAP
 * @note	this image is the one image of the site that breaks the widget contraints. so it
 * 			has a negative margin.
 **/
	#goToTheMap img.usa {
		margin: 0 -2px 12px -2px;
	}

/**
 * @section WHATS POPULAR
 * @note	widget in the lower right of the homepage. H3s followed by a DIV of content.
 * 			click on the H3 will show the DIV beneath it.
 **/
	#whatsPopular { }
		#whatsPopular h3 {
			font: normal 12px/12px Arial, Helvetica, sans-serif;
			color: #fff;
			margin: 0;
			padding: 6px 10px 8px 11px;
			background: url(../img/design/content/related/popularH3bg.gif) top left repeat-x;
			cursor: pointer;
		}
			#whatsPopular h3.on {
				background-position: 0 -26px;
				cursor: default;
			}
			
		#whatsPopular div {
			display: none;
			border: 1px solid #9a9a9a;
			border-top: 0;
			margin: 0 1px 1px 1px;
		}
			#whatsPopular div ul {
				margin: 0;
				list-style: none;
			}
			#whatsPopular div li {
				padding: 0;
				list-style: none;
			}
				#whatsPopular div li.alt {
					background-color: #f5f5f5;
				}
			#whatsPopular div li h3 {
				font-weight: normal;
				padding: 0;
				background: none;
			}
				#whatsPopular div li h3 a {
					display: block;
					padding: 4px 10px 4px 18px;
					background: url(../img/design/content/body/newsUpdatesLiOffBg.gif) 8px 10px no-repeat;
				}
					#whatsPopular div li h3 a:hover {
						text-decoration: underline;
					}
			#contentRelated #whatsPopular div p {
				padding: 0 0 3px 18px;
				margin: 0;
			}
 }