body {
    margin: 0;
    padding: 0;
    background:  #313130;
    font-family: "Arial", "Helvetica", sans-serif;
    font-size: 0.75em;
    line-height: 1.4em;
    color : #C9C9C9;
}

* {
    margin: 0;
    padding: 0;
}
p, ul, ol {
    margin-bottom: 18px;
}

img,
a img {
    border: 0;
}

img{
background-repeat: no-repeat;
	background-color: #313030;
/*	background-image: url(../images/loading_dark.gif);*/
	background-image: url(../images/ajax-loader.gif);
	background-position: 0 200px;
}

a:link,
a:visited {
    text-decoration: none;
    color: #000;
}

a:hover,
a:active {
    color : #999;
}

/*.clearer{
 	clear: both;
 	width: 100%;	
}     */

#background {
	background-image: url(../images/search_background.gif);
	background-repeat: repeat-x;
	background-position: 0 -790px;
}

/************************
    Container
***********************/

#container {
    margin: 0 auto;
    /*width: 100%; */
    max-width: 1280px;
    border-top: 10px solid #C6EEFA;
    padding: 0 0 0 20px;
}

#search_container{
	width: auto;
	background: #C6EEFA;
}

#search {
	float: left;
	width: auto; 
    font-size: 0.99em;   
    color: #000;    
/*    font-weight: bold;*/
    /*max-width: 1220px;*/
    background: #C6EEFA;
    /*width: 100%;*/
    margin: 0 auto;
    /* padding: 10px 0 30px 4%; */
    padding: 0px 20px 29px 0; 
}

#search h2{
/*	font-weight: bold;*/
	font-size: 1em;
	margin: 25px 0 5px 0; 
}

#search #coming_soon{
 	float: right;
 	clear: right; 
 	margin: 0 0 20px 80px;
}

#search #asterix{
 	float: right;
 	clear: right;
 	margin: 0 0 20px 80px;
}

#search form{
	padding: 0;
}

#search form div{
	float: left;
	width: auto;
	margin: 0 20px 0 0;
}

#search form label{
	float: left;
	clear: both;
	margin: 0 0 5px 0;
	font-weight: bold;
}

#search form input{
	float: left;
	clear: both;
	border: 0;
	padding: 2px;
	width: 215px;
}

#search form .submit{
	margin: 1.6em 0 0 0;
}

#search form .submit input{
	width: 70px;
}

/***********************
    Header
************************/

#header{
	clear: both;        
    /*width: 98.2%;*/
    width: auto;
    /*padding: 0 0 56px 1.8%; */
    padding: 10px 0 30px 0; 
    position: relative;
}

#logo{
    width: 325px;
    height: 71px;
    /*float: left; */
    display: block;
    margin: 18px 0 0 0;
    padding: 0;
    overflow: hidden;
    text-indent: -999em;
    background: url(../images/surfacia_logo.gif) no-repeat;     
}

#collection{
    padding: 0;
    margin: 18px 20px 15px 0 !important;
    height: 69px;
    width: 160px;
    float: right;
    background: url(../images/collection_name.gif) 0 0 no-repeat;
    text-indent: -999em;
    outline: none;
}

#collection:hover{ 
	background-position: 0 -69px;
}

#content{
    float: left;           
    /*width: 98.2%;*/
    width: auto;
    width: 100%;
    /*padding: 0 0 56px 1.8%; */
    padding: 0; 
}

#left_col{
    float: left; 
    width: 165px; 
}

#right_col { 
    padding: 0;
    margin: 0 20px 0 165px;
    width: auto;
}

#portfolio_highlight{
    float: left;
    width: auto;
    width: 100%;
    margin: 0;   
    padding: 0;    
    background: url(../images/portfolio_highlight_sliver.jpg) top left repeat-x;
}

*:first-child+html #portfolio_highlight{ /*IE7 Fix*/
	margin-right: 20px;
} 

* html #portfolio_highlight {   /*IE6 and below Fix*/
	margin-right: 20px;
}

