@charset "utf-8";
@import "reset.css";

/* =============== COLOR KEY ===============
        ### BACKGROUND  #C0C2B7 ### 
        ### DARK-GREY 	#626657 ### 
        ### LIGHT-GREY 	#E6E7E2 ### 
        ### GOLD   		#AC904D ### 
        ### BLACK  		#231F20 ### 
        ### TEXT   		#626657 ###  
   ======================================= */

/*----------------------------------------  
  ============ GLOBAL STYLES =============
  ---------------------------------------- */
body {
	background-color: #C0C2B7;
	color: #626657;
	font-family: Arial, "Trebuchet MS", Helvetica, sans-serif;	
	font-size: .625em; 
	line-height: 1.2em;
}
a 		{ color: #AC904D; font-weight: bold; text-decoration: none; }
a:hover { border-bottom: dotted 1px #626657; }

/*------------- sIFR required ------------- */
.sIFR-flash { visibility: visible !important; margin: 0; padding: 0; }
.sIFR-replaced, .sIFR-ignore { visibility: visible !important; }
.sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; }
.sIFR-replaced div.sIFR-fixfocus { margin: 0pt;  padding: 0pt;  overflow: auto;  letter-spacing: 0px; float: none; }
 
/*----------------------------------------  
  =========== GLOBAL STRUCTURE ===========
  ---------------------------------------- */
#logo {
	display: block;
	height: 76px;
	left: 50%;
	margin-left: -483px;
	margin-top: -100px;
	position: absolute;
	top: 50%;
	width: 112px;
	z-index: 500;
}
#logo a:hover { border: 0; }
#wrapper {
	height: 530px;
	left: 50%;
	margin-left: -350px;
	margin-top: -295px;
	overflow: visible;
	position: absolute;
	top: 50%;
	width: 830px;
}
#content {
	background-color: #fff;
	clear: right;
	height: 450px;
	margin: 0;
}

/*------------ MAIN NAVIGATION ------------ */
#nav 	{ display: inline; float: right; margin: 8px 33px 0 0; position: relative;	}
#nav li { float: left; }
#nav a {
	background-image: url("../images/common/nav.png");
	background-repeat: no-repeat;
	border: 0;
	display: block;
	height: 22px;
	margin-left: 33px;
}
#nav a span 		  { margin-top: -999em; position: absolute; }
#nav .about a   	  { background-position:     0 0; width: 41px; }
#nav .work a    	  { background-position: -42px 0; width: 42px; }
#nav .contact a 	  { background-position: -83px 0; width: 58px; }
#nav .about a:hover   { background-position:     0 -22px; }
#nav .work a:hover    { background-position: -42px -22px; }
#nav .contact a:hover { background-position: -83px -22px; }
#about #nav .about a, #about #nav .about a:hover	 	 { background-position:     0 -44px; }
#work #nav .work a, #work #nav .work a:hover 		 	 { background-position: -42px -44px; }
#contact #nav .contact a, #contact #nav .contact a:hover { background-position: -83px -44px; }

/* ------------ LEFT NAVIGATION ----------- */
.left-nav {
	clear: left;
	display: inline;
	float: left;
	height: 385px;
	margin: 45px 0 0 15px;
	width: 130px;
}
.left-nav li { float: left; width: 100%; }
.left-nav a  { color: #C0C2B7; font-weight: normal; }

/*---------------- FOOTER ---------------- */
#footer {
	display: block;
	float: left;
	margin-top: 12px;
	width: 100%;
}
#footer #lh { float: left; padding-top: 7px; }
#footer #email 			{ margin-right: 10px; }
#footer #email:before 	{ content: "["; }
#footer #email:after 	{ content: "]"; }
#footer #email a 		{ color: #626657; font-weight: normal; margin: 0 10px; }
@media screen {
  .sIFR-active #tagline {
    border-right: 1px solid #AC904D;
    border-left: 4px double #AC904D;
	float: right;
    font-family: Verdana;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1em;
    margin: 0 20px 0 0;
    padding: 5px 8px 0 6px;
    visibility: hidden;
    width: auto;
  }
}  

/*----------------------------------------  
  ============== HOME PAGE ===============
  ---------------------------------------- */
