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

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent
}

img {
image-rendering:optimizeQuality; -ms-interpolation-mode:bicubic;
}

.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}
 img, div, input { behavior: url("iepngfix.htc") }
.container_12,.container_16{margin:0;width:960px}
.clearfix:after {
            content:            ".";
            display:            block;
            height:             0;
            clear:                both;
            visibility:           hidden;
}


body, html {
	line-height:1; height:100%;
}
ol, ul {
	list-style:none
}
blockquote, q {
	quotes:none
}
blockquote:before, blockquote:after, q:before, q:after {
	content:'';
	content:none
}
:focus {
	outline:0
}
ins {
	text-decoration:none
}
del {
	text-decoration:line-through
}
table {
	border-collapse:collapse;
	border-spacing:0
}
/*BASIC ELEMENTS*/
body, html {
	height:100%;
}
body {
/*	font:normal 12px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
*/	
	font:normal 0.8em/1.2em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
	color:#333;
	height:100%;
	background-color:#f9f9f9;
}

a {
	color:#555;
	text-decoration:none;
}
a:hover {
	color:#be0000;
}
p {
	margin-bottom:18px;
}
ul {
	margin-bottom:18px;
}
ul.indent {
	padding-left:18px;
}
h2 {
	font-weight:normal;
	color:#FFF;
	margin-bottom:20px;
}
h2.contact, h2.enquiry-form, h2.also-on {
	height:40px;
	text-indent:-9999px;
	background:url(../images/content/sprite-nav.png) no-repeat 0 -440px;
}
h2.enquiry-form {
	background-position:0 -400px;
}
h2.also-on {
	background-position:0 -480px;
	margin-bottom:32px;
}
.border-link {
	border-bottom:#BE0000 1px solid;
}
.grey-broder {
	border: #CCC 1px solid;
}




/*WRAP FOR MAIN AREA*/
.wrap {
	position:relative;
	height:100%;
}
/*LEFT COL MAIN NAV*/

div.logo {
	position:absolute;
	z-index:15;
	top:20px;
	left:30px;
}
.main-nav li a {
	font-size:11px;
	text-shadow: 0px 1px 1px #fff;
}

.main-nav li ul li a {
	padding-left:0;
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;	
}



.main-nav li ul li a:hover {
	background-color:#FFFFFF;
	padding-left:5px;
	
	}

.main-nav-item {
	margin:10px 0;
	border-bottom: #FFF 1px dotted;
}
.left-col {
	position:fixed;
	top:120px;
	left:30px;
	width:140px;
}
.left-col a {
	display:block;
}
/*SPRITE NAV*/

ul.main-nav li a span {
	display:none;
}
ul.main-nav {
	width:140px;
}
#home-nav, #profile-nav, #contact-nav, #work-nav {
	display:block; height:30px; width:140px; background:url(../images/content/sprite-nav.png) no-repeat 0 0; float:left;
	margin-bottom:0;
}
#home-nav {
	background-position:0 -520px;
}
#home-nav:hover {
	background-position:-140px -520px;
}
body#home-page #home-nav {
	background-position:0 -44px;
}
#profile-nav {
	background-position:0 -550px;
}
#profile-nav:hover {
	background-position:-140px -550px;
}
body#profile-page #profile-nav {
	background-position:-51px -550px;
}
#contact-nav {
	background-position:0 -580px;
}
#contact-nav:hover {
	background-position:-140px -580px;
}
body#work-page #work-nav {
	background-position:-191px -580px;
}
#work-nav {
	background-position:0 -610px;
}
#work-nav:hover {
	background-position:-140px -610px;
}
body#work-page #work-nav {
	background-position:-112px -44px;
}
/*DROP DOWN - SUPERFISH*/

.sf-menu, .sf-menu * {
	margin:			0;
	list-style:		none;
}
.sf-menu {
	line-height:	2.0;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
/*	background-color:#f9f9f9;
*/	width:			140px; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
	left:			0;
	top:			2.1em; /* match top ul list item height */
	z-index:		99;
}
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}


/*MAIN COL*/

div#top {
	width:860px;
	margin:0 0 20px 200px;
	padding-bottom:100px;
	position:relative;
}
div#top ul li img:first-child {
	margin-bottom:20px;
}
/*SPRITE NAV ITEMS*/


#PageNavPrev, #PageNavNext, #PageNavTop, #closecontactpanel {
	display:block;
	width:220px;
	height:40px;
	background:url(../images/content/sprite-nav.png) no-repeat 0 0;
	float:left;
	text-indent:-9999px;
}
#closecontactpanel {
	margin:20px 0;	
	background-position:0 -120px;
}
#PageNavPrev {
	background-position:0 0;
	margin-bottom:10px;
}
#PageNavNext {
	background-position:0 -40px;
}
#PageNavTop {
	background-position:0 -80px;
	margin-bottom:20px;
}
#PageNavPrev:hover {
	background-position:-220px 0;
}
#PageNavNext:hover {
	background-position:-220px -40px;
}
#PageNavTop:hover {
	background-position:-220px -80px;
}
#closecontactpanel:hover {
	background-position:-220px -120px;
}
/*NEXT PREV + TOP navigation*/

