/* CSS Document */

/* 
-------------------------------------------------------------------------
This document deals with mainly the divs and styles that are used site wide. 
*/


/* GLOBAL ELEMENTS
================================================== */

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.55em;
	line-height: 130%;
	color: white;
	background-color: #333333;
	margin: 0px;
	padding: 0px;
}

/* Style the wrapper - THIS CONTAINS THE WHOLE SITE AND ALL THE INDIVIDUAL DIVS*/

#container {
	margin: 10px auto;
	/*background-color: red;*/
	padding: 0;
	width: 760px;
	}

/* Style the HEADER - containing dd logo and the dotted line*/
	
#header {
	border-bottom: 1px dashed #97AB33;
	height: 64px;
	/*background-color: yellow;*/
	}
	
/* MASTHEAD
================================================== */


/* Style the MASTHEAD - THIS HAS THE PLACE NAV DIV and the corresponding Nav placed within it */

	
#masthead {
	border-bottom: 1px dashed #97AB33;
	height: 1.7em;
}
	
/* Floats Logo Right */
	
#logo {
	float: right;
	border: none;
	}
	
/* Holds the Nav */

#placeNav {
	padding: 0px 0 0 10px;
}

/* This wrapper contains the Content on the page - Including the 3 Main Columns Below */

#column1 {
float:left;
padding-left: 0px;
width: 180px;
voice-family: "\"}\"";
voice-family:inherit;
width: 180px;
border-right: 4px solid #333333;
}
html>#column1 {
width: 170px;
}

#column2 {
float:left;
padding-left: 0px;
width: 385px;
voice-family: "\"}\"";
voice-family:inherit;
width: 391px;
border-right: 4px solid #333333;
}
html>#column2 {
width: 381px;
}

#column3 {
float:left;
padding-left: 0px;
width: 180px;
voice-family: "\"}\"";
voice-family:inherit;
width: 180px;
}
html>#column3 {
width: 170px;
}

/* These margins to the images are to simply get round a bug which meant the images were 1px out from the Background */

#column3 img {
margin-left: 1px;
}

*html #column3 img {
margin-left: 1px;
}

#column2 img {
margin-left: 1px;
}

*html #column2 img {
margin-left: 1px;
}


/* Style the seperators */

.seperator {
height: 5px;
background-color: #a9a9a9;
clear: both;
margin-bottom: 2em;
}

.seperatorInvisible {
height: 0;
clear: both;
}

/* Style the Headers for each column */

#column1 h1, #column3 h1 {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 120%;
padding: 10px 0 0 10px;
}

#column2 h1 {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 120%;
padding: 10px 0 0 20px;
}

#column2 h2 {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 110%;
padding: 0px 0 0 20px;
color: #97AB33;
}

*html #column1 h1,*html  #column3 h1 {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 130%;
padding: 0px 0 0 10px;
}

*html #column2 h1 {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 130%;
padding: 0px 0 0 20px;
}

#column1 p, column2 p, column3 p {
padding: 0;
}

/* The Main Page Content Container which holds the 3 column colour backgrounds */

#pageContent {
	margin: 10px 0 10px 0;
	padding-bottom: 10px;
	text-align: left;
	background-image:url(../images/website_bg.gif); background-repeat:repeat-y;
	/*background-color: green;*/
	}
	
/* IE BG background differs very slightly - so that the BG lines up in IE Browser window */
	
*html #pageContent {
	margin: 10px 0 0px 0;
	padding-bottom: 10px;
	text-align: left;
	background-image:url(../images/website_bgIE.gif); background-repeat:repeat-y;
	/*background-color: green;*/
	}

/* CONTROLS THE 2 FOOTERS ALONG WITH THE CONTENT WITHIN THE FOOTERS
-------------------------------------------------- */

#footerContainer {
	clear: both;
	background-color: #333333;
}
	
#footer{
			margin-top:-5px;
			height:27px;
			clear:both;
			margin-left:6px;
			margin-right:0px;
			font-family: Arial, Helvetica, sans-serif;
			color:#FFFFFF;
			padding-left:10px;
			padding-top:5px;
		}
		/* ignore IE 5 mac \*/
		*html #footer{
			margin-right:0px;
			padding-top:10px;
		}
		/* end */
		#footer ul{
			margin:0px;
			paddgin:0px;
		}
		#footer ul li{list-style:none;}
		#footer ul.right{ float:right;}
		/* ignore IE 5 mac \*/#footer ul.left{ margin-left:-40px;}/* end */
		/* ignore IE 5 mac \*/*html #footer ul.left{margin-left:0px;}/* end */
		#footer ul li{display:inline;}
		#footer ul li a{
			color:#FFFFFF;
			text-decoration:none;
			margin-right:15px;
			margin-top:0px;
			display:block;
			float:left;
		}
		
		*html .letterLast{
			color:#FFFFFF;
			text-decoration:none;
			margin-right:0px;
			margin-top:0px;
			display:block;
			float:left;
		}
		
		#footer ul li a:hover{
			color:#FFFFFF;
			background: #97AB33;
		}
		#footer ul li a.letter{
			margin-right:10px;
			
		}
		
		#footer ul li a.letterLast{
			margin-right:6px;
		}
	
#footer2 {
	/*background-color: red;*/
	text-align: left;
	color: #FFF;
	border-top: 1px dashed #97AB33;
	border-bottom: 1px dashed #97AB33;
	padding: 5px 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	clear: both;
	}
	