#block-l {
	background-color: #E6E7E2;
	display: inline;
	float: left;
	height: 430px;
	margin: 10px;
	width: 360px;
}
#block-m {
	background-color: #E6E7E2;
	display: inline;
	float: left;
	height: 430px;
	margin: 10px 0 10px 0;
	width: 200px;
}
#block-r {
	background: #626657 url("../images/home/choose-rubber.png") 0 0 no-repeat;
	display: inline;
	float: left;
	height: 430px;
	margin: 10px;
	width: 230px;
}
#block-r span { position: absolute; left: -999em;}
#home .hline1, #home .hline2 { 
	display: block;
	height: 20px; 
	width: 100%;
	overflow: hidden;
}
#home .hline1 { background: #626657; overflow: hidden; width: 360px; }  
#home .hline2 {	background: #AC904D; } 
@media screen {
  .sIFR-active #home h2 {
    font-family: Verdana;
    font-size: 12px;
    letter-spacing: 2px;
    line-height: 1em;
    margin-left: 6px;
    margin-top: 3px;
    visibility: hidden;
  }
}
#home h3 { 
	font-size: 11px;	
	font-weight: bold; 
	line-height: 11px; 
	margin-bottom: 3px;
}  
#home h1 span, #home h2 span { margin-top: -999em; position: absolute; }
#block-l .pic {	width: 100%;	height: 330px; }
#home .desc { margin: 10px; }
#home .desc a { color: inherit; font-weight: inherit; font-style: italic; }
#home .desc a.look { color: #AC904D; font-style: normal; font-weight: bold; text-decoration: none; }
#home .study li {
	background-color: #fff;
	display: block;
	height: 90px;
	margin: 10px 0 0 10px;
	position: relative;
	width: 180px;
	z-index: 98;
}
#home .study a 		 { float: left; }
#home .study a:hover { border: 0; text-decoration: none;  }
#home div.ahover  {
	background: url("../images/home/dot-screen.png") 0 0 repeat;
	height: 90px;
	cursor: pointer;
	position: absolute;
	width: 180px;
	z-index: 99;
}
/* captify caption styling */
.caption-bottom {
	color: #E6E7E2;	
	padding: 1em;	
	font-weight: normal;
	font-size: 11px;	
	font-family: arial;	
	cursor: pointer;
	border: 0px solid #334143;
	background: #626657;
}
.caption-bottom { border: 0px; }
.caption a {
	border: 0 none;
	text-decoration: none;
	background: #626657;
	padding: 0.1em;
}
.caption a:hover, .caption a:hover { background: #626657; }
.caption-wrapper { float: left; }

  
/*----------------------------------------  
  ================= WORK =================
  ---------------------------------------- */
/* -------------- WORK NAV --------------- */
.identity #nav-work .nav-identity a,
.collateral #nav-work .nav-collateral a,
.interactive #nav-work .nav-interactive a,
#work .tabs-selected a { color: #626657; }
@media screen {
  .sIFR-active h2.nav-head {
    font-family: Verdana;
    font-size: 12px;
    letter-spacing: 2px;
    line-height: 1em;
	margin-bottom: 10px;
    padding: 0;
    visibility: hidden;
  }
}
#work h2#head-studies { margin: 0 0 5px 0; }
#work h2#head-medium  { margin: 0; }
#nav-work li {
	margin-top: 4px; 
}
.nav-medium 		  { height: auto; }
.nav-medium ul 		  { position: relative; margin-top: 100%; top: -25px;  }

/*------------ WORK UNIVERSAL ------------ */
@media screen {
  .sIFR-active h1 {
    float: right;
    font-family: Verdana;
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 1em;
    margin: 7px 18px 6px 0;
    visibility: hidden;
  }
}
#work #content > div {
	background-color: #fff;
	float: left;
	height: 432px; 
	margin: 10px 0 10px 9px;
	overflow: hidden;
	width:667px;
}
#work .slide { 
	border: solid 1px #E6E7E2; 
	float: left;
	height:390px;		/* required for slider */
	overflow:hidden;	/* required for slider */
	position:relative;	/* required for slider */
	width:665px;  		/* required for slider */
}
#work .slide ul {
	left:0; 			/* required for slider */
	position:absolute;  /* required for slider */
	top:0;  			/* required for slider */
	float: left;
	height: 390px;
	width: 665px;
}
#work .slide li { 
	display:none; 	 	/* required for slider */
	height: 390px;
	position:absolute;  /* required for slider */
	top:0;  			/* required for slider */
	width:665px; 
}
a.previous, a.next {
	border: 0;
	clear: left;
	display: block;
	height: 24px;
	position: relative;
	top: 165px;
	width: 17px;
}
a:hover.previous, a:hover.next { border: 0; }
a.previous 	{ background: url("../images/work/arrow-l.png") 0 0 no-repeat; left: 0; }
a.next 		{ background: url("../images/work/arrow-r.png") 0 0 no-repeat; left: 649px; margin-top: -24px; }
a.launch {
	background: url("../images/work/launch-site.png") 0 0 no-repeat;	
	border: 0;
	clear: left;
	display: block;
	height: 32px;
	left:50%;
	margin-left: -71px;
	position: absolute;
	top: 165px;
	width: 143px;
	z-index: 101;
}
a.internal 	  { background-image: url("../images/work/launch-demo.png");	width: 185px; }
a.launch span {	margin-top: -999em; position: absolute; }

