@charset "utf-8";

/* Constants
---------------------------- */

* {
	margin:0;
	padding:0;
	}

body {
	font-size:62.5%;
	font-family:Arial, Helvetica, sans-serif;
	background:url(../images/bg.png) repeat-x top;
	}

#wrapper {
	width:960px;
	height:auto;
	margin:0 auto;
	background:#fff;
	}

.aural {
	display:none;
	}
.white {
	color:#fff;
	}
.large {
	font-size:1.4em;
	}
.clearfix {
	clear:both;
	}
.blue {
	color:#26298E;
	}


/* Masthead
------------------------------- */

#masthead {
	width:962px;
	height:120px;
	float:left;
	background:#0e59aa url(../images/masthead.png) no-repeat top left;
	position:relative;
	}
	#logo {
		width:330px;
		height:38px;
		position:absolute;
		top:38px;
		left:48px;
		}
		#logo h1 {
			background:url(../images/logo.png) no-repeat;
			width:330px;
			height:38px;
			}
		#logo h1 a {
			width:330px;
			height:38px;
			display:block;
			}
			
	#mast_cta {
		width:500px;
		height:auto;
		position:absolute;
		top:38px;
		right:30px;
		text-align:right;
		}
		#mast_cta p {
			color:#B4DFF3;
			font-size:1.2em;
			font-weight:bold;
			}
		
		
/* Navigation 
------------------------------- */

#nav {
	width:962px;
	height:34px;
	float:left;
	background:url(../images/nav_bg.png) repeat-x top;
	}
	#nav ul {
		font-size:1.3em;
		padding:6px 0 0 10px;
		}
		#nav ul li {
			float:left;
			list-style:none;
			border-right:1px solid #fff;
			}
			#nav ul li.end {
				border-right:none;
				}
			#nav ul li a {
				text-decoration:none;
				color:#fff;
				padding:0 18px;
				display:block;
				}
				#nav ul li a:hover {
					color:#2E3192;
					}
			#nav ul li.active a {
				color:#2E3192;
				}

/* Page Content
-------------------------------- */

#content {
	width:932px;
	height:auto;
	float:left;
	padding:20px 15px 5px;
	background:#fff;
	position:relative;
	}
	
#work_content {
	width:700px;
	height:auto;
	float:left;
	background:url(../images/moobg.png) repeat-x;
	position:relative;
	padding-right:262px;
	}

#who_content, #offer_content, #workWith_content {
	width:750px;
	height:auto;
	float:left;
	background:url(../images/img_who.png) 20px 20px no-repeat #fff;
	position:relative;
	padding-right:212px;
	padding-bottom:30px;
	}
	#offer_content {
		background:url(../images/img_offer.png) 70px 20px no-repeat #fff;
		}
	#workWith_content {
		background:url(../images/img_workWith.png) 30px 20px no-repeat #fff;
		padding-bottom:10px;
		}
		
#contact_content {
	width:700px;
	height:auto;
	float:left;
	background:#fff;
	position:relative;
	padding:0 262px 20px 0;
	}
	#map {
		width:693px;
		height:300px;
		float:left;
		margin-left:5px;
		z-index:1;
		}
		#shout {
			width:200px;
			height:200px;
			position:absolute;
			top:100px;
			left:0;
			background:url(../images/img_contact.png) no-repeat;
			z-index:100;
			}
	
/*HOME PAGE*/

#homeImagePanel {
	width:450px;
	height:auto;
	float:left;
	background:url(../images/img_home.png) 0px 0px no-repeat;
	position:relative;
	padding-left:220px;
	}
	#homeCopy {
		width:450px;
		height:auto;
		float:left;
		padding-bottom:10px;
		}
		#homeCopy h2 {
			color:#26298E;
			font-size:2.2em;
			font-weight:normal;
			padding-bottom:10px;
			}
			#homeCopy h2 span {
				color:#30A4DC;
				font-size:0.9em;
				font-weight:bold;
				line-height:22px;
				}
		#homeCopy p {
			font-size:1.2em;
			color:#666;
			line-height:17px;
			padding-bottom:10px;
			}
		#homeCopy a {
			color:#5C82BE;
			font-size:1.1em;
			text-decoration:none;
			font-weight:bold;
			}
			#homeCopy a:hover {
				color:#666;
				}

/* Page Copy Panel
-------------------------------- */

