/*
NOTE: The background images for the hero banner project divs are css'd dynamically with jQuery..
..used to look like this but aren't needed in here anymore.. (also preloaded dynamically)
	#hero-project-1{
 		background: url("../assets/hero-project-1.jpg");
	} 

*/

/* CSS Document */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */


html{
	font-size:100%;
	background-color: #1B252A;
	-webkit-font-smoothing: subpixel-antialiased;
}
body {
	font-family:"Trebuchet MS", "Verdana", "Arial", "Helvetica", sans-serif;
	/*	font-size: 62.5%;*/
	font-size: 1em;
	margin: 0px;
	padding: 0px;
	text-align: left;
	background-color: #1B252A;
	-webkit-text-size-adjust: none;
	
	

}
html, body{
height: 100%;
min-height: 100%;

}
div{
padding:0;
margin:0;
}
p{
font-size:0.75em;
text-align:left;
margin:0;
padding:0;
line-height:1.5em;
font-weight: normal;
}
ul{
list-style: none;
margin:0;
padding: 0;
}
a:link, a:visited{
color:#00b7e4;
text-decoration:none;
border-bottom: 1px dotted;
}
a:hover, a:active{
color:#FFCC00;
text-decoration:none;
}

h1, h2, h3{
font-size:1.5em;
font-weight: normal;
font-style:italic;
padding:20px 0 0 0;
margin:0 0 15px 0;
text-align:left;
color:#1A252A;
}
h1{
font-size:1em;
font-style:normal;
padding:0;
line-height:1.4em;
margin:2px 0 0 0;
}
h3{
font-size:1.1em;
padding:10px 0 10px 0;
margin:5px 0 0 0;
}


label{
color:#bfb588;
padding-bottom:5px;
}

iframe{
padding:0;
margin:0;
}
/*------------------------------IDs------------------------------*/

#container{
width:100%;
overflow-x:hidden;
}

#primary-nav-outer, #page-header-outer, #home-blurb-outer, #page-content-outer, #footer-outer, #page-content-outer-home, #project-page-summary-area, #project-page-content-outer, #about-page-summary-area{
width:100%;
}
#primary-nav-outer{
background: url("../assets/primary-nav-bg-shadow.png") repeat-x bottom;
}
#primary-nav-inner{
width:928px;
height:135px;
margin:0 auto 0 auto;
position:relative;
background: url("../assets/logo.gif") no-repeat left center;
}
#project-page-summary-area, #about-page-summary-area{
background-color: #F3F3F3;
-webkit-box-shadow: 0px -10px 20px 2px rgba(0, 0, 0, 0.075);
-moz-box-shadow: 0px -10px 20px 2px rgba(0, 0, 0, 0.075);
box-shadow: 0px -10px 20px 2px rgba(0, 0, 0, 0.075);
}
#primary-nav-links{
margin-top:60px;
float:right;
padding:0;
}
#primary-nav-links ul{
padding:0;

}
#primary-nav-links ul li{
float:left;
margin-left:40px;
color:#FFCC00;
padding:0;
background: #1B252A;
}
#primary-nav-links a{
text-decoration:none;
border: none;
background: #1B252A;

}
#page-header-outer{
background: #FFCC00 url("../assets/header-bg.gif") no-repeat center center;
padding:0;
}
#page-header-inner, #home-blurb-inner, #page-content-inner, #footer-inner, #page-header-inner-home, #work-page-content-inner, #work-page-inner-quote, #project-page-summary-area-inner, #about-page-summary-area-inner{
width:928px;
margin:0 auto 0 auto;
padding:20px 0 20px 0;
}

#work-page-outer-quote{
width:100%;
padding:0;
}
#work-page-inner-quote{
padding:0 0 20px 0;

}

#work-page-content-inner{
padding:0px 0 40px 0;
}

