/*
* Agency: Clickthinking
* URL: http://www.clickthinking.com
*
* Author: Clement Newton
* Creation Date: 09 May 2009
*/

body {
	margin: 0;
	padding: 0;
	background: #808080 url(/images/sitewide/page_bg.jpg) repeat-y 50% 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #707070;
}

img { border: 0; }

p, ul, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

table {
	margin: 0 0 15px;
	padding: 0;
}

a {outline:none;}

a {color: #707070;}

a:hover {text-decoration: none;}

li {list-style: none;/*padding: 0 0 0 20px;*/}

h1 { font-size: 35px; }
h2 { font-size: 30px; }
h3 { font-size: 25px; }
h4 { font-size: 25px; }
h5 { font-size: 20px; }

/* Start Generic */

.clearboth {clear: both;}

div.clearer {clear: both; line-height: 0; height: 0;}

.pad_left12 {padding-left: 12px;}

/* End Generic */

/* Start Hidden span */
#page_title h1 span, #page_title h3 span, .sub_title h3 span, #heading .call_us span, #topnav ul li span, #home_header span, #showcase_header a.prev span, #showcase_header a.next span, #cta_holder span, #credentials h3 span, #work_cta_holder h3 span, #contact_form .step h4 span, .about_list h3 span, .team_list h3 span, .team_list h1 span, #showcase_nav ul li span, #footer_nav li a span, #contact_form a.submit span, .about_list h2 span, #history_timeline h4 span, #showcase_header h3 span, #awards h3 span, #awards h4 span, #timeline_cta h3 span {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
/* end Hidden span */

/* Start Main Container */

#container {
text-align: center;
}

#container .inner, #content .inner {
	width: 950px;
	text-align: left;
	margin: 0 auto;
}

#content .inner p {
	line-height:18px;
}

/* Start Heading */

#heading {
	height: 57px;
	padding: 28px 0 0 0;
	width: 950px;
	text-align: left;
	margin: 0 auto;
}

#heading .call_us{
	background: url(/images/sitewide/call_us.gif) no-repeat;
	width: 295px;
	height: 35px;
}


/* End Heading */

/* Start Top Nav */

#topnav {
	padding: 36px 0 19px 0;
	position: relative;
}

#topnav ul {
	margin: 0;
	padding: 0;
}

#topnav ul li {
	margin: 0;
	padding: 0;
	float: left;
}

#topnav ul li a {
	display: block;
	margin-right:36px;
	height: 21px;
	list-style: none;
	float: left;
	text-decoration: none;
	background: url(/images/sitewide/topnav.gif) no-repeat;
}

#topnav ul li a.home{ background-position: -3px 0; width: 35px; }
#topnav ul li a.home:hover{ background-position: -3px -21px;}
#topnav ul li a.our_work{ background-position: -74px 0; width: 64px; }
#topnav ul li a.our_work:hover{ background-position: -74px -21px;}
#topnav ul li a.scent{ background-position: -173px 0; width: 157px; }
#topnav ul li a.scent:hover{ background-position: -173px -21px; }
#topnav ul li a.about{ background-position: -363px 0; width: 59px; }
#topnav ul li a.about:hover{ background-position: -363px -21px; }
#topnav ul li a.contact{ background-position: -457px 0; width: 73px; margin: 0;}
#topnav ul li a.contact:hover{ background-position: -457px -21px;}

/* End Top Nav */

/* Start Logo */
#ct_logo{
	background: url(/images/sitewide/ct_logo.gif) no-repeat;
	width: 212px;
	height: 135px;
	position: absolute;
	top: -74px;
	right: 0;
}
/* End Logo */

/* Start Content */
#content {
	background: #ffffff;
	border: solid #000000;
	border-width: 1px 0;
	text-align: center;
}

#content .inner{
	text-align: left;
	margin: 0 auto;
	width: 950px;
}

/* End Content */

/* Start Breadcrumb */
#breadcrumb {
	/*padding:15px 0 20px;*/
	border-bottom:1px solid #9c9c9c;
}

#breadcrumb ul {
	list-style:none;
	height:40px;
	padding:10px 0 0;
}