/*------------ CLIENT DROPDOWN ----------- */
#client-list {
	background: url("../images/work/bb-client.png") left bottom repeat-x;
	display: block;
	float: left;
	left: 0;
	margin: 0 0 0 1px;
	position: relative;
	top: 24px;
	width: 72px;
	z-index: 1;
}
#client-list li { 
	float: left;
	height: 16px;
	width: 69px;
} 
#client-list a { 
	color: #C0C2B7;
	font-weight: normal;
	padding-left: 9px;
	text-align: left;
	width: 100%;  
}
#client-list a:hover { border: 0; color: #fff; }
#client-list ul.pagination {
	background: url("../images/work/bg-client.png") 0 1px no-repeat;
	clear:left;
	float: left;
	margin: 4px 0 0 0;
	overflow: hidden;
	padding: 20px 0 10px 2px;
	width: 509px;
}
#client-list ul.pagination ul {
	float: left;
	height: auto;
}
#client-list ul.pagination li {
	height: auto;
	float:left;
	width: 169px;
}
#client-list ul.pagination li li {
	background: none;
	border: 0;
	height: 18px;
}
#client-list ul a { 
	color: #fff; 
	height: 18px;
	text-align: left;
}
#client-list ul a { color: #E6E7E2; }

/*--------------- BY MEDIUM -------------- */
@media projection, screen { .tabs-hide { display: none; } } /* required for tabs */
#work .pic {
	background: url("../images/common/dot.png") left bottom repeat-x;
	height: 355px;
	width: 665px;
}
#work .pic img { margin: 10px; }
#work .details {
	background: url("../images/common/dot.png") 170px top repeat-y;
	height: 35px;
	width: 665px;
}
#work .details h3 {
	float: left;
	margin: 8px 0 0 9px;
	text-transform: uppercase; 
	width: 170px;
}
#work .details p {
	float: left;
	height: 35px;
	margin: 4px 0 0 8px;
	vertical-align: middle; 
	width: 465px;
}

/*------------- CASE STUDIES ------------- */
#work.studies .slide { border: 0; }
.studies .pagination { margin: 7px 21px 3px 0; float: right; height: 30px; width: auto; } 
.studies .pagination li { 
	display: inline; 
	float: left;
	width: auto;
	padding-left: 5px; 
}
.studies .pagination li a {
	background: url("../images/work/page_numbers.png") no-repeat;
	display: block;
	height: 20px;
	width: 20px;
}
.studies li a.pg_1  { background-position: 0 0 ; }
.studies li a.pg_2  { background-position: -20px 0 ; }
.studies li a.pg_3  { background-position: -40px 0 ; }
.studies li a.pg_4  { background-position: -60px 0 ; }
.studies li a.pg_5  { background-position: -80px 0 ; }
.studies li a.pg_6  { background-position: -100px 0 ; }
.studies li a.pg_7  { background-position: -120px 0 ; }
.studies li a.pg_8  { background-position: -140px 0 ; }
.studies li a.pg_9  { background-position: -160px 0 ; }
.studies li a.pg_10 { background-position: -180px 0 ; }
.studies li a.pg_11 { background-position: -200px 0 ; }
.studies li a.pg_12 { background-position: -220px 0 ; }
.studies li a.pg_13 { background-position: -240px 0 ; }
.studies li a.pg_14 { background-position: -260px 0 ; }
.studies li a.pg_15 { background-position: -280px 0 ; }

