@charset "utf-8";

/*======================= Reset =======================*/
html{color:#000;background:#f5f0ec;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;/*IE*/}
legend{color:#000;/*IE*/}
del,ins{text-decoration:none;}

/*======================= Typography =======================*/
/* Fonts Reset */
body{font:13px/1.231 verdana,geneva,san-serif;*font-size:small;/*IE*/*font:x-small;/*IE*/line-height:1.5;text-shadow: 0 0 0 #000;opacity:0.99;}
select,input,button,textarea{font:99% verdana,geneva,san-serif;}
table{font-size:inherit;font:100%;}

#tagLine,#navi address,#siteInfo,#search,#breadcrumbs{font-size:83%;}
#tagLine a,#navi a,#siteInfo a{text-decoration:none;}
#navi h4{text-transform:uppercase;font-weight:bold;}
#navi .naviContact h4{text-transform:none;}
#navi a,#navi abbr{font-weight:bold;}
#navi address a{font-weight:normal;}
#search label{text-transform:lowercase;}
#breadcrumbs{line-height:1.9;}
#breadcrumbs h4{font-weight:bold;}
#breadcrumbs a{text-decoration:none;}

#content,#blogExtract,.capture,#content blockquote .author{font-size:93%;}
#blogExtract a:hover,#blogExtract h3 a,.capture a{text-decoration:none;}
#content{letter-spacing:-0.2px;}
#content h1{font-size:2em;margin-bottom:0.2em;}
#content h3{text-transform:uppercase;font-weight:bold; padding-top:1em;}
#content h2,#blogExtract h3{font-size:128%;line-height:1.3;margin:0.3em 0 0.5em 0;text-transform:none;font-weight:normal;}
#content p{margin-bottom:1em;text-align:justify;}
#content a:hover{text-decoration:none;}
#content .capture .visitSite{text-decoration:underline;}

/*======================= Colours =======================*/
/* Colour Index
		Black:#000
		White:#fff
		Light Grey:#d1d2d4;
		Dark Grey:#333;
		Bright Red:#b52406
		Dark Red:#730a0a
		White Background:#f7f4f0
*/
#tagLine a,#navi a{color:#fff;}
#navi h4,#navi abbr,#navi address a:hover,#siteInfo,#siteInfo a{color:#333;}
#navi address,#navi address a{color:#d1d2d4;}
#navi ul a:hover{background:#333;}
#siteInfo a:hover,#breadcrumbs a:hover,a#backToTop{color:#b52406;}
#search label{color:#666;}
#search .button{color:#fff;}
#breadcrumbs,#breadcrumbs a{color:#333;}

#content{color:#333;}
#blogExtract a{color:#000;}
#content h3,#blogExtract h3 a:hover{color:#b52406;}
#content h2,#blogExtract h3 a,.ourDifferencePage #content li{color:#730a0a}
#content h1{color:#730a0a;}
#content a,#content blockquote .author,#content .button{color:#b52406;}
#content .capture a{color:#fff;}

/*======================= Layout =======================*/
body{background:#f5f0ec url(../images/bg_body.gif) repeat-y left top;}
#alignWrap{width:1133px;position:relative;}
#tagLine{position:fixed;left:0;top:0;width:100%;z-index:3;}
#navi{width:220px;left:0;top:0;z-index:2;}
#content,#search,#breadcrumbs,#siteInfo{margin:0 333px 0 240px;}
#content{float:left;margin-top:1.5em;padding:10px 20px 20px 20px;background:#f5f0ec url(../images/bg_content.gif) repeat-x left top;}
#slogan{position:absolute;top:119px;right:0;}
.csDetail #slogan{top:390px;}
#siteInfo{clear:both;padding:35px 0 15px 0;}

/* If window width > 1440px */
/* body{background-position:center top; text-align:center;}
#alignWrap {margin:0 auto; text-align:left;} */

/* If window width < 1440px OR When the javascript is disabled */
body {background-position:left top;}

/* If window height > 500px */
#navi{position:fixed;}

/* If window height < 500px OR When the javascript is disabled */
/* #navi{position:absolute;} */

/*========================= Style =======================*/
/* Default Styling */
#wrap{width:100%;background:url(../images/bg_wrap.gif) repeat-x left top;}
.accessAid{position:absolute;left:-2500px;width:1px}/* for screen reader only */

/* =Tag Line*/
#tagLine{background:url(../images/shawdow_tagLine.png) repeat-x left bottom;text-align:right;padding-bottom:8px;}
#tagLine a{margin-right:1em;background:#333;}

/* =Navigation*/
#navi{background:#b52406 url(../images/logo.gif) no-repeat left top;min-height:600px;}
#navi h1{position:relative;width:105px;height:76px;margin:48px 0 70px 13px;}
#navi h1 a{position:absolute;width:100%;height:100%;text-indent:-5000px;}
#navi h4,#navi address{padding-left:20px;}
#navi .naviContact h4{padding:0;}
#navi h4,#navi .naviBlog{margin-top:1em;}
#navi ul a{display:block;padding-left:20px;}
#navi ul a:hover {padding-left:30px;}
#navi address a{display:inline;padding:0;}
#navi address a:hover{padding:0;background:none;}

/* Activated page on navigation */
.homePage #navi .naviHome a,.caseStudiesPage #navi .naviCaseStudies a,.clientsPage #navi .naviClients a,.dbPage #navi .naviDigitalBranding a,.uxPage #navi .naviUxDesign a,.eservicePage #navi .naviEserviceDesign a,.whoWeArePage #navi .naviWhoWeAre a,.ourDifferencePage #navi .naviOurDifference a,.contactUsPage #navi .naviContact h4 a{display:inline;background:url(../images/arrow_white.gif) no-repeat right 70%;padding-right:10px;}
.homePage #navi .naviHome a:hover,.caseStudiesPage #navi .naviCaseStudies a:hover,.clientsPage #navi .naviClients a:hover,.dbPage #navi .naviDigitalBranding a:hover,.uxPage #navi .naviUxDesign a:hover,.eservicePage #navi .naviEserviceDesign a:hover,.whoWeArePage #navi .naviWhoWeAre a:hover,.ourDifferencePage #navi .naviOurDifference a:hover,.contactUsPage #navi .naviContact h4 a:hover{padding-left:20px;}

/* =Site Info*/
#siteInfo{text-align:right;}
#siteInfo li{display:inline; padding-right:2px;}
#siteInfo li:after{content:' /';}
#siteInfo li:last-child:after{content:'';}
a#backToTop{ float:right;margin:-3em -100px 0 0; padding:1.5em 0 0 18px; background:url(../images/ic_backToTop.gif) no-repeat left 1em;}
a:hover#backToTop{ background-position:0 0.2em;}

/* =Search*/
#search{padding-top:38px;text-align:right;position:relative;}
#search legend{visibility:hidden;font-size:0;}
#search input{display:inline;padding:3px 3px 4px 2px;}
#search label{position:absolute;margin-left:2em;cursor:text;}
#search .keywordsInput{border:none;background:#e6ddd1 url(../images/bg_searchInput.jpg) no-repeat left top; width:210px;}
#search .button{border:none;background:#343333 url(../images/bg_button.jpg) repeat-x left top;padding:2px 3px 3px 3px;cursor:pointer;}
#search .button:active{padding:3px 2px 2px 4px;}

/* =Bread Crumbs */
#breadcrumbs{float:left;width:550px;background:#f7f4f0;padding:0 5px;/*temporary*/margin-top:38px;/*temporary*/}
#breadcrumbs ul a{float:left;padding-right:10px;margin-right:5px;background:url(../images/arrow_red.gif) no-repeat right 60%;}
#breadcrumbs li{ display:inline;}
#breadcrumbs h4{float:left;margin-right:8px;}

/* =Content */
#content h2,#content ul{margin-bottom:1em;}
#blogExtract a:hover img,.caseContainer a:hover img{border:#d1d2d4 4px solid;width:166px;height:67px;}
.capture{float:right;width:490px;height:251px;overflow:hidden;margin:10px -336px 20px 20px;background:url(../images/bg_capture.gif) no-repeat bottom;}
.frame{position:relative;width:490px;height:231px;overflow:hidden;}
.row img{float:left;}
.capture .prev{margin-left:25px;padding-left:10px;background:url(../images/prev_white.gif) no-repeat left 55%;}
/*.capture .prev:after{content:'  | ';}*/
.capture .next{margin-right:12px;padding-right:10px;background:url(../images/next_white.gif) no-repeat right 55%;}
.capture .numPhoto{color:#ccc}
#content .capture a:hover{color:#fc0;}
#content li{padding-left:10px;background:url(../images/arrow_red.gif) no-repeat left 5px;}
#content .processList{width:522px;background:url(../images/processChart.jpg) no-repeat center top;}
#content .strategise,#content .execute,#content .analyse{width:155px;background:none;margin-top:20px;padding-left:0;}
#content .strategise{float:left;min-height:155px;}
#content .execute{float:right;min-height:155px;}
#content .analyse{clear:both;margin-left:181px;}
#content .button{width:auto;margin-top:1.5em;border:#730a0a 1px solid;background:#f5f0ec url(../images/bg_form_button.gif) repeat-x left top; cursor:pointer;}