@charset "utf-8";
/* CSS Document */

/*

PRIMARY COLOURS

PINK: #c86199
BLUE: #5bcdd6
GREY: #666666

*/

body {
	text-align: center;
	font-family: arial;
	color: #666666;
	font-size: 62.5%;
}

/* =====================================
			   TEXT HOLDER
   ===================================== */

h1 {

}

h1 a {
	display: block;
	text-indent: -9999px;	
	background: url(/images/logo-trans.png) no-repeat;
	width: 150px;
	height: 80px;
	float: left;
	margin: 15px 0 0 0;
}

h2 {
	font-size: 4em; 
	color: #c86199;
}

h3 { 
	font-size: 2.4em;
	color: #c86199;
}

p {
	font-size: 1.1em;
	line-height: 1.4em;
	padding: 15px 0 0 0;
}

a { 
	color: #5bcdd6;
	font-weight: bold;
	font-size: 1.4em;
	line-height: 1.6em;
}

a:hover {
	color: #c86199;
}

/* =====================================
			   PAGE HOLDER
   ===================================== */

#pageHolder { 
	margin: auto;
	width: 960px;
	text-align: left;
	overflow: hidden;
}

strong { font-weight: bold; }

/* =====================================
				 HEADER
   ===================================== */

#headerTop {
	background: url(/images/header-bg.gif) center no-repeat;
	width: 100%;
	margin: auto;
	height: 176px;
}

#header {
	width: 960px;
	height: 176px;
	margin: auto;
	overflow: hidden;
}

#wwwNav { float: right; width:717px; height:105px; margin:25px 0;}
#wwwNav #Nav { width:717px; height:35px; margin:0; padding:0; background:url(/images/navigation.gif) 0 0 no-repeat; }
#wwwNav #Nav li { display:inline;  }
#wwwNav #Nav li a { float:left; outline:none; height:0; padding-top:35px; overflow:hidden; }
#wwwNav #Nav li a { background-image:url(/images/navigation.gif); background-repeat:no-repeat; }

#wwwNav #Nav li#nav00 a { width: 72px; background-position: 0 0; }
#wwwNav #Nav li#nav01 a { width: 123px; background-position: -72px 0; }
#wwwNav #Nav li#nav02 a {  width: 99px; background-position: -195px 0; }
#wwwNav #Nav li#nav03 a { width: 83px; background-position: -294px 0; }
#wwwNav #Nav li#nav04 a { width: 120px; background-position: -377px 0; }
#wwwNav #Nav li#nav05 a { width: 100px; background-position: -497px 0; }
#wwwNav #Nav li#nav06 a { width: 120px; background-position: -597px 0; }

#wwwNav #Nav li#nav00 a:hover { background-position: 0 -35px; }
#wwwNav #Nav li#nav01 a:hover { background-position: -72px -35px; }
#wwwNav #Nav li#nav02 a:hover { background-position: -195px -35px; }
#wwwNav #Nav li#nav03 a:hover { background-position: -294px -35px; }
#wwwNav #Nav li#nav04 a:hover { background-position: -377px -35px; }
#wwwNav #Nav li#nav05 a:hover { background-position: -497px -35px; }
#wwwNav #Nav li#nav06 a:hover { background-position: -597px -35px; }

#wwwNav #Nav li#nav00 a.active { background-position: 0 -70px; }
#wwwNav #Nav li#nav01 a.active { background-position: -72px -70px; }
#wwwNav #Nav li#nav02 a.active { background-position: -195px -70px; }
#wwwNav #Nav li#nav03 a.active { background-position: -294px -70px; }
#wwwNav #Nav li#nav04 a.active { background-position: -377px -70px; }
#wwwNav #Nav li#nav05 a.active { background-position: -497px -70px; }
#wwwNav #Nav li#nav06 a.active { background-position: -597px -70px; }

/* =====================================
			  CONTENT HOLDER
   ===================================== */

#contentHolder {
	width: 960px;
	overflow: hidden;
	padding: 20px 0 0 0;
}

#introText {
	width: 900px;
	overflow: hidden;
}



#introText h3 {
	margin: 40px 0 0 0;
	display: block;
	width: 100%;
	float: left;
	overflow: hidden;
}

#introText p, h2 {
	width: 600px;
	float: left;
}

#contentLeft h2 {
	padding: 0 0 20px 10px;
}

#introText p { 
	margin: 10px 0 0 0;
}

#introText img {
	float: right;
	margin: 20px 80px 0 0;
}

