/* ========================================================================================
33Hz: Main Layout 
Version:1.0
Author: Raphael Marsh
Email: raphael@on-brand.co.uk
Last Updated: 10th January 2010
=========================================================================================== */

/* STANDARD FORMATTING 
=========================================================================================== */
* {
	margin: 0;
 	padding: 0;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:70%;
	margin:0;
	padding:0;
	min-width:911px;
	text-align:left;
	line-height:140%;
	background:#000000;
}


/* Generic 
=========================================================================================== */
h1 {
	font-size: 2.4em;
	margin:0;
}
h2 {
	font-size: 2.0em;
	margin:0;
}
h3 {
	margin:0;
}
img {
  border:none;
}
p {
	color:#3e4562;
	font-size:110%;
	margin:0;
}
ul {
	list-style-type:none;
	margin:0;
	padding:0;
}
a:link {
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
a:active {
	text-decoration:none;
}
.left {
	float:left;
}
.right {
	float:right;
}

/* Structure 
=========================================================================================== */
div#wrapper {
	width: 911px; 
	margin: auto; 
	text-align: left;
}
#branding {
	height: 100px;
	background:url(../images/generic/branding-bg.gif) bottom right repeat-x;
}
#content {
	float:left;
	position:relative;
	display:inline;
	width:911px;
	margin-top:20px;
}
#mainPanel {
	float:left;
	display:inline !important;
	left:0;
	width:605px;
	height:299px;
	background:#65c69d url(../images/generic/mainPanel-bg.jpg) bottom right no-repeat;
}
#middlePanel {
	position:relative;
	display:inline;
	left:300px;
	width:299px;
}
#featurePanel {
	float:right;
	position:relative;
	bottom:0;
	width:299px;
}
.clear {
	clear: both;
    text-indent: -9999px;
}

/* Branding Assets
=========================================================================================== */
#logo {
	float:left;
	margin-top:33px;
}
p#Strapline { 
	float:left;
	position:relative;
	top:39px;
	font-size:10%;
	width:261px;
	height: 7px;
	text-indent: -5000px;
	background:url(../images/generic/branding-strap.gif);
}
p#Year { 
	float:right;
	position:relative;
	display:inline;
	top:33px;
	font-size:10%;
	width:47px;
	height: 29px;
	text-indent: -5000px;
	background:url(../images/generic/branding-08.gif);
}

			
/* Top Tab Navigation 
=========================================================================================== */
#primaryNav {
 	position:relative; display:block; width: 811px; height:66px; margin-bottom:3px;
	background:url(../images/navigation/nav-shine.gif) bottom left no-repeat; z-index:0;
}

#primaryNav ul li {
	float: left; width:102px; height:43px; display:block; cursor:pointer;
	text-indent: -5000px;
}
/*so ALL browsers hide text...*/
#primaryNav ul li a {
	height:43px; display:block; overflow:hidden;
}
#primaryNav ul li.who { background:url(../images/navigation/who_a.jpg); }
#primaryNav ul li.who:hover { background:url(../images/navigation/who_b.jpg); }
#primaryNav ul li.who-active { background:url(../images/navigation/who_b.jpg); }

#primaryNav ul li.what { background:url(../images/navigation/what_a.jpg); }
#primaryNav ul li.what:hover { background:url(../images/navigation/what_b.jpg); }
#primaryNav ul li.what-active { background:url(../images/navigation/what_b.jpg); }

#primaryNav ul li.why { background:url(../images/navigation/why_a.jpg); }
#primaryNav ul li.why:hover { background:url(../images/navigation/why_b.jpg); }
#primaryNav ul li.why-active { background:url(../images/navigation/why_b.jpg); }

#primaryNav ul li.when { background:url(../images/navigation/when_a.jpg); }
#primaryNav ul li.when:hover { background:url(../images/navigation/when_b.jpg); }
#primaryNav ul li.when-active { background:url(../images/navigation/when_b.jpg); }

#primaryNav ul li.work { background:url(../images/navigation/work_a.jpg); }
#primaryNav ul li.work:hover { background:url(../images/navigation/work_b.jpg); }
#primaryNav ul li.work-active { background:url(../images/navigation/work_b.jpg); }
#primaryNav ul li.work-active:hover { background:url(../images/navigation/work_c.jpg); }

#primaryNav ul li.where { background:url(../images/navigation/where_a.jpg); }
#primaryNav ul li.where:hover { background:url(../images/navigation/where_b.jpg); }
#primaryNav ul li.where-active { background:url(../images/navigation/where_b.jpg); }

			
/* Content
=========================================================================================== */

