@charset "UTF-8";

/* COLOURS 

logo blue #3687AB
logo brown #532E22
medium brown #75584E
light brown #A4918A
light blue #D7E7EE

#_home { background:url(img/girl.jpg) no-repeat 600px 0; }
*/


/* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 5, 2011 */
@font-face {
    font-family: 'HeroLight';
    src: url('fonts/hero_light-webfont.eot');
    src: url('fonts/hero_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/hero_light-webfont.woff') format('woff'),
         url('fonts/hero_light-webfont.ttf') format('truetype'),
         url('fonts/hero_light-webfont.svg#HeroLight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'HeroRegular';
    src: url('fonts/hero-webfont.eot');
    src: url('fonts/hero-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/hero-webfont.woff') format('woff'),
         url('fonts/hero-webfont.ttf') format('truetype'),
         url('fonts/hero-webfont.svg#HeroRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* 

@font-face {
    font-family: 'LoraRegular';
    src: url('fonts/Lora-Regular-webfont.eot');
    src: url('fonts/Lora-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Lora-Regular-webfont.woff') format('woff'),
         url('fonts/Lora-Regular-webfont.ttf') format('truetype'),
         url('fonts/Lora-Regular-webfont.svg#LoraRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'LoraItalic';
    src: url('fonts/Lora-Italic-webfont.eot');
    src: url('fonts/Lora-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Lora-Italic-webfont.woff') format('woff'),
         url('fonts/Lora-Italic-webfont.ttf') format('truetype'),
         url('fonts/Lora-Italic-webfont.svg#LoraItalic') format('svg');
    font-weight: normal;
    font-style: italic; 

}

@font-face {
    font-family: 'LoraBold';
    src: url('fonts/Lora-Bold-webfont.eot');
    src: url('fonts/Lora-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Lora-Bold-webfont.woff') format('woff'),
         url('fonts/Lora-Bold-webfont.ttf') format('truetype'),
         url('fonts/Lora-Bold-webfont.svg#LoraBold') format('svg');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'LoraBoldItalic';
    src: url('fonts/Lora-BoldItalic-webfont.eot');
    src: url('fonts/Lora-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Lora-BoldItalic-webfont.woff') format('woff'),
         url('fonts/Lora-BoldItalic-webfont.ttf') format('truetype'),
         url('fonts/Lora-BoldItalic-webfont.svg#LoraBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;

}
 */


/* html5 elements */
nav, footer, header, aside, section { display:block; }

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body {
	padding:0;
	margin:0;
	font-size:15px;
	font-family: Georgia, serif;
	line-height:1.4;
	color: #574640;
	overflow:hidden;
}
/*
b, strong { font-family:LoraBold;  }
i, em { font-family:LoraItalic; }
b i, i b { font-family:LoraBoldItalic; }
*/
.no-js body { overflow:visible; }

a {
	color: #3687AB;
}

img { border:0; }


.left {  float:left; margin-right:20px; }
.right { float:right; margin-left:15px; }

nav { white-space:nowrap; }

nav a {
	text-decoration:none;
	font-family:HeroRegular, sans-serif;
}

header nav {
	background-color: #3687AB;
	padding: 6px 0 7px 295px;
	min-width: 664px; /* for narrow screens */
	padding-left:110px;
}

._home header nav { background-color:#75584E; }

._team header nav,
._contact header nav { padding-left:297px; }

._portfolio header nav { padding-left:313px; }


header nav a {
	color:white;
	padding: 0 5px 3px; 
	height: 17px;
	display:inline-block;
	margin-right:12px;
	border-radius:5px;
	/* position above boy image on Services */
	position:relative;
	z-index:10;
}

header nav a:hover { background-color: #75584E; }
header nav a.selected { background-color: #75584E; border:1px solid; border-color: #532E22 #75584E #75584E #532E22;}
/*
header nav a.selected { background-color: #D7E7EE; color: #3687AB;}
*/
._home header nav a:hover { background-color: #532E22; }

._home .homeLink {
	display:none;
}



header h1 {
	margin:30px 0 0 30px;
	height:94px;
}

#tagline {
	position:absolute; 
	font: 17px/1.4 HeroRegular, sans-serif;
	/* font: 17px/1.4 xLoraItalic, georgia, serif; */
	color:#3687AB;
 
	margin: 30px 0 0 116px;
	width:144px;
	/*
	
     -moz-transform: rotate(90deg);  
       -o-transform: rotate(90deg);  
  -webkit-transform: rotate(90deg);  
      -ms-transform: rotate(90deg);  
          transform: rotate(90deg);  
             filter: progid:DXImageTransform.Microsoft.Matrix( 
                     M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17, sizingMethod='auto expand');
               zoom: 1;
			   
			   left:-124px;
			   top:332px;
			   font-size:20px;
			   z-index:500; */

}

._home #tagline {
	top:230px;
	display:none;
	width:100%;
	font-size: 24px;
    white-space: nowrap;
	margin:0;
	
	   -moz-transform: skew(-9deg);
	-webkit-transform: skew(-9deg);
	    -ms-transform: skew(-9deg);
	     -o-transform: skew(-9deg);
	        transform: skew(-9deg); 
}
/*
#tagline.initial {  before animation starts 
	/*letter-spacing : 40px; left:200px;
	opacity:0; 
	
}.initial span { opacity:0; } 
*/
._home #tagline span { position:absolute; }


.line1 { left:646px; }
.line2 { left:694px; top:30px; }

.initial .line1 { left:1000px; }
.initial .line2 { left:200px; }

#girl {
	position:absolute;
	top:-3px;
	left:670px;
	
}



footer {
	background:url(../img/footer_bg.jpg) repeat-x 0 -1px;
	padding:30px 0;
	height:382px;
	width:100%;
}

footer nav { font-size:14px; }

footer nav, footer p { margin-left:168px; }

._portfolio footer nav,
._portfolio footer p { margin-left:178px; }

footer nav div { float:left; min-width:110px; margin-right:15px; }
footer nav div.homeLink { min-width:90px; }

footer nav a { color:#3687AB; font-size:17px; }

footer nav a:hover,
footer nav a.selected { border-bottom:1px solid #75584E;}

footer nav i .selected { border:0; color:inherit; }

footer nav i { display:block; white-space:normal; max-width:180px; margin-top:5px; }

footer li { white-space:normal; }

footer li a, footer i a { font-size:14px; font-family:georgia,serif; }
footer li a:hover { border:0; text-decoration:underline; }
 

#copyright { padding-top:30px; clear:both; color:gray; font-size:14px; }

main {
	display:block;
    padding:0 0 50px 303px;
	width:630px;
    
}

._home main {
	padding:30px 0 20px 116px;
	width:476px;
	height: 323px;
	overflow:auto;
}



p, ul, ol {
	margin:0 0 15px;
}

ul, ol { padding-left:1em; }

._home p { font-size: 14px; }
._home p.first {
	font-size:16px;
}

h2 { font-family:HeroLight, sans-serif; font-weight:normal; color:#532E22; margin:20px 0 15px; font-size:27px; border-top: 1px solid #532E22;}
h3 { margin-top:0; font:normal 21px HeroRegular, sans-serif; text-transform:uppercase; margin-bottom:10px;  }
h4 { margin-bottom:0;}

.shadow {  
  -webkit-box-shadow: 0 3px 8px #888;
     -moz-box-shadow: 0 3px 8px #888;
          box-shadow: 0 3px 8px #888;
}





/*** SERVICES ***/

._services main {
	background:url(../img/boy_can.jpg) no-repeat -15px 100%;
	min-height:428px;
	width: 352px;
}


#services {
	background:url(../img/boy_box.png) no-repeat;
	position:absolute;
	top:15px;
	left:655px;
	width:348px; height: 350px;
	padding:230px 20px 0 90px;
}



#services li { margin-bottom:2px; }
#services h3 { text-transform:none; } 



/*** CONTACT ***/

.vcard a { color:inherit; text-decoration:none; }
/*
#contactBoy {
    left: 692px;
    position: absolute;
    top: 20px; 
}*/
._contact main {
    background: url("../img/boy_contact.jpg") no-repeat 100% 100%;
}












/*** PORTFOLIO ***/

._portfolio main p { margin-left:15px; margin-right:15px; }
._portfolio main section p { margin-left:0; margin-right:0; }
._portfolio main h2 { margin:15px; min-width:480px;}

._portfolio section { 
	clear: both;
	min-width:480px; padding:40px 30px 50px 40px; 
	background:url(../img/paper_bg.png) no-repeat; 
	background-size:100% 100%; 
	
	filter:  progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/paper_bg.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/paper_bg.png', sizingMethod='scale')";

}

._portfolio section a { position:relative; /* make links work over alphaImageLoader filter in IE7+8 */ }

._portfolio section h3 { white-space:nowrap; /* defeat effect of right-floated subLinks */ }

.print section h3 { margin-bottom:0; }

dt { float:left; min-width:130px; padding-right:10px; font-weight:bold; }


._portfolio section img { padding:5px; border:1px solid #A4918A; margin-right:20px; }
._portfolio section img:hover { 
	border-color:#3687AB; 
	/* glow */
	-webkit-box-shadow:0 0 7px #3687AB; 
	-moz-box-shadow: 0 0 7px #3687AB; 
	box-shadow:0 0 7px #3687AB; 
}


.subLinks a { margin-left:-65px; }

.no-js .subLinks a { margin-left:0; }


._portfolio .subLinks { position:absolute; top:107px; width: 623px;}
._portfolio .subLinks a {
	width:60px; height:18px; 
	margin-right:5px;
	padding:21px 0;
	background: #A4918A url(../img/circle8.png) no-repeat;
	color:white;
	text-decoration:none;
	text-align:center;
	font-family:HeroRegular, sans-serif;
	text-transform:uppercase;
	opacity:0.7; filter: alpha(opacity=70);
	display: block;
	float:right;
}

.borderradius ._portfolio .subLinks a { 
	border-radius:50px;
	background-image:none;
}


.subLinks a.selected {
	background-color: #3687AB; opacity:1; filter:none;

}
.subLinks a:hover { 
	opacity:1; filter:none;
}

section dl { margin-bottom:25px; font-size:14px; }
/*
logo blue #3687AB
logo brown #532E22
medium brown #75584E
light brown #A4918A
light blue #D7E7EE
*/

.print .image a:first-child img { float:left; margin-right:20px; }
.print .image { clear:both; padding-top:20px;}

.caption { color:gray; font-style:italic; font-size:14px; }

.logos dt { min-width:66px; }







/*** TEAM ***/



._team main h2 { margin-top:0; }

._team h3 { margin-top:30px; }

._team aside { float:right; padding:0 0 10px 20px;  }
._team section { clear:both; }

.hidden 
/*, ._team section > div */ { display:none; }

.no-js section div,
.showAll section div { display:block; }

._team section h4 { background-color: #D7E7EE; padding:2px 10px; border-radius:5px; cursor:pointer; margin:25px 0 10px; }

/* 
._team section h4:before { content:"+ ";  }
._team section h4.open:before { content:"– ";  }
*/

.twtr-widget h4:before { content:"" !important; }

h4 i { font-weight:normal; white-space:nowrap; padding-left:10px; }

._team section p { margin-left:24px; }
._team section img { float:left; margin:0 10px 10px 0; }

#showAll { float:right; }

#teamPhotos { position:absolute; top:90px; text-align:right; /* for IE7: */ width:630px; width: inherit; }

#teamPhotos img { margin-left:7px; border:1px solid white; }

#teamPhotos img:hover { 
	border-color:#3687AB; 
}

._team section h4:hover,
._team section h4.open { color:white; background-color:#3687AB; }


.boxshadow #teamPhotos img:hover { 
	border-color:white; 
	/* glow */
	-webkit-box-shadow:0 0 7px #3687AB; 
	-moz-box-shadow: 0 0 7px #3687AB; 
	box-shadow:0 0 7px #3687AB; 
}



/* For IE */
.twtr-doc, 
.twtr-doc .twtr-hd h4 {
    background-color: #A4918A;
}
.twtr-timeline {
    background-color: #FFF;
}

.twtr-doc,
.twtr-hd a, 
.twtr-hd h3,
.twtr-hd h4 { color:#FFF; }


.twtr-tweet-text p { color: #333; }







/*** MAINTENANCE ***/

._maintenance main {
	background:url(../img/wrench.jpg) no-repeat 0 40%;
}

._maintenance main ul { list-style-type:none; margin-left:20px; }

._maintenance main li:before { content: "✓ "; color:green; font-weight:normal;}

._maintenance main li { text-indent:-1em; margin-bottom:10px; font-size:17px; font-weight:bold; }

._maintenance small { display:block; text-indent:0; font-style:italic; font-size:14px; font-weight:normal; }








/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }











/*******************************
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{}
    #cboxTopLeft{width:14px; height:14px; background:url(cbox/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(cbox/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(cbox/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(cbox/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(cbox/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(cbox/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(cbox/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(cbox/controls.png) repeat-y -211px 0;}
    #cboxContent{background:#fff; overflow:visible;}
        #cboxLoadedContent{margin-bottom:5px;}
        #cboxLoadingOverlay{background:url(cbox/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(cbox/loading.gif) no-repeat center center;}
        #cboxTitle{position:absolute; bottom:-27px; left:0; text-align:center; width:100%; color:#7C7C7C;}
        #cboxCurrent{position:absolute; bottom:-27px; left:58px; font-weight:bold; color:#7C7C7C;}
        
        #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(cbox/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
        #cboxPrevious{left:0px; background-position: -51px -25px;}
        #cboxPrevious.hover{background-position:-51px 0px;}
        #cboxNext{left:27px; background-position:-75px -25px;}
        #cboxNext.hover{background-position:-75px 0px;}
        #cboxClose{right:0; background-position:-100px -25px;}
        #cboxClose.hover{background-position:-100px 0px;}
        
        .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
        .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
        .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
		
/* WKR cbox mods
		
#cboxTitle * { display:inline; }
#cboxTitle dt { font-style:italic; }
#cboxTitle dd { margin:0 20px 0 0; }
#cboxTitle dd a { text-decoration:none; color:inherit;}
 */
 
#cboxTitle a { text-decoration:none; font-style:normal; }
#cboxTitle a:hover { text-decoration:underline; }
#cboxTitle { font-style:italic; font-size:13px;}