#brief{
    margin: 0; 
    padding: 0 0 0 20px; 
    width: 210px;
    float: left;
    overflow: hidden;
    position: relative;
    color: #000;
}

#brief_closed_container{
	float: left;
    position: relative;
    text-align: center;
    width:40px;
    font-weight: bold;
    padding: 0;
    margin: 0 20px 0 0;
    background: url(../images/border.gif) 0 60px repeat-x;
}

@media screen and (-webkit-min-device-pixel-ratio:0) { /*Safari Hack*/
    #brief_closed_container { background-position: 0 59px; }
}

#brief_closed_container .intro{
 	border :0;
}

#expand{
    float: left;
    margin: 20px 0 0 0;
}

#expand:hover{
    color: #fff;
}

#brief_expand{ 
	float: left;
	background: url(../images/border.gif) 0 60px repeat-x;
    width: 210px;
    padding: 0;
    font-weight: bold;
}  

@media screen and (-webkit-min-device-pixel-ratio:0) { /*Safari Hack*/
    #brief_expand { background-position: 0 59px; }
} 

#brief_image{ 
    margin: 0; 
    width: auto;
    overflow: hidden;
}

* html #brief_image {   /*IE6 and below Fix*/
	float: left;
} 

#brief_image #image_wrapper{
    float: left;
    width: auto;     
    margin: 0;
    padding: 0;
    overflow: hidden; 
    width: 100%;    
}

*:first-child+html #brief_image #image_wrapper {   /*IE7 Fix*/
	width: 100%;
}
  
#brief_border{ 
    margin: 0 0 0 210px;
    width: auto; 
    padding:  0 20px 0 0; 
}

* html #brief_border {   /*IE6 and below Fix*/
	float: left;
    margin: 0;
}

#brief_nav {
    width: 100%;
    float: left;
    clear: both;
    border-bottom: 1px solid #313030;
    padding: 0 0 6px 0;
    margin: 0;
}

#brief_nav a{
    outline: none;
}

#brief_nav h3 {
    float: left;
    margin: 2px 0 -2px 0;
    padding: 0;
    color: #C6EEFA;
    font-size: 1em;
}

#brief_nav h4{
    float: left;
    margin: 0;
    padding: 0;
    font-size: 1em; 
}

#brief_nav #thumb{
    background: url(../images/thumbnails.gif) 0 0 no-repeat;
    width: 40px;
    height: 40px;
    display: block;
    float: right;
    margin: 10px 25px 0 0;
    text-indent: -999em;
}

#brief_nav #thumb:hover{
    background-position: 0 -40px;
}

#thumbnails{
    float: left;
    list-style: none;
    width: 100%;
    margin: 0 -5px 0 0;
    border-bottom: 1px solid #313030;
    padding: 10px 0 5px 0;
    display: none;
    visibility: hidden;   
}

* html #thumbnails{
	display: none;
}                         

#thumbnails li{
    float: left;
    width: 65px;
    margin: 0 5px 0 0;   
}

.interactive{
}

#brief_nav ul, #image_description ul{
    float: right; 
    height:40px;
    margin:10px 0 0 0;
    padding:0;
    width: 80px;  
    list-style:none;
    position: relative;
	background: url(../images/nav.gif) no-repeat 0 0;
}


#brief_nav ul li, #image_description ul li {
	float: left;
	width: 40px;
	height: 40px;
    cursor: pointer;
    text-indent:-999em;
}

#brief_nav ul li a, #image_description ul li a {
    position:absolute;
    display: block;
    left:0;
    top:0;
    width:40px;
    height:40px;
    text-decoration:none;
    z-index: 100;
    outline: none;
}

#brief_nav ul li#prev a:hover, #image_description ul li#prev a {
	background: url(../images/up_arrow.gif) no-repeat 0 0;
}

#brief_nav ul li#next a:hover, #image_description ul li#next a {
	background: url(../images/down_arrow.gif) no-repeat 0 0;
} 

