/***************/
/* main layout */
/***************/
body { background:url(../images/bg.jpg) top repeat-x #111;}

#bodyWrapper { width:961px; margin:auto; }

/* specific link colours for this site */
a         { color: #868686; text-decoration: none; }
a:link    { color: #868686; text-decoration: none; }
a:visited { color: #868686; text-decoration: none; }
a:hover   { color: #20588c; text-decoration: none; }
a:active  { color: #20588c; text-decoration: none; }


/*******************/
/* header elements */
/*******************/
#header {  }

#headerContact { float:right; margin-top:25px; }

#sideContinuation { background: url(../images/sideBg.gif) repeat-y left;}

#logo { float: left; }

#navArea { float:left; width:231px; }

ul#nav      { margin:0; padding:0; }
ul#nav li   { margin:0; padding:0; list-style:none; border-top:2px solid #161616; }
ul#nav li a { display: block; background:#020202; padding:6px 0px 6px 10px; border-left:7px solid #20588c; }
ul#nav li a:link { color:#FFFFFF; }
ul#nav li a:visited { color:#FFFFFF; }
ul#nav li a:hover { color:#FFFFFF; text-decoration:none; background:#161616;}
ul#nav li a:active { color:#FFFFFF; text-decoration:none; }


ul#nav ul { margin-top: 0px; font-size:85%; }
ul#nav ul li { }
ul#nav ul li a { background:#323232; padding-right:3px;  }
ul#nav ul li a:hover { background:#4d4d4d; color:#4b8ecc; }


/********************/
/* content elements */
/********************/
#main { float:left; width:730px;  }

#column { float:left; width:353px; margin-left:10px; }

#columnFullWidth { float:left; width:718px; margin:15px 0px 0px 12px; }
#columnFullWidthTop { float:left; width:718px; margin:0px 0px 0px 12px; }

.left { float:left; width:330px; }
.right { float:right; width:324px; }

.largeGreyFont { font-family:'Franklin Gothic Medium', Arial, Helvetica; font-size:345%; letter-spacing:-1px; line-height:1.4em; color:#9e9ea0; }
.largeWhiteFont { font-family:'Franklin Gothic Medium', Arial, Helvetica; font-size:296%; line-height:1em; }

.mainTitle { font-size:2.143em; letter-spacing:-1px; line-height:0.9em;}

.blueBorder { border-left:7px solid #20588c;}

.divide { margin-top:10px; }

.headerBg { background:#161616; padding:10px 0px 10px 10px; }

.contentBg { background:#020202; padding:15px;}
.imageTop { height:47px; background:#161616; }
.imageBg { background:#020202; padding:15px; margin-top:39px; }

.caseStudyImageOneTwo { float:left; width:219px; margin-right:10px; }
.caseStudyImageThree { float:left; width:219px; }

#map { float:left; width:366px; }
#address { float:left; margin-left:20px; }

/*********/
/* items */
/*********/
.itemImage { float:left; width:106px; }
.itemContent { float:left; width:202px; padding-left:15px; }

.item          { margin-bottom: 10px;}
.item p         { margin-top: 10px;}
.item .title   { font-size: 1em; font-weight: bold; }
.item .date    { font-style: italic; }
.item .image   { float: left; margin-right:5px; margin-bottom: 5px; margin-top:10px; padding-right:10px; }


/*******************/
/* footer elements */
/*******************/
#footer { font-size:85%; padding-left:30px; margin-bottom:30px;}
#footer a { text-decoration: none; } /* for the clevercherry.com link */
#footer a:link { text-decoration: none; }
#footer a:visited { text-decoration: none; }
#footer a:hover { text-decoration: none; }
#footer a:active { text-decoration: none; }


/***********************/
/* general form styles */
/***********************/
.required { color: #f00; }

.formBg { background-color:#333; border:0; color:#fff; padding:5px;}

textarea {
	scrollbar-face-color: #373737;
	scrollbar-arrow-color: #5c5c5c;
	scrollbar-track-color: #5c5c5c;
	scrollbar-shadow-color: #5c5c5c;
	scrollbar-highlight-color: #5c5c5c;
	scrollbar-3dlight-color: #5c5c5c;
	scrollbar-darkshadow-color: #5c5c5c;
}

/* all form elements are contained within a formrow div, with a label and
 *  then the element, this is the best way (but still not good) to emulate
 *  a table */


div.formrow {
  clear: both;
  text-align: left;
  margin-bottom: 2px;
	color:fff;
}

div.formrow label {
  float: left;
  text-align: left;
  margin-right: 10px;
  width: 350px; /* default width for a default form, add new form ids and override */
}
div.formrow.indent { margin-left: 0px; } /* label width + label margin-right, override as above */
div.formrow label.radio {
	float: none;
	text-align: inherit;
	margin-right: 0;
	width: auto;
}

#recaptcha_widget         { margin-bottom: 15px; }
#recaptcha_image          { float: left; width: 300px; }
#recaptcha_options        { border-left: 1px solid #999; padding-left: 5px; float: left; margin-left: 10px; }
#recaptcha_response_field { width: 325px; }
#recaptcha_notice         { font-size: 0.833em; color: #555; }

/* message and error boxes, not just useful in contact form */
#messages,
#errors,
#warnings,
#info { margin-bottom: 10px; }
.message { border: 1px solid #080; background: #efe; color: #080; padding: 3px 5px; margin-bottom: 15px; float: left; } /* you may need to clearfix this */
.message.nomargin { margin-bottom: 0; } /* if before something with a margin-top */
.message.info { border-color: #880; background: #ffe; color: #880; } /* info box in yellow */
.message.warn { border-color: #f40; background: #ffe; color: #f40; } /* warning box in orange */
.message.error { border-color: #f00; background: #fee; color: #f00; } /* error box in red */


/*client list*/


.contentBg_client{
	background:#020202; padding:15px; 
}


.contentBg_client li{
	list-style-type:none;
	line-height:1.4em;
}

.contentBg_client li a{
color:#fff;
}

/*news teaser*/

#news_teaser{
	margin:0 0 20px 0;
	clear:both;
}

#main_news{
	float:left;
	width:710px;
	padding-left:20px;
}

#main_news .date{
	font-weight:italics;
	font-size:11px;
}

/*case_listing*/

#case_listing{
	width:45%;
	float:left;
	padding-left:20px;
}


/*accreditation*/

.contentBg_accred{
	background:#020202; 
	padding:15px;
	margin-bottom:10px;
}

.contentBg_accred .title{
	font-size:16px;
	color:#ccc;
	text-transform:uppercase;
	float:left;
	margin:0 0 0 20px;
}
.contentBg_accred .text{
	width:500px; 
	float:left;
	margin:10px 0 0 20px;
}

.contentBg_accred .logo{
	float:left; 
}

#accred_logo{

	margin-right:30px;
	float:left;
}