#breadcrumb ul li {
	float:left;
	background: url(/images/sitewide/breadcrumb_arrow.gif) no-repeat 0 10px;
	padding:5px 15px 5px 20px;
	line-height:20px;
}

#breadcrumb ul li a {
	text-decoration:none;
}

#breadcrumb ul li a:hover {
	text-decoration:underline;
}

/* End Breadcrumb */


/* Start Sprites */

.sprite{
	background: url(/images/sitewide/sitewide_sprites.png) no-repeat;
}

.spr01{ background-position: -30px 0px; height: 27px; }
.spr02{ background-position: -340px 0px; height: 27px; }
.spr03{ background-position: -30px -45px; height: 27px; }
.spr04{ background-position: -340px -50px; height: 27px; width: 154px;}
.spr05{ background-position: -30px -100px; height: 35px; width: 166px;}
.spr06{ background-position: -340px -90px; height: 33px; width: 166px;}
.spr07{ background-position: -30px -135px; height: 33px; width: 265px;}
.spr08{ background-position: -340px -135px; height: 33px; width: 289px;}
.spr09{ background-position: -30px -180px; height: 33px; width: 365px;}
.spr10{ background-position: -30px -225px; height: 33px; width: 160px;}
.spr11{ background-position: -340px -225px; height: 33px; width: 163px;}
.spr12{ background-position: -30px -270px; height: 33px; width: 150px;}
.spr13{ background-position: -340px -270px; height: 33px; width: 155px;}
.spr14{ background-position: -30px -315px; height: 33px; width: 175px;}
.spr15{ background-position: -340px -315px; height: 33px; width: 145px;}
.spr16{ background-position: -30px -360px; height: 35px; width: 200px;}
.spr17{ background-position: -340px -360px; height: 27px; width: 205px;}
.spr18{ background-position: -30px -405px; height: 33px; width: 187px;}
.spr19{ background-position: -340px -405px; height: 33px; width: 313px;}
.spr20{ background-position: -30px -450px; height: 33px; width: 207px;}
.spr21{ background-position: -340px -450px; height: 33px; width: 410px;}
.spr22{ background-position: -30px -495px; height: 33px; width: 168px;}
.spr23{ background-position: -340px -495px; height: 33px; width: 270px;}
.spr24{ background-position: -30px -540px; height: 33px; width: 278px;}
.spr25{ background-position: -340px -540px; height: 33px; width: 172px;}
.spr26{ background-position: -590px 0px; height: 88px; width: 247px;}
.spr27{ background-position: -30px -585px; height: 33px; width: 195px;}
.spr28{ background-position: -340px -585px; height: 33px; width: 428px;}
.spr29{ background-position: -30px -630px; height: 33px; width: 250px;}
.spr30{ background-position: -340px -630px; height: 33px; width: 428px;}
.spr31{ background-position: -30px -675px; height: 33px; width: 180px;}
.spr32{ background-position: -340px -675px; height: 33px; width: 428px;}
.spr33{ background-position: -30px -720px; height: 33px; width: 135px;}
.spr34{ background-position: -340px -720px; height: 33px; width: 370px;}
.spr35{ background-position: -30px -765px; height: 33px; width: 130px;}
.spr36{ background-position: -340px -765px; height: 33px; width: 145px;}
.spr37{ background-position: -30px -810px; height: 33px; width: 207px;}
.spr38{ background-position: -340px -810px; height: 33px; width: 265px;}
.spr39{ background-position: -30px -855px; height: 33px; width: 205px;}
.spr40{ background-position: -340px -855px; height: 33px; width: 336px;}
.spr41{ background-position: -30px -900px; height: 33px; width: 260px;}
.spr42{ background-position: -340px -900px; height: 33px; width: 410px;}
.spr43{ background-position: -30px -945px; height: 33px; width: 85px;}
.spr44{ background-position: -340px -945px; height: 33px; width: 217px;}
.spr45{ background-position: -30px -990px; height: 33px; width: 200px;}
.spr46{ background-position: -340px -990px; height: 33px; width: 95px;}
.spr47{ background-position: -30px -1035px; height: 41px; width: 209px;}
.spr48{ background-position: -340px -1045px; height: 25px; width: 148px;}
.spr49{ background-position: -30px -1090px; height: 25px; width: 152px;}
.spr50{ background-position: -340px -1090px; height: 25px; width: 70px;}
.spr51{ background-position: -30px -1135px; height: 25px; width: 70px;}
.spr52{ background-position: -340px -1135px; height: 25px; width: 70px;}
.spr53{ background-position: -30px -1180px; height: 25px; width: 70px;}
.spr54{ background-position: -340px -1180px; height: 25px; width: 70px;}
.spr55{ background-position: -30px -1225px; height: 25px; width: 70px;}
.spr56{ background-position: -340px -1225px; height: 25px; width: 70px;}
.spr57{ background-position: -30px -1270px; height: 25px; width: 70px;}
.spr58{ background-position: -340px -1270px; height: 25px; width: 70px;}