#brief_nav ul li#prev a, #image_description ul li#prev a {left:0px}
#brief_nav ul li#next a, #image_description ul li#next a {left:38px;} 

#brief_nav ul li a:hover, #image_description ul li a:hover{
    z-index:100;
    width:40px;
    height:40px;
    overflow:hidden;
    left:0;    
}

#brief_nav ul li#prev a:hover, #image_description ul li#prev a:hover {
	background-position:0 -40px;
}

#brief_nav ul li#next a:hover, #image_description ul li#next a:hover {
	background-position:0 -40px;
}    

.intro{
    float: left;
    width: 100%;
/*    border-bottom: 1px solid #fff;*/
    padding: 10px 0 10px 0;
    height: 40px;
    margin: 0 0 10px 0;
    color: #252424;
}

.title{
    float: left;
    font-weight: bold;
    margin: 20px 0 0 0;
    color: #252424;
}

#brief_expand .title{
 	margin: 27px 0 0 0;
}

#close{
    outline: none;
    float: right;
    text-indent: -999em;
    width: 40px;
    height: 40px;
    display: block;
}

.open{
	background-image: url(../images/brief.gif);
	background-position: -80px 0;
	background-repeat: no-repeat;
}

.open:hover{
   background-position: -120px 0;
}

.close{
	background: url(../images/brief.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
}

.close:hover{
   background-position: -40px 0;
}

#full_image, .full_image {
	background-repeat: no-repeat;
/*	background-color: #313030;*/
/*	background-image: url(../images/ajax_loader_light.gif);*/
	background-image: url(../images/ajax-loader.gif);
	background-position: 0 0;
	float: left; 
	width: 100%;
	height: 470px; 
	margin-top: 10px;
}

.full_content{
	background-repeat: no-repeat;
	background-position: 100% 0%;
	display: block; 
	width: 100%;
	height: 100%;
	margin-bottom: 0;
	padding: 0;
	float: left;
}

#full_spacer, .full_spacer{
	margin-left: 100%; 
	margin-top: 100%;
	display: block;
	font-size: 0;      
}

.full_spacer span{
	float: left;
	width: 100%;
	display: block;
}

* html #full_spacer {   /*IE6 and below Fix*/
	margin-top: 0; 
	float: none;
	width: auto;
}

*:first-child+html #full_spacer{ /* IE7 Fix*/
    width: 100%;
    float: left;
}

* html .full_spacer{  /*IE6 and below Fix*/
	margin-top: 0;
	float: none;
	width: auto;
} 

*:first-child+html .full_spacer{ /* IE7 Fix*/
    width: 100%;
    float: left;
}

* html .full_spacer span{ 
 	display: none;
}

*:first-child+html .full_spacer span{ 
 	display: none;
}

.brief_section{
 	float: left;
 	width: 100%;
 	color: #252424;
}

.light{
	color: #B7B7B7;
}

.light a{
	color: #fff;
}

.light a:hover{
	color: #C6EEFA;
}

/***********************
    Navigation
************************/
#nav{
    float: left;
    width: 100%;
}
#nav li{
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;  
    width: 100%;
}
#nav li a{
	float: left;
    color: #fff;
    display: block;
    text-indent: -999em;
    outline: none;
    overflow: hidden;
    margin: 0 0 4px 0;
    padding: 0;
    width: 100%;  
}
#nav li a:hover{
	margin: 0 0 4px 0;
}
#nav li div{
	float: left;
	width: 100%;
	margin: 0 0 4px 0;
}
#nav li ul {
	float: left;
    margin: 0;
    padding: 5px 0 10px 0;
    width: 155px;
    display: none;
    clear: both;
}
#nav li ul li{
	float: left; 
    margin: 0;
    padding: 0 0 4px 0;
    width: 155px;
    background: url(../images/nav_border.gif) repeat-y;
}
#nav li ul li.last{
	padding-bottom: 0;
	margin-bottom: 0;
}
#nav li ul li a{
	float: left;
    color: #8AA2A9;
    text-indent: 0em;
	line-height: 0.9em;
    padding: 0 0 2px 9px;
    margin: 0 0 -2px 0;
    display: block; 
    width: 146px;
    font-weight: bold;
}
#nav li ul li a:hover, #nav li ul li a.active{
    background: transparent url(../images/nav_border_hover.gif) top left no-repeat;
    color: #C6EEFA;
    padding: 0 0 2px 9px;
    margin: 0 0 -2px 0;
}
#recent_work{
	float: left;