.studies .pagination li a:hover { border: 0; }
.studies li a.pg_1:hover  { background-position: 0 -20px ; }
.studies li a.pg_2:hover  { background-position: -20px -20px ; }
.studies li a.pg_3:hover  { background-position: -40px -20px ; }
.studies li a.pg_4:hover  { background-position: -60px -20px ; }
.studies li a.pg_5:hover  { background-position: -80px -20px ; }
.studies li a.pg_6:hover  { background-position: -100px -20px ; }
.studies li a.pg_7:hover  { background-position: -120px -20px ; }
.studies li a.pg_8:hover  { background-position: -140px -20px ; }
.studies li a.pg_9:hover  { background-position: -160px -20px ; }
.studies li a.pg_10:hover { background-position: -180px -20px ; }
.studies li a.pg_11:hover { background-position: -200px -20px ; }
.studies li a.pg_12:hover { background-position: -220px -20px ; }
.studies li a.pg_13:hover { background-position: -240px -20px ; }
.studies li a.pg_14:hover { background-position: -260px -20px ; }
.studies li a.pg_15:hover { background-position: -280px -20px ; }

.studies li.active a.pg_1  { background-position: 0 -40px ; }
.studies li.active a.pg_2  { background-position: -20px -40px ; }
.studies li.active a.pg_3  { background-position: -40px -40px ; }
.studies li.active a.pg_4  { background-position: -60px -40px ; }
.studies li.active a.pg_5  { background-position: -80px -40px ; }
.studies li.active a.pg_6  { background-position: -100px -40px ; }
.studies li.active a.pg_7  { background-position: -120px -40px ; }
.studies li.active a.pg_8  { background-position: -140px -40px ; }
.studies li.active a.pg_9  { background-position: -160px -40px ; }
.studies li.active a.pg_10 { background-position: -180px -40px ; }
.studies li.active a.pg_11 { background-position: -200px -40px ; }
.studies li.active a.pg_12 { background-position: -220px -40px ; }
.studies li.active a.pg_13 { background-position: -240px -40px ; }
.studies li.active a.pg_14 { background-position: -260px -40px ; }
.studies li.active a.pg_15 { background-position: -280px -40px ; } 

/*----------------------------------------  
  =========== ABOUT & CONTACT ============
  ---------------------------------------- */
/* -----------  CONTENT ------------ */
#about #main, #contact #main  {
	display: inline;
	float: left;
	height: 430px;
	margin: 10px 0 0 10px;
	width: 665px;
}
@media screen {
  .sIFR-active #about h1, .sIFR-active #contact h1 {
    display: block;
    float: none;
    font-family: Verdana;
    font-size: 28px;
    letter-spacing: 1.5px;
    line-height: 1em;
    visibility: hidden;
  }
}
@media screen {
  .sIFR-active #about h2 {
    clear: left;
    display: inline;
    float: left;
    font-family: Verdana;
    font-size: 14px;
    letter-spacing: 1em;
    line-height: 1em;
    visibility: hidden;
  }
}
#about.rubber h1 		{ margin: 60px 150px 0 28px; }
#about.recognition h1 	{ font-size: 24px; margin: 45px 0 15px 30px; }
#about.clients h1 	 	{ font-size: 24px; margin: 64px 0 15px 30px; }

/* ------------- ABOUT NAV --------------- */
@media screen {
  .sIFR-active #nav-about li {
    display: block;
    font-family: Verdana;
    font-size: 12px;
    letter-spacing: 2px;
    line-height: .8em;
    visibility: hidden;
  }
 }

/* ------------ RUBBER PAGE ------------- */
#about.rubber #main 	 { background: #AC904D url("../images/about/rubber_about.png") 0 0 no-repeat; }
#about.rubber #main p 	 { text-indent: -999em; }

#about.recognition #main { background: #8B907E; }
@media screen {
  .sIFR-active #about.recognition h2 {
    display: block;
    font-family: Verdana;
    font-size: 12px;
    letter-spacing: 2px;
    line-height: .8em;
    visibility: hidden;
	margin: 0 0 0 30px; 
  }
}
#about h2 	{ float: left; width: 135px; }

/* ------------ AWARDS PAGE ------------- */
#about.recognition #main h2 { margin-bottom: 48px; }
#about.recognition #main p 	 { 
	display: inline;
	color: #fff;
	float: left;
	font-size: 1.125em;
	line-height: 1.5em;
	margin: 0 0 20px 10px;
	width: 375px;
}
#about.recognition dl {
	color: #fff;
	float: left;
	font-size: 1.125em;
	line-height: 1.5em;
	margin: 12px 0 16px 10px;
	width: 400px;
}
#about.recognition dt {	float: left; width: 250px; }
#about.recognition dd {	float: left; width: 120px; }