.spr59{ background-position: -30px -1305px; height: 35px; width: 373px;}
.spr60{ background-position: -30px -1350px; height: 35px; width: 320px;}
.spr61{ background-position: -30px -1399px; height: 68px; width: 447px;}
.spr62{ background-position: -30px -1485px; height: 35px; width: 368px;}
.spr63{ background-position: -30px -1530px; height: 37px; width: 370px;}
.spr64{ background-position: -30px -1575px; height: 32px; width: 281px;}
.spr65{ background-position: -340px -1575px; height: 32px; width: 125px;}
.spr66{ background-position: -590px -1575px; height: 30px; width: 50px;}
.spr67{ background-position: -30px -1620px; height: 33px; width: 530px;}
.spr68{ background-position: -578px -1620px; height: 27px; width: 125px;}


/* End Sprites */ 

/* Home Page ---------------------------------------------------------- */

/* Start Home Header */
#home_header{
	background: url(/images/home/header_main.gif) no-repeat 0 115px;
	height: 289px;
	border: solid #9c9c9c;
	border-width: 1px 0;
}
/* End Home Header */ 


/* Start Page Title */ 
#page_title {
	border-top:1px solid #9c9c9c;
	border-bottom:1px solid #9c9c9c;
	padding:25px 0;
}

/* End Page Title */ 

/* Start Sub Title */ 
.sub_title {
	padding:25px 0 0;
}

/* End Page Title */ 

/* Start Header */ 
#header {
	padding:20px 0;
	border-bottom:1px solid #9c9c9c;
}

/* End Header */ 

/* Start Middle Section */

#midsection{
	height: 390px; /* remove possible */
	padding: 30px 0;
}

#video{
	float: left;
	height: 359px;
	padding: 7px 21px 0 0;
	width: 603px;
	border-right: 1px solid #9c9c9c;
}

#timeline_cta{
	float: right;
	padding: 0 ;
	text-align: left;
	width: 312px;
}

#timeline_cta h3{ 
	margin: 0 0 5px;
	padding-left:12px;
 }
/* End Middle Section */

/* Start Home CTA */
#cta_holder{
	margin: 18px 0 0 0;
	padding: 0 0 18px 0;
	border-bottom: 1px solid #9c9c9c;
}

#cta_holder h3{ margin: 0 0 5px; }

#cta_holder .left{
	padding:10px 27px 30px 0;
	width: 280px;
	float: left;
}

#cta_holder .mid{
	width: 259px;
	float: left;
	border: solid #9c9c9c;
	border-width: 0 1px;
	padding: 10px 30px 30px 27px;
}

#cta_holder .right{
	width: 289px;
	float: left;
	padding: 10px 0 30px 27px;
}
/* End Home CTA */

#work_cta_holder{
	border-bottom:1px solid #9c9c9c;
	margin: 25px 0;
}

#work_cta_holder .clients{
	width: 603px;
	float: left;
	padding: 10px 30px 25px 0;
}

#work_cta_holder .cred{
	width: 274px;
	float: left;
	border-left:1px solid #9c9c9c;
	padding: 10px 0 25px 27px;
}

#work_cta_holder .waa{
	border-top :1px solid #9c9c9c;
	padding:15px 0 0;
	margin:10px 0 0;
}

#work_cta_holder .waa .sprite span {
	position: absolute;
	top: -9999px;
	left: -9999px;
}