/*    width: 65px;*/
	width: 100%;
    height: 16px;
    background: url(../images/recent_work.gif) no-repeat;
    margin-bottom: 4px;
}
#recent_work:hover, #recent_work.active{
	background-position: 0 -16px;
}
#portfolio{
	float: left;
    width: 100%;
/*    width:140px;*/
    height: 16px;
    background: url(../images/assigned_work.gif) no-repeat;
    margin-bottom: 4px;
}
#portfolio:hover, #portfolio.active{
	background-position: 0 -16px;
}
#news_updates{
	float: left;
    width: 100%;
/*    width: 146px;*/
    height: 16px;
    background: url(../images/news_updates.gif) no-repeat;
    margin-bottom: 4px;
}
#news_updates:hover, #news_updates.active{
	background-position: 0 -16px;
}
#nav #news_updates_inner li{
    width: 155px;
    background: none; 
    margin: 0 0 10px 0;
    font-weight: bold;
    color: #B7B7B7;    
}
#nav #news_updates_inner li a{
	background: none;
	padding: 0;
	margin: 0;
	display: inline;
	float: none;    
	border: 0;
	line-height: 1em;
	color: #FFF;
}

#nav #news_updates_inner li a:hover{
	color: #C6EEFA;
}

#nav #news_updates_inner li a.date{
	float: left;
	text-decoration: none;
	display: block;
    background: none;
    margin: 0 0 3px 0;
    border: 0;
    width: 100%;
    padding: 0;
    color: #C4C600;
}
#our_approach{
	float: left;
    width: 100%;
/*    width: 129px;*/
    height: 16px;
    background: url(../images/our_approach.gif) no-repeat;
    margin-bottom: 4px;
}
#our_approach:hover, #our_approach.active{
	background-position: 0 -16px;
	margin-bottom: 4px;
}
#contact{ 
	margin-top: 4px; /*IE 6 Fix*/ 
	float: left;
    width: 100%;
/*    width: 82px;*/
    height: 16px;
    background: url(../images/contact.gif) 0 0 no-repeat;
    margin-bottom: 2px;   
}

*:first-child+html #contact_fix {
	margin-top: 4px;
}

* html #nav li ul li a#contact{
	margin-top: 8px;
}
#nav li ul li a#contact {
	margin-top: 4px;
}
#contact:hover, #contact.active{
	background-position: 0 -16px;
}
#nav #contact_inner li{
	float: left;
	width: 100%;
	background: none;
	white-space: pre;
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
	 white-space: -moz-pre-wrap;
  	white-space: pre-wrap;
	font-family: "Arial", "Helvetica", sans-serif;
	text-indent: 0;
	font-size: 1em;
	margin: -53px 0 0 0;
	padding: 0;
	font-weight: bold;
}

#nav #contact_inner li, x:-moz-any-link, x:default  {  /*Styles for Firefox 3 and above*/
    margin-top: -37px;
}

* html #nav #contact_inner li {     /*IE6*/
	white-space: pre;
	word-wrap: break-word;
	margin-top: -71px; 
}

*:first-child+html #nav #contact_inner li { /*IE7*/ 
	white-space: pre;
	word-wrap: break-word;
	margin-top: -71px; 
}

@media screen and (-webkit-min-device-pixel-ratio:0) { /*Safari Hack*/
    #nav #contact_inner li { margin-top: -37px; }
}

#nav #contact_inner li a{
	padding-left: 0;
	margin-top: 2px;
	color: #fff;
}
#nav #contact_inner li a:hover{  
    color: #C6EEFA;     
}
#nav li ul li a:hover{
    background: none;
    color: #C6EEFA;
}