#footer2 a, #footer1 a:visited, #footer1 a:active {
	color: #fff;
	text-decoration: none;
	}  

#footer2 a:hover {
	color: #fff;
	text-decoration: none;
	background: #97AB33;
	}
	
.green {
	color: #97AB33;
	}

/* This is a fix which forces the #wrapper to go round the page content */
.FloatFix {
	clear: both;
}

/* FORMATTING
-------------------------------------------------- */

p {
	line-height: 140%;
	margin: 10px 20px;
	}
	
.introPara {
	color: #97AB33;
	font-weight: bold;
}

.recentWorkHeading {
	color: #97AB33;
	padding-left: 1.7em;
	padding-bottom: 0.2em;
}

.largePageName {	
	color: #AAC023;
	padding-left: 20px;
	padding-top: 66px;
	/*font-weight: bold;*/
	font-size: 1em;
}

#jobAdvert {
	background: #CCCCCC;
	color: #666666;
	border: #fff 1px dotted;
	padding: 0 5px 5px 5px;
	display: block;
	font-size: 110%;
	margin: 18px;
}

#jobAdvert a:link {
	color: #97AB33;
}


/* ELEMENTS SPECIFIC TO THE CONTENT IN THE 3 COLUMNS
-------------------------------------------------- */

#greenSq {
	background-color: #94A61D;
	width: 165px;
	height: 88px;
	}
	
.greenSqTitle {
	font-size: 1.9em;
	font-family: "Trebuchet MS", Verdana, sans-serif;
	/*font-weight:bold;*/
	color: #AAC023;
	padding: 63px 5px 5px 10px;
	line-height: 110%;
	}
	
/* ------------------------------------------------------------------- */
/* RIGHT HAND PORTFOLIO SNIPPETS LIST								   */
/* ------------------------------------------------------------------- */
#column3 ul{
	margin:0em;
	padding-left:12px;
}

#column3 ul li{
	list-style:none;
	padding-left:0px;
	padding-right:10px;
	padding-bottom: 10px;
	display:block;
}

#column3 a {
	color: #AAC023;
	text-decoration: none;
}

#column3 a:hover {
	color: #fff;
	text-decoration: none;
}

.column3subtext {
	margin: 0;
	padding: 0;
}

#column3 p {
	line-height: 140%;
	margin: 0px;
	}

/* This IE Hack pulls the Recent Work Sub List as needed in IE 

*html .column3subtext {
	margin: 0 0 1.2em -20px;
	padding: 0em;
}*/

/* ------------------------------------------------------------------- */
/* LEFT HAND PORTFOLIO SNIPPETS LIST								   */
/* ------------------------------------------------------------------- */
#column1 ul{
	line-height:115%;
	margin:0px;
	padding-left:12px;
	padding-top: 0px;
	padding-right:12px;
}

#column1 ul li{
	list-style:none;
	padding-right:0px;
	padding-bottom: 5px;
	display:block;
	color:#000000;
}

#column1 a {
	color: #000000;
	text-decoration: none;
}

#column1 a:hover {
	color: #ffffff;
	text-decoration: none;
}

/* ------------------------------------------------------------------- */
/* COLUMN 2 LINKS								   */
/* ------------------------------------------------------------------- */

#column2 .back a,#column2 .back a:visited,#column2 .back a:active {
	background-image: url(../images/back_icon.gif); background-repeat:no-repeat;
	padding: 0 0 0 1.2em;
	color: #999999;
	text-decoration: none;
	}

#column2 .back a:hover {
	color: #fff;
	text-decoration: none;
	}

	
/* ------------------------------------------------------------------- */
/* COLUMN 2 CLIENT LIST COLUMNS								   */
/* ------------------------------------------------------------------- */

	
#clientListBox1 {
	width: 160px;
	float: left;
}

#clientListBox2 {
	width: 160px;
	float: left;
}

/* ------------------------------------------------------------------- */
/* COLUMN 2 CLIENT LIST UL								   */
/* ------------------------------------------------------------------- */


.clientlist ul{
	margin:0em;
	padding-left:12px;
}

.clientlist li{
	list-style:none;
	padding-left:0px;
	padding-right:10px;
	padding-bottom: 10px;
	display:block;
}

.clientlist a {
	color: #AAC023;
	text-decoration: none;
	line-height: 100%;
}

.clientlist a:hover {
	color: #fff;
	text-decoration: none;
}

#column2 a {
	color: #AAC023;
	text-decoration: none;
}

#column2 a:hover {
	color: #fff;
	text-decoration: none;
}

.paddingAdd {
	padding: 0 20px 0 20px;
}

/* Simply styles the tabbed text on the siteMap Page
-------------------------------------------------- */

.siteMapTab1 {
	margin: 0 0 0 30px;
	padding: 0 0 0 0;
	list-style-image:url(../images/sitemap_small_bullet.gif);
}

.siteMapTab1Sub {
	margin: 0 0 0 40px;
	padding: 0 0 0 0;
	list-style-image:url(../images/sitemap_small_bullet.gif);
}

.siteMapTab1SubEnd {
	margin: 0 0 10px 40px;
	padding: 0 0 0 0;
	list-style-image:url(../images/sitemap_small_bullet.gif);
}

.siteMapNoTabEnd {
	margin: 0 0 10px 0;
	padding: 0 0 0 0;
	list-style-image:url(../images/sitemap_small_bullet.gif);
}

.siteMapSubHeading {
	margin: 0px;
	padding: 0px;
}