html{
}
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 1.4em;
background: #fff url(../assets/images/bg_body.jpg) 0 0 repeat-x;
color: #000;
}

body.work{
background: #fff url(../assets/images/bg_work.jpg) 0 0 repeat-x;
text-align:left;
}

body.text{
background: #fff url(../assets/images/bg_text.jpg) 0 0 repeat-x;
text-align:left;
}

body.text img{
margin: 5px;
padding: 5px;
}

body.proof{
background: #fff url(../assets/images/client_back.jpg) 0 0 repeat-x;
}
body.wideright{ /* Wide right column with flex area */
}

body.homepage{ /* Homepage */
/*background: #fff url(../assets/images/bg_body_home.gif) 0 0 repeat-x;*/
}

body.scroll{ /* Scroller page */
/*background-image: none;*/
background: #fff;
}

/* Main Divs
....................................................................... */
#container{
/*position: relative;
margin: 0 auto;
width: 948px;*/
width: 100%;
float: left;
background: #fff url(../assets/images/bg_body.jpg) 0 0 repeat-x;
}

body.homepage #container{
background: #fff url(../assets/images/bg_body_home.jpg) 0 0 repeat-x;
}

#container2{ /* Contains footer */
clear: both;
float: left;
width: 100%;
border-top: 1px solid #5679a4;
background: #FFF;
color:#1b1d1e;
}
#content{
position: relative;
margin: 0 auto;
width: 948px;
}

#header{
float: left;
width: 948px;
height: 171px;
background: url(../assets/images/bg_header.jpg) 0 0 no-repeat;
}

body.homepage #header{
background: url(../assets/images/bg_header_home.jpg) 0 0 no-repeat;
}
#topnavi{
clear: both;
float: left;
width: 948px;
height: 40px;
background: url(../assets/images/bg_brand2.jpg);
font-size: 1em;
padding: 2px 0 0 0;
}
body.homepage #topnavi{
height: 56px;
background-image: none;
padding: 0;
}
#brand { /* Homepage only */
clear: both;
float: left;
width: 948px;
height: 327px;
background: url(../assets/images/bg_brand.jpg) 0 0 no-repeat;
}
#brand_container{
float: left;
width: 928px;
height: 268px;
margin: 20px 0 0 0;
border: 10px solid #000;
}
#brand_container img{
float:left;
}
#wrapper{
clear: both;
float: left;
width: 948px;
min-height: 450px;
}
body.homepage #wrapper{
background-image: none;
padding: 20px 0 20px 0;
min-height: 150px;
}
.fullwidth{
clear: both;
float: left;
width: 948px;
padding: 0 20px 20px 20px;
}

.fullwork{
clear: both;
float: left;
width: 948px;
padding: 0 20px 0px 20px;
}

.homeLeft{
float: left;
width: 415px;
padding: 0 20px 10px 20px;
display: inline;
}
.homeMiddle{
float: left;
width: 250px;
padding: 18px 5px 5px 20px;
border-right: 1px solid #b9c5d2;
display: inline;
}
.homeRight{
float: right;
width: 180px;
padding: 0 10px 10px 0px;
display: inline;
}
.left{
float: left;
width: 650px;
padding: 5px 20px 20px 20px;
display: inline;
}
.leftWork{
float: left;
width: 650px;
padding: -20px 20px 20px 20px;
display: inline;
}
body.wideright .leftWork, body.wideright .left{
width: 540px;
}
.right{
float: right;
width: 225px;
padding: 20px 0 20px 20px;
margin: 0 10px 0 0;
border-left: 12px solid #9fb2cd;
display: inline;
}

.rightWork{
float: right;
width: 225px;
padding: 20px 0 20px 20px;
margin: 20px 10px 0 0;
border-left: 12px solid #9fb2cd;
display: inline;
}

body.wideright .right, body.wideright .rightWork{
width: 305px;
border-right: 12px solid #9fb2cd;
}
#footer{
/*clear:none;
float: left;
width: 928px;
width:100%;
background: #0a1c30;
padding: 10px 0 10px 20px;
font-size: 0.8em;
font-weight: bold;
color: #FFF;*/
margin: 0 auto;
width: 928px;
padding: 10px 0 10px 20px;
font-size: 0.8em;
font-weight: bold;
}