#clientsLogos li {
	display: block;
	width: 138px;
	float: left;
	height: 138px;
	border: 1px solid #ccc;
	text-align: center;
	margin: 20px 20px 0  0;
	vertical-align: middle;
}

#clientsLogos img {
	margin: 20px 0 0 0;
}


#theGuys li {
	width: 685px;
	margin: 20px 0 0 0;
	overflow: hidden;
}

#theGuys .contentBlock {	
	width: 350px;
}

#theGuys .contentBlock p {
	height: inherit;
}

#theGuys .imgHolder {
	width: 300px;
	height: 200px;
}

#theGuys img { width: 300px; height: 200px; }

#clientsList li {
	float: left;
	width: 450px;
	margin: 40px 20px 0 0;
}

.imgHolder {
	background: #ccc;
	width: 216px;
	height: 166px;
	float: left;
	margin: 0 20px 0 0;
}
.contentBlock h3 {
display: block;
height: 30px; }

.contentBlock {
	float: left;
	width: 211px;
}

.contentBlock p {
	padding: 10px 0 0 0;
	height: 110px;
}

#contentLeft {
	width: 700px;
	float: left;
	margin: 0 20px 0 0;
}

#contentRight {
	width: 240px;
	float: left;
}

#contentRight h4 {
	font-size: 1.6em;
	padding: 0; margin: 20px 0 0 0;
}


/* ==[ Friends Right ]== */


#secondItem {
	width: 230px;
	height: 220px;
	float: right;
	overflow: hidden;
}

#secondItem p {
	padding: 0 0 10px 0;
	overflow: hidden;
}

#secondItem a {  clear: both; }

#secondItem ul#portfolio {
height: 200px;

width: 200px;

}

#secondItem ul#portfolio li {
	margin: auto;
	text-align: center;
	height: 200px;
	width: 200px;
}

.innerfade { display: block; height: 200px; width: 200px; }

#secondItem ul#portfolio li img { 
width: 100px;
height: 100px;
}

.innerfade { height: 100px;  }

/* ==[ Buttons ]== */

.visit { 
	background: url(/images/buttons/visit-site.gif) no-repeat;
	width: 140px;
	height: 38px;
	text-indent: -9998px;
	margin: 20px 0 0 0;
}

/* ==[ Playground Right ]== */

#firstItem { 
	margin: 50px 0 0 0;
	height: 355px;
	width: 230px;
	float: right;
}

#firstItem strong {
	width: 100%; 
	float: left;
	font-size: 1.2em;
	line-height: 1.4em;
	margin: 5px 0;
	color: #4BC7D7;
}
#firstItem ul { float: left; overflow: hidden; padding: 0; margin: 0;}

#firstItem li { float: left; margin: 0 10px 0 0; font-size: .9em; }

#firstItem p{
	margin: 10px 0 0 0;
}

#firstItem a {
	font-weight: bold;
}

#firstItem img { 
	display: none;
}



.articleIntro {
	width: 325px;
	float: left;
	padding: 10px;
	margin: 20px 0 0 0;
}

.articleIntro h3 {
	padding: 0;
	margin: 0; 
}

.articleIntro p {
	padding:  0 0 10px 0;
}

#articleIntroLong {
	width: 650px;
	margin: 20px 0 0 0;
}

#articleIntroLong p {
	padding: 10px 0 0 0;
}

#articleIntroLong h4 {
	display: block;
	font-weight: bold;
	margin: 20px 0 0 0;
}

#projectType {
	width: 100%;
	overflow: hidden;
	margin: 15px 0 0 0;
	color: #fff;
}

#projectType li {
	display: block;
	float: left;
	background: #cccccc;
	margin: 0 5px 0 0;
	padding: 5px;
}

.articleIntro a { 
	line-height: 1.4em;
}


#whatAreWe {
}

#whatAreWe li { 
	float: left;
	width: 290px;
	margin: 20px 20px 0 0;
}

/* =====================================
			      FOOTER
   ===================================== */

#footerHolder {
	background: url(/images/footer-bg.gif) top no-repeat;
	width: 100%;
	margin: 0 0 0 0;
	overflow: hidden;
}

#footerContent {
	text-align: left;
	width: 960px;
	overflow: hidden;
	margin: 190px auto 0;
}

#footerContent h3 {
	font-size: 4em;
}

#footerContent .contact h3 {
	font-size: 2.4em;
	margin: 0;
}

/* =====================================
			    FEATURED
   ===================================== */

.featured { 
	width: 450px;
	float: left;
	margin: 30px 20px 80px 0;
	color: #fff;
}

