@charset "utf-8";

@import url("reset.css");
@import url("nav.css");

html, body {
	height: 100%;
}


body#site {
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: #676767;  
	line-height: 150%;
	background: url(../images/bodybg.jpg) repeat-y center;
}

a {
	text-decoration: none;
	font-weight: bold;
	color: #e31b24;
}

a:hover {
	text-decoration: underline;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a  {
	font-weight: normal;
}

h1, h2, h3, h4, h5, h6  {
	font-weight: normal;
	font-family: Helvetica, Arial, sans-serif;
}


div.dottedBorder {
	border-bottom: 1px dotted #b8b8b8;
	float: left;
	padding: 0 0 33px 0;
	width: 100%;
	height: 100%;
}

div.whiteShadeBox {
	background: #fff;
	border-right: 1px solid #b8b8b8;
	border-bottom: 1px solid #b8b8b8;
	padding: 8px;
}

.boldred, #footer a.boldred {
	font-weight: bold;
	color: #e31b24;
}

ul.red-dash-list {
	color: #999;
	padding: 0 0 10px 0;
	float: left;
	width: 735px;
}

	ul.red-dash-list li {
		width: 294px;
		float: left;
		margin-right: 20px;
		background: url(../images/red-dash.gif) no-repeat 0px 8px;
		list-style: none;
		padding: 0 0 0 15px;
	}

#container {
	width: 961px;
	margin: 0 auto;
	text-align: left;
}

