/*
* Agency: Clickthinking
* URL: *OIL*
*
* Author: *Clement Newton*
* Creation Date: *13 May 2010*
*/

/* Reset styles */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, input, label { margin: 0; padding: 0; }

/* Global Styles*/
img {border:0;}
object {outline:none;}
.clear{clear: both;}
.fl{float: left;}
.fr{float: right;}
a {color: #a6a6a6;}
a:focus {outline: none;}
a:hover {color: #f9ed4c;}
.mrg_top10{margin-top: 10px;}
.mrg_top15{margin-top: 15px;}
.mrg_top20{margin-top: 20px;}
.mrg_top50{margin-top: 50px;}
.mrg_l20{margin-left: 20px;}
.mrg_l30{margin-left: 30px;}
.mrg_r10{margin-right: 10px;}
.mrg_r15{ margin-right: 15px;}
.mrg_btm10{margin-bottom: 10px;}
.mrg_btm20{margin-bottom: 20px;}
.mrg_btm30{margin-bottom: 30px;}
.pad_r15{ padding-right: 15px;}
.pad_top20{ padding-top: 20px;}
.bdr_left{border-left: 1px solid #3b3b3b;}
.bdr_right{border-right: 1px solid #3b3b3b;}


/* and it's Go, Go, GO */
html, body{
	background: #000000;
	color: #a6a6a6;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-align: center;
	line-height: 18px;
}

#container{
	width: 980px;
	margin: 0 auto;
	text-align: left;
	padding-top: 20px;
}
/* Header Images */
#header{ position: relative;}
#container .homehead{ background: url(/images/headers/home.gif) no-repeat; height: 560px;}
#container .bloghead{ background: url(/images/headers/blog.gif) no-repeat;}
#container .contacthead{ background: url(/images/headers/contact.gif) no-repeat; height: 272px;}
#container .workhead{ background: url(/images/headers/ourwork.gif) no-repeat; height: 276px;}
#container .wedo{ background: url(/images/headers/whatwedo.gif) no-repeat; height: 165px;}
#container .abouthead{ background: url(/images/headers/about.gif) no-repeat; height: 273px;}
#container .whyhead{ background: url(/images/headers/why.gif) no-repeat; height: 275px;}


/* Main Nav */ 
#topnav{ position: absolute; top: 0; left: 0; z-index: 7;}

#topnav li{
	float: left;
	list-style: none;
}

#topnav li a{
	background: url(/images/sitewide/topnav.gif) no-repeat;
	display: block;
	height: 27px;
	width: 100px;
}

#topnav li a span{position:absolute;top: -9999px}
#topnav li a.home{ background-position: 0 0; width: 68px;}
#topnav li a.home:hover{ background-position: 0 -27px;}
#topnav li a.home_active{ background-position: 0 -27px; width: 68px;}
#topnav li a.why_oil{ background-position: -68px 0; width: 106px;}
#topnav li a.why_oil:hover{ background-position: -68px -27px;}
#topnav li a.why_oil_active{ background-position: -68px -27px; width: 106px;}
#topnav li a.our_work{ background-position: -174px 0; width: 121px;}
#topnav li a.our_work:hover{ background-position: -174px -27px;}
#topnav li a.our_work_active{ background-position: -174px -27px; width: 121px;}
#topnav li a.what_we_do{ background-position: -295px 0; width: 142px;}
#topnav li a.what_we_do:hover{ background-position: -295px -27px;}
#topnav li a.what_we_do_active{ background-position: -295px -27px; width: 142px;}
#topnav li a.blog{ background-position: -437px 0; width: 100px;}
#topnav li a.blog:hover{ background-position: -437px -27px;}
#topnav li a.blog_active{ background-position: -437px -27px; width: 100px;}
#topnav li a.about{ background-position: -537px 0; width: 114px;}
#topnav li a.about:hover{ background-position: -537px -27px;}
#topnav li a.about_active{ background-position: -537px -27px; width: 114px;}
#topnav li a.contact{ background-position: -651px 0; width: 114px;}
#topnav li a.contact:hover{ background-position: -651px -27px;}
#topnav li a.contact_active{ background-position: -651px -27px; width: 114px;}

/* Breadcrumb */
.breadcrumb li{
	float: left;
	list-style: none;
	margin-right: 7px;
	padding-right: 8px;
}

.breadcrumb a{text-decoration: none;}

.breadcrumb li.home{border-right: 1px solid #3b3b3b;}

/* Content */
#content{
	border-top: 1px solid #3b3b3b;
	margin-top: 40px;
	padding: 40px 0 0 0;
}

.rhs{
	float: right;
	width: 720px;
	padding-left: 20px;
}

.lhs{
	float: left;
	width: 215px;
	padding-right: 20px;
}

p.cnt{margin-top: 20px;}

/* Header Sprite */
.sprite{ background: url(/images/sitewide/sitewide_sprite.gif) no-repeat; display: block;}
.sprite span{position: absolute; top: -9999px;}
.spr01{background-position:-20px 0; height:37px; width:458px;}
.spr02{background-position:-20px -45px; height:23px; width:210px;}
.spr03{background-position:-20px -90px; height:26px; width:161px;}
.spr04{background-position:-20px -135px; height:34px; width:167px;}
.spr05{background-position:-20px -180px; height:14px; width:198px;}
.spr06{background-position:-20px -225px; height:14px; width:200px;}
.spr07{background-position:-20px -270px; height:22px; width:115px;}
.spr08{background-position:-20px -315px; height:42px; width:130px;}
.spr09{background-position: 6px -360px; height:19px; width: 100%;}
.spr10{background-position: 6px -405px; height:19px; width: 100%;}
.spr11{background-position: 6px -450px; height:19px; width: 100%;}
.spr12{background-position:-20px -495px; height:31px; width: 239px;}
.spr13{background-position:-20px -540px; height:35px; width: 172px;}
.spr14{background-position:-20px -585px; height:35px; width: 140px;}
.spr15{background-position:-20px -630px; height:35px; width: 163px;}
.spr16{background-position:-20px -675px; height:35px; width: 163px;}
.spr17{background-position:-20px -720px; height:35px; width: 145px;}
.spr18{background-position:-296px -45px; height:33px; width: 162px;}
.spr19{background-position:-296px -90px; height:33px; width: 258px;}
.spr20{background-position:-296px -135px; height:33px; width: 241px;}
.spr21{background-position:-296px -180px; height:33px; width: 263px;}
.spr22{background-position:-296px -225px; height:33px; width: 177px;}
.spr23{background-position:-296px -270px; height:44px; width: 220px;}
.spr24{background-position:-296px -315px; height:44px; width: 350px;}
.spr25{background-position:-296px -360px; height:44px; width: 78px;}
.spr26{background-position:-296px -405px; height:44px; width: 350px;}
.spr27{background-position:-296px -450px; height:44px; width: 100px;}
.spr28{background-position:-296px -495px; height:33px; width: 207px;}
.spr29{background-position:-296px -540px; height:20px; width: 86px;}
.spr30{background-position:-296px -585px; height:20px; width: 111px;}
.spr31{background-position:-296px -630px; height:20px; width: 86px;}
.spr32{background-position:-296px -675px; height:15px; width: 229px;}
.spr33{background-position:-296px -720px; height:15px; width: 213px;}
.spr34{background-position:-20px -765px; height:44px; width: 159px;}
.spr35{background-position:-296px -765px; height:15px; width: 213px;}
.spr36{background-position:-20px -810px; height:42px; width: 136px;}
.spr37{background-position:-296px -810px; height:42px; width: 335px;}
.spr38{background-position:-20px -855px; height:31px; width: 144px;}
.spr39{background-position:-296px -855px; height:43px; width: 147px;}
.spr40{background-position:-20px -900px; height:32px; width: 99px;}
.spr41{background-position:-296px -900px; height:31px; width: 78px;}
.spr42{background-position:-20px -945px; height:42px; width: 120px;}
.spr43{background-position:-296px -945px; height:36px; width: 294px;}
.spr44{background-position:-20px -990px; height:45px; width: 387px;}
.spr45{background-position:6px -1035px; height:19px; width: 387px;}

/* Home Page Lower Section */
.lower_home{
	border-top: 1px solid #3b3b3b;
	padding: 25px 0;
}

.case_studies{
	width: 639px;
	padding: 0 20px 0 0;
}

.case_studies .hdr{
	border-bottom: 1px solid #3b3b3b;
	padding: 0 0 0 25px;
	height: 41px;
}

.case_studies .cnt{
	float:left;
	width: 267px;
	margin: 20px 0 0 0;
	padding: 0 10px 0 25px;
}

.case_studies .cnt.bdr{	border-left: 1px solid #3b3b3b;}

.blogbox{
	border-left: 1px solid #3b3b3b;
	width: 300px;
	padding: 0 0 0 20px;
}

.blogbox .hdr{
	border-bottom: 1px solid #3b3b3b;
	padding: 0 0 0 25px;
	height: 41px;
}

.blogbox .cnt{padding: 20px 0 0 25px;}
.blogbox .cnt .title{text-decoration: none;}

/* Home page Twitter*/ 
.twitter{
	border: solid #3b3b3b;
	border-width: 1px 0;
	font-size: 12px;
}

.twitter .tweet{
	padding: 23px 0 0 20px;
	width: 65%;	
}

/* Contact */
#address_box{
	border: solid #3b3b3b;
	border-width: 1px 0;
	padding: 25px 0;
	margin-top: 20px;
}

.street_address{
	float: left;
	width: 447px;
	padding: 10px 0 20px 40px;
}

.view_map{
	background: url(/images/contact/view.gif) no-repeat;
	display: block;
	width: 221px;
	height: 52px;
	margin-left: -25px;
}
.view_map span{position: absolute; top: -9999px; }

#contact_form{padding: 20px 0 20px 40px;}

#contact_form .formrow{
	height: 32px;
	margin-bottom: 20px;
}