#footer-inner p{
background: url("../assets/footer-icons.png") no-repeat left center;
color:#999999;
padding: 10px 0  10px 75px;
display:inline;
}
#footer-skills{
float:right;
color:#0D7188;
padding:5px 0 0 0;
font-size:0.7em;
}
#footer-skillst ul{

}
#footer-skills ul li{
float:left;
padding:0 15px 0 10px;
background: url("../assets/footer-skills-tick.png") no-repeat right center;
}
#footer-skills ul li:first-child{
color:#999999;
background:none;
padding:0;
}

#page-header-inner{
padding:10px 0 10px 0;
}
#home-blurb-inner{
padding:25px 0 25px 0;
}
#home-blurb-inner p{


}
#home-blurb-outer{
background-color:#F3F3F3;
-webkit-box-shadow: 0px -10px 20px 2px rgba(0, 0, 0, 0.075);
-moz-box-shadow: 0px -10px 20px 2px rgba(0, 0, 0, 0.075);
box-shadow: 0px -10px 20px 2px rgba(0, 0, 0, 0.075);
}

#page-content-outer, #page-content-outer-home, #project-page-content-outer{
background-color:#FFFFFF;
}
#page-content-outer{
/*border-top:10px solid #F3F3F3;*/
padding:0px 0 0 0;
}
#page-content-outer{
-webkit-box-shadow: 0px -10px 20px 2px rgba(0, 0, 0, 0.075);
-moz-box-shadow: 0px -10px 20px 2px rgba(0, 0, 0, 0.075);
box-shadow: 0px -10px 20px 2px rgba(0, 0, 0, 0.075);
}
#page-content-inner{
padding-top:0px;
padding-bottom:0px;
margin-bottom:066666;
}
#home-content-panel-left, #content-page-panel-left{
width:594px;
float:left;
padding:0;

}
#home-content-panel-animate-holder{
width:100%;
height:346px;
overflow:hidden;
position:relative;
padding:0;
margin:0;

}
#home-content-panel-icons-holder{

}
#non-js-message{
width:80%;
}
#non-js-message p, #page-title p{
font-size:1.7em;
font-style:italic;
padding:5px 10px 5px 0;
line-height:1em;
color:#1A252A;
}
 #page-title p{
 background:white;
 float:left;
 padding:5px 10px 5px 5px;
 }

#home-content-panel-left img{
float:left;
margin:0 35px 35px 0;

}
#home-content-panel-left a img{
border:8px solid #F0F0F0;

}
#home-content-panel-left a:hover img {
border:8px solid #FFCC00;

}
#home-content-panel-right, #content-page-panel-right{
width:333px;
float:left;
padding:0;

}
#content-page-panel-right{
padding:10px 0 0 0;
}
#twitter-box, #content-page-rhs-panel{
width:292px;
height:100%;
min-height:305px;
_height:305px; /*ie fix (hack)*/
background-color:#F0F0F0;
padding:20px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#content-page-rhs-panel{
height:auto;
min-height:0px;
_height:0px; /*ie fix (hack)*/
margin:20px 0 0 0;
padding:10px 20px 5px 20px;
}
#home-logos-slide{
margin:0 50px 0 0;
padding:9px 0 0 0;

}

#twitter-follow-us p, #home-logos-slide p{
float:right;
font-size:1em;
padding: 10px 0 5px 22px;
/*background: url("http://twitter-badges.s3.amazonaws.com/t_mini-a.png") left center no-repeat;*/
background: url("../assets/twitter-follow-icon.png") left center no-repeat;
margin-bottom:15px;
}
#twitter-no-js p{
color:#999999;
font-size:0.8em;
font-style: italic;
}
#home-logos-slide p{
cursor:pointer;
cursor:hand;
color:#00b7e4;
text-decoration:none;
padding: 0 15px 0px 0px;
/*background: url("http://twitter-badges.s3.amazonaws.com/t_mini-a.png") right center no-repeat;*/
background: url("../assets/hp-logos-arrow-more-inactive.png") right center no-repeat;
}
#about-link, #about-work-link{
margin:0 0 0 50px;
width:333px;
float:right;

}
#about-work-link{
margin:20px 0 0 0;
}

