html { position: relative; }

@font-face {
	font-family: 'Folksolid';
	src: url('Folksolid.eot');
	src: local('Folk solid'), local('Folk-solid'), url('Folksolid.ttf') format('truetype'), url('Folksolid.svg#folksolid') format('svg');
}

@font-face {
	font-family: 'BebasRegular';
	src: url('bebas.eot');
	src: local('Bebas Regular'), local('Bebas'), url('bebas.ttf') format('truetype'), url('bebas.svg#bebas') format("svg");
}

@font-face {
	font-family: 'Arnold2.1Regular';
	src: url('arnold21.eot');
	src: local('Arnold 2.1 Regular'), local('Arnold21'), url('arnold21.ttf') format('truetype'), url('arnold21.svg#arnold21') format("svg");
}

@font-face {
	font-family: 'CantarellRegular';
	src: url('Cantarell-Regular.eot');
	src: local('Cantarell Regular'), local('Cantarell-Regular'), url('Cantarell-Regular.ttf') format('truetype'), url('Cantarell-Regular.svg#cantarell-regular') format('svg');
}

@font-face {
	font-family: 'CantarellBold';
	src: url('Cantarell-Bold.eot');
	src: local('Cantarell Bold'), local('Cantarell-Bold'), url('Cantarell-Bold.ttf') format('truetype'), url('Cantarell-Bold.svg#cantarell-bold') format('svg');
}

body { text-align: left; border:1px solid #fff; /* flash overlay fix */ }
h1.anchor { /* font-size: 0px; */ visibility: hidden;}
object { outline:none; }
.right { float: right; }

/* size up to 1920 x 1200 resolution */
#homepage, #ourwork, #contactus, #ourpeople { width: 1900px; height: 1150px; overflow: visible;}

/* positioning page containers */
#homepage { position: absolute; top: 0px; left: 0px;  }
#ourwork { position: absolute; top: 0px; left: 1900px;}
#contactus { position: absolute; top: 1150px; left: 0; }
#ourpeople { position: absolute; top: 1150px; left: 1900px; }

#home,
#ourworkanchor,
#contactusanchor,
#ourpeopleanchor { 
    position: relative;
}

.homecontent { background: transparent url("../img/homepage.png") no-repeat 0 0; width: 939px; height: 703px; position: relative; top: 145px; left: 170px; }
.ourworkcontent { height:600px; left:28px; overflow:hidden; position:absolute; top:130px; width:910px; }
.contactuscontent { height:600px; position:relative; top:180px; width:1150px; }

#innerflashfream { width: 874; height: 444px; position: relative; top: 132px; left: 40px; }
#innerflashfream { background: transparent; }
.flashreplacement { padding: 50px 0 0 55px; }

.xga { position:relative; top:-30px; left: 0px; }
.bg-1 { background: transparent url("../img/bg_blue.jpg") no-repeat 0 0; }
.bg-2 { background: transparent url("../img/bg_orange.jpg") no-repeat 0 0; }
.bg-3 { background: transparent url("../img/bg_purple.jpg") no-repeat 0 0; }
.bg-4 { background: transparent url("../img/bg_red.jpg") no-repeat 0 0; }
        
#contactus { background: transparent url("../img/contact_page.jpg") no-repeat 0 0; }
#ourpeople { background: transparent url("../img/people_page.jpg") no-repeat 0 0; }


#ourwork { background: transparent url("../img/our_work_page.jpg") no-repeat 0 140px; }
.ourworkprojects { 
    left:102px;
    position:relative;
    top:195px;
    width:588px;
}
.projectsScrollOutter { height: 335px; overflow: auto; } 

.home-intro {
    width: 440px;
    text-align: center;
    height: 80px;
    font: 11px/18px BebasRegular, "Arial Narrow", Helvetica, Sans-Serif;
    position: absolute;
    left: 350px;
    top: 70px;
    background-color: transparent;
    padding: 2px 20px;
    letter-spacing: 0.5px;
    word-spacing: 4px;
}

.ourworkprojects .project { 
    width: 48%; 
    float: left; 
    margin-bottom: 12px;
    background: transparent url(../img/thumbnail_frame.png) no-repeat 0 0; 
    height: 160px;
    overflow:hidden;
}

.ourworkprojects .alt { float: right; height: 160px; }

.ourworkprojects .meta {
    clear:both;
    overflow:hidden;
    padding:0 38px 0 10px;
}

.ourworkprojects .meta span {
    float: right;
}