#contact_form label{
	display: block;
	height: 25px;
	width: 100px;
	padding-top: 7px;
}

#contact_form label.error{
	float: left;
	width: 300px;
	color: #fdec4c;
	margin-left: 20px;
}

#contact_form label.required{background: url(/images/sitewide/sitewide_sprite.gif) no-repeat -50px -683px; }

p.required{
	background: url(/images/sitewide/sitewide_sprite.gif) no-repeat -28px -692px;
	padding-left: 120px;
	margin-top: 7px;
}
	
#contact_form input{
	border: 1px solid #3b3b3b;
	background: #000000;
	color: #6e6e6e;
	font-size: 14px;
	font-style: italic;
	height: 23px;
	width: 295px;
	padding: 7px 0 0 11px; 
}

#contact_form .idle_input{border: 1px solid #3b3b3b;}
#contact_form .focus_input{border: 1px solid #fdec4c;}	

#contact_form input.submit{
	border: none;
	width: 75px;
	height: 27px;
	margin: 20px 0 20px 205px;
	float: left;
}

#contact_form input.code{ width: 41px; margin-right: 15px; }
#contact_form input.tel_no{ width: 225px;}

#contact_form textarea{
	border: 1px solid #3b3b3b;
	background: #000000;
	color: #6e6e6e;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 18px;
	overflow: auto;
	font-style: italic;
	padding: 7px 0 0 11px; 
	height: 123px;
	width: 295px;
}