/* .......... Awards Scroller ............ */
/* ...... for SimplyScroll script ........ */
.simply-scroll { 
	float: left;
	margin-bottom: 1em;
	position: relative;
	width: 400px;
}
/* Clip DIV - automatically generated */
.simply-scroll-clip { 
	float: left;
	height: 235px;
	overflow: hidden;
	position: relative;
	z-index: 2;
	width: 400px;
}
.simply-scroll-list { 
	height: auto !important;
	left: 0;
	overflow: hidden;
	padding-bottom: 1em;
	position: absolute;
	top: 0;
	z-index: 1;
}
.simply-scroll-btn {
	background-image: url("../images/about/arrow-rec.png");
	background-repeat: no-repeat;
	cursor: pointer;
	height: 12px;
	position: absolute;
	width: 400px;
	z-index:3;
}	
.simply-scroll-btn-up {
	background-position: center 0;
	border-bottom: 1px solid #fff;
	top: -18px;
	left: 0;
}
.simply-scroll-btn-down {
	background-position: center -12px;
	border-top: 1px solid #fff;
	bottom: -18px;
	left: 0;
}
.simply-scroll-btn-up:hover   { background-position: center -36px; border-color: #AC904D; }
.simply-scroll-btn-down:hover { background-position: center -48px; border-color: #AC904D; }
.simply-scroll-btn.disabled   { background-image: none !important; border: none; }

/* ------------ CLIENTS PAGE ------------ */
#about.clients #main { background-color: #626657; overflow: hidden; }
#about.clients #main ul.about-clients {
	color: #fff;
	margin: -2px 0 0 30px; 
	line-height: 18px;
	width: 660px;
	overflow: hidden;
}
ul.about-clients li {
	width: 220px;
}
/* ------------- CONTACT PAGE ------------ */
#contact #main		{ background-color: #626657; margin-left: 155px; overflow: hidden; }
#contact #main h1	{ font-size: 28px; margin: 60px 150px 0 28px; width: 100%; }
#contact #main div {
	display: inline;
	float: left;
	margin: 0 0 18px 30px;
	width: 270px;
}
@media screen {
  .sIFR-active #contact #main h2 {
    display: block;
    font-family: Verdana;
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 1em;
    margin:0 0 -7px;
    padding-top: 5px;
    visibility: hidden;
  }
}
@media screen {
  .sIFR-active #contact #main p {
    display: block;
    font-family: Verdana;
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 1em;
    visibility: hidden;
  }
}
@media screen {
  .sIFR-active #contact #main .address p, .sIFR-active #contact #main .mails dl {
    display: block;
    float: none;
    font-family: Verdana;
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 1em;
    margin: 15px 0 0;
    visibility: hidden;
  }
}

#contact #main p {
	color: #fff;
	font-size: 1.375em;
}
#contact #main .mails dl { margin-top: 15px; }
#contact #main .mails dd { margin-bottom: 15px; }

a.googmap {
	background: url("../images/contact/map-link.png") 0 0 no-repeat;
	display: block;
	height: 20px;
	margin-top: 13px;
	width: 86px;
}
a:hover.googmap { background-position: 0 -20px; }

#gMapModal-box  { border:2px #FFF solid; background:#FFFFFF url(/images/contact/ajax-loader.gif) center no-repeat; }
#gMapModal-text { border:2px #FFF solid; background:#FFFFFF; }
#gMapModal-text p {
	color:#666666;
	float:left;
	font-family:Tahoma, Arial, Helvetica;
	font-size:11px;
	margin:10px 0 10px 5px;
	position:relative;
	width:60%;
}
#gMapModal-closeButton{ 
	background: url("../images/contact/btn-close.png") no-repeat;
	border:0;
	cursor:pointer;
	float:right;
	height:22px;
	margin:10px 5px 10px 0;
	position:relative;
	width:66px;
}

/*----------------------------------------  
  ============== ERROR PAGE ==============
  ---------------------------------------- */
#error #content div {
	border: solid 1px #E6E7E2;
	float: left;
	margin: 125px 0 0 200px;
	padding: 30px;
}
#error h1 {
	float: none;
	margin-right: 180px;
	text-align: left;
}
#error ol {
	list-style-type: decimal;
	margin: 10px 0 10px 20px;
}