div#PageNav {
	position:fixed;
	width:220px;
	height:150px;
	left:30px;
	top:300px;
	margin:0;
	z-index:10;
}
.inactive {
	display:none;
}
#PageNavPrev.inactive, #PageNavTop.inactive {
	background-position:0 -1000px;
}
/*YO INTERNET EXPLORER, YOU SUCK*/
* html #PageNav {
	display: none;
}
/*PROJECT-headers*/

/*APPLY THIS!!!!!!!!!!!!!!!!!!!!!*/
.header{
	color:#FFF;
	background-position: 0 0;
	background-repeat:no-repeat;
}

.coop-header {
	background: #000 url(../images/projects/coop-bg.gif) no-repeat 200px 300px fixed;
	color:#FFFFFF;
}
.eastcoast-header {
	background:#49392e url(../images/projects/eastcoast-e-bg.gif) 0 0 fixed no-repeat;
	color:#FFF;
}


.network-header {
	background:#2f2721 url(../images/projects/network-+-bg.gif) no-repeat 0 0 fixed;
	color:#FFFFFF;
}
.cherrybrook-capital-header {
	background: #512100 url(../images/projects/cherrbrook-header.gif) 0 0 fixed no-repeat;
	margin-top:10px;
	color:#FFF;
}
.george-fashion-header {
	background: #76697a url(../images/projects/george-fashion-bg.jpg) 0 0 fixed no-repeat;
	margin-top:10px;
	color:#FFF;
}
.dore-header {
	background: #bf9f10 url(../images/projects/dore-bg.gif) 0 0 fixed no-repeat;
	margin-top:10px;
	color:#FFF;
}
.stoned-crow-header {
	background:#242424 url(../images/projects/crow-bg-header.gif) 0 0 fixed no-repeat;
	margin-top:10px;
	color:#FFF;
}

.vault146-header {
	background:#2c3b45 url(../images/projects/vault146-header.gif) 0 0 fixed no-repeat;
	margin-top:10px;
	color:#FFF;
}

.esr-prestige-header {
	background:#000000 url(../images/projects/esr-prestige-bg.gif) 0 0 fixed no-repeat;
	color:#FFF;
}

.institchu-header{
	background:#000842;
	color:#FFF;
}


.details-main {
	width:300px;
	float:left;
	padding:200px 0 0 0;
}
.details-deliverables {
	width:200px;
	float:left;
	padding:200px 0 0 300px;
}
/*
TOOLTIP - drop down image reveal
*/

#screenshot {
	position:absolute;
	z-index:50;
	background:#fff;
	padding:0px;
	display:none;
	color:#fff;
}


/* 
Portfolio image explanation
*/

#aToolTip {
	position: absolute;
	display: none;
	z-index: 50000;
	top:140px;
	left:100px;
}


#aToolTip .aToolTipContent {
	position:relative;
	margin:0;
	padding:0;
}

.defaultTheme {
	background:#FFF;
	color:#AAA;
	margin:5px 0 0 0;
	padding:5px 10px;
	/*font-size:10px;
	line-height:10px;*/
	
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;
	border-radius: 20px;
}

           

.tooltip{}

div#top span, div#top img {
	display:block;
	padding-top:10px;
}
div#top img {
	width:100%;
	height:auto;
}
div#top img.grey-broder {
	width:858px;
	height:auto;
	margin-top:10px;
}
/* PARALLAX BABY, vertical version */
.items {
	overflow:hidden;
}
.item {
	width:100%;
	overflow:hidden;
	position:relative;
	height:600px;
}
.inner, .inner-lev1, .inner-lev2 {
	width:100%;
	height:100%;
	position:absolute;
	z-index:1;
}
.content {
	background:rgba(255,255,255,0.9);
	background:white;
	padding:20px;
	width:300px;
	margin:30px;
	position:relative;
	z-index:2;
}
.inner1 {
	background:url(../images/projects/E-eastcoast.png) 0 0 fixed no-repeat;
}
.inner2 {
	background:url(../images/projects/eastcoast-joinery-heading.png) 0 0 fixed no-repeat;
}
.inner-cherrybrook-text {
	background:url(../images/projects/cherrbrook-header-text.png) 0 0 fixed no-repeat;
}
.inner-stoned-crow-text {
	background:url(../images/projects/stoned-crow-header-text.png) 0 0 fixed no-repeat;
}
.inner-eastcoast-text {
	background:url(../images/projects/eastcoast-joinery-text.png) 0 0 fixed no-repeat;
}
.inner-network-text {
	background:url(../images/projects/network-agency+management-text.png) 0 0 fixed no-repeat;
}
.inner-coop-text {
	background:url(../images/projects/co-op-text.png) 0 0 fixed no-repeat;
}
.inner-george-text {
	background:url(../images/projects/george-fashion-text.png) 0 0 fixed no-repeat;
}
.inner-dore-text {
	background:url(../images/projects/dore-text.png) 0 0 fixed no-repeat;
}