#project-play-link, #project-back-link-ar{
position:absolute;
bottom:0;
left:0;
width:333px;
}
#project-back-link-ar{
position:relative;
margin:20px 0 0 0;
}
#about-link p, #project-play-link p, #about-work-link p, #project-back-link-ar p{
padding:0;
margin:0;
}
#about-link a, #project-play-link a, #about-work-link a, #project-back-link-ar a{
display:block;
color:#FFFFFF;
border: none;
font-size: 1.2em;
padding:15px;
margin:0;
text-decoration:none;
background: #00C8EA url("../assets/about-us-link-bg.png") center right no-repeat;
-moz-border-radius: 5px;
border-radius: 5px;
}
#project-back-link-ar a{
background: #00C8EA;
}
#project-back-link-ar a:hover{
background: #FFCC00;
}
#about-link a:hover, #project-play-link a:hover, #about-work-link a:hover{
background: #00C8EA url("../assets/about-us-link-bg-hover.png") center right no-repeat;
}
#contact-panel-overlay-bg{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
display:none;

}
/*#contact-panel-overlay-bg p{
margin:0;
padding:0;
line-height:1.5em;
}*/
#contact-panel-holder{
width:928px;
height:100%;
margin:0 auto 0 auto;
position:relative;
display:none;
/*opacity:0;
filter: alpha(opacity=0);*/
}
#contact-panel-tail{
height:15px;
width:30px;
padding:0;
position:absolute;
overflow:hidden;
right:15px;
top:85px;
background: url("../assets/contact-panel-tail.png");
/*width:0px;
height:0px;
border-width: 15px 15px 15px 15px ;
border-style: solid;
border-color:  transparent transparent white transparent;
position:absolute;
right:12px;
top:70px;*/

}
#contact-panel{
background-color: #FFFFFF;
width:248px;
padding: 5px 20px 10px 20px;
position:absolute;
right:0;
top:100px;
height:auto;
-moz-box-shadow: 0 0 20px rgba(51, 51, 51, 0.3);
-webkit-box-shadow: 0 0 20px rgba(51, 51, 51, 0.3);
box-shadow: 0 0 20px rgba(51, 51, 51, 0.3);
-moz-border-radius: 5px;
border-radius: 5px;
color:#666666;
}
#contact-panel-close{
position:absolute;
top:20px;
right:20px;
width:26px;
height:26px;
}
#contact-panel-close a{
display:block;
width:26px;
height:26px;
border: none;
background: url("../assets/contact-panel-close.png") left top no-repeat;
}
#contact-panel-close a:hover{
background: url("../assets/contact-panel-close-rollover.png") left top no-repeat;
}

#project-page-image-banner, #about-page-summary{
width:538px;
height:260px;
float:left;
margin:0 50px 0 0;

}
#about-page-summary{
height:100%;
padding:0;
}

#project-page-summary-panel, #about-page-summary-panel{
width:332px;
float:left;
height:16.3em;
position:relative;
background: #F3F3F3;
}
#about-page-summary-panel{
height:100%;
padding:0;
}
#project-page-summary-panel h2{
padding-top:0;
}
#project-summary-our-role h3{
padding-bottom:5px;
}
#about-page-summary-panel h3{
padding:0 0 5px 0;
margin:0;
}
#project-summary-our-role ul{

}
#about-page-summary-panel ul{
float:left;
}
#about-page-summary-panel ul.first-list{
padding:0 40px 0 0;
}

#project-summary-our-role ul li, #about-page-summary-panel ul li{
background: url("../assets/our-role-tick.png") left center no-repeat;
color:#999999;
padding:12px 0 12px 40px;
font-size:0.8em;
}
#about-page-summary-panel ul li{
background: url("../assets/skills-tick.png") left center no-repeat;
}
#project-summary-our-role{
margin:0 0 20px 0;
}
#project-page-content-left{
width:538px;
padding:10px 0 0 0;
float:left;
margin:0 50px 0 0;
}