#awards {
	width:293px;
	float:left;
	border-left:1px solid #9c9c9c;
	padding:0 0 0 20px;
	line-height:18px;
	margin:0 0 20px 0;
}

#awards .award_listing {
	border-bottom:1px solid #9c9c9c;
	padding:15px 0;
}

#awards .award_listing_last {
	padding:15px 0;
}

#awards .award_listing strong, #awards .award_listing_last strong {
	margin:5px 0 8px;
	display:block;
}

#awards .award_listing p, #awards .award_listing_last p {
	margin:0;
}

#contact_form {
	border: solid #9c9c9c;
	border-width: 1px 0;
	padding: 0 0 25px 0;
}

#contact_form .step {
	padding: 20px 0 0;
}

#contact_form .column{
	float:left;
	width:375px;
}

#contact_form label{
	margin:0 0 0 20px;
}

#contact_form input, #contact_form textarea{
	background:#ebebeb;
	height:19px;
	width:306px;
	border:none;
	padding:4px;
	margin:4px 0 20px 20px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	overflow:auto;
}

#contact_form textarea{
	height:100px;
}

#contact_form input.details, #contact_form textarea.details{
	font-style:italic;
	color:#707070;
}

#contact_form input.chkbox{
	width:15px;
}

#contact_form a.form_ele{
	background:url(/images/contact/form_elements.gif) no-repeat 0 0;
}

#contact_form a.tick, #contact_form a.untick{
	background-position: 0 -26px;
	padding: 0 0 0 30px;
	display:block;
	height:26px;
	line-height:28px;
	text-decoration:none;
	margin:0 0 22px 20px;
}

/*#contact_form span.tickmid{
	margin:20px 0;
}*/

#contact_form a.untick{
	background-position: 0 0;
}

#contact_form a.tick:hover, #contact_form a.untick:hover{
	text-decoration:underline;
}

#contact_form a.submit{
	background-position: 0 -62px;
	display:block;
	height:30px;
	width:112px;
	margin:25px 32%;
}

#contact_form a.submit:hover{
	background-position: 0 -92px;
}

#contact_form div p label.error { display:block; position:relative; top:-20px; color:#ff0000; }

#contact_status { color:#ff0000; }



/* Credentials */ 

#credentials{
	border: solid #9c9c9c;
	border-width: 1px 0 0 0;
	text-align: center;
	padding: 23px 0 0 0;
	height: 70px;
}

#credentials h3, #credentials p { float: left; }

#credentials #credentials_inner { 
	width: 626px;
	margin: 0 auto;
}

/* About Page Listing */

.about_list {
	margin: 28px 0;
	border-bottom:1px solid #9c9c9c;
	padding:0 0 25px 0;
}

.about_list p {
	margin:0 0 15px;
}

.about_list .proj_title {
	margin:50px 0 30px;
	float:left;
}

.about_list .summary {
	margin:0 0 20px 0;
	clear:left;
}

.about_list ul.tech{
	margin:0 0 0 10px;
}

.about_list ul.tech li{
	margin:3px 0;
}

.about_list img.work_pic{
	margin:0 0 20px 20px;
	float:right;
}

.about_list img.work_pic_mid{
	margin:20px 20%;
}

.about_list img.work_pic_left{
	margin:0 20px 20px 0;
	float:left;
}

.about_list .cnt{
	clear:left;
}

.about_list .cnt_right{
	/*float:left;*/
}

.about_list div.sect_title{
	margin:0 0 10px 0;
}

/* Team Listing */

.team_list {
	margin: 28px 0;
	border-bottom:1px solid #9c9c9c;
	padding:0 0 25px 0;
}

.team_list .fl {
	float:left;
	/*margin:0 28px 0 0;*/
	width: 322px;
}

.team_list .fr {
	float:right;
	margin:0;
	width:628px;
}

.team_list p {
	margin:0 0 15px;
}

.team_list h4 {
	font-size:12px;
	font-weight:bold;
}

.team_list a.more_info {
	display:block;
	height:26px;
	width: 108px;
	background:url(/images/about/more_info_btn.gif) no-repeat 0 0;
	text-indent:-9999em;
}

