/*
	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('page-background-animals.jpg') repeat-x top center;
}


/* =Content Container - page background (defaults to UL rounded corner)
-----------------------------------------------------------------------------*/
#content-container {
	background: #fff url('content-container-inside.gif') no-repeat top left;
}

.animals-sso #content-container {
	background: #fff url('animals-sso-container.gif') no-repeat top left;
}

#content-container-home {
	background: #fff url('content-container-home.gif') no-repeat top left;
}

#main-header .menu-item a {
	color: #7d280d;
}

#main-header .menu-item a:hover {
	color: #c93;
}

#main-header {
	border-bottom-color: #dfaf65;
}


/* =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;
}

#content-center-well .news h2 {
	color: #fff !important;
	border: none !important;
}

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


/* =A-Z List	
-----------------------------------------------------------------------------*/
.a-z-list .list-item {
	width: 162px;
	float: left;
	display: inline;
	background: #fff url(art-bullet-000000.gif) no-repeat 0px 4px;
}

.a-z-list .list-item a {
	padding-bottom: 3px;
	padding-right: 15px;
	padding-left: 8px;
	display: block;
	height: 26px;
}

.a-z-list .list-container {
	margin-bottom: 18px;
	clear: both;
}

.a-z-list h2 {
	clear: both;
	margin-top: 16px;
	margin-bottom: 12px;
}


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

#content-center-well .multimedia .promo {
	float: left;
}

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



#content-center-well .multimedia .print {
	background: url(art-icon-print.gif) no-repeat 3px top;

}

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

}

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

#content-center-well .multimedia .game {
	background: url(art-icon-game.gif) no-repeat 3px top;

}

#content-center-well .multimedia .profile {
	background: url(art-icon-profile.gif) no-repeat 3px top;

}
#content-center-well .multimedia .wallpaper {
	background: url(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: 15px;
	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 h2 {
	font-size: 17px;
	color: #fff;
	padding-top: 4px;
}

#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;	
}


/* =Poll
-----------------------------------------------------------------------------*/
.but_vote {
	background: url('poll-votebutton-white.gif') 0 0 no-repeat;
}


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

.legend img {
	vertical-align: text-bottom;
	margin-right: 8px;
	margin-top: 5px;
}


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

.audio-credits .list-item {
	padding-left: 10px;
	padding-bottom: 8px;
	background: #fff url(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; }


.previous a {
	background: transparent url('image-navigation-previous.gif') center left no-repeat;
	padding-left: 15px;
}

.next a {
	background: transparent url('image-navigation-next.gif') center right no-repeat;
	padding-right: 15px;
}

.profile-text {
	margin-bottom: 22px;
}