#project-page-content-left p{
color:#9F9F9F;
font-size:0.8em;
padding:0 0 20px 0;
}
#project-testimonial-bubble, #full-width-testimonial{
width:292px;
font-size: 1.2em;
padding:15px 15px 0 15px;
margin:30px 0 0 0;
border:5px solid #F0F0F0;
background:#FFFFFF;
-moz-border-radius: 10px;
border-radius: 10px;
}
#full-width-testimonial{
width:890px;
margin:0;
}
#project-testimonial-bubble p, #full-width-testimonial p{
padding:0 0 20px 0;
margin:0;
font-size:0.8em;
line-height:1.2em;
color:#00C8EA;
}
#project-testimonial-bubble-tail, #full-width-testimonial-tail{
width:333px;
height:30px;
margin:-5px 0 0 0;
padding:0;
float:left;
background: url("../assets/project-testimonial-tail.png") 10% top no-repeat;
}
#full-width-testimonial-tail{
width:100%;	
background: url("../assets/project-testimonial-tail.png") 2% top no-repeat;

}

#project-viewer-frame{

}
#about-team{
margin:10px 0 0 0;
float:left;
width:333px;

}

#ar-holder{
width:515px;
background:#F3F3F3;
margin:20px 0 0 0;
padding:20px;
}
#iOS-label-holder{
position:absolute;
right:0;
height:60px;
width:600px;
overflow:hidden;
}
#iOS-label{
width:60px;
height:60px;
position:absolute;
right:0px;
top:0;
background:url("../assets/iOS-label.png") right top no-repeat;
cursor:pointer;
cursor:hand;
display:none;
}

#iOS-text{
height:25px;
padding:6px 0px 4px 10px;
margin:0;
background:#CC3300;
position:absolute;
top:0;
color:#FFFFFF;
font-style: italic;
font-size: 1.2em;
display:none;
-webkit-backface-visibility:hidden;
}
#iOS-text p{
}

#large-quote-outer, #large-quote-outer-grey{
width:100%;
background:#F3F3F3;
padding:0px;

}
#large-quote-outer{
	background:#FFFFFF;
	padding:0 0 10px 0;
}
#large-quote-inner, #large-quote-inner-grey{
width:928px;
margin:20px auto 20px auto;
padding:20px 0 20px 0;
position:relative;
/*border-top:1px solid #CCCCCC;*/
background:#F3F3F3 url("../assets/testimonial-shapes-bg.gif")  top right no-repeat;
-moz-border-radius: 5px;
border-radius: 5px;
}
#large-quote-inner-grey{
	margin:0px auto 0px auto;
	
}
#large-quote-bubble{
width:542px;
-moz-border-radius: 5px;
border-radius: 5px;
background:white;
padding:40px 40px 20px 40px;
float:left;

}

#large-quote-bubble p{
color:#666666;
	font-size:0.8em;

	padding-bottom:20px;
}
#large-quote-tail{
width:25px;
height:100px;
background: url("../assets/large-quote-tail.png") right top no-repeat;
overflow:visible;
float:left;
margin-top:20px;
}

#large-quote-left-section{
	width:260px;
	float:left;
	padding:0;
	margin:0;
	background: url("../assets/large-quote-speech-mark.gif") 20px top no-repeat;
}


#large-quote-details{
margin:15px 0 0 80px;
}
#large-quote-images{
margin-left:80px;
}
#large-quote-details p{
text-align:left;
padding:0;
margin:0;
line-height:1.7em;
}
#large-quote-images img{
padding:0;
margin:0;
}