.team_list a.more_info:hover {
	background-position:0 -26px;
}

.team_list a.less_info {
	display:block;
	height:26px;
	width: 189px;
	background:url(/images/about/less_info_btn.gif) no-repeat 0 0;
	text-indent:-9999em;
	float:right;
}

.team_list a.less_info:hover {
	background-position:0 -26px;
}

.pete{
	padding-top: 175px;
}

.niel{
	padding-top: 190px;
}

.jo{
	padding-top: 175px;
}

.rob{
	padding-top: 150px;
}

.riana{
	padding-top: 265px;
}

.dave{
	padding-top: 255px;
}

/* Start Contact Styles */
.directions {
	padding:10px 0 25px;
	border-bottom: 1px solid #9c9c9c;
	margin:0 0 30px 0;
}

.directions ul{
	margin:0 0 0 10px;
}

.directions ul li{
	list-style:inside disc;
	padding:2px 0;
}

.map {
	padding:25px 0 25px;
	border-bottom: 1px solid #9c9c9c;
	margin:0 0 30px 0;
}
/* End Contact Styles */

/* Start Showcase Styles */

#showcase_header {
	height:339px;
	margin: 20px 0;
	position:relative;
}

#showcase_header .inner{
	position:absolute;
	top:0;
	left:-17px;	
}

#showcase_header .inner ul{
	margin:0 0 0 17px;
}

#showcase_header .inner ul li{
	display:none; 
}

#showcase_header .inner ul li.active{
	display:block;
	list-style:none;
}

#showcase_header .inner ul li div.andb{
	background: url(/images/work/andb_showcase.jpg) 0 0;	
	height:269px;
	width:890px;
	padding:70px 60px 0 0;
}

#showcase_header .inner ul li div.andb h3{ 
	float:right;
	width:395px; 
}

#showcase_header .inner ul li div.andb p{
	float:right;
	width:395px;  
	clear:right;
	color:#000;
}

#showcase_header .inner ul li div.andb p a, #showcase_header .inner ul li div.voda p a, #showcase_header .inner ul li div.rani p a, #showcase_header .inner ul li div.seeff p a{
	color:#000;
}

#showcase_header .inner ul li div.voda{
	background: url(/images/work/voda_showcase.jpg) 0 0;	
	height:274px;
	width:890px;
	padding:65px 0 0 60px;
}

#showcase_header .inner ul li div.voda h3{
	float:left;
	width:395px;
}

#showcase_header .inner ul li div.voda p{
	float:left;
	clear:left;
	width:395px;
	color:#000;
}

#showcase_header .inner ul li div.rani{
	background: url(/images/work/rani_showcase.jpg) 0 0;	
	height:239px;
	width:900px;
	padding:100px 50px 0 0;
}

#showcase_header .inner ul li div.rani h3{
	float:right;
}

#showcase_header .inner ul li div.rani p{
	float:right;
	clear:right;
	width:448px;
	color:#000;
}

#showcase_header .inner ul li div.super{
	background: url(/images/work/supersport_showcase.jpg) 0 0;	
	height:204px;
	width:886px;
	padding:135px 0 0 61px;
}

#showcase_header .inner ul li div.super h3{
	clear:left;
	margin:10px 0 0;
	position: absolute;
	top: 89px;
	left: 78px;
}

#showcase_header .inner ul li div.super p{
	width:291px;
	color:#fff;
}

#showcase_header .inner ul li div.super p a{
	color:#fff;
}

#showcase_header .inner ul li div.seeff{
	background: url(/images/work/seeff_showcase.jpg) 0 0;	
	height:262px;
	width:912px;
	padding:77px 0 0 38px;
}

#showcase_header .inner ul li div.seeff h3{
	float:left;
}

#showcase_header .inner ul li div.seeff p{
	float:left;
	clear:left;
	width:362px;
	color:#000;
}

#showcase_header a.prev{
	background:url(/images/work/fwd_bck_btns.gif) no-repeat -6px -6px;
	height:36px;	
	display:block;
	width:36px;
	position:absolute;
	top:150px;
	left:0;
}

#showcase_header a.prev:hover{
	background-position: -6px -52px;
}

