/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/ 
/* -----------------------------------*/


body, dd, dl, dt, fieldset, legend, blockquote, form, h1, h2, h3, h4, h5, h6, li, ol, ul {
	margin: 0;
	border: 0 none #FFFFFF;
	padding: 0;
	}

h1, h2, h3, h4, h5, h6 {	color:#303188;	font-weight:normal;	font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;}

h1 {	font-size:1.6em;	line-height:1.2em}
h2 {	font-size:1.3em;	padding-top:15px}
h3 {	font-size:1.2em}

ul {	list-style:none}
p {	margin:10px 0}
html, body {height:100%}
	
body {
	font: 0.8em Verdana, Arial, Helvetica, sans-serif;
	line-height:1.6em;
	color:#272727;
	}

a {			color:#303188;	text-decoration:none}
a:visited {	color: #5F5F5F}

img {border: 0}

input, select, table, textarea, legend {
	font-family: Arial, Helvetica, sans-serif;
	}
	
textarea {	font-size:1em}

.pageClear {
	clear: both;
	height: 1px;
	overflow: hidden;
	margin-bottom: 20px;
	font-size: 1px;
	line-height: 1px;
	}
	
.hidden {
	position: absolute;
	left: -9999px;
	top: -9999px;
	height: 1px;
	width: 1px;
	overflow: hidden;
	}
	
/* -----------------------------------*/
/* ------>>> GLOBAL STYLING <<<-------*/ 
/* -----------------------------------*/

#pageContainer {
	position:relative;
	margin:10px;
	min-width:770px;
	}

html #pageContainer {	w\idth: expression(document.documentElement.clientWidth < 770 ? "770px" : "auto")}
	
#logoHeader {
	position:relative;
	background: #FFF url(../images/roofing-intro.jpg) top right no-repeat;
	padding-left:25px;
	border:1px solid #303188;
	border-bottom:none;
	}
#logoHeader h1 {	padding:20px 255px 15px 0}
#logoHeader img {	padding-top:20px}

#primaryContainer {
	position:relative;
	background: #FFF url(../images/nav-bg.gif) 0 0 repeat-y;
	border:1px solid #303188;
	margin:0;	
	padding:0}

#navigation {
	float:left;
	position:relative;
	top:0;
	left:32px;
	width:190px;
	height:100%;
	margin-bottom:0;
	padding-bottom:0;
	}
#navigation ul {	margin-top:10px;	margin-bottom:20px}
#navigation li {	
	position:relative;
	color:#303188;	
	background-color:#EDEDED;
	padding:5px 10px;	
	border-top:1px solid #FFFFFF; 
	border-bottom:1px solid #C0C9DD;
	margin:0;
	}
	
#navigation li.current {	color:#FFF;		background-color:#999}
	
#navigation li a {	display:block;	width:170px}
#navigation li a:hover {text-decoration:underline}

#supportContainer {
	background: #FFF url(../images/rhs-bg.gif) 0 0 repeat-y;
	float:right;
	width:160px;
	margin-top:20px;
	padding-bottom:20px;
	position:relative;
	font-size:0.85em;
	line-height:1.7em;
	margin-bottom:0;
	border-bottom:1px solid #303188
	}
	
#mainContent {	margin:0 190px 0 260px;	padding-top:20px}
#mainContentFull {	margin:0 0 0 260px;	padding-top:20px}
#mainContent a, #mainContentFull a {border-bottom:1px dotted #303188}
#mainContent a:hover, #mainContentFull a:hover {border-bottom:none}
#mainContent h1, #mainContentFull h1, #mainContent h2 {	border-bottom:2px dotted #303188;	padding-bottom:10px}
#mainContent h2 a {border-bottom:none}
#mainContentFull h2 {	padding-bottom:10px}
#mainContent #latestNews h2 {border-bottom:none;	margin-top:20px}
#mainContent h2 {display:block}
#supportContainer #clients {	text-align:center;	margin-top:10px}
#supportContainer #clients img {	padding-bottom:20px}
#supportContainer h3, #keyContacts h3 {	background-color:#303188;	color:#FFF;	padding:5px 10px}
#supportContainer h3 a {	color:#FFF}
#mainContent ul {	margin:20px 10px}
#mainContentFull p {padding-right:15px}

.feature {padding-top:10px;	position:relative}


ul.tick li, ul.bullet li {	padding-left:20px}
ul.tick li {background: #FFF url(../images/blue-tick.gif) 0 0.5em no-repeat}
ul.bullet li {background: #FFF url(../images/bullet.gif) 0.3em 0.7em no-repeat}
h2 a {	background: #FFF url(../images/big-arrow.gif) 0.3em 0.3em no-repeat;	padding-left:25px}
#supportContainer h3 a, a.pageTop {	background: transparent url(../images/big-arrow.gif) 0 0.3em no-repeat;	padding-left:15px}
#mainContent a.pageTop {border-bottom:none}
li {	padding-bottom:8px}
h2 a:hover {color:#5F5F5F}
#supportContainer strong {	padding-top:15px}
#supportContainer a:hover {text-decoration:underline}
#supportContainer div.info {	padding-left:10px}
#mainContent img.support {	float:right;	padding-top:20px;	padding-left:15px;	position:relative}

div.projects {	width:90%;	margin:3px auto;	text-align:center;	margin-top:20px;	clear:none}
div.projects img {padding-right:5px}

#footer {
	font-size:0.85em;
	margin:10px;
	margin-bottom:30px;
	padding-bottom:20px;
	border:1px solid #303188;
	clear:both;
	}
#footer a:hover {text-decoration:underline}
#footer #navLinks {	height:3em;	padding:0 25px;	border-bottom:1px solid #303188;	line-height:3em}
#footer li {	float:left;	display:inline;	padding-right:10px}

#associations {width:80%;	text-align:center;	margin:20px auto;	clear:left}
#associations td {padding:10px}

#supportInfo {	padding-left:30px;	border-top:1px solid #303188;	margin:20px 0}
#supportInfo ul {	margin:20px 0;	height:30px}
#supportInfo li a {background: transparent url(../images/big-arrow.gif) 0 0.2em no-repeat;	padding-left:15px;	margin-right:20px;	height:2em}

p.credits {	clear:left;	border-top:1px dotted #303188;	border-bottom:1px dotted #303188;	padding:3px;	padding-left:30px}

	
#keyContacts {
	width:90%;
	border:1px solid #303188;
	margin:20px 0;
	}
	
#keyContacts .contactDetails {	margin:10px;	min-height:130px;	clear:right;	padding-bottom:10px;	padding-top:10px;	border-top:1px dotted #303188}
#keyContacts .contactDetails img {float:right;	width:135px;	padding-left:10px;	padding-bottom:10px}
#keyContacts .contactDetails h2 {color:#000}
.contactDetails strong {color:#303188}
.contactDetails ul {font-size:0.85em;	margin-top:10px}
.contactDetails li {padding-bottom:3px}

.projectSummary {	margin:20px 0;	font-size:0.85em;	padding:20px 15px;	background: transparent url(../images/project-bg.gif) top right no-repeat}
.projectSummary img.project {	float:right;	width:360px;	position:relative;	padding-right:10px}
.projectSummary strong {color:#303188}
.projectSummary table {width:100%}
.projectSummary nameHd {width:300px}
.projectSummary locationHd {width:30%}
.projectSummary completionHd {width:30%}

.shift {float:right;	margin:15px;	width:300px}
img.shiftSmall {float:right;	margin:15px;	position:relative}
.examples {	width:90%;	margin:5px auto;	padding:15px 0}
.examples img {padding-right:5px}