.ourworkprojects a.case-thumb { 
    display: block; 
    width: 226px;
    height: 122px;
    margin:6px 6px 18px;
    background: url(../img/project_thumb.png) no-repeat 0 0;
}

.ourworkprojects a.case-thumb:hover { 
    background-position: 0 100%;
}

.ourworkprojects .case-thumb span {
    display: none;
}

.ourworkprojects a.case1 { background: url(../case_studies/case1.jpg) no-repeat 0 0; }
.ourworkprojects a.case2 { background: url(../case_studies/case2.jpg) no-repeat 0 0; }
.ourworkprojects a.case3 { background: url(../case_studies/case3.jpg) no-repeat 0 0; }
.ourworkprojects a.case4 { background: url(../case_studies/case4.jpg) no-repeat 0 0; }
.ourworkprojects a.case5 { background: url(../case_studies/case5.jpg) no-repeat 0 0; }
.ourworkprojects a.case6 { background: url(../case_studies/case6.jpg) no-repeat 0 0; }
.ourworkprojects a.case7 { background: url(../case_studies/case7.jpg) no-repeat 0 0; }
.ourworkprojects a.case8 { background: url(../case_studies/case8.jpg) no-repeat 0 0; }
.ourworkprojects a.case9 { background: url(../case_studies/case9.jpg) no-repeat 0 0; }
.ourworkprojects a.case10 { background: url(../case_studies/case10.jpg) no-repeat 0 0; }


.ourworkprojects .meta span { display: block; width: 12px; height: 12px; font-size: 0; margin: 0 5px 0 0;}
.ourworkprojects .meta .b { background: transparent url("../img/b.jpg") no-repeat 0 0; }
.ourworkprojects .meta .d { background: transparent url("../img/d.jpg") no-repeat 0 0; }
.ourworkprojects .meta .w { background: transparent url("../img/w.jpg") no-repeat 0 0; }
.ourworkprojects .meta .m { background: transparent url("../img/m.jpg") no-repeat 0 0; }

.ourworkprojects .meta h3 { 
    font-size: 11px;
    float: left; 
    width: 160px; 
    color: #b4b4b4; 
    font-family: BebasRegular, "Arial Narrow", Helvetica, Sans-Serif; 
    letter-spacing: 0.5px;
    word-spacing: 2px; 
}

.ourworkprojects .case-bubble-content { display: none; }

#projectSpeech { background: transparent url("../img/work_speechbubble.png") no-repeat 0 0;
    height:303px;
    left: 700px;
    top: -228px;
    position:relative;
    width:196px;
    font-size: 0.9em;
    overflow: auto;
    display: none;
}

#projectSpeech .projectBrief {
    padding: 0 15px 15px; 
    color: #c4c2c0;
    text-transform: uppercase;
    font-family: "Arial Narrow", Helvetica, Sans-Serif;
    font-weight:bold;
}

#projectSpeech .projectBrief .title {
    padding: 15px 0 0;
    color: #DC194D;
}    

.nav {
    position: relative; 
    top: 170px;
    left: 600px;
    font: 14px/20px 'Folksolid', Arial, sans-serif; 
    width: 500px; 
    overflow: hidden;
    clear:both;
}
.nav li .navihighlight { 
    display:block; 
    float:left; 
    padding: 0 5px; 
    margin-right: 20px; 
}

.nav, .nav li { 
    list-style: none; 
}

.nav li { 
    display: inline; 
}

.nav li a { 
    text-decoration: none; 
    display: block; 
    margin-right: 20px; 
    float: left; 
    color: #000;  
}

.nav-home { 
    font: 12px/28px 'CantarellBold', Arial, sans-serif;
    text-transform: uppercase;
    left: 120px; 
    z-index: 30; 
}