#containerBG {
	background: #fff;
	float: left;
}

	#header, #strapline, #homepageShowcase, #homepageClients, #footer, #callback, #ourLocation, #currentWork {
		width: 895px;
		float: left;
		padding: 0 33px;
	}
	
	#header {
		height: 145px;
		padding: 0 33px;
		background:url(../images/logo.jpg) 38px 58px no-repeat;
		position: relative;
	}
	
		#logoLink {
			position: absolute;
			top: 33px;
			left: 32px;
			width: 205px;
			height: 80px;
			display: block;
		}
		
			#logoLink:hover {
				text-decoration: none;
			}
			
			#logoLink b {
				visibility: hidden;
			}
	
		#callback {
			height: 20px;
			background: #999;
			color: #fff;
			padding: 7px 10px;
			width: 872px;
		}
		
			#callback strong {
				float: left;
				font-size: 14px;
			}
			
			#callback span {
				display: inline-block;
				margin: 0 10px 2px 0;
				vertical-align: top
			}
			
			#callback #callbackForm {
				float: right;
			}
			
			#callbackForm .textinput {
				background: #b3b3b3;
				border: none;
				color: #fff;
				margin: 0 10px 5px 0;
				font-size: 10px;
				width: 120px;
				padding: 2px 5px;
				vertical-align: middle;
			}
			
			#callbackForm .buttoninput {
				color: #fff;
				background: #676767;
				border: none;
				font-size: 10px;
				font-weight: bold;
				padding: 1px 3px 2px 3px;
				vertical-align: middle;
				margin: 0 10px 5px 0;
				font-family: Tahoma, Helvetica, sans-serif
			}
		
		#nav {
			height: 32px;
			width: 525px;
			float: right;
			margin: 30px 0 0 0;
		}
		
		#headerBorder {
			height: 19px;
			width: 895px;
			background:url(../images/square-bg-repeater.jpg);
			float: left;
			margin: 20px 0 0 0;
		}

	#strapline {
		height: 111px;
		padding: 30px 33px 0px 33px;
		position: relative;
	}
	
		#asterisk {
			position: absolute;
			top: 18px;
			right: 375px;
		}
	
		#strapline h1 {
			color: #333;
			font-size: 50px;
			font-weight: normal;
			line-height: normal;
		}
		
			#strapline h1 span {	
				color: #e31b24;
				font-family: "Times New Roman", Times, serif;
				font-size: 60px;
				position: relative;
				top: -20px;
			}
	
	#homepageShowcase {
		height: 285px;
		padding: 0 33px;
	}
	
	#homepageClients {
		padding: 37px 33px 0 33px;
	}
	
		#homepageClients img {
			float: left;
			margin: 0 48px 0 0;
			border-right: 2px solid #e6e6e6;
			border-bottom: 2px solid #e6e6e6;
		}
		
		#homepageClients img.lastClient {
			margin: 0 0 0 3px;
		}
	
	#homepageLeft, #furtherLeft {
		width: 220px;
		float: left;
		font-weight: bold;
	}
	
	#homepageLeft {
		color: #e31b23;
		font-size: 14px;
	}
	
		#homepageLeft .firstHomeLi {
			padding-bottom: 175px;
		}
	
	#furtherLeft {
		color: #333;
		font-size: 12px;
		background: url(../images/furtherleftBG.gif) no-repeat  right top ;
		margin:  20px 0 0 0;
		padding: 10px 10px 20px 0;
		width: 182px;
		border-right: 1px dotted #b8b8b8;
		height: 100%;
	}
	
	#furtherLeft a {
		font-weight: normal;
		color: #333;
		display: block;
		padding: 0 10px 0 0;
	}
	
	#furtherLeft a:hover {
		text-decoration: none;
		color: #e31b24;
		background: url(/images/doublearrow.jpg) no-repeat right 6px;
	}
	
	#furtherLeft .NavSelected1 a {
		background: url(/images/doublearrow.jpg) no-repeat right 6px;
		color: #e31b24;
	}
	
	#furtherLeft .bulletHeading
	{
	        margin: 0 0 0 33px;
			padding: 0;
	}
	
		#homepageLeft ul, #furtherLeft ul {
			margin: 30px 0 0 33px;
			padding: 0;
			list-style: none;
		}
		
		#furtherLeft ul {
			margin: 15px 0 0 33px;
		}
		
			#furtherLeft ul ul {
				margin: 15px 0 0 15px;
			}
		
			#furtherLeft li.Level2 a {
				font-size: 11px;
				color: #999;
				padding: 0 30px 0 15px;
				background: url(/images/smallredarrow.jpg) no-repeat 0px 4px;
			}
			
			#furtherLeft li.Level2 a:hover {
				color: #e31b24;
			}
		
		#homepageLeft li, #furtherLeft li {
			margin: 10px 0 10px 0;
		}
		
		#furtherLeft li.Level2 {
			margin: 5px 0 8px 0;
			line-height: 1.1em;
		}
		
			#furtherLeft .closerUL {
				margin-top: 40px
			}
		
			#furtherLeft .closerUL li {
				margin:  0 0 5px 0;
			}
	
		
	* html #homepageLeft {
		width: 196px;
		height: 545px;
	}
	
	* html #furtherLeft {
		width: 196px;
		height: 545px;
	}
	
	#furtherContentWrap {
		width: 710px;
		min-height: 205px;
		float: left;
		margin:  20px 0 0 30px;
		position: relative;
	}
	
	#furtherContentWrap-wide {
		min-height: 205px;
		float: left;
		margin:  20px 0 0 30px;
		position: relative;
		width: 892px;
	}
	
		* html #furtherContentWrap {
			margin:  20px 0 0 30px;
			overflow: hidden;
		}
	
		#furtherContentWrap h1 {
			color: #333;
			font-size: 50px;
			font-weight: normal;
			line-height: normal;			
		}
		
		#furtherContentWrap h2 {
			color: #b3b3b3;
			font-size: 38px;
			margin: 20px 0;
			line-height: 0.9em;
			font-weight: normal;
			letter-spacing: -1px;
		}
		
		#furtherContentWrap h4 {
			margin: 0 0 20px 0;
			font-size: 24px;
			line-height: normal;
			color: #b8b8b8;
		}
		
		#furtherContentWrap h3 {
			margin: 0 0 20px 0;
			font-size: 17px;
		}
		
		#furtherContentWrap p {
			margin: 0 0 20px 0;
		}
		
		#furtherContentWrap img.borderedImg {
			border-right: 2px solid #999;
			border-bottom: 2px solid #999;
		}
		
		#furtherContentWrap h2.casestudyH2 {
			font-size: 25px;
			margin: 20px 0 30px 0;
		}
			
			#casestudyScreenshot img {
				margin: 0 0 20px 0;
			}
	
		.columnalContent {
			float: left;
			width: 185px;
			margin: 20px 60px 0 0;
			color: #666;
		}
		
		.columnalContent h3 {
			color: #333;
			font-size: 16px;
		}
		
		
		#ourLocation, #currentWork {
			border-top: 1px dotted  #b8b8b8;
			padding: 20px 0 0 0 ;
			margin: 20px 33px 0px 33px;
		}
		
		#currentWork {
			margin-bottom: 8px;
		}
		
			#currentWork span {
				font-weight: bold;
				font-size: 14px;
				color: #E31B23; 
				display: inline-block;
				margin: 0px 0 0 0;
				float: left;
			}

		
		.currentProject, #ourOffices, #ourLocationMap {
			float: right;
			background: #f0f0f0;
			padding: 10px;
			margin-left: 20px;
			width: 313px;
		}
		
		.currentProject {
			padding: 20px 10px 20px 20px;
		}
		
		 #ourOffices, #ourLocationMap {
		 	background: none;
			padding: 0;
			width: 333px;
		}
		
			.currentProject img {
				float: left;
				margin: 0 20px 0 0;
				border-right: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
			}
			
			.currentProject p {
				margin: 0 0 10px 0;
			}
		
		 #ourOffices, #ourLocationMap {
		 	background: none;
		}
		
		
		#servicesItems {
			clear: both;
		}
		
		.servicesItem {
			width: 185px;
			height: 220px;
			border-bottom: 1px solid #ddd;
			float: left;
			margin: 0 42px 20px 0;
			padding: 3px;
		}
		
		.servicesItem:hover {
			background: #f3f3f3;
		}
		
		.servicesItem a {
			display: inline-block;
			padding: 0 15px 0 0;
			background: url(/images/doublearrow.jpg) no-repeat right 3px;
			font-size: 11px;
			line-height: 1.2em;
			margin: 0 0 8px 0;
		}
		
		.endItem {
			margin-right: 0;
		}
		
		.servicesImg {
			float: right;
			margin: -30px 5px 20px 00px;
		}
		
		#other-stuff-we-do, #other-staff {
			width: 895px;
			float: left;
			min-height: 200px;
			margin:  20px 33px 0 33px;
			padding: 30px 0 0 0 ;
			border-top: 1px dotted #b8b8b8;
		}
		
			#other-stuff-we-do h3, #other-staff h3 {
				color: #e31b24;
				width: 165px;
				border-right: 1px dotted #b8b8b8;
				height: 328px;
				padding: 12px 0 0 0;
				float: left;
			}
			
			#other-staff h3 {
				height: 228px
			}
			
			.stuffWeDo, .otherStaff {
				width: 310px;
				height: 320px;
				background: #f0f0f0;
				float: left;
				margin: 0 0 0 34px;
				padding: 10px;
			}
			
			.otherStaff {
				height: 220px;
			}
		
		.team-member {
			width: 176px;
			float: left;
			margin: 0 70px 30px 0;
			position: relative;
		}
		
		.team-member img {
			margin: 0 0 10px 0;
		}
		
		.third-child {
			margin-right: 0px;
		}
		
			.team-extra-btn {
				position: absolute;
				top: 80px;
				right: 0px;
				font-size: 11px;
				display: block;
				padding: 0 0 0 10px;
				background: url(../images/extra-arrow.gif) no-repeat 2px 6px;
			}
			
		.portfolioSpacer {
			padding: 20px 0 0 0;
			border-bottom: 1px dotted #b8b8b8;
			margin: 0 0 18px 0;
		}
		
			.portfolioSpacer img {
				border-right: 2px solid #ccc;
				border-bottom: 2px solid #ccc;
				margin: 0 82px 0px 0;
				padding: 0  20px;
				border-left: none; 
				border-top: none;
			}
			
			.portfolioSpacer img:hover {
				border-right: 2px solid #db2f36;
				border-bottom: 2px solid #db2f36;
				text-decoration: none;
			}
			
			.portfolioSpacer img.third {
				margin: 0;
			}
			
			.portfolioSpacer a {
				margin: 0 0 30px 0;
				padding: 0;
				display: inline-block;
			}
			
			.portfolioSpacer a:hover {
				text-decoration: none;
			}
		
		.contactDetails {
			width: 160px;
			float: right;
			background: #f6f6f6;
			border-top: 1px solid #ddd;
			border-bottom: 1px solid #ddd;
			padding: 10px;
			font-size: 11px;
			line-height: 1.2em;
			clear: right;
			margin: 0 0 20px 0;
		}
		
			#furtherContentWrap .contactDetails p {
				padding: 20px 0 0 0;
				margin: 0;
			}
			
			#map span, #map a, .gmnoprint {
				display: none;
			}
			
			#smc {
				display: block;
			}
		
		#contactForm {
			width: 490px;
			border-bottom: 7px solid #f6f6f6;
		}

			#contactForm label {
				display: inline-block;
				width: 115px;
				vertical-align: top
			}
			
			#contactForm .buttoninput {
				color: #fff;
				background: #676767;
				border: none;
				font-size: 12px;
				font-weight: bold;
				padding: 5px;
				vertical-align: middle;
				margin: 0 10px 5px 0;
				font-family: Tahoma, Helvetica, sans-serif
			}
		
			.contactSpacer1, .contactSpacer2 {
				padding: 10px;
			}
			
			.contactSpacer1 {
				background: #f6f6f6;
			}
			
			.contactTextInput {
				width: 141px;
				height: 15px;
				background: url(../images/inputBG.jpg) top right;
				border: none;
				color: #666;
				font-size: 11px;
				padding: 4px 5px;
			}
			
			.contactTextInput:focus {
				background: url(../images/inputBG-active.jpg) top right;
			}
			
			.contactTextInputError {
				width: 141px;
				height: 15px;
				background: url(../images/inputBG-active.jpg) top right;
				border: none;
				color: #666;
				font-size: 11px;
				padding: 4px 5px;
			}
			
			.contactTextarea {
				width: 218px;
				height: 71px;
				background: url(../images/textarea-BG.jpg) bottom left;
				border: none;
				color: #666;
				font-size: 11px;
				padding: 4px 5px;
				font-family: Arial, Helvetica, sans-serif;
			}
			
			.contactTextarea:focus {
				background: url(../images/textarea-BG-active.jpg) bottom left;
			}
			
			.contactTextareaError {
				width: 218px;
				height: 71px;
				background: url(../images/textarea-BG-active.jpg) bottom left;
				border: none;
				color: #666;
				font-size: 11px;
				padding: 4px 5px;
				font-family: Arial, Helvetica, sans-serif;
			}
	
	#homepageContentWrap {
		width: 735px;
		min-height: 250px;
		float: left;
		padding-top: 28px;
	}
	
		.homeContentItem { 
			float: left;
			background: #f0f0f0;
			width: 288px;
			min-height: 100px;
			margin: 0 35px 42px 0;
			padding: 18px 21px 10px 21px;
		}
		
		#item1, #item2 {
			height: 130px;
		}
		
		
		#newsItem p {
			margin: 0 0 7px 0;
			padding: 0 0 7px 0;
			border-bottom: 1px dotted #b8b8b8;
			font-size: 14px;
			color: #222;
			font-weight: bold;
		}
		
			#newsItem a {
				color: #222;
			}
		
			#newsItem p span.homeDate {
				color: #999;
				display: inline-block;
				margin: 0 10px 0 0;
			}
			
			#newsItem p#lastNewsItem {
				margin: 0;
			}
			
			#twitterItem {
				line-height: 1.25em;
			}
			
				#twitterItem img {
					float: left;
					margin: 0 10px 0 0;
				}
				
				#twitterItem em {
					color: #333;
					font-size: 11px;
				}
				
				#twitterLink {
					background: url(../images/twitterLogo.jpg) no-repeat;
					display: inline-block;
					height: 20px;
					padding: 2px 0 0 30px;
					margin: -2px 0 7px 0;
					color: #666;
				}
				
				.twitterName {
					display: inline-block;
					margin: 0 20px 0 0;
					font-size: 12px;
				}
				
			#item2, #twitterItem {
				float: right;
				margin: 0 28px 42px 0;
			}
					
			#QAItem, #lastItem {
				height: 110px;
				margin: 0 35px 12px 0;
			}
				
			#QAItem .webQA {
				margin: 0 20px 0 0;
			}
			
			#lastItem img {
				float: left;
				margin: 0 10px 0 0;
			}
			
			#webBriefDL {
				display: inline-block;
				padding: 2px 0 0 0;
				margin: -2px 0 7px 0;
				color: #666;
			}
		
	
	#footerTopborder {
		height: 19px;
		width: 895px;
		background:url(../images/square-bg-repeater.jpg);
		margin: 10px 33px 20px 33px;
		float: left;
	}
	
	#footer {
		height: 318px;
		padding: 0 33px;
		width: 895px;
		font-size: 11px;
		line-height: 2em;
		background: url(../images/footer.jpg) bottom left repeat-x;
	}
	
		#footer ul {
			float: left;
			margin: 0 19px 0 0;
			padding: 0;
			list-style: none;
			width: 160px;
		}
		
		#footer ul#firstUL {
			line-height: 1.5em;
		}
		
			#footer ul#firstUL li.firstLI {
				margin: 0 0 28px 0;
			}
				
		#footer ul#lastUL {
			width: auto;
			margin: 0;
		}
		
		#footer li.firstLI {
			color: #e31b24;
			font-size: 14px;
			font-weight: bold;
			margin: 0 0 20px 0;
			line-height: 1.5em;
		}
		
		#footer li.spacedLI {
			margin-bottom: 10px;
		}
		
		#footer a {
			color: #9a9a9a;
			font-weight: normal;
		}

