@charset "utf-8";
/**************************************************

--- Naming Convention & writing style ---

- IDs & class names = all_lower_case_with_underscores
- ID and class names should relate to content they contain, not position/appearance
- Cascade ID related class names by tabbing. eg:
#element_id{}
#element_id .class_name{}
- Use single line declarations for all but the very long
- Prefered order: position ; dimensions ; float ; margin ; padding ; everything else

--- File structure ---

- Import
- Global styles
- Global classes
- Global IDs (IDs common to all/most pages)
- #id .classes
- Local IDs
- #id .classes

--- Colours ---

List colours here for easy find & replace
#ffcaca Pink
#cc1e11 Red
#d21e12 Mid Red
#8e1006 Dark Red
#cbc0c0 Red Grey
#676666 Light Grey

***************************************************/

/* *** IMPORT *** */

@import url("reset.css");

/*
Note: reset.css sets body text size @ 62.5%
For text sizes use:
1em instead of 10px
1.6em instead of 16px, etc
*/

/* *** GLOBAL STYLES *** */


body{font-family:Helvetica, Arial, sans-serif;}



#wrapper{
	background-repeat:no-repeat;
	background-position: 0 138px;
}

h1,h2,h3,h4{font-weight:normal;}
h1,h2{padding-bottom:5px; margin-bottom:5px; line-height:1.3em;  font-size:1.9em; font-weight:normal; color:#636363; border-bottom:1px solid #CCC; }

p{line-height:1.6em; color:#404141; font-size:1.3em;}

ul.horz_nav li{float:left;}
.col{margin-left:3%; margin-top:15px; margin-bottom:15px;float:left;}
	/*.col.med{  width:30.3%;}
	.col.wide{width:63.6%;}*/
	.col.med{  width:301px;}
	/*.col.wide{width:602px;}*/
	.col.across{width:903px;}
	
.col b, .col strong{font-weight:bold;}
.col em{font-style:italic;}
.col li{margin:4px 0px; list-style-image:url(../images/li_standard.gif);}
.col p{margin-bottom:10px;}
.btn{display:block; opacity:0.8; text-indent:-9999px; }
.btn:hover{opacity:1;}
	.btn.view_case{width:108px; height:21px; margin:3px; background:url(../images/btn_view_case_study.gif) no-repeat;}

#page{width:960px; margin:0px auto;}
#page_body{
min-height:386px;
}

	#header .logo{width:232px;height:51px;float:left;}
	#header ul.horz_nav{width:100%; clear:both; overflow:auto;}
		#header ul.horz_nav li{margin:10px 15px;}
		#header ul.horz_nav li a{color:#6f6565; font-size:1.5em; text-decoration:none;}
		#header ul.horz_nav li a:hover{color:#09B;}
		#header ul.horz_nav ul{display:none;}
		#header #main_nav{}
#header h1{
    clear:both;
    font-size:3.6em;
    color:#808080;
	border:none;
   
}
#main_nav{padding-top:20px;text-align:right;margin-bottom:0;}
	#main_nav li{display:inline;}
	#main_nav li a{color:#05bcf3;display:-moz-inline-box;display:inline-block;font-size:1.8em;height:38px;border-right:2px solid #EEE;padding:10px;letter-spacing:-0.01em;font-weight:bold;text-transform:uppercase;}
	#main_nav li a.CurrentPage,#main_nav li a.ParentPage{color:#FFF;background-color:#05bcf3;height:61px;border-color:#05bcf3;}
		#main_nav li a.CurrentPage:hover{border-color:#05bcf3;}
	#main_nav li a:hover{border-right-color:#000;}
	
#sub_nav{clear:both;text-align:center;border-top:1px solid #000;margin-top:0;min-height:36px;height:auto !important;height:36px;}
	#sub_nav li{display:inline;}
	#sub_nav li a{display:-moz-inline-box;display:inline-block;color:#636363;font-size:1.2em; padding:10px 14px;}
	#sub_nav li a.CurrentPage{color:#FFF !important;background-color:#05bcf3}

#header #sub_nav li a{color:#636363;}
#header #sub_nav li a:hover{color:#05bcf3;}

#gallery #prev, #gallery #next{cursor:pointer;}

#gallery_items{position:absolute;bottom:15px;left:15px;}
#gallery_items li{border:1px solid #FFF;color:#FFF;list-style:decimal inside;width:10px;height:10px;text-align:center;padding:2px;opacity:.5;filter:alpha(opacity=50);margin:2px;float:left;cursor:pointer;}
	#gallery_items li.active{opacity:1;filter:alpha(opacity=100);cursor:default;}

#gallery {width:50%;
	height:269px;
	background:url(../images/gallery-bg-transparent.png);
	*background:url(../images/gallery_bg.gif) ;
	position:relative;
	}
