/*	
	modules.css
	-	Sub-content layout for Sickness & Health templates

******************************************************************************/



/*	LAYOUT-A
	-	three main columns
	Used on:
	- home page
--------------------------------------------------------------------------*/

.layout_a div.intro{
	width: 465px;
	margin: 10px 0 35px 0;
}
.layout_a div.col{
	width: 220px;
	margin-right: 23px;
}
.layout_a div.col.last{
	width: 219px;
}


/*	LAYOUT-B 
	- primary with side nav
	- up to four columns in primary content
	
	Used on:
	- themes and topics
	- techniques

--------------------------------------------------------------------------*/

.layout_b #primary{
	float: right;
	width: 515px;
}
.layout_b #secondary{
	float: left;
	width: 165px;
	margin-top: 22px;
}

.layout_b div.intro{
	margin: 20px 0;
}
.col.half{
	width: 247px;
	margin-right: 21px;
}
.col.third{
	width: 165px;
	margin-right: 10px;
}
.col.quarter{
	width: 122px;
	margin-right: 9px;
}
.col.fifth{
	width: 115px;
	margin-right: 10px;
}
li div.copy{
	float: right;
	width: 330px;
}

#selects.selects .col.fifth{
	width: 125px;
	padding-bottom: 0;
	margin-right: 3px;
}

#selects.selects select{
	width: 125px;
}
/*	LAYOUT-C 
	- Full width Flash module
	
	Used on:
	- People timeline

--------------------------------------------------------------------------*/

.layout_c #flashModule{
	width: 705px;
	height: 535px;
	margin-bottom: 0px;
	background: url('/images/hom/flashbgs/bg_flash_705x530.jpg') repeat-x bottom;
}
.layout_c .col.half{
	width: 343px;
	margin-right: 19px;
}
.layout_c .col.last	{	margin-right: 0;	}

.layout_c .col.quarter{
	width:  169px;
}

/*	LAYOUT-D 
	- Rowed search results page
	
	Used on:
	- Search results pages

--------------------------------------------------------------------------*/

.resultsNav{
	float: left;
	width: 515px;
	padding: 10px 0 10px 0;
	margin: 0 0 35px 0;
	border-top: 2px solid #1E8B9F;
	border-bottom: none;
}
.resultsNav.top{
	float: left;
	width: 515px;
	padding: 0 0 10px 0;
	margin: 0 0 15px 0;
	border-bottom: 2px solid #1E8B9F;
	border-top: none;
}
p.pagination					{	
	clear: left;
	padding-top: 6px;
	width: 515px;
}
.resultsNav.basic p.pagination	{	margin-top: 5px;	}


.resultsNav p.arrangeBy,
.resultsNav p.displaying,
.resultsNav p.objectsPerPage{
	width: 250px;
	text-align: right;
}
.resultsNav p.arrangeBy,
.resultsNav p.displaying{
	margin: 0;
	line-height: 2em;
	text-align: left;
}
.resultsNav p.arrangeBy,
.resultsNav p.pagination{
	text-align: left;
}
.resultsNav form#perpageForm{
	float: right;
}
.resultsNav p.objectsPerPage{
}
ul.thumbs .img_holder{
	/*height: 81px;*/
	background: none;
	text-align: center;
}
#primary ul.thumbs li p	{
	width: 120px;
	text-align: center;
	margin: 0;
}


/*	LAYOUT-E 
	- Glossary and search results pages

--------------------------------------------------------------------------*/

.layout_e #primary{
	float: left;
}
.layout_e #listings{
	float: left;
	width: 705px;
}
.layout_e #listings .resultsNav{
	width: 705px;
	margin-bottom: 15px;
	border-bottom: none;
}
.layout_e .resultsNav.listing.top{
	float: left;
	width: 705px;
	padding: 0 0 10px 0;
	margin-top: 0;
	border-bottom: 2px solid #1E8B9F;
}

#searchPage.layout_e .resultsNav.listing.top{
	width: 705px;
	padding: 0 0 10px 0;
	margin-top: 0;
	border-bottom: 2px solid #1E8B9F;
}