/* ie6 */

* html .homeContentItem {
	height: 100px;
}

/* NEWS ARCHIVE PAGE */

#archiveYearButtons {
	width: 100%;
	float: left;
	height: 30px;
	background: #d0d0d0;
}

	#archiveYearButtons a {
		height: 26px;
		width: 8.3%;
		display: inline-block;
		float: left;
		text-align: center;
		padding-top: 4px;
	}

	#archiveYearButtons a:hover {
		text-decoration: none;
		background: #eee;
	}
	
	#archiveYearButtons a.directorySubmitSelected {
		background: #eee;
	}

#archiveMonthButtons {
	width: 100%;
	float: left;
	height: 30px;
	background: #eee;
	margin-bottom: 20px;
}

	#archiveMonthButtons a {
		height: 26px;
		width: 8.3%;
		display: inline-block;
		float: left;
		text-align: center;
		padding-top: 4px;
		color: #666;
		font-size: 10px;
	}
	
	.ie #archiveMonthButtons a {
		width: 8.27%;
	}
	
	#archiveMonthButtons a.directorySubmitSelected {
		color: #e31b24;
		font-size: 12px;
		text-transform: uppercase;
	}

	#archiveMonthButtons a:hover {
		text-decoration: none;
		background: #e0e0e0;
	}

.newsList {
	width: 100%;
	padding: 0 0 40px 0;
}

.newsRepeater {
	border-bottom: 1px solid #cdcdcd;
}
	
.newsListImage {
	float: right;
	margin-bottom: 10px;
}

.readMoreBtn {
	margin-top: 10px;
	display: block;
}

.newsContent img {
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
}

/* NEWS ARTICLE PAGE */

.newsBackLinkTop {
	float: right;
}