/* ------ NOTES -----------------------------------------

Content stylesheet.

Version: 1.0
Author: Andy Beeching
email: andybeeching@gmail.com

--------- UPDATE INFO -----------------------------------
	
Last updated: 9th June 2008

--------- CONTENTS --------------------------------------

	1. Dividers
	2. Helper Styles
	3. Layout Components
	4. Button Styles
	5. Lists (with and without images)
	6. Staff Listing
	7. Promotion Listing
	8. Link Listing
	9. Job Listing
	10. Template Variants
	11. Form Styles
	12. Home Promo

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

/* Dividers */

.hr {
	border-bottom: 1px solid #444444;
}

body.contact .hr {
	padding-bottom: 1em;
}

/* Helpers */

span.related-info {
	display: block;
	font-weight: normal;
}

/* Layout Components */

.slot1 {
	width: 280px;
	padding-right: 30px;
	display: inline;
}

.slot2 {
	width: 580px;
	display: inline;
}

.slot1,
.slot2,
.slot3 {
	overflow: auto;
}

#article .slot4 {
	width: 590px;
	float: right;
	margin-right: 0;
	overflow: auto;
}

#article .slot4 img {
	float: right;
}

/* Button Styles */

.makeButton {
	color: #fff;
	display: inline;
	cursor: hand;
}

.jsButton span {
	display:block;
	position:relative;
	cursor: pointer;
	float: left;
}

	.jsButton span.tl {
		background: url(img/span.tl.bg.png) no-repeat left top;
		margin-left:-5px;
		padding-left:5px;
	}
	
	.jsButton span.tr {
		background: url(img/span.tr.bg.png) no-repeat right top;
		line-height:1.167em;
		padding: 5px 8px 3px 3px;
	}
	
	.jsButton span.bl {
		background: url(img/span.bl.bg.png) no-repeat left bottom;
		margin-right:5px;
		padding-left:5px;
	}
	
	.jsButton span.br {
		background: url(img/span.br.bg.png) no-repeat right bottom;
		margin-right:-5px;
		padding-bottom:4px;
	}
	
	.jsButton span.arrow {
		background: url(img/span.arrow.bg.png) no-repeat right center;
		padding-right: 21px;
		margin-right: -2px;
	}
	
	button .jsButton span.arrow {
		padding: 0;
		margin: 0;
		background: 0;
	} 

.makeButton:hover {
	background: transparent url(img/a.jsButton.over.bg.gif) repeat-y left top;
	color: #fff;
}
	
	.jsButton:hover span.tl,
	.jsButton:focus span.tl,
	.jsButton:active span.tl {
		background: url(img/span.tl.over.bg.png) no-repeat left top;
	}

	.jsButton:hover span.tr,
	.jsButton:focus span.tr,
	.jsButton:active span.tr {
		background: url(img/span.tr.over.bg.png) no-repeat right top;
	}

	.jsButton:hover span.bl,
	.jsButton:focus span.bl,
	.jsButton:active span.bl {
		background: url(img/span.bl.over.bg.png) no-repeat left bottom;
	}

	.jsButton:hover span.br,
	.jsButton:focus span.br,
	.jsButton:active span.br {
		background: url(img/span.br.over.bg.png) no-repeat right bottom;
	}
	
	/* Preload */
	
	h1 {
		background: url(img/span.tl.over.bg.png) no-repeat left top;
	}
	
	hr {
		background: url(img/span.tr.over.bg.png) no-repeat left top;
	}
	
	h1 img {
		background: url(img/span.bl.over.bg.png) no-repeat left top;
	}
	
	#footer {
		background: url(img/span.br.over.bg.png) no-repeat -2000px top;
	}

/* Lists */

/* Generic Styles */

ul.tertiaryNav li {
	border-top: 1px solid #666666;
	list-style: none;
	padding: 0;
	margin: 0;
	_margin: 0 0 0 -16px;
}

	ul.tertiaryNav li a {
		display: block;
	}
	
	ul.tertiaryNav li p {
		padding-right: 50px;
	}
	
/* Plain List Styles */

	ul.nonImg li a {
		line-height: 2.5;
		font-size: 1.165em;
	}
	
/* List with Images Styles */
/* =IE 6+ */		
ul.wImg li {
	position: relative;
	min-height: 104px;
	padding: 10px 0 10px 90px;
}

	ul.wImg li h3 {
		font-size: 1em;
	}
	
		ul.wImg li h3 a {
			padding-bottom: 1em;
		}

	ul.wImg li img {
		position: absolute;
		top: 10px;
		left: 0;
		border: 1px solid #666666;
	}
	
	.publications ul.wImg li img {
		border: none;
	}
	
	.publications #mainContent ul.tertiaryNav li p {
		font-size: .915em;
	}
	
/* Staff Listing Module - inherits from tertiaryNav */

ul#staffListing {
	border-bottom: none;
	padding: 62px 0 20px 20px;
	width: 500px;
}

	ul#staffListing li {
		min-height: 134px;
		padding: 10px 0 0 110px;
		border-bottom: 1px solid #666666;
		border-top: none;
	}
	
		ul#staffListing li h3 {
			padding-bottom: 1em;
		}
		
		ul#staffListing li p {
			padding-right: 20px;
			font-size: 0.915em;
		}
	
/* promoListing View */