.inner-vault146-text {
	background:url(../images/projects/vault146-text.png) 0 0 fixed no-repeat;
}

.inner-esr-prestige-text {
	background:url(../images/projects/esr-prestige-text.png) 0 0 fixed no-repeat;
}

.institchu-text {
	background:url(../images/projects/institchu-text.png) 0 0 fixed no-repeat;
}


/*CONTACT AREA*/

.contact-area {
	background:#be0000 url(../images/content/say-hello.png) 0 0 fixed no-repeat;
	padding:20px 0 50px 220px;
	display:none;
}
.contact-wrap {
	padding:0 20px;
	color:#FFF;
}
.contact-details {
	width:280px;
	padding-right:20px;
	margin:0 20px 40px 0;
	float:left;
}
.contact-enquiry-form {
	width:220px;
	float:left;
	margin-right:40px;
}
.contact-socialmedia {
	width:220px;
	float:left;
	margin-left:20px;
}
.contact-area a {
	color:#FFF;
	text-decoration:underline;
}
.contact-area a:hover {
	color:#4c0000;
}
a.skype, a.linkedin, a.behance, a.twitter {
	display:block;
	background:url(../images/content/sprite-nav.png) no-repeat 0 -160px;
	width:220px;
	height:60px;
	text-indent:-9999px
}
a.linkedin {
	background-position:0 -160px;
}
a.skype {
	background-position:0 -220px;
}
a.behance {
	background-position:0 -280px;
}
a.twitter {
	background-position:0 -340px;
}
a.linkedin:hover {
	background-position:-220px -160px;
}
a.skype:hover {
	background-position:-220px -220px;
}
a.behance:hover {
	background-position:-220px -280px;
}
a.twitter:hover {
	background-position:-220px -340px;
}
input, textarea {
	width:220px;
	padding:10px;
	font-size:14px;
	background-color:#FFF;
	color:#980000;
	border:#900 1px solid;
	font:normal 12px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.enquiry-form {
	width:250px;
	float:left;
}
input.submit {
	width:200px;
	height:30px;
	border:0;
}
/*PORTFOLIO PAGE*/

.portfolio-wrap {
	margin:100px 0 0 200px;
}
.portfolio-module {
	width:320px;
	height:232px;
	float:left;
	background:no-repeat 0 0;
	margin-bottom:20px;
}
.cherrybrook-module {
	background:url(../images/projects/thumbnails/cherrybrook.jpg);
}
.stoned-crow-module {
	background:url(../images/projects/thumbnails/stonedcrow.jpg);
}
.eastcoast-module {
	background:url(../images/projects/thumbnails/eastcoast.jpg);
}
.george-module {
	background:url(../images/projects/thumbnails/george.jpg);
}
.network-module {
	background:url(../images/projects/thumbnails/network.jpg);
}
.co-op-module {
	background:url(../images/projects/thumbnails/co-op.jpg);
}
.feature_box {
	width:320px;
	height:232px;
	position:relative;
	float:left;
	margin:0 0 20px 0;
}
.feature_box p {
	overflow:hidden;
	width:100%;
	height:320px;
	z-index:1;
	background: transparent url(../images/thumbnail/white-mask.png) no-repeat;
	margin:0;
	font-size:11px;
	line-height:15px;
	display:block;
}
.feature_box p a {
	padding:100px 0;
	display:block;
	color:#000;
	line-height:15px;
	text-align:center;
}
 *::-moz-selection {
background: #cccccc none repeat scroll 0 0;
color:#FFF;
}
::selection {
	background: #cccccc none repeat scroll 0 0;
	color:#FFF;
}







/*HOME*/

body#home-page #home-nav {background-position:-140px -520px;}
body#home-page #home-nav:hover {background-position:-280px -520px;}
body#home-page #profile-nav {background-position:-140px -550px;}
body#home-page #profile-nav:hover {background-position:-280px -550px;}
body#home-page #contact-nav {background-position:-140px -580px;}
body#home-page #contact-nav:hover {background-position:-280px -580px;}
body#home-page #work-nav {background-position:-140px -610px;}
body#home-page #work-nav:hover {background-position:-280px -610px;}

#home-page{background-color:#000000; color:#FFFFFF;}

#home-page .left-col{position:relative; width:140px;}

#supersized { position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; background-color:#000; }
#supersized img{ height:auto; width:auto; position:relative; outline:none; border:none; -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }

.home-wrap{margin:0 20px 0 200px; width:80%; position:relative;}

body#home-page h1{display:block; width:600px; height:270px; margin:0 0 60px 0; background:url(../images/content/home-sprite.png) no-repeat 0 40px;}
body#home-page h1 span{display:none;}

.services-intro-col{width:300px; float:left; margin-right:20px;}
.featured-work-col{ position:absolute; }
.work-col-wrap{height:250px; overflow:hidden;}
.featured-wrap{float:left;}

h2#work{display:block; width:100%; height:30px; background:url(../images/content/home-sprite.png) no-repeat 0 -360px;}

h2#services{display:block; width:100%; height:30px; background:url(../images/content/home-sprite.png) no-repeat 0 -300px;}

h2#approach{display:block; width:100%; height:30px; background:url(../images/content/home-sprite.png) no-repeat 0 -330px;}

h2#approach span, h2#services span, h2#work span{display:none;}

#home-page h2{margin-bottom:0;}



.home-link{display:block; height:26px; padding:4px 0 0 40px; background:url(../images/content/home-sprite.png) no-repeat 0 -390px; color:#FFFFFF; 
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;	
			}

.home-link:hover{background-position: 15px -390px; color:#be0000; color:#FF0000;}


@media only screen and (max-width: 1024px) {
	
div#top span, div#top img {
	display:block;
	padding-top:10px;
}

	
div#PageNav {
	left:5%;
}
	
div#top {
	position:relative;
	width:94%;
	margin:0 3%;
}