#mainPanel h1 {
	color:#FFF;
	font-size:170%;
	font-weight:normal;
	text-transform:uppercase;
	padding:9px 10px;
	width:auto;
	line-height:110%;
	border-bottom:#000 1px solid;
	background-color:#44709d;
}
#mainPanel p.highlight {
	color:#FFF;
}
#mainPanel p.highlight a {
	color:#3e4562;
}
.infoHolder {
	padding:10px 10px 26px 10px;
}
.long .infoHolder { /*add "long" body class when you want a scrollable main content panel*/
	height:223px;
	width:auto;
	overflow:auto;
}

/*Swapping live text for graphical titles*/
h1.home { text-indent: -5000px; background:url(../images/generic/home-title.gif) left no-repeat; }
h1.who { text-indent: -5000px; background:url(../images/generic/who-title.gif) left no-repeat; }
h1.what { text-indent: -5000px; background:url(../images/generic/what-title.gif) left no-repeat; }
h1.whatsnew { text-indent: -5000px; background:url(../images/generic/whatsnew-title.gif) left no-repeat; }
h1.credit { text-indent: -5000px; background:url(../images/generic/credit-title.gif) left no-repeat; }
h1.why { text-indent: -5000px; background:url(../images/generic/why-title.gif) left no-repeat; }
h1.when { text-indent: -5000px; background:url(../images/generic/when-title.gif) left no-repeat; }
h1.where { text-indent: -5000px; background:url(../images/generic/where-title.gif) left no-repeat; }
h1.terms { text-indent: -5000px; background:url(../images/generic/terms-title.gif) left no-repeat; }
h1.privacy  { background: url("../images/generic/privacy-title.gif") no-repeat left 50%; text-indent: -5000px }
h1.clients { background: url("../images/generic/clients-title.gif") no-repeat left 50%; text-indent: -5000px }
h1.cbig { background: url("../images/generic/cbig-title.gif") no-repeat left 50%; text-indent: -5000px }
h1.sitemap { text-indent: -5000px; background:url(../images/generic/sitemap-title.gif) left no-repeat; }
h2.contact { text-indent: -5000px; background:url(../images/generic/contact-title.gif) left no-repeat; height:29px; }
h2.thanks { text-indent: -5000px; background:url(../images/generic/thanks-title.gif) left no-repeat; height:37px; }
h2.error { text-indent: -5000px; background:url(../images/generic/error-title.gif) left no-repeat; height:37px; }

.client #mainPanel h1 { /*make client header bgs green*/
	background-color:#64c59c;
}
.photography #mainPanel h1 { /*make photography header bgs green*/
	background-color:#64c59c;
}
h1.closer { text-indent: -5000px; background:url(../images/work/closer-title.gif) left no-repeat; }
h1.ctc { text-indent: -5000px; background:url(../images/work/ctc-title.gif) left no-repeat; }
h1.mrsbs { text-indent: -5000px; background:url(../images/work/mrsbs-title.gif) left no-repeat; }
h1.smsradar { text-indent: -5000px; background:url(../images/work/smsradar-title.gif) left no-repeat; }
h1.tetlow { text-indent: -5000px; background:url(../images/work/tetlow-title.gif) left no-repeat; }
h1.eyecare { text-indent: -5000px; background:url(../images/work/eyecare-title.gif) left no-repeat; }
h1.planit { text-indent: -5000px; background:url(../images/work/planit-title.gif) left no-repeat; }
h1.eu2uk { text-indent: -5000px; background:url(../images/work/eu2uk-title.gif) left no-repeat; }
h1.bruzas { text-indent: -5000px; background:url(../images/work/bruzas-title.gif) left no-repeat; }
h1.wrs { text-indent: -5000px; background:url(../images/work/wrs-title.gif) left no-repeat; }
h1.midkent { text-indent: -5000px; background:url(../images/work/midkent-title.gif) left no-repeat; }
h1.tilfen { text-indent: -5000px; background:url(../images/work/tilfen-title.gif) left no-repeat; }
h1.eco { text-indent: -5000px; background:url(../images/work/eco-title.gif) left no-repeat; }
h1.fmc { text-indent: -5000px; background:url(../images/work/fmc-title.gif) left no-repeat; }
h1.sal { text-indent: -5000px; background:url(../images/work/sal-title.gif) left no-repeat; }
h1.dls { text-indent: -5000px; background:url(../images/work/dls-title.gif) left no-repeat; }
h1.lazzati { text-indent: -5000px; background:url(../images/work/lazzati-title.gif) left no-repeat; }
h1.photography { text-indent: -5000px; background:url(../images/work/photo-title.gif) left no-repeat; }


