/* CST site v1, commented by DH 13/11/06 */



/* These define the look of any text links other than those defined PER DIV, see below */

a:link { 
 color: #f7941d;
 text-decoration: none;
 }
a:visited { 
 color: #f7941d;
 text-decoration: none;
 }
a:hover { 
 color: #005481;
 text-decoration: none;
 }
a:active { 
 color: #005481;
 text-decoration: none;
 }

/* This is the main background area of the page */
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	background: images/background_image1.gif;
	margin: 0px;
	padding: 0px;
	text-align: center;
	vertical-align: middle;
}

/* This is the main site holder */
#wrapper {
	width: 762px;
	margin: 0px auto 0px;
	padding: 0px;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
}

/* This is the top div that contains the upper edge graphic */
#header {
	background: url(../images/cst_header.gif) no-repeat;
	height: 100px;
	width: 762px;
	margin: 0px;
	padding: 0;
	font-size: 80%;
	font-weight: normal;
	color: #000000;
}
#header form {

	margin: 0px;
	padding: 0px;
}

/* This is the div that holds the logo */
#header_logo {
	float: left;
	height: 80px;
	width: 220px;
	text-align: left;
	padding-left: 20px;
	vertical-align: middle;
	margin-top: 20px;
}

/* This is the div that hold the right hand side elements of the header*/
#header_extras {
	float: left;
	height: 80px;
	width: 502px;
	text-align: right;
	font-size: 75%;
	font-weight: normal;
	color: #333333;
	margin-top: 20px;
	padding-right:20px;
}

/* This would format any form (eg Search bar) that you might put up in this header div */
#header form {
	margin: 0px;
	padding: 0px;
}

/* This is div that holds the navigation script and handles the menu background via a repeated 1px wide graphic */
/* Menu content is handled in menudata.js in the menu folder */
#navigation {
	height: 25px;
	width: 410px;
	text-align: left;
	float:right;
	margin-top:20px;
	background-image: url(../images/cst_menu_bg_pixel.gif);
	background-repeat: repeat-x;
	padding-top: 2px;
	color: #000000;
}

/* These set the colours of the links in the menu (also configured in the file menudata.js) */
#navigation a:link { 
 color: #000000;
 text-decoration: none;
 }
#navigation a:visited { 
 color: #000000;
 text-decoration: none;
 }

/* This div holds the main picture for each page. Its height is defined by the picture itself, not fixed here*/
#main_image {
	width: 762px;
	margin:0px;
	padding:0px;
	font-size:0px;
	}

/* This is the grey dividing line between the main picture and the content below. Set the content heading format here */
#grey_divider {
	background-color:#d1d2d4;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	text-align:left;
	font-size: 70%;
	font-weight: bold;
	color: #005481;
	
	}

/* This holds all the content in the lower half of the site, stopping just before the header */
#content{
	background-color:#FFFFFF;
	float:left;
	width:762px;
}

/* This holds the left content area on the home page */
#content_left_home {
	float:left;
	width: 470px;
	font-size: 60%;
	color: #005481;
	margin: 20px 0px;
	clear: both;
	display:inline;
	padding-left: 10px;
	text-align: left;
	padding-right: 0px;
	margin-top: 10px;
	}

/* This forces the text to left justify when in a p tag (ie a paragraph of text)  */
#content_left_home p {
	text-align:justify;
	margin-top: 3px;
}

/* This holds the left content area on the main pages. It's wider than the home page one */
/* The right hand grey border here creates the divider between the left and right areas */
#content_left_mainpages {
	float:left;
	background: #FFFFFF;
	width: 470px;
	font-size: 60%;
	color: #005481;
	margin: 20px 0px 20px;
	clear: both;
	display:inline;
	padding-left: 10px;
	text-align: left;
	padding-bottom: 30px;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #CCCCCC;
	}

#content_left_mainpages p {
	margin-top:3px;
}