#submitDiv{
	width: 300px;
	float: left;
	font-weight: bold;
	margin: 31px 0 0 20px;
	color: #fdec4c;
}

/* Our Work */
.client{
	border-bottom: 1px solid #3b3b3b;
	margin-top: 30px;
	padding: 0 0 30px 20px;
}

.client .intro{width: 485px;}
.client .section_hdr{ font-weight: bold}

.pdf_icon{
	background: url(/images/ourwork/pdf.gif) no-repeat;
	padding: 5px 0 5px 30px;
}

/* Coloured Segmentation*/

.segment{
	padding: 20px 0;
	border-bottom: 1px solid #3b3b3b;
}

.segment .video{
	width: 394px;
	margin-right: 20px;
}

.segment .copy{width: 300px;}

/* Sidenav */
.work_sidenav li, .about_sidenav li{list-style: none;}

.work_sidenav li a, .about_sidenav li a{
	background: url(/images/ourwork/work_subnav.gif) no-repeat;
	border-bottom: 1px solid #3b3b3b;
	display: block;
	height: 31px;
	width: 216px;
}

.work_sidenav a span, .about_sidenav a span{ position: absolute; top: -9999px; }
.work_sidenav a.ourwork{ background-position: 0px 0px;}
.work_sidenav a.heart{ background-position: 0px -30px;}
.work_sidenav a.coloured{ background-position: 0px -60px;}
.work_sidenav a.cipla{ background-position: 0px -90px;}
.work_sidenav a.coke{ background-position: 0px -120px;}
.work_sidenav a.clients{ background-position: 0px -150px;}
.work_sidenav a.lsm{ background-position: 0px -180px;}