/* Work Layout
=========================================================================================== */
.homePanel {
	float:left;
	width:299px;
	height:95px;
	margin-bottom:7px;
	background:#FFF url(../images/generic/homepanel-bg.gif) bottom right no-repeat;
}
	.homePanel.bottom {
		margin-bottom:0px;
	}
	.homePanel img {
		float:right;
		padding-right:11px;
	}
		.homePanel .text {
			float:left;
			display:block;
			padding:10px 0 0em 10px;
			width:210px;
		}
	
	.homePanel .text h3 {
		font-size:150%;
		font-weight:normal;
		line-height:120%;
		padding-bottom:15px;
	}
		.homePanel .text h3 a {
			color:#686868;
		}
	.homePanel .text p {
		font-size:100%;
		line-height:120%;
		color:#666666;
	}
		.homePanel .text p a {
			color:#64c69d;
			font-weight:bold;
			text-transform:uppercase;
		}


/* Work Layout
=========================================================================================== */
#workNav {
	float:right;
	width:41px;
	margin-top:-30px;
	right:0;
	z-index:100;
}
	#workNav li a {
		display:block;
		cursor:pointer;
	}
		#workNav li.page1 {
			float:left;
			width:18px;
			height:29px;
			background:url(../images/work/Wonea.jpg) no-repeat;
		}
			#workNav li.page1 a { width:18px; height:29px; }
			#workNav li.page1:hover { background:url(../images/work/Woneb.jpg) no-repeat !important; }
			#workNav li.page1.active { background:url(../images/work/Wonec.jpg) no-repeat; }

		#workNav li.page2 {
			float:left;
			width:23px;
			height:29px;
			background:url(../images/work/Wtwoa.jpg) no-repeat;
		}
			#workNav li.page2 a { width:23px; height:29px; }
			#workNav li.page2:hover { background:url(../images/work/Wtwob.jpg) no-repeat !important; }
			#workNav li.page2.active { background:url(../images/work/Wtwoc.jpg) no-repeat; }


.workPanel {
	float:left;
	width:299px;
	height:95px;
	margin-right:7px;
	margin-bottom:7px;
	background:#FFF url(../images/work/workPanel-bg.gif) bottom right no-repeat;
}
	.workPanel.end {
		margin-right:0px;
	}
	.workPanel.bottom {
		margin-bottom:0px;
	}
	.workPanel.titleBox {
		background:#FFF url(../images/work/workTitle-bg.jpg) bottom right no-repeat;
}

		.workPanel .text {
			float:left;
			display:block;
			padding:7px 6px 0 8px;
			width:125px;
		}
		.workPanel .image {
			float:right;
			display:block;
			width:149px;
			text-align:center;
		}
	
	.workPanel .text h3 {
		font-size:90%;
		line-height:120%;
		padding-bottom:3px;
		text-transform:uppercase;
	}
		.workPanel .text h3 a {
			color:#64c69d;
		}
	.workPanel .text a {
		text-decoration:none;
	}
		.workPanel .text a:hover {
			text-decoration:underline;
		}
	.workPanel .text p {
		font-size:90%;
		line-height:130%;
		color:#8d8d8d;
	}
		.workPanel .text p a {
			color:#64c69d;
			font-weight:bold;
			text-transform:uppercase;
		}

/* Contact Layout
=========================================================================================== */
.contact .infoHolder h3 {
	float:left;
	font-size:130%;
	color:#314673;
	padding-bottom:2px;
	display:block;
	width:100%;
	border-bottom:#4d9389 1px solid;
}
		.contact .address {
			float:left;
			position:relative;
			display:inline;
			margin:8px 0 15px 0;
			width:135px;
		}
		.contact .action {
			position:relative;
			display:inline;
			margin:8px 0 15px 0;
			float:right;
			width:140px;
			font-weight:bold;
		}
			.contact .action a {
				color:#FFF;
			}
	.contact .infoHolder p {
		font-size:110%;
		color:#ffffff;
	}
		.contact .infoHolder p.phone {
			color:#314673 !important;
		}

/* Contact Form
=========================================================================================== */
.formHolder {
	margin:15px;
}
.formHolder .intro {
	float:left;
	width:170px;
	margin-top:15px;
}
.formHolder .thankyou {
	float:left;
	width:99%;
	margin-top:15px;
}
		.formHolder .thankyou p a {
			color:#FFF;
			font-weight:bold;
		}
	.formHolder .intro p {
		font-size:100%;
	}