/* Generic
....................................................................... */
p{
line-height: 1.4em;
margin: 0 0 10px 0;
}
h1{
float: left;
font-size: 1.7em;
font-weight: normal;
color: #fff;
padding: 0 15px 0 0;
}
.homeleft h2, h2{
font-size: 1.5em;
font-weight: normal;
color: #023565;
margin: 0 0 10px 0;
}
h3{
font-size: 1.3em;
font-weight: bold;
margin: 0 0 10px 0;
color: #023565;
}
.webAd{
font-size: 1.2em;
font-weight: normal;
margin: 0 0 5px 0;
color: #023565;
}
a, a:link, a:active, a:visited{
color: #000;
text-decoration: underline;
}
a:hover{
color: #013464;
}
em{
color: #013464;
font-style: normal;
font-weight: bold;
}
ul, ol{
margin: 10px 0 10px 25px;
list-style-type: none;
}
li{
margin: auto;
list-style-type: disc;
padding: 0 0 6px 0;
}
img, img a{
border: 0;
}
img.floatright { /* Right aligned images to appear within paragraphs */
float: right;
margin: 0 0 10px 20px;
padding: 0 10px 0px 10px;
}
.small{
font-size: 0.8em;
}
.highlighted_link a, .highlighted_link a:link, .highlighted_link a:active, .highlighted_link a:visited{
background: url(../assets/images/bg_link_highlighted.gif) 0 5px no-repeat;
color: #013464;
font-weight: bold;
text-decoration: none;
padding: 0 0 0 10px;
}
.highlighted_link a:hover{
text-decoration: underline;
}
.clear{
clear: both;
}
.floatleft{
float: left;
}
.floatright{
float: right;
}

/* Topnavi
....................................................................... */
#topnavi ul{
float: right;
margin: 0;
padding: 0;
}
#topnavi li{
margin: 0;
padding: 0;
display: inline;
list-style: none;
}
#topnavi li a, #topnavi li a:link, #topnavi li a:active, #topnavi li a:visited{
float: left;
display: block;
height: 40px;
}
#topnavi li a:hover{
}
#topnavi li a span {
display: none;
}

/* Topnavi image buttons
........................................................... */
.home a, .home a:link, .home a:visited, .home a:active	{
background: url(../assets/images/btn_home.gif);
width: 65px;
}
.home a:hover	{
background-position: -65px;
}
.home_on a { /* Selected state */
background: url(../assets/images/btn_home.gif);
background-position: -65px;
width: 65px;
}

.about a, .about a:link, .about a:visited, .about a:active	{
background: url(../assets/images/btn_about.gif);
width: 71px;
}
.about a:hover	{
background-position: -71px;
}
.about_on a { /* Selected state */
background: url(../assets/images/btn_about.gif);
background-position: -71px;
width: 71px;
}

.experience a, .experience a:link, .experience a:visited, .experience a:active	{
background: url(../assets/images/btn_experience.gif);
width: 104px;
}
.experience a:hover	{
background-position: -104px;
}
.experience_on a { /* Selected state */
background: url(../assets/images/btn_experience.gif);
background-position: -77px;
width: 104px;
}

.clients a, .clients a:link, .clients a:visited, .clients a:active	{
background: url(../assets/images/btn_clients.gif);
width: 77px;
}
.clients a:hover	{
background-position: -77px;
}
.clients_on a { /* Selected state */
background: url(../assets/images/btn_clients.gif);
background-position: -77px;
width: 77px;
}

.work a, .work a:link, .work a:visited, .work a:active	{
background: url(../assets/images/btn_work.gif);
width: 65px;
}
.work a:hover	{
background-position: -65px;
}
.work_on a { /* Selected state */
background: url(../assets/images/btn_work.gif);
background-position: -65px;
width: 65px;
}

.impact a, .impact a:link, .impact a:visited, .impact a:active	{
background: url(../assets/images/btn_impact.gif);
width: 81px;
}
.impact a:hover	{
background-position: -81px;
}
.impact_on a { /* Selected state */
background: url(../assets/images/btn_impact.gif);
background-position: -81px;
width: 81px;
}

/* Topnavi image buttons (Homepage)
........................................................... */
body.homepage .home a, body.homepage .home a:link, body.homepage .home a:visited, body.homepage .home a:active	{
background: url(../assets/images/btn_h_home.gif);
width: 65px;
}
body.homepage .home a:hover	{
background-position: -65px;
}
body.homepage .home_on a { /* Selected state */
background: url(../assets/images/btn_h_home.gif);
background-position: -65px;
width: 65px;
}

body.homepage .about a, body.homepage .about a:link, body.homepage .about a:visited, body.homepage .about a:active	{
background: url(../assets/images/btn_h_about.gif);
width: 71px;
}
body.homepage .about a:hover	{
background-position: -71px;
}
body.homepage .about_on a { /* Selected state */
background: url(../assets/images/btn_h_about.gif);
background-position: -71px;
width: 71px;
}

body.homepage .experience a, body.homepage .experience a:link, body.homepage .experience a:visited, body.homepage .experience a:active	{
background: url(../assets/images/btn_h_experience.gif);
width: 104px;
}
body.homepage .experience a:hover	{
background-position: -104px;
}
body.homepage .experience_on a { /* Selected state */
background: url(../assets/images/btn_h_experience.gif);
background-position: -77px;
width: 104px;
}