.work_sidenav a.johnsons{ background-position: 0px -298px;}
.work_sidenav a.hansa{ background-position: 0px -268px;}
.work_sidenav a.flora{ background-position: 0px -240px;}
.work_sidenav a.rama{ background-position: 0px -210px;}

.work_sidenav a.ourwork:hover{ background-position: -432px 0px;}
.work_sidenav a.heart:hover{ background-position: -432px -30px;}
.work_sidenav a.coloured:hover{ background-position: -432px -60px;}
.work_sidenav a.cipla:hover{ background-position: -432px -90px;}
.work_sidenav a.coke:hover{ background-position: -432px -120px;}
.work_sidenav a.clients:hover{ background-position: -432px -150px;}
.work_sidenav a.lsm:hover{ background-position: -432px -180px;}

.work_sidenav a.johnsons:hover{ background-position: -432px -298px;}
.work_sidenav a.hansa:hover{ background-position: -432px -268px;}
.work_sidenav a.flora:hover{ background-position: -432px -240px;}
.work_sidenav a.rama:hover{ background-position: -432px -210px;}

.work_sidenav a.ourwork_active{ background-position: -216px 0px;}
.work_sidenav a.heart_active{ background-position: -216px -30px;}
.work_sidenav a.coloured_active{ background-position: -216px -60px;}
.work_sidenav a.cipla_active{ background-position: -216px -90px;}
.work_sidenav a.coke_active{ background-position: -216px -120px;}
.work_sidenav a.clients_active{ background-position: -216px -150px;}
.work_sidenav a.lsm_active{ background-position: -216px -180px;}

.work_sidenav a.johnsons_active{ background-position: -216px -298px;}
.work_sidenav a.hansa_active{ background-position: -216px -268px;}
.work_sidenav a.flora_active{ background-position: -216px -240px;}
.work_sidenav a.rama_active{ background-position: -216px -210px;}



.feedback{
	border: solid #3b3b3b;
	border-width: 1px 0;
	padding: 15px 0 30px 0;
}

.feedback .hdr{
	padding: 0 10px 6px 20px;	
	border-bottom: 1px solid #3b3b3b;
	margin-bottom: 20px;
}

.feedback .cnt{	padding: 0 10px 0 20px;	}
.feedback .cnt .quote{ font-style: italic;}

/* Sidebar Twitter */

.side_twitter{
	background: url(/images/blog/blog_sprite.gif) no-repeat;
	background-position: -14px -52px;
	width:216px;
	height:82px;
	display: block;
}

.side_twitter span{ position: absolute; top: -9999px;}

/* What we do */
#what_we_do{
	margin-top:20px;
	padding-top:20px;
	border-top: 1px solid #3b3b3b;
}

.big_links{
	position: relative;
	background: url(/images/whatwedo/main.gif) no-repeat;
	height: 549px;
	padding-bottom: 20px;
}