#gallery_inner {
	padding:20px 10px;
	color:#FFFFFF;
	}
#gallery_inner p {
	color:#FFFFFF;
    font-size:1.6em;
	}
#gallery_header {
color:#00bcf2;
border:none;
}

#prev, #next {
	width:22px;
	height:17px;
	display:inline-block;
	top:80px;
	position:relative;
	}
#prev {left:400px}
#next {left:410px}
	
	#page_body a{color:#08B;}
	#page_body a:hover{color:#069;}
	.column.rhs{float:right;width:340px;}
	
	.column.rhs .links a{display:block;padding:15px;border:1px solid #DDD;margin-bottom:10px;text-decoration:none;line-height:1.4em;}
		.column.rhs .links a:hover{background-color:#f5f5f5;border-color:#999;}
	.column.rhs .links a .title{display:block;color:#6f6565; font-size:1.6em; text-decoration:none; padding-bottom:5px;}
	.column.rhs .links a .body{font-size:12px;color:#999;text-decoration:none;}
	
	dl#help{}
	#help dt{display:block;color:#333; font-size:1.5em; text-decoration:none; padding:5px 0;cursor:pointer;}
		#help dt:hover{color:#08B;}
	#help dd{font-size:13px;color:#666;text-decoration:none;margin-bottom:20px;line-height:1.4em;padding:5px 10px 0}
		
#page_body{clear:both;}
	#page_body ul li{margin:5px 0 10px 20px; list-style-image:url(../images/li_standard.gif); }
	
	#page_body ul li h3{margin-bottom:6px; color:#08B; font-size:1.5em; line-height:1.3em;}
	#page_body ul li h3 a{color:#08B;}
	#page_body ul li h3 a:hover{color:#069;}
	#page_body ul li .details{color:#999;}
	#page_body .hero{height:312px; margin-top:-53px; float:left;}
	#page_body .hero img{float:left;}
	#page_body .hero .info{width:300px; padding:10px 16px 10px 16px; margin-top:-140px;float:right; background:url(../images/info_transparency.png) top left;}
	#page_body .hero .info .btn.view_case{float:right;}
#footer{margin-top:10px; padding:10px 0px; clear:both; overflow:auto;}
	#footer .logo{padding:20px 20px 0px 20px; float:right;}
	#footer ul.horz_nav li{margin:10px 15px;}
	#footer ul.horz_nav li a{color:#6f6565; font-size:1.5em; text-decoration:none;}
	#footer ul.horz_nav li a:hover{color:#09B;}

#footer div{
    float:left;
    margin: 0 20px 10px 0;
}
#footer h2{
    color:#BBB;
    border:none;
	font-size:1.2em;
}
#footer_wrapper{
    background:url(../images/footerbg.gif) top center no-repeat;
}
#footer {
	width:960px;
	margin:0 auto;
	color:#FFFFFF;
	font-size:12px;
	line-height:18px;
	padding:20px 0 30px;
}
#footer ul{margin-top:0;}
#footer .contact{width:590px;}
#footer .contact ul li {color:#05BCF3;float:left; margin-right:20px;margin-top:5px;font-size:1.1em;}
#footer .contact ul li blockquote {color:#AAA;padding-left:10px;font-size:.9em;border-left:1px solid #666;margin-top:5px}

#footer input,#footer textarea{
    width:280px;
    padding:3px;
    border:1px solid #999;
	background-color:#CCC;
	color:#666;
	font-family:Arial, Helvetica, sans-serif;
	margin:5px 0;
	font-size:12px;
}

#footer .btn{text-indent:0;display:-moz-inline-box; display:inline-block;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;width:auto;}

	
#page_body .col.wide ul li{ list-style-image:url(../images/li_standard.gif); }
ul,ol{margin-top:20px;}
ul,ol li{line-height:1.6em;}
.dcLeft{font-size:12px; padding:3px;}
.dcRight{padding:5px;}
#case_studies li {list-style:none;overflow:auto;margin:5px 0 10px 10px}
#case_studies li img {float:left;margin:0 10px 0 0}

.blue{
  color:#05bcf3;
}

/***********************************************************************

1 CLEARFIX

***********************************************************************/

.clearfix:after

{

clear              : both;

content            : ".";

display            : block;

height             : 0;

line-height        : 0;

visibility         : hidden;

}



.clearfix

{

display            : inline-block;

}



html[xmlns] .clearfix

{

display            : block;

}



* html .clearfix

{

height             : 1%;

}



.clear { clear: both;}

#cs-logos {margin-top:3.0em}
#cs-logos a img {margin-right:30px; margin-top:20px;}

/***********************************************************************

2 IE6

***********************************************************************/

*html #page_body{
height:500px;
}