.left-col{
	top:0;
	left:0;
	padding-left:5%;
	width:100%;
	background-color:#f9f9f9;
}

.sf-menu ul {
	position:		absolute;
	top:			-999em;
/*	background-color:#f9f9f9;
*/	width:			100%; /* left offset of submenus need to match (see below) */
}

ul.main-nav {
	width:100%;
}


#home-nav, #profile-nav, #contact-nav, #work-nav {
	display:block; height:30px; width:140px; float:none;
	margin-bottom:0;
}

div.logo {
	position:absolute;
	z-index:5;
	top:20px;
	left:5%;
}

.item {
	width:100%;
	position:relative;
	height:auto;
}

.details-deliverables, .details-main{margin: 100px 20% 40px 20%; padding:0; width:60%; float:none; height:auto;}

.eastcoast-header{background-image:none; height:auto;}
.inner-eastcoast-text{background-position:-930px 0; height:500px;}

img.fixedTip{display:none; height:0;}

.portfolio-wrap {
	width:100%; margin:100px auto 10px auto;}
	
	
#aToolTip {
	left:0;
	margin-left:0;
}

.defaultTheme {
	background:#FF0;
	margin:2% 0 0 2%;
	padding:5px 1;}
}

/*TABLET*/

@media screen and (max-device-width: 1024px) {
	div#PageNav {
		display:none;
	}
	
	.sf-menu li:hover ul, .sf-menu li.sfHover ul {
		display:none;}

}



/*MOBILE*/

@media screen and (max-device-width: 480px) {
	
 body{font-size:2em; line-height:1.2em;}
	
	div#top {
	position:relative;
	width:90%;
	padding: 4em 0 0 0;
	margin:0 auto;
}

#home-page .left-col, .left-col{
	z-index:6000;
	top:0;
	left:0;
	width:100%;
	background-color:#F9F9F9;
}
#home-page .left-col{background-color:#000;}
#home-page .left-col ul.main-nav li a{ color:#FFF;}
	
ul.main-nav { width:100%; }

#home-nav, #profile-nav, #contact-nav, #work-nav {
	height:auto; width:100%; background:none; float:left;
}

ul.main-nav li a span {
	display:inline; font-size:4em; padding:0; text-align:center; padding:0.5em 1em;
}

div.logo{top:6em; left:10%;}
	
	/*HOME*/
	
	#home-page div.logo{top:100px; left:5%; width:200px; height:auto;}
	#home-page div.logo img{width:100%; height:auto;}
	
.home-wrap{margin:0 35% 0 5%; padding-top:150px; width:60%; position:relative;}
.services-intro-col{width:100%; float:none; margin-right:20px;}
.featured-work-col{ position:relative; width:100% }
.work-col-wrap{height:auto; overflow:auto; width:100%;}
.featured-wrap{float:none;}

h2#approach span, h2#services span, h2#work span{display:inline; color:#F00;}
h2#approach, h2#services, h2#work{ background:none; margin:0.5em;}

}