/* These define the look of any text links in the left area of the main pages */
#content_left_mainpages a:link{
	color: #005481;
	text-decoration: none;
}

#content_left_mainpages a:visited{
	color: #005481;
	text-decoration: none;
}

#content_left_mainpages a:hover{
	color: #f7941d;
	text-decoration: none;
}

/* This holds the right content area on the home page */
#content_right_home {
	float:none;
	width:270px;
	display:inline;
	border-left-width: 2px;
	border-left-style: none;
	border-left-color: #CCCCCC;
	margin-top: 20px;
}	

/* This holds the right content area on the main pages */
#content_right_mainpages {
	float:left;
	width:262px;
	background: #FFFFFF;
	display:inline;
}	

/* This holds the text table element on the right hand side of the main pages */
#content_right_mainpages_textarea {
	float:left;
	width:262px;
	display:inline;
	margin-top: 20px;
	font-size: 70%;
	font-weight: bold;
	color: #005481;
	padding-bottom: 30px;
}

/* This holds the left content area on the contact pages */
#contact_left{
	float:left;
	background: #FFFFFF;
	width: 180px;
	font-size: 60%;
	color: #005481;
	margin: 20px 0px;
	display:inline;
	padding-left: 10px;
	text-align: left;
	padding-bottom: 30px;
}

/* These define the style of any text links on the left hand side of the contact page */
#contact_left a:link{
	color: #005481;
	text-decoration: none;
}

#contact_left a:visited{
	color: #005481;
	text-decoration: none;
}

#contact_left  a:hover{
	color: #f7941d;
	text-decoration: none;
}

/* This holds the middle content area (of three) on the contact page */
#contact_mid {
	float:left;
	background: #FFFFFF;
	width: 200px;
	font-size: 60%;
	color: #005481;
	display:inline;
	padding-left: 10px;
	text-align: left;
	padding-bottom: 30px;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #CCCCCC;
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: #CCCCCC;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 20px;
}

/* These define the look of any text links in the middle area of the contact page */
#contact_mid a:link{
	color: #005481;
	text-decoration: none;
}

#contact_mid a:visited{
	color: #005481;
	text-decoration: none;
}

#contact_mid  a:hover{
	color: #f7941d;
	text-decoration: none;
}

/* This holds the right content area on the contact page */
#contact_right {
	float:left;
	background: #FFFFFF;
	width: 340px;
	font-size: 60%;
	color: #005481;
	margin: 20px 0px;
	display:inline;
	padding-left: 10px;
	text-align: left;
	padding-bottom: 0px;
}

/* This holds the leftmost of the two floating boxes on the home page  */
#float_1{
	float:left;
	width:170px;
	display:inline;
	margin-top: 25px;
	margin-bottom: 25px;
}

/* This holds the top graphic for the leftmost of the two floating boxes on the home page  */
#float_1_top_image_box {
	font-size:0px;
}

/* This holds the text in the leftmost of the two floating boxes on the home page  */
#float_1_text_box{
	color:#ec008c;
	background-color: #EEEEEE;
	height: 120px;
	border-top: 1px solid #BBBBBB;
	border-right: 1px solid #BBBBBB;
	border-bottom: 1px none #BBBBBB;
	border-left: 1px solid #BBBBBB;
	font-size: 55%;
	padding: 5px;
	text-align: left;
}

/* This holds the image in the leftmost of the two floating boxes on the home page  */
#float_1_image_box{
	text-align: center;
	background-color: #EEEEEE;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #BBBBBB;
	border-right-color: #BBBBBB;
	border-bottom-color: #BBBBBB;
	border-left-color: #BBBBBB;
}

/* This holds the rightmost of the two floating boxes on the home page  */
#float_2{
	float:left;
	width:170px;
	display:inline;
	margin-left:20px;
	margin-top: 25px;
	margin-bottom: 25px;
	
}