#project-masher{
background: url("../assets/work-project-masher.png") left top no-repeat;
}
#project-diffeng{
background: url("../assets/work-project-diffeng.png") left top no-repeat;
}
#project-driver{
background: url("../assets/work-project-driver.png") left top no-repeat;
}
#project-armailer{
background: url("../assets/work-project-armailer.png") left top no-repeat;
}
#project-whackaspring{
background: url("../assets/work-project-mattress.png") left top no-repeat;
}
#project-flightmapping{
background: url("../assets/work-project-flightmapping.png") left top no-repeat;
}
	

/*----------------------------Classes----------------------------*/

.home-content-panel-animate{
width:590px;
position:relative;
padding:0;
margin:0;
height:381px;
top:0;
-webkit-transform: translate3d(0,0,0);
}
.home-logos-link{
border-bottom: 1px dotted;
}
.no-js-text{
background:white;
padding:5px;
}
.contact-phone-number{
margin:0;
}
.contact-title, .contact-title-rhs{
font-size:1.5em;
font-weight: normal;
font-style:italic;
padding:10px 0 0 0;
text-align:left;
color:#1A252A;
}
.contact-title-rhs{
padding:0;
}
.contact-page-panel{
float:left;
height:100%;
width:306px;
color: #666666;
padding:0;
margin:0;
}

.contact-phone-number{
color:#FFCC00;
font-size:2.35em;
padding:0;
margin:-10px 0 0 0;
font-style:italic;
}
.work-project-panel, .work-project-panel-end{
width:264px;
height:150px;
font-style: italic;
float:left;
border:10px #F0F0F0 solid;
margin:38px 38px 0 0;
position:relative;
cursor:pointer;
cursor:hand;
}
.work-project-panel-end{
margin-right:0;
}
.work-project-panel a, .work-project-panel-end a{
display:block;
width:100%;
height:100%;
color:#1A252A;
border:0;
}
.work-project-panel:hover, .work-project-panel-end:hover{
border:10px #FFCC00 solid;
}
.work-project-title{
padding: 5px 10px 5px 10px;
background-color: #FFFFFF;
position:absolute;
left:-10px;
top:20px;
}
.project-summary{
font-size:0.95em;
line-height:1.4em;
color:#8D8D8D;
margin-bottom:15px;
background: #F3F3F3;
}
.vimeo-holder{
padding:11px 10px 7px 11px;
margin:0 0 20px 0;
background-color: #F0F0F0;
}
.vimeo-holder a{
font-size:0.8em;
}
.testimonial-client-name{
font-size:0.9em;
padding:0;
margin:0;
}
.testimonial-client-title{
color:#9F9F9F;
font-size:0.8em;
padding:0 0 15px 0;
margin:0;
}
.about-summary{
font-size:1.5em;
font-style:italic;
color:#00BDE6;
background: #FFFFFF;
padding:8px 10px 8px 10px;
display:inline;
}
.about-spacer{
padding:0 5px 0 5px;
}
.about-team-member{
margin:0 0 20px 0;
width:320px;
}
.about-team-member img{
float:left;
border:#F0F0F0 6px solid;
margin:0 20px 0 0;
}
.about-name{
color:#00BDE6;
font-size:1em;
}
.about-title{
font-size:0.8em;
color:#999999;
}

.about-image-1{
float:right;
padding: 0 0 20px 30px;
margin:-10px 0 0 0;
}
.about-image-2{
float:left;
padding: 0 30px 0 0 ;
margin:-10px 0 0 0;
}
.about-emphasis{
font-style:italic;
color:#666666;
background: #F0F0F0;
padding:3px;
}
.large-quote-details-text-name, .large-quote-details-text-title{
background:#00BDE6;
margin:0;
padding:4px 6px 4px 6px;
font-size:1.3em;
color:#000000;
}
.large-quote-details-text-title{
font-size:1.1em;
color:#FFFFFF;
}
.large-quote-emphasis{
	padding:3px;
background:#F3F3F3;
color:#00BDE6;
font-style:italic;
}
.large-quote-speechmarks{
	font-size:2em;
	
}