#searchPage.layout_e .resultsNav.listing.bottom{
	width: 705px;
	padding: 10px 0;
	margin-top: 0;
	border-top: 2px solid #1E8B9F;
}

/*	Flash modules and related selcts	   --------------------------------------------------*/


#selects		{
	padding: 15px 0 0 0;
}
.layout_b #selects.row{
	margin: -15px 0 0 0;
}
#selects.t-and-t{
	display: block;
	margin-top: 15px;
}


/*	"Steps" module, eg 'Embalming' modules	   -------------------------*/

#steps{
	float: left;
	width: 285px;
	margin: 0 15px 0 0;
}


/*	Horizontal rows -----------------------------------------------------*/

div.row{
	float: left;
	width: 515px;
	margin-bottom: 30px;
}
div.row.results{
	margin-bottom: 15px;
}
div.row.shortMargin{
	margin-bottom: 25px;
}

.layout_c div.row{
	width: 705px;
}
#secondary div.row{
	width: 165px;
}
li.row{
	float: left;
}
div.row.fundedby{
	margin-bottom: 0;
}
#glossaryTerms div.row{
	margin-bottom: 15px;
}
body#glossary li.row{
	margin-bottom: 15px;
	width: 545px;
}
.layout_e #listings li.row{
	clear: left;
	width: 705px;
}

/*	Global for various modules ------------------------------------------*/

li.last,
.col.last,
.col.quarter.last{
	margin-right: 0;
}
p.left	{	float: left;}
p.right	{	float: right;}

p#breadCrumbs{
	float: right;
	width: 515px;
	/*height: 28px;*/
	/*line-height: 28px;*/
	padding-top: .3em;
	line-height: 1.5em;
	font-style: italic;
}
.col	{	float: left;}

/*/***************************************************************************************************	
	HTML version of timeline content and all typography --------------------------------------------*/

ul.timeline-items div.row{
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid #999;
}
ul.timeline-items div.img_holder{
	width: 165px;
	margin: 0 15px 0 0;
	text-align: right;
	background: none;
}
ul.timeline-items div.img_holder img{
	padding-bottom: 3px;
	background: url('/images/hom/common/shadow.jpg') repeat-x bottom;
}
ul.timeline-items div.col.two_thirds{
	float: right;
	width: 335px;
}
ul.timeline-items h4{
	color: #000;
	padding-bottom: 0;
}
ul.timeline-items p{
	margin: 15px 0 0 0;
}
#primary ul.timeline-items a{
	color: #000;
}
#primary ul.timeline-items a:hover{
	color: #999;
}
ul.timeline-items p.back-to-top{
	text-align: right;
	font-size: .9em;
	margin: 0 0 25px 0;
}
#primary ul.timeline-items p.back-to-top a{
	font-style: normal;
	text-decoration: none;
	padding-left: 10px;
	background: url('/images/hom/common/back-to-top.gif') no-repeat left;
}
ul.timeline-items h3{
	clear: left;
	font-size: 1.4em;
	padding: 20px 0 15px 0;
	margin: 15px 0;
	background-position: top left;
	background-repeat: repeat-x;
	border-bottom: 1px solid #999;
}


/*
	Colours should never be used as class names, but are used here 
	as the same colour may be used across multiple different 
	modules / eras, so naming the class after the era name is not practical
*/