body.homepage .clients a, body.homepage .clients a:link, body.homepage .clients a:visited, body.homepage .clients a:active	{
background: url(../assets/images/btn_h_clients.gif);
width: 77px;
}
body.homepage .clients a:hover	{
background-position: -77px;
}
body.homepage .clients_on a { /* Selected state */
background: url(../assets/images/btn_h_clients.gif);
background-position: -77px;
width: 77px;
}

body.homepage .work a, body.homepage .work a:link, body.homepage .work a:visited, body.homepage .work a:active	{
background: url(../assets/images/btn_h_work.gif);
width: 65px;
}
body.homepage .work a:hover	{
background-position: -65px;
}
body.homepage .work_on a { /* Selected state */
background: url(../assets/images/btn_h_work.gif);
background-position: -65px;
width: 65px;
}

body.homepage .impact a, body.homepage .impact a:link, body.homepage .impact a:visited, body.homepage .impact a:active	{
background: url(../assets/images/btn_h_impact.gif);
width: 81px;
}
body.homepage .impact a:hover	{
background-position: -81px;
}
body.homepage .impact_on a { /* Selected state */
background: url(../assets/images/btn_h_impact.gif);
background-position: -81px;
width: 81px;
}


/* Sub navi
....................................................................... */
#subnavi{
margin: 0 0 10px 0;
padding: 10px 0 10px 0;
}
#subnavi ul{
margin: 0;
padding: 0;
}
#subnavi li{
clear: both;
margin: 0 0 1px 0;
padding: 0;
list-style: none;
}
#subnavi li a, #subnavi li a:link, #subnavi li a:active, #subnavi li a:visited{
display: block;
width: 200px;
color: #032f58;
font-size: 1.3em;
text-decoration: none;
background: #fff url(../assets/images/bg_subnavi.gif) 12px 12px no-repeat;
padding: 6px 10px 6px 25px;
}

#subnavi li a:hover{
background-color: #c9d6e7;
}
#subnavi li.selected a, #subnavi li.selected a:link, #subnavi li.selected a:active, #subnavi li.selected a:visited{
background-color: #c9d6e7;
}

/* Sub navi
....................................................................... */
#clientarchive{
margin: 0 0 10px 0;
padding: 10px 0 10px 0;
}
#clientarchive ul{
margin: 0;
padding: 0;
}
#clientarchive li{
clear: both;
margin: 0 0 1px 0;
padding: 0;
list-style: none;
}
#clientarchive li a, #clientarchive li a:link, #clientarchive li a:active, #clientarchive li a:visited{
display: block;
width: 200px;
color: #032f58;
font-size: 1.0em;
text-decoration: none;
background: #fff url(../assets/images/bg_subnavi.gif) 8px 8px no-repeat;
padding: 6px 10px 6px 25px;
}

#clientarchive li a:hover{
background-color: #c9d6e7;
}
#clientarchive li.selected a, #clientarchive li.selected a:link, #clientarchive li.selected a:active, #clientarchive li.selected a:visited{
background-color: #c9d6e7;
}

/* Header styles
....................................................................... */
#logo{
float: left;
margin: 40px 0 0 0;
}
#strapline{
color: #98acca;
font-size: 0.9em;
float: right;
text-align: right;
margin: 110px 20px 0 0;
display: inline;
}

#strapline a, #strapline a:link, #strapline a:active, #strapline a:visited {
text-decoration: none;
color: #98acca;
font-size: 0.9em;
font-weight: bold;
margin: 0 4px 0 4px;
}
#strapline a:hover {
text-decoration: underline;
}

/* Footer styles
....................................................................... */
#footer a, #footer a:link, #footer a:active, #footer a:visited {
text-decoration: none;
color: #1b1d1e;
margin: 0 4px 0 4px;
}
#footer a:hover {
text-decoration: underline;
}

/* Scroller styles
....................................................................... */
#scroller {
position: relative;
width: 382px;
margin: 7px 0 0 0;
}
#scroll_left { /* Left arrow */
float: right;
}
#scroll_right { /* Right arrow */
float: left;
}
#scroll_container { /* Container for scrolling element */
position:absolute;
top:0;
left:18px;
width:345px;
height:120px;
overflow:hidden;
clip:rect(0,345,120,0);
visibility:hidden;
}
#scroll_content { /* Container for thimbnail images */
position:absolute;
width: 1600px; /* Dynamic value (124px width per thumbmnail image) */
top:0;
left:0;
background: #fff;
margin-top: 5px;
}
#scroll_content img { /* Thumbnail images */
margin: 0 1px 0 2px;
border: 2px solid #000;
}

/* Others
....................................................................... */
.project{
clear: both;
margin: 0 0 20px 0;
}
.project img{
border: 2px solid #000;
}
.featured{
clear: both;
margin: 0 0 10px 0;
}
.featured strong{
font-size: 1.2em;
}
.featured img{
border: 2px solid #000;
margin: 0 0 10px 0;
}
body.proof a, body.proof a:link, body.proof a:active, body.proof a:visited{
color: #013464;
text-decoration: underline;
}
body.proof a:hover{
color: #013464;
}