#mainContent ul.promoListing li {
	min-height: auto;
	border: none;
	float: left;
}

	#mainContent ul.promoListing li h3 {
		border-bottom: 1px solid #666666;
		margin-bottom: 1em;
	}

	#mainContent ul.promoListing li img {
		top: 0;
	}
	
	#mainContent ul.promoListing li p {
		padding: 0;
	}
		
/* caseStudies Styles */

ul#caseStudies li {
	padding: 208px 0 0 0;
	width: 200px;
	margin-right: 20px;
}
	
/* linkList Styles */

div.link-list {
	overflow: visible;
	padding-top: 7em;
}

div.link-list ul,
div.link-list h4 {
	width: 160px;
}

	div.link-list ul li,
	ul.client-list li,
	ul.arrow li {
		list-style: none;
		padding: 0;
		margin: 0;
		line-height: 1.5;
	}
	
	ul.client-list li {
		font-size: 1.1em;
	}

		div.link-list ul li a,
		ul.arrow li a {
			margin-left: -8px;
			padding-left: 8px;
			background: url(img/a.arrow.bg.gif) no-repeat left center;
			color: #fff;
		}
		
		ul.arrow li a {
			margin-left: 0;
		}
		
/* Job List */

#mainContent ul#jobList {
	padding: 60px 0 20px 20px;
	border: none;
}

/* =IE */
#mainContent ul#jobList li {
	padding-top: 10px;
}

	#mainContent ul#jobList li h4 {
		line-height: 1.5;
	}

	#mainContent ul#jobList ul.arrow li {
		border: none;
	}

/* Visual Cue */

.icnR a {
	background: url(img/tertiaryNav.a.bg.gif) no-repeat 264px center;
	padding-right: 25px;
}

.icnR h3 a {
	background-position: 174px top;
}

/*
.icnR a:hover,
.icnR a:active,
.icnR a:focus {
	background: url(img/tertiaryNav.a.bg.gif) no-repeat -246px center;
}

.icnR h3 a:hover,
.icnR h3 a:active,
.icnR h3 a:focus {
	background-position: -336px top;
}
*/

.icnL h4, .folio-view a  {
	background: url(img/tertiaryNav.a.bg.png) no-repeat left center;
	padding-left: 25px;
}

.folio-view a {
	line-height: 1.2em;
	padding: 2px 0 2px 25px;
}



/*
.icnL a:hover,
.icnL a:active,
.icnL a:focus {
	background: url(img/tertiaryNav.a.bg.gif) no-repeat -500px center;
}
*/

/* Data Tables */

table {
	width: 100%;
}

table, td, th {
	border: 1px solid;
	border-width: 1px 1px 0 0;
	vertical-align: top
}

td, th {
	border-width: 0 0 1px 1px;
}

/* Template Variants */

div#mainContent {
	margin: 30px 0 0 0;
	background: #101010;
	min-height: 960px;
}

/* Full width template */

body#landing div#mainContent,
body#flash div#mainContent {
	margin: 30px -30px 0 -30px;
	position: relative;
}

/* No background image class */

body.plain div#mainContent {
	background: #222222;
}

body#flash div#mainContent  {
	background: #000000;
}

	/* Positioned Intro Copy Module */

	body#landing div.slot1,
	body#landing div.slot2,
	body#landing div.promo {
		position: absolute;
		top: 0px;
		left: 30px;
		z-index: 2000;
		overflow: visible;
	}
	
	body#landing div.slot2 {
		left: 330px;
	}
	
	body#landing.clients div.slot1 div.slot1 {
		position: static;
	}
	
	/* TODO: Refactor into optional component? */
	
	body#landing .ar {
		position: absolute!important;
		top: 44px!important;
		left: 300px!important;
		z-index: 2000!important;
		width: 280px!important;
	}
	
	body#landing.clients .ar {
	top: 70px!important;
	} 

	
	body#landing.noH2 div.slot1 {
		top: 60px;
	} 
	
	body#landing #content {
		margin-bottom: 0;
	}

/* Flash Template Styles */
/* TODO: Investigate SlideShowPro more for customisation and implementation details */
div.flash embed {
	background: #111111;
}

/* Extranet Form Login Styles */

form.extranet {
	font-size: .915em;
}

	form.extranet label {
		display: block;
		padding-bottom: 3px;
		clear: left;
	}

	form.extranet input {
		background: #2d2d2d;
		color: #ffffff;
		width: 205px;
		border: none;
		padding: 6px;
		margin-bottom: 1em;
		float: left;
	}

	form.extranet button {
		float: right;
		background: none;
		border: none;
		margin-right: -10px;
	}

		#mainContent form.extranet button p.jsButton {
			width: auto;
			font-size: .915em;
		}
		
/* Home Promo */

div.promo {
	width: 150px;
}

#mainContent div.promo p {
	font-size: .915em;
}

#test {
	position: relative;
}
	
#landing #caseStudies {
	padding-top: 69px;
	margin: 0 -18px 0 70px;
}

	#landing #caseStudies li {
		margin: 0 0 0 30px;
		min-height: 0;
		float: right;
	}

		#landing #caseStudies li h3 {
			font-weight: bold;
			font-size: 1.1em;
			border: none;
			margin: 5px 0 0 0;
		}
		
			#landing #caseStudies li h3 a {
				background-position: 184px top;
			}