.big_box{
	display: block;
	width: 250px;
	height: 500px;
}

.big_box_explore{
	position: absolute;
	top: 18px;
	left: 21px;
	z-index: 2;
}

.big_box_strategise{
	position: absolute;
	top: 18px;
	left: 334px;
	z-index: 2;
}

.big_box_execute{
	position: absolute;
	top: 18px;
	right: 44px;
	z-index: 2;
}

.explore{
	width: 260px;	
	padding: 0 20px 0 40px;;
	color: #f5e80e;
}

.strategise{
	width: 260px;
	padding: 0 20px 0 40px;;
	border: solid #3b3b3b;
	border-width: 0 1px;
	color: #0094c7;
	height: 215px;
}

.execute{
	width: 260px;
	padding: 0 20px 0 40px;
	color: #da006a;
}

/* What We Do Content */

.wwd_cnt {
	background: url(/images/whatwedo/pipes.gif) no-repeat bottom left;	
	height:650px;
	position: relative;
}

.wwd_cnt .cnt{width: 630px;}

a.strategise_cloud{
	background: url(/images/whatwedo/strategise-cloud.gif) no-repeat;
	display: block;
	width: 268px;
	height: 105px;
	position: absolute;
	top: 517px;
	left: 379px;
}

a.strategise_cloud_two{
	background: url(/images/whatwedo/strategise-cloud.gif) no-repeat;
	display: block;
	width: 268px;
	height: 105px;
	position: absolute;
	top: 517px;
	right: 30px;
}

a.execute_cloud{
	background: url(/images/whatwedo/execute-cloud.gif) no-repeat;
	display: block;
	width: 268px;
	height: 118px;
	position: absolute;
	top: 517px;
	right: 30px;
}

a.explore_cloud{
	background: url(/images/whatwedo/explore-cloud.gif) no-repeat;
	display: block;
	width: 268px;
	height: 118px;
	position: absolute;
	top: 517px;
	right: 328px;
}

.wwd_cnt a span{ position:absolute; top: -9999px;}

/* About Us*/ 
.about_sidenav li a{background: url(/images/about/about_subnav.gif) no-repeat;}

.about_sidenav a.about_us{ background-position: 0px 0px;}
.about_sidenav a.team{ background-position: 0px -30px;}

.about_sidenav a.about_us:hover{ background-position: -432px 0px;}
.about_sidenav a.team:hover{ background-position: -432px -30px;}

.about_sidenav a.about_us_active{ background-position: -216px 0px;}
.about_sidenav a.team_active{ background-position: -216px -30px;}

/* Team*/
.main_bio{
	border-bottom: 1px solid #3b3b3b;
	padding-bottom: 20px;
}

.secondary_bio{
	float: left;
	width: 340px;
}

.tertiary_bio{
	float: left;
	width: 239px;
	text-align: center;
}

/* Sitemap */

.sitemap_row{
	border-bottom: 1px solid #3b3b3b;
	margin: 30px 0;
	padding: 30px 0;
}
.page_list{
	width: 285px;
	padding: 20px;
	border-right: 1px solid #3b3b3b;
	height: 120px;
}

.page_list li{list-style: none;}
.page_list li a{text-decoration: none;}

/* Footer */
#footer{
	border: solid #3b3b3b;
	border-width: 1px 0;
	font-size: 12px;
	height: 175px;
	margin-top: 30px;
}

#footer p{padding-top: 85px;}

.footer_logo{
	background: url(/images/sitewide/footer_logo.gif) no-repeat;
	display: block;
	height: 125px;
	margin-top: 25px;
	width: 129px;
	text-indent: -9999px;
}

.footer_links{
	float: left;
	list-style: none;
	margin: 40px 0 0 50px;
}

.footer_links li{margin: 3px 0;}
.footer_links a{text-decoration: none;}

.footer_rss {
    background: url(/images/blog/rss_cta.gif) no-repeat;
    display: block;
    height: 47px;
	width: 59px;
    margin-top: 25px;
    text-indent: -9999px;
}