#pageContent, #pageContentWhat, #pageContentWho, #pageContentWith {
	width:420px;
	height:auto;
	float:left;
	padding:30px 0 0 260px;
	}
	#pageContentWhat {
		padding:20px 0 70px 240px;
		}
	#pageContentWho {
		padding:20px 0 0 240px;
		}
	#pageContentWith {
		padding:20px 0 30px 240px;
		}
	#pageContent h2, #pageContentWhat h2, #pageContentWho h2, #pageContentWith h2, #contactContent h2, #pageContentGrey h2 {
		color:#30A4DC;
		font-size:1.8em;
		padding-bottom:15px;
		}
	#pageContent h3, #pageContentWhat h3, #pageContentWho h3, #pageContentWith h3, #contactContent h3, #pageContentGrey h3 {
		color:#30A4DC;
		font-size:1.5em;
		padding:0 0 6px;
		}
	#pageContent p, #pageContentWhat p, #pageContentWho p, #pageContentWith p, #contactContent p, #pageContentGrey p {
		font-size:1.2em;
		padding-bottom:6px;
		color:#666;
		line-height:17px;
		}
	ul#pageList {
		float:left;
		margin-left:20px;
		}
		ul#pageList li {
			font-size:1.2em;
			color:#666;
			padding-bottom:4px;
			}
		
		blockquote {
			color:#26298E;
			font-size:1.4em;
			font-style:italic;
			padding-bottom:10px;
			line-height:18px;
			}
		
		.callOut {
			width:94%;
			height:auto;
			float:left;
			padding:3%;
			border:1px solid #30A4DC;
			-webkit-border-radius:15px;
			-moz-border-radius:15px;
			border-radius:15px;
			margin:5px 0 10px;
			}

#pageContentGrey {
	width:670px;
	height:auto;
	float:left;
	padding:30px 0 0 260px;
	}
	#pageContentGrey h3 {
		color:#333;
		}
		
		#tweetPanel2 p {
			font-size:1.1em;
			color:#666;
			line-height:17px;
			padding-bottom:6px;
			}

#contactContent {
	width:auto;
	height:auto;
	float:left;
	padding:20px;
	}
	.address {
		width:auto;
		height:auto;
		float:left;
		padding:10px 50px 0 0;
		}
		.address p {
			color:#30A4DC;
			font-weight:bold;
			}
	#contactForm {
		padding-top:10px;
		}
	#contactForm p {
		color:#666;
		font-size:1.2em;
		padding-bottom:5px;
		}
	#contactForm input.form, #contactForm textarea.form {
		border:1px solid #eaeaea;
		width:206px;
		margin-bottom:5px;
		color:#30A4DC;
		font-size:1.1em;
		padding:3px 2px;
		}
		#contactForm textarea.form {
			height:70px;
			font-size:11px;
			font-family:Arial, Helvetica, sans-serif;
			}
	#contactForm input.submit {
		width:160px;
		height:30px;
		background:#30A4DC;
		margin-left:25px;
		border:1px solid #eaeaea;
		color:#fff;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		cursor:pointer;
		}
		#contactForm input.submit:hover {
			background:#eaeaea;
			border:1px solid #999;
			color:#666;
			}
			
	#logoPanel {
		width:700px;
		float:left;
		padding:10px 0 0 260px;
		}
		#logoPanel ul {
			list-style:none;
			}
			#logoPanel ul li {
				float:left;
				}
	
	
/* Support Panels
-------------------------------- */

.supportPanel {
	width:338px;
	height:auto;
	float:left;
	background:url(../images/panel_bg.png) repeat-y;
	padding-right:5px;
	}
	.supportTop {
		width:316px;
		height:auto;
		float:left;
		background:url(../images/panel_top.png) no-repeat top;
		text-align:center;
		padding:10px 12px 0 10px;
		}
		.supportTop h3 {
			color:#2C5BA9;
			font-size:1.6em;
			padding-bottom:18px;
			}
		.supportTop p {
			font-size:1.2em;
			color:#666;
			padding-bottom:10px;
			line-height:17px;
			}
		.supportTop ul {
			padding:0 0 5px;
			color:#2C5BA9;
			font-weight:bold;
			list-style:none;
			font-size:1.2em;
			}
			.supportTop ul li {
				padding-bottom:8px;
				}
		.supportTop a, .supportTop span {
			color:#2C5BA9;
			font-size:1.4em;
			text-decoration:none;
			font-weight:bold;
			}
			.supportTop a:hover {
				color:#666;
				}
	.supportBottom {
		width:338px;
		height:25px;
		float:left;
		background:url(../images/panel_bottom.png) no-repeat bottom;
		}

	.supportExtra {
		border-top:1px solid #C8E9F6;
		margin-top:10px;
		padding-top:6px;
		}
		.supportExtra p {
			padding:0;
			}
		.supportExtra h4 {
			color:#2C5BA9;
			font-size:1.9em;
			}

/* TWEET PANEL
----------------------------------- */

#tweetPanel, #tweetPanel2, #tweetPanel3, #tweetPanel4 {
	width:245px;
	height:420px;
	position:absolute;
	top:86px;
	right:15px;
	background:url(../images/tweet_bg.png) repeat-y;
	z-index:9999;
	}
#tweetPanel2 {
	height:315px;
	}
#tweetPanel3 {
	height:360px;
	}