#showcase_header a.next{
	background:url(/images/work/fwd_bck_btns.gif) no-repeat -52px -6px;
	height:36px;	
	display:block;
	width:36px;
	position:absolute;
	top:150px;
	right:-35px;
}

#showcase_header a.next:hover{
	background-position: -52px -52px;
}

#showcase_nav {
	border-bottom:1px solid #9c9c9c;
}

#showcase_nav ul{
	height:48px;
	width: 758px;
	margin: 0 auto;
}

#showcase_nav ul li {
	list-style:none;
	float:left;
	padding:0 10px 0 10px;
	background:url(/images/work/showcase_nav_brdr.gif) no-repeat center right;
	/*border-right:1px solid #9c9c9c;*/
}

#showcase_nav ul li.first {
	/*border-right:none;*/
	background: none;
	padding:0;
}

#showcase_nav ul li.last {
	/*border-right:none;*/
	background: none;
}

#showcase_nav ul li a{
	background:url(/images/work/showcase_btns.gif) no-repeat 0 0;
	display:block;
	height:28px;
}

#showcase_nav ul li a.sw {background-position:0 0; width:95px; cursor:default;}
#showcase_nav ul li a.beyond {background-position:-100px 0; width:80px;}
#showcase_nav ul li a.beyond:hover, #showcase_nav ul li.active a.beyond {background-position:-100px -28px;}
#showcase_nav ul li a.seeff {background-position:-186px 0; width:128px;}
#showcase_nav ul li a.seeff:hover, #showcase_nav ul li.active a.seeff {background-position:-186px -28px;}
#showcase_nav ul li a.vodacom {background-position:-320px 0; width:86px;}
#showcase_nav ul li a.vodacom:hover, #showcase_nav ul li.active a.vodacom {background-position:-320px -28px;}
#showcase_nav ul li a.rani {background-position:-411px 0; width:108px;}
#showcase_nav ul li a.rani:hover, #showcase_nav ul li.active a.rani {background-position:-411px -28px;}
#showcase_nav ul li a.supersport {background-position:-524px 0; width:98px;}
#showcase_nav ul li a.supersport:hover, #showcase_nav ul li.active a.supersport {background-position:-524px -28px;}
#showcase_nav ul li a.play {background-position:-627px 0; width:18px;}
#showcase_nav ul li a.play:hover, #showcase_nav ul li.active a.play {background-position:-627px -28px;}
#showcase_nav ul li a.pause {background-position:-655px 0; width:18px;}
#showcase_nav ul li a.pause:hover, #showcase_nav ul li.active a.pause {background-position:-655px -28px;}


/* Timeline */
#history_timeline {
	background:url(/images/about/timeline_measure.gif) repeat-y top left;
	margin:25px 0;
}

#history_timeline .inner {
	padding:10px 28px 5px;
}

#history_timeline h4 {
	/*margin:30px 0 10px;*/
}

#history_timeline ul {
	margin:10px 0 30px;
}

#history_timeline ul.last {
	margin:10px 0 10px;
}

#history_timeline ul li {
	list-style:square inside;
	margin:3px 0 3px 20px;
}

#timeline_flash {
	margin:25px 0;
}


/* Start Footer */

#footer {
	height: 110px;
	width: 950px;
	margin: 0 auto;
}

#footer_nav{
	float: left;
	padding-top: 26px;
}

#footer_nav li{
	float: left;
}

#footer_nav li a{
	background: url(/images/sitewide/ftr_nav.gif) no-repeat;
	display: block;
	height: 24px;
}

#footer_nav li a.home{ background-position: 0 0; width: 57px;}
#footer_nav li a.work{ background-position: -57px 0; width: 103px;}
#footer_nav li a.scent{ background-position: -160px 0; width: 190px;}
#footer_nav li a.about{ background-position: -350px 0; width: 88px;}
#footer_nav li a.contact{ background-position: -438px 0; width: 97px;}

#ftr_logo{
	background: url(/images/sitewide/ftr_logo.gif) no-repeat 113px 0;
	color: #515151;
	float: right;
	width: 250px;
	height: 20px;
	padding: 59px 0 0 0;
}

/* End Footer */

/* End Main Container */