/* This holds the top graphic for the rightmost of the two floating boxes on the home page  */
#float_2_top_image_box {
	font-size:0px;
}

/* This holds the text in the rightmost of the two floating boxes on the home page  */
#float_2_text_box{
	color:#ec008c;
	background-color: #EEEEEE;
	height: 120px;
	border-top: 1px solid #BBBBBB;
	border-right: 1px solid #BBBBBB;
	border-bottom: 1px none #BBBBBB;
	border-left: 1px solid #BBBBBB;
	font-size: 55%;
	padding: 5px;
	text-align: left;
}

/* This holds the text in the rightmost of the two floating boxes on the home page  */
#float_2_image_box{
	text-align: center;
	background-color: #EEEEEE;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #BBBBBB;
	border-right-color: #BBBBBB;
	border-bottom-color: #BBBBBB;
	border-left-color: #BBBBBB;
}

#index_callback_box
{
	float:left;
	width:240px;
	display:inline;
	margin-top: 25px;
	margin-bottom: 25px;
	margin-left: 0px;
	margin-right: 0px;
	font-size: 60%;
	color: #005481;
	padding-left: 15px;
	}

#index_callback_box input
{
	font-size: 100%;
	color: #005481;
	font-weight: bold;
}

.submit_buttons
{
	font-size: 90%;
}

/* This is the global footer that contains the curved lower edge graphic */
#footer {
	background: url(../images/cst_footer.gif) no-repeat;
	background-repeat: no-repeat;
	width: 762px;
	clear: both;
	height: auto;
	font-weight: bold;
	font-size: 80%;
}

/* This is the div that holds the gey line in the footer */
#footer_line {
	background-image: url(../images/cst_footer_line.gif);
	background-repeat: no-repeat;
	width: 754px;
	clear: both;
	height: 30px;
	font-size:60%;
	text-align:center;
	margin-left:8px;
	padding-top:3px;
	margin-top:40px;
}


h1 {
	font-size: 150%;
	color: #333333;
	padding: 0px;
	margin: 0px;
	text-align: left;
	font-weight: bold;
}
.leftimage {
	float: left;
	border: 0px solid #000000;
	margin: 0px;
}

/* these would allow for a form entry to be formatted  */
.formfield_A {
	font-size: 9pt;
	font-weight: normal;
	color: #666666;
	height: 15px;
	width: 120px;
	border: 1px solid #CCCCCC;
	vertical-align: middle;
}
.formfield_button {
	color: #000000;
	background: #FFFFFF;
	height: 20px;
	font-size: 9pt;
	font-weight: normal;
	margin: 0px;
	padding: 0px;
	border: 1px solid #CCCCCC;
	vertical-align: middle;
}

/* This style defines the look of the text subheaders in the content pages  */
.subheader_title {
	font-size: 120%;
	font-weight: bold;
	color: #f7941d;
}

/* This style defines the look of the text subheaders for the site map wording  */
.subheader_sitemap {
	font-size: 90%;
	font-weight: bold;
	color: #f7941d;
}

/* This style defines the look of the tagline (where appropriate, eg home page) under the text in the content pages  */
.subheader_tagline{
	font-size: 95%;
	font-weight: bold;
	color: #f7941d;
	padding-top: 10px;
	padding-bottom: 10px;
}

.tab_header
{
	font-size:100%;
	color: #FFFFFF;
	font-weight: bold;
	padding-left: 25px;
}

.tab_footer
{
	font-size:100%;
	color: #FFFFFF;
	font-weight: bold;
	padding-right: 30px;
}

.table_borders
{
	border: 1px solid #BBBBBB;
}

/* This style defines the look of the quotations from clients in the Case Studies  */
.client_quotes {
	color: #666666;
	font-style: italic;
}

.contact_subheader_title {
	font-size: 90%;
	font-weight: bold;
	color: #f7941d;
}

.footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #000000;
}