/***********************
    Content
************************/
#image_description {
    padding: 0;
    margin: 0 0 -175px 0;
    height: 135px;
    width: 160px;
    float: right;
	background: #989898;
	color: #313030;
	position:relative;
	z-index: 200;
}

#image_description .market_type{  
	float: left;
	width: 140px;
	color: #C6EEFA;
	font-weight: bold;
	padding: 20px 10px 6px 10px;
}

#image_description .disciplines, #image_description .disciplines_no_link{
	background: #fff;
	float: left;
	width: 140px;
	margin: 0;
	padding: 32px 10px 10px 10px;
	font-weight: bold;
}

#image_description .disciplines:hover{
	background: #C6EEFA;
}

#image_description ul {
	margin-right: 10px;
}

#image_description a{
	color: #313030;
}

#image_description h3, #image_description h4{
	font-size: 1em;
	margin: 0;
	padding: 0;
	width: 100%;
	clear: left;
}

#image_description h3 a {
    float: left;
    margin: 0;
    padding: 0;
    color: #313030;
    font-size: 1em;
}

#image_description h4 a{
    float: left;
    color: #657277;
    line-height: 1.2em;
    margin: 0 0 -2px 0;
    padding: 0;
    font-size: 0.98em; 
}

#image_description a:hover{
	color: #313030;
}

.loading{
	float: left;
	width: 100%;
/* 	background: #313030 url(../images/loading_dark.gif) 50% 0 no-repeat; */
 	background: #313030 url(../images/ajax-loader.gif) 0 0 no-repeat; 
}

.send{
	background: #C6EEFA url(../images/loading_blue.gif) 0 0 no-repeat; 
}

#teaser{
	float: left; 
	width: 100%; 
	height: 600px; 
	margin: 0; 
	padding: 0;
	overflow: hidden;
}

*:first-child+html #teaser{ /*IE7 Fix */
	width: auto;
}

* html #teaser {   /*IE6 and below Fix*/
	width: auto;
}

#sm {
/*	float: left;*/
	list-style:none; 
	width:100%; 
	height:100%; 
	display:block;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

* html #sm {   /*IE6 and below Fix*/
	width: auto;
}

#sm li {
	float:left; 
	display:inline;
	overflow:hidden; 
	margin: 0;
	padding: 0;
	width: 33.3%;
}

#sm li a span:hover{
	cursor: pointer;
}

/**:first-child+html #sm{
	width: auto;
} */

* html #sm li {   /*IE6 and below Fix*/
/*	width: auto;*/
}   

#sm li .market_type{
	background: #fff;
	float: left;
	width: 150px;
	position: relative;
	margin: 0 0 -100% 0;
	height: 10px;
	padding: 17px 0 13px 10px;
	font-weight: bold;
	color: #000;
/*	position: absolute;	*/
}

#sm li:hover .market_type{
	background: #C6EEFA;
}

.brief_section{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.brief_section p {
	/*white-space: pre;*/
	/*white-space: pre-wrap;*/ /* css-3 */
	/*white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	/*white-space: -pre-wrap; /* Opera 4-6 */
	/*white-space: -o-pre-wrap; /* Opera 7 */
	/*word-wrap: break-word; /* Internet Explorer 5.5+ */
	font-family: "Arial", "Helvetica", sans-serif;
	text-indent: 0;
	font-size: 1em;
	/*margin: -33px 0 0 0;*/
	padding: 0 0 10px 0;
}

* html .brief_section p {
	margin: 0;
}

*:first-child+html .brief_section p {
	margin: 0;
}

/***********************
    Footer
************************/
#footer {
	float: left;
	position: relative;
	width: 100%;
    font-size: 0.8em;
    color: #AAABAC;
    font-weight: bold;
    height: 20px;
    margin: -13px 0 30px 0;
    padding: 0;
}

#footer a{
	color: #AAABAC;
}

#footer a:hover{
	color: #C6EEFA;
}