ul.timeline-items li.orange h3		{	border-color: #e76e34;background-image: url('/images/hom/common/bg_shadow_orange.gif');	}
ul.timeline-items li.orange div.row	{	border-color: #e76e34;	}

ul.timeline-items li.green h3		{	border-color: #74b64a;background-image: url('/images/hom/common/bg_shadow_green.gif');	}
ul.timeline-items li.green div.row	{	border-color: #74b64a;	}

ul.timeline-items li.light-blue h3		{	border-color: #00b0d8;background-image: url('/images/hom/common/bg_shadow_light-blue.gif');	}
ul.timeline-items li.light-blue div.row	{	border-color: #00b0d8;	}

ul.timeline-items li.red h3			{	border-color: #ec1c24;background-image: url('/images/hom/common/bg_shadow_red.gif');	}
ul.timeline-items li.red div.row	{	border-color: #ec1c24;	}

ul.timeline-items li.navy h3		{	border-color: #2b388f;background-image: url('/images/hom/common/bg_shadow_navy.gif');	}
ul.timeline-items li.navy div.row	{	border-color: #2b388f;	}

ul.timeline-items li.dark-green h3		{	border-color: #006838;background-image: url('/images/hom/common/bg_shadow_dark-green.gif');	}
ul.timeline-items li.dark-green div.row	{	border-color: #006838;	}

ul.timeline-items li.purple h3		{	border-color: #652d90;background-image: url('/images/hom/common/bg_shadow_purple.gif');	}
ul.timeline-items li.purple div.row	{	border-color: #652d90;	}

ul.timeline-items li.brown h3		{	border-color: #8a5d3b;background-image: url('/images/hom/common/bg_shadow_brown.gif');	}
ul.timeline-items li.brown div.row	{	border-color: #8a5d3b;	}

ul.timeline-items li.pink h3		{	border-color: #d91c5c;background-image: url('/images/hom/common/bg_shadow_pink.gif');	}
ul.timeline-items li.pink div.row	{	border-color: #d91c5c;	}

ul.timeline-items li.beige h3		{	border-color: #c1b49a;background-image: url('/images/hom/common/bg_shadow_beige.gif');	}
ul.timeline-items li.beige div.row	{	border-color: #c1b49a;	}


/***************************************************************************************************	
	Techniques and tech content and all typography -----------------------------------------------*/

#tandt-carousel{
	display: none;
}
ul.thumbs.t-and-t{
	float: left;
	width: 705px;
	border-bottom: 1px solid #1E7B93;
}

ul.thumbs.t-and-t li{
	margin-right: 7px;
	width: 135px;
	padding-bottom: 0;
	background: none;
}
ul.thumbs.t-and-t li.col.fifth.last{
	margin-right: 0;
}
ul.thumbs.t-and-t h3,
.carousel-sm-skin h3{
	width: 145px;
	margin-bottom: 3px;
	padding-bottom: 0;
	background: none;
}
#primary ul.thumbs.t-and-t p,
.carousel-sm-skin p{
	text-align: left;
	margin: 0;
	width: 135px;
}
#primary ul.thumbs.t-and-t li p	{
	margin-top: 0;
	text-align: left;
}
#primary ul.thumbs.t-and-t h3,
#primary ul.thumbs.t-and-t p{
	width: 135px;
	text-align:left;
}
.carousel-sm-skin img{
	margin: 0 0 0 0;
	padding-bottom: 3px;
	background: url('/images/hom/common/shadow.jpg') repeat-x bottom;
}
#primary ul.thumbs.t-and-t img{
	margin: 0;
	padding-bottom: 0;
}
ul.thumbs.t-and-t div.img-holder,
.carousel-sm-skin div.tandt-img-holder{
	position: relative;
	width: 145px;
	height: 155px;
	margin-bottom: 10px;
	background: url('/images/hom/carousel/loader.gif') no-repeat bottom left;
}
.carousel-sm-skin div.tandt-img-holder{

}
.carousel-sm-skin div.tandt-img-holder img{
	float: none;
	position: absolute;
	bottom: 0;
	left: 0;
}
#primary ul.thumbs.t-and-t div.img_holder{
	position: relative;
	float: left;
	width: 135px;
	height: 135px;
	padding-bottom: 0;
	background: #e6e6e6 url('/images/hom/common/bg_shadow_simple.gif') repeat-x bottom;
}
#primary ul.thumbs.t-and-t div.img_holder img{
	float: none;
	position: absolute;
	bottom: 5px;
	left: 0;
}
#primary ul.thumbs.t-and-t  a{
	color: #1E7B93;
}