/*
	This is the section (site) specific css for environment.
	It contains unique elements such as color schemes and backgrounds.
	Please fewer comments in here and add more comments to the wiki at
	http://wiki.nationalgeographic.com/index.php/Site-wide_CSS_implementation
*/


/* =Body
-----------------------------------------------------------------------------*/
body {
	background: #fff url('/staticfiles/NGS/Animals/SiteAssets/img/backgrounds/page-background-animals.jpg') repeat-x top center;
}


/* =Content Container - page background (defaults to UL rounded corner)
-----------------------------------------------------------------------------*/
#Animals #content-container-home {
	background: #fff url('/staticfiles/NGS/Animals/SiteAssets/img/backgrounds/content-container-home.gif') no-repeat top left;
}

#Animals #content-container {
	background: #fff url('/staticfiles/NGS/Animals/SiteAssets/img/backgrounds/content-container-inside.gif') no-repeat top left;

}

#main-header h2 a:link,
#main-header h2 a:visited,
#main-header h2 a:hover,
#main-header .selected a {
	color: #7C6C4B;
}


/* =News promo module
-----------------------------------------------------------------------------*/
#content-center-well .news .promo-last h3 {
	display: none;
}

#content-center-well .news .promo {
	padding-right: 40px;
	padding-bottom: 15px;
	border-bottom: 1px dashed #dbdbdb;
	margin-bottom: 15px;
}


/* =How you can help promo module
-----------------------------------------------------------------------------*/
#content-center-well .help h3 {
	font-size: 12px;
	font-weight: normal;
	background: #fff url(/staticfiles/NGS/Global/ApplicationAssets/img/art-bullet-31659C.gif) no-repeat 0px 4px;
	padding-left: 8px;
}


/* =Multimedia box icons	
-----------------------------------------------------------------------------*/
#content-center-well .multimedia .body {
	border: none;
	color: #ffffff;
	padding: 10px 4px 0px 15px;
}

#content-center-well .multimedia .audio {
	/* position: relative;
	left: -10px; */
}



#content-center-well .multimedia .print {
	background: url(/staticfiles/NGS/Global/ApplicationAssets/img/art-icon-print.gif) no-repeat 3px 2px;

}

#content-center-well .multimedia .sound {
	background: url(/staticfiles/NGS/Global/ApplicationAssets/img/art-icon-sound.gif) no-repeat 3px 2px;

}

#content-center-well .multimedia .gallery {
	background: url(/staticfiles/NGS/Global/ApplicationAssets/img/art-icon-gallery.gif) no-repeat 3px top;
	margin-bottom: 0; /* overrides overlapping gallery declaration */

}

#content-center-well .multimedia .video {
	background: url(/staticfiles/NGS/Global/ApplicationAssets/img/art-icon-video.gif) no-repeat 5px 3px;
}

#content-center-well .multimedia .game {
	background: url(/staticfiles/NGS/Global/ApplicationAssets/img/art-icon-game.gif) no-repeat 3px top;

}

#content-center-well .multimedia .profile {
	background: url(/staticfiles/NGS/Global/ApplicationAssets/img/art-icon-profile.gif) no-repeat 3px top;

}
#content-center-well .multimedia .wallpaper {
	background: url(/staticfiles/NGS/Global/ApplicationAssets/img/art-icon-wallpaper.gif) no-repeat 3px top;

}

/* =Animal-specific styles
-----------------------------------------------------------------------------*/
.latin-name {
	font-size: 13px;
	color: rgb(153, 153, 153);
	font-weight: 400;
	font-style: italic;
}




	
/* =Multimedia Box
-----------------------------------------------------------------------------*/
#content-center-well .multimedia {
	border: 1px solid #e5dcd1;
	border-top: 0;
}


#content-center-well .multimedia .header h2 {
	color: #000;
	font-size: 14px;
	padding-top: 10px;
}

#content-center-well .multimedia h3 {
	font-size: 12px;
	font-weight: 400;
	padding-left: 25px;
	padding-top: 2px;
	padding-bottom: 0px;
	padding-right: 10px;
}


	
/* =Fact (For Fact Box)
-----------------------------------------------------------------------------*/

#content-center-well .fact .list-item,
#content-center-well .fact .profile-text,
#content-center-well .fact .fastfact { /* must apply padding elements to these individually, so photo can break the grid */
	padding-left: 14px;
	padding-right: 14px;
}

#content-center-well .fact a.endangered { 
	color: #FF0000;
}

#content-center-well .fact .list-item, #content-center-well .fact .fastfact {
	margin-bottom: 8px;	
}

#content-center-well .fact .relative-size {
	text-align: center;
	margin-top: 3px;	
}

#content-center-well .fact h2 {
	padding-top:2px;
}


/* =Poll
-----------------------------------------------------------------------------*/
.but_vote {
	background: url('/staticfiles/NGS/Environment/SiteAssets/img/buttons/poll-votebutton-white.gif') 0 0 no-repeat;
}


/* =Map Legend -- should move to global eventually
-----------------------------------------------------------------------------*/
.map img {
	border: 1px solid #000;
}

/* Resizing the map image in content-right-rail instances to adjust for the original width being pushed out */
#content-right-rail .map img {
	width:  210px;
}

.legend img {
	vertical-align: text-top;
	margin-right: 4px;
	margin-top: 0px;
}

#content-right-rail .map .legend img {
	width: 20px !important; /* needed due to the resize of the .map img above */	
}


/* =Audio Credits
-----------------------------------------------------------------------------*/

.audio-credits .list-item {
	padding-left: 10px;
	padding-bottom: 8px;
	background: #fff url(/staticfiles/NGS/Global/ApplicationAssets/img/art-bullet-000000.gif) no-repeat 0px 4px;
}

.audio-credits h2 {
	padding: 10px 0px 10px 0px;
}


/* =Sponsors Right Rail Collection (for type 'sponsors-right-rail')
-----------------------------------------------------------------------------*/

#content-right-rail .sponsors-right-rail h2 {
	color: #d1a75f;
}

#content-right-rail .sponsors-right-rail h3 {
	color: #fff;
} 

#content-right-rail .sponsors-right-rail h3 a {
	color: #fff;
} 

#content-right-rail .sponsors-right-rail .promo p {
	color: #e6cdac;
}

#content-right-rail h3 {
	color: #7b4f28;
}



/* =Special DIVs added for "Expand for More" (should be global eventually)
-----------------------------------------------------------------------------*/
div.XpanderContainer { text-align: right; }
img.XpanderToggleImg { display: inline; margin-bottom: 5px; margin-top: 10px; cursor: pointer; }
div.XpanderClip { text-align: left; }

.profile div.XpanderContainer {
	margin-bottom: 0px;
}

.news h2 {
	color: #fff;
	border-bottom: none;
}