#tweetPanel4 {
	height:285px;
	}
	#tweetContent {
		width:210px;
		height:360px;
		position:absolute;
		top:-93px;
		left:15px;
		z-index:98;
		}
		#tweetContent h2 {
			color:#2C5BA9;
			font-size:1.5em;
			padding-bottom:7px;
			border-bottom:1px solid #C8E9F6;
			}
			#tweetContent h2 a {
				text-decoration:none;
				color:#2c5ba9;
				}
				#tweetContent h2 a:hover {
					color:#666;
					}
	#bird {
		width:73px;
		height:74px;
		position:absolute;
		background:url(../images/bird.png) no-repeat;
		top:-148px;
		right:10px;
		z-index:99;
		}
	#tweetPanelTop {
		width:245px;
		height:106px;
		float:left;
		background:url(../images/tweet_top.png) top no-repeat;
		position:absolute;
		top:-106px;
		}
	#tweetPanelBottom {
		width:245px;
		height:26px;
		float:left;
		background:url(../images/tweet_bot.png) no-repeat;
		position:absolute;
		bottom:0;
		}
	#tweet ul {
		padding-top:10px;
		}
		#tweet ul li {
			font-size:1.2em;
			list-style:none;
			padding-bottom:10px;
			border-bottom:1px solid #C8E9F6;
			margin-bottom:10px;
			line-height:17px;
			color:#666;
			}
			#tweet ul li a {
				color:#26298E;
				text-decoration:none;
				}
	#links {
		width:160px;
		position:absolute;
		bottom:10px;
		left:15px;
		z-index:97;
		}
		#links ul {
			}
			#links ul li {
				list-style:none;
				}
				#links ul li.linkSkype a {background:url(../images/skype.png) 10px 7px no-repeat;}
					#links ul li.linkSkype a:hover {background:url(../images/skype.png) 10px 7px no-repeat #eaeaea;}
				#links ul li.linkLinkedin a {background:url(../images/linkedin.png) 10px 7px no-repeat;}
					#links ul li.linkLinkedin a:hover {background:url(../images/linkedin.png) 10px 7px no-repeat #eaeaea;}
				#links ul li.linkFacebook a {background:url(../images/facebook.png) 10px 7px no-repeat;}
					#links ul li.linkFacebook a:hover {background:url(../images/facebook.png) 10px 7px no-repeat #eaeaea;}
				#links ul li a {
					height:38px;
					width:155px;
					float:left;
					padding:4px 0 0 55px;
					border-top:1px solid #C8E9F6;
					color:#666;
					font-weight:bold;
					text-decoration:none;
					font-size:1.2em;
					}
		
		ul#disciplines {
			color:#666;
			font-size:1.1em;
			padding-top:5px;
			margin-left:13px;
			}
			ul#disciplines li {
				padding-bottom:4px;
				}
	
	.personnel {
		width:210px;
		height:auto;
		float:left;
		padding-top:5px;
		}
		.persImg {
			width:80px;
			height:100px;
			border:3px solid #eaeaea;
			float:left;
			background:#fff;
			}
		.persDetail {
			float:left;
			width:120px;
			padding-left:4px;
			}
			.persDetail h3 {
				font-size:1.4em;
				color:#22258b;
				}
			.persDetail p {
				color:#333;
				font-size:1.1em;
				padding:3px 0;
				}
			.persDetail a {
				color:#666;
				text-decoration:none;
				}
				.persDetail a:hover {
					color:#22258b;
					}
	#tweetTesti p, #thanks p {
		font-size:1.1em;
		color:#666;
		padding-top:5px;
		line-height:16px;
		}

	
/* GALLERY
------------------------------ */

#MooFlow {
	width:710px;
	height:200px;
	float:left;
	
	}
#caseStudy {
	width:660px;
	height:auto;
	float:left;
	padding:20px;
	border-top:1px solid #eaeaea;
	}
	#caseStudy h2 {
		font-size:1.6em;
		color:#22258b;
		padding-bottom:5px;
		}
	#caseStudy h3 {
		font-size:1.4em;
		color:#209dda;
		}
	#caseStudy p {
		font-size:1.2em;
		color:#666;
		line-height:18px;
		padding-bottom:10px;
		}

		
ul.workMenu {
	width:245px;
	height:auto;
	position:absolute;
	top:26px;
	left:-40px;
	list-style:none;
	}
	ul.workMenu li {
		font-size:1.2em;
		z-index:9999;
		}
		ul.workMenu li a {
			text-decoration:none;
			color:#666;
			height:15px;
			width:220px;
			display:block;
			padding:5px 0 5px 40px;
			}
			ul.workMenu li a:hover {
				color:#209dda;
				}
		ul.workMenu li a.active {
			background:url(../images/arrow.png) no-repeat;
			font-weight:bold;
			color:#22258b;
			padding:6px 0 14px 40px;
			}
					
					
					
					

/* FOOTER PANEL
------------------------------ */

#footer {
	width:932px;
	float:left;
	padding:10px 15px;
	border-top:1px solid #C8E9F6;
	}
	#footer ul {
		float:right;
		color:#666;
		font-size:1.1em;
		list-style:none;
		}
		#footer ul li {
			float:left;
			padding:0 10px;
			border-right:1px solid #999;
			}
			#footer ul li a {
				color:#666;
				text-decoration:none;
				}
				#footer ul li.end {
					border:none;
					}