.featuredImg img {
	float: left;
	width: 216px;
	height: 166px;
}

.featuredCont {
	float: left;
	width: 200px;
}

.featured h4 {
	font-size: 2.2em;
	margin: 0;
}

.featured p {
	padding: 0;
}

.featuredImg {
	margin: 0 20px 0 0;
	float: left;
	border: 2px solid #fff;
}

/* =====================================
			      CONTACT
   ===================================== */

.contact {
	float: left;
	width: 300px;
	height: 240px;
	margin: 0 20px 0 0;
	position: relative;
}

.contact li a{ 
	display: block; 
	width: 250px; 
}

.contact p {
	padding: 0;
	height: 60px;
}

#hello p {
	height: 35px;
}

.contact address { margin: 10px 0 0 0; }

address {
	font-size: 1.1em;
	line-height: 1.3em;
	margin: 10px 0 0 0;
	font-style: normal;
}

#social {
margin: 0 0 15px 0;
}

#social li a { 	
	width: 104px; 
	text-indent: -9998px; 
	display: block;
height: 20px;
	margin: 10px 0 0 0;
}

#social li#s1 a { 
	background: url(/images/buttons/fb.png) 0 0 no-repeat;
}

#social li#s1 a:hover {  background: url(/images/buttons/fb.png) 0 -20px no-repeat;}


#social li#s2 a { 
	
	background: url(/images/buttons/tw.png) 0 0 no-repeat;
}
#social li#s2 a:hover { background: url(/images/buttons/tw.png) 0 -20px no-repeat;}


/* =====================================
			  CONTACT BOTTOM
   ===================================== */


#twitterUs {
	position: relative;
}

#twitterUs a {
	position: absolute;
	top: -87px;
	left: 120px;
	background: url(/images/template/tweet-us-trans.png) no-repeat;	width: 110px;
	height: 117px;
	text-indent: -9998px;
}


 
.container {  width:650px; height:290px; overflow:hidden; position:relative; cursor:pointer; 	}  
.slides { position:absolute; top:0; left:0; }  
.slides li { position:absolute; top:0; width:654px; display:none; }  

#loopedSlider{ 
	display: block;	
	width: 650px;
	height: 290px;
	position:relative; 
	clear:both; 
	background: url(/images/slider-trans.png) no-repeat;
	z-index: 0;
	margin: auto;

}  

#overlay { 
	position: absolute;
	top: 0;
	left: 0;
	background: url(/images/slider/border-trans.png) no-repeat;
	width: 650px;
	height: 290px;
	z-index: 500;
}

.previous { 
	background: url(/images/slider/left-trans.png) no-repeat; 
	position: absolute; 
	top: 120px; 
	left: -10px;
	width: 46px; 
	height: 46px; 
	text-indent: -9998px; 
	z-index: 10000;
}

.next { 
	background: url(/images/slider/right-trans.png) no-repeat; 
	position: absolute; 
	top: 120px; 
	right: -15px; 
	width: 46px; 
	height: 46px; 
	text-indent: -9998px; 
	z-index: 1000;
}

ul.pagination { 
	position: absolute; 
	top: 270px; right: 120px;	
	list-style:none; 
	padding:0; 
	margin:0;
	z-index: 1000;
}  
ul.pagination li  { float:left; }  
ul.pagination li a { display: block; text-indent: -9998px; background: url(/images/slider/off-trans.png) no-repeat; padding:2px 4px; width: 16px; height: 16px; }  
ul.pagination li.active a { background: url(/images/slider/on-trans.png) no-repeat; color: #fff; }

.postmetadata a { float: left; margin: 0 2px 0 0; font-weight: bold;padding: 0 10px ; background: #5bcdd6; color: #fff;}

.postmetadata a:hover {
	background: #c86199;
}

#playgroundLeft {
	float: left;
	width: 650px;
	
}

#playgroundLeft p {
	float: left;
	width: 100%;
	overflow: hidden;
	padding: 15px 0 0 0;
}

#playgroundLeft img {
	float: left;
}

#playgroundRight {
	float: right;
	width: 250px;
	margin: 65px 0 0 0;
}