.nav-home li span.navhighlight {
    display: block;
    float: left;
    margin-right: 20px;
}
.color-4 li a { color: #D12F47; }
.color-3 li a { color: #913987; }
.color-2 li a { color: #DDAC11; }
.color-1 li a { color: #186F8A; }

.color-4 li span.navhighlight, 
.color-3 li span.navhighlight, 
.color-2 li span.navhighlight, 
.color-1 li span.navhighlight {
    color: #aaa;
}

.nav-contact { top:20px; }
.nav-contact li .navihighlight {color: #fff; background-color: #000; }

.nav-aboutus { left:600px; top:95px; }
.nav-aboutus li .navihighlight {color: #fff; background-color: #E80593;}

.nav-ourwork { 
	left:610px;
	top:40px;
	width:350px; 
}
.nav-ourwork li a { color: #383733; }
.nav-ourwork li .navihighlight {color: #fff; background-color: #E80593;}

#contactUsForm { 
    position: relative; 
    top: 237px; 
    left: 194px; 
    text-align: left; 
    width: 720px; 
    height: 230px; 
}

#contactUsForm label { 
    display: block; 
    line-height: 35px; 
    font-size: 0; 
    visibility: hidden; 
}

#contactUsForm .textInput, #contactUsForm .textArea { 
    background-color: transparent; 
    border: medium none; 
    font-size: 14px; 
    color: #494637; 
    font-family: "Trebuchet MS", Georgia, Serif; 
    padding: 2px 4px; 
}

#contactUsForm .textInput { 
    height: 20px; 
    width: 237px; 
    border: 2px solid transparent; 
}

#contactUsForm .textArea { 
    border:2px solid transparent;
    font-size:14px;
    height:144px;
    overflow:auto;
    visibility:visible;
    width:420px;    
}
#contactUsForm .labelMessage { float:right; margin-top:-124px;  }
#contactUsForm .submit {
    left:640px;
    position:absolute;
    top:198px;    
}

#aboutus-design-anchor {
    display:block;
    position: absolute;
    top: 186px;
    left: 190px;
    width: 280px;
    height: 170px;
    z-index: 100;
}
.aboutus-design-speech { 
    background:transparent url(../img/designers_bubble.png) no-repeat scroll 0 0;
    color:#222222;
    height:200px;
    left:480px;
    padding:80px 15px 15px 30px;
    position:absolute;
    top:220px;
    width:332px;
}

#aboutus-developer-anchor {
    display:block;
    height:100px;
    left:483px;
    position:absolute;
    top:366px;
    width:240px;
    z-index:100;
}

.aboutus-developer-speech {
    background:transparent url(../img/developer_bubble.png) no-repeat scroll 0 0;
    color:#2FD140;
    height:428px;
    left:125px;
    padding:35px 20px 20px;
    position:absolute;
    top:120px;
    width:235px;
    
}

.aboutus-developer-speech, .aboutus-design-speech {
    font-family: CantarellRegular,"Arial Narrow",Helvetica,Sans-Serif;
    font-size: 11px;
    text-transform:uppercase;
    display: none;
    overflow:hidden;
    line-height: 1.2;    
}

.aboutus-developer-speech {
    line-height: 1.5;
}

.aboutus-developer-speech ul, .aboutus-design-speech ul {
    padding: 0 0 0 15px;
}

.aboutus-developer-speech ul li, .aboutus-design-speech ul li {
    list-style-type: disc;
}

.aboutus-developer-speech h3, .aboutus-design-speech h3 { 
    font-size:16px;
    font-weight:bold;
    line-height:20px;
    padding:0 0 10px;
}

.aboutus-developer-speech p, .aboutus-design-speech p { padding-bottom: 10px;}


#ajax-submit-indicator {
    background:transparent url(../img/ajax-loader.gif) no-repeat scroll 0 0;
    height:20px;
    left:620px;
    overflow:hidden;
    position:relative;
    top:15px;
    width:20px;
    display: none;
}
#ajax-submit-indicator span { display: none; }
#success-stamp { 
    background: transparent url(../img/message_sent.png) no-repeat scroll 0 0; 
    height:176px; width:452px;
    position:relative; left:320px; z-index:101;
    display: none;
}
#sucess-stamp span { display: none; }
.validation-error { border: 2px dotted red !important;}
.homepage-gallery-fallback { left:-25px; position:relative; top:-16px;}

.manifesto { 
    font:14px/18px CantarellRegular,"Arial Narrow",Helvetica,Sans-Serif;
    left:740px;
    position:relative;
    top:260px;
    width:350px;
}

.manifesto p {
    padding: 0 0 0 30px;
    background: transparent url(../img/asterisc_pink_03.png) no-repeat scroll 0 0;
    margin: 0 0 20px 0;
}

.manifesto p span, .manifesto p span a {
    color: #fff;
    background-color: #000;
}

 .manifesto p span a {
     text-decoration: none;
 }
 
.manifesto .strapline { font-size: 18px; line-height: 2; }
.manifesto .get-in-touch { background: transparent url(../img/asterisc_black_06.png) no-repeat scroll 0 0; }
.manifesto .get-in-touch span a { background-color: #EB0484; }