.formHolder form {
	float:right;
	width:370px;
}

fieldset {
	padding: 15px 15px 8px 0;
	border:0;
}
form p {
	float:left;
	position: relative;
	width: 100%;
	font-size:100%;
	font-weight:bold;
	padding-top:1px;
}
label {
	float: left;
	width: 120px;
	padding-bottom:3px;
}
label.comments {
	width: 300px;
	margin-top:6px;
}
input {
	width: 200px;
}
input[type="text"], textarea {
	border-top: 2px solid #999;
	border-left: 2px solid #999;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
/* style form elements on focus */
input:focus, textarea:focus {
	background: #ffc;
}

label.error {
	position: absolute;
	top: -1px;
	right: 35px;
	padding: 3px;
	width:200px;
	color: #da3939;
	font-size: 1.0em;
	text-align: right;
	font-style: italic;
	font-weight: normal;
}
input.submit-button {
	float:left;
	position:absolute;
	display:block;
	width:80px;
	
}

	
/* Layout Swapping Rules
=========================================================================================== */

/*Creates 2 Column layout*/
.twoColumn #middlePanel {
	display:none; left:0;
}
.twoColumn #content {
	background:url(../images/generic/featurePanel-bg.jpg) right bottom no-repeat;
}

/*Special Rules for Why 2 Column layout because of Flash movie reflection*/
.twoColumn.why #mainPanel  {
	height:343px;
	background:url(../images/generic/mainPanel-why.jpg) right bottom no-repeat;
}
.twoColumn.why #content  {
	background:none !important;
}
.twoColumn.why #footer {
	background:none; padding:0;
}

/*Creates 3 Column layout*/
.threeColumn #mainPanel {
	width:299px;
}
.threeColumn #middlePanel {
	width:299px;
	float:left;
	position:absolute;
	margin-left:6px;
}

/*Creates 3 Column feature panel grid*/
.client #mainPanel {
	width:299px;
	height:299px;
	background:#c9c9c9 url(../images/generic/client-mainPanel-bg.gif) bottom no-repeat;
}
.client #mainPanel .infoHolder {
	padding-bottom:25px;
}
.client #middlePanel {
	width:299px;
	float:left;
	position:absolute;
	margin-left:6px;
}
.client .workPanel {
	height:8em;
	min-height:95px;
}

/*New 2 column layout small > big panels*/
.contact #mainPanel {
	width:299px;
	height:299px;
}
.contact #middlePanel {
	float:right;
	width:605px;
	height:299px;
	left:0 !important;
	background:#c9c9c9 url(../images/generic/client-mainPanel-bg.gif) right bottom no-repeat;
}
.contact #featurePanel {
	display:none;
}

/*Special Rules on new 2 Column layout because of Flash movie reflection*/
.photography #mainPanel {
	width:299px;
	height:343px;
	background:#c9c9c9 url(../images/work/photo-mainbg.gif) bottom no-repeat;
}
.photography #middlePanel {
	float:right;
	width:605px;
	left:0 !important;
	height:343px;
	background:#c9c9c9 url(../images/generic/client-mainPanel-bg.gif) right bottom no-repeat;
}
.photography #featurePanel {
	display:none;
}	


/* Footer
=========================================================================================== */
#footer { 
	display:block;
	clear: both;
	width:911px;
	padding-top:44px;
} 
	#footer p {
		font-size:90%;
		color:#666;;
		margin-top:6px;
	}
	#footer a {
		text-decoration:none;
		color:#3e5d8b;
	}
		#footer a:hover {
			color:#fff;
			text-decoration:underline;
		}

/* Footers Background Swapping - Reflections
=========================================================================================== */
.twoColumn #footer { 
	background:url(../images/generic/footer01-bg.gif) top left no-repeat;
} 
.threeColumn #footer { 
	background:url(../images/generic/footer-when.gif) top left no-repeat;
} 
.threeColumn.homepage #footer {
	background:url(../images/generic/footer-homepage.gif) top left no-repeat;
}
.work #footer {
	background:url(../images/generic/footer-work.gif) top left no-repeat;
}
.client #footer {
	background:url(../images/generic/footer-client.gif) top left no-repeat;
}
.contact #footer {
	background:url(../images/generic/footer-contact.gif) top left no-repeat;
}
.photography #footer {
	background:none; padding:0;
}