.post small { font-weight: bold; color: #57C6D4;font-size: 1.2em; padding: 10px 0 0 0; float: left;}
.post {width: 650px;  border-bottom: 1px solid #dfdfdf; padding: 20px 0; float: left; overflow: hidden; }

#playgroundLeft .pagetitle { text-transform: lowercase; }

.playgroundContent {
	float: left;
	margin: 0 0 0 40px;
	width: 506px;
}

.playgroundDate {
	float: left;
	width: 60px;
}

.playgroundDate a {
	font-size: 1em; 
	font-weight: bold;
}

.playgroundDate small {
	width: 70px;
	height: 80px;
	text-align: center;
	color: #fff;
	padding: 20px 0 0 0;
	background: url(/images/buttons/blog-date-background.gif) no-repeat;
}

#addressDetails {  float: right; width: 230px; margin: 0 90px 0 100px;}

#addressDetails address { margin: 10px 0 0 0; }

.contactform {
	width: 540px;
	float: left;
}

.contactform label {
	width: 100%;
	float: left;
	padding: 10px 0 0 0;
	font-size: 1.2em;
	float: left;
}

.contactform input {
	width: 100%;
	float: left;
	height: 20px;
	padding: 3px 0 0 0;
	font-size: 1.3em;
	clear: left;
}

.contactform textarea {
	width: 100%;
	height: 100px;
}

.contactform #contactsubmit {
	background: url(/images/buttons/submit.gif) no-repeat;
	width: 140px;
	height: 38px;
	text-indent: -9998px;
	border: none;
	float: left;
	margin: 15px 0 0 0;
}

#add-comment {
	background: url(/images/buttons/add-comment.jpg) no-repeat;
	width: 157px;
	height: 38px;
	text-indent: -9998px;
	border: none;
	margin: 10px 0 0 0;
	float: left;
}
/*

#wpcf label {
	clear: both;
	display: block;
	float: left;

	width: 150px;
}
#wpcf input {
	float: left;
	width: 200px;
	padding: 1px;
	margin: 2px 5px 2px 0;
}
#wpcf textarea {
	width: 350px;
	height: 100px;
	padding: 1px;
	margin: 0 5px 10px 0;
}
#wpcf #contactsubmit {
	margin-left: 250px;
	width: 100px;
}*/

#contactPhone { width: 260px; float: right; margin: 0 0 10px 0;}
#contactPhone p { width: 250px; font-size: 3em; color: #dadada; padding: 0; margin: 0;}

#commentform input { width: 350px; }
#commentform textarea { width: 500px; }
#commentform p { padding: 0 0 10px 0; margin: 0; }
#respond h3{ display: block; width: 100%; float: left; overflow: hidden; margin: 20px 0 0 0;}


.backTo { 
	display: block;
	background: url(/images/buttons/back-to-work.png) no-repeat;
	width: 140px;
	height: 38px;
	text-indent: -9998px;
	margin: 20px 0 0 0;
}

#lastFooter { border-top: 1px solid #dadada; padding: 10px 0 20px 0; width: 100%; overflow: hidden; text-align: left; float: left;}
#disclaimer { float: left; width: 270px; margin: 15px 0 0 0;}
#disclaimer img { width: 70px; float: left;}
#disclaimer p { float: left; width: 170px; margin: 0 0 0 10px; }
#bottomNav { float: left; padding: 8px 0 0 35px;width: 570px;}
#bottomNav li { float: left; }
#bottomNav li a { display: block; float: left;  margin: 0 0 0 10px;}

#playgroundRight h3 { margin: 20px 0 0 0; }

#directions h3 { margin: 10px 0 0 0; }
#directions { width: 500px; font-size: 1.2em; line-height: 1.4em;}

#contact_form { 
	padding: 0;	
	height: 609px;
	width: 698px; 
}
	
#contact_form h3 { 
	padding: 20px 0 20px 0;
	color: #5f5d5c;
}


#contact_form label { 
	font-family: Quicksand;
	font-weight: bold;
	float: left; 
	width: 150px; 
	padding: 6px 0; 
	font-size: 14px; 
	color: #5f5d5c
}

#contact_form .text-input, #emailField, #websiteField, #messageArea { 
	float: left; 
	width: 340px; 
	border: 0; 
	background: #E8E8E8; 
	padding: 6px; 
	font-size: 14px; 
	margin-bottom: 26px; 
}

#contact_form #messageArea { 
	height: 140px; 
}

#contact_form form span { 
	float: left; 
	margin-left: 20px; 
}

#submit_btn { 
	float: right;
	margin: 0 175px 0 0;
	width: 100px; 
	height: 30px; 
	border: 0; 
	background-color:#0cb3da; 
	font-weight: bold; 
	color: #fff; 
}

#commentSubmit p { 
	color: #555; 
	margin-bottom: 30px; 
}