/*
====== Concept Document Recovery CSS Version 0.1 � Bluestorm New Media 2005 ===========
NON-OPTIMISED Production stylesheet with annotations.
All Hacks are STILL contained within THIS stylesheet.
WARNING - Underscore HACK won't validate - can be replaced
if document requires XML parsing.
*/


/*
===== CONTENTS ======================

	Updated: 12 September 2005;

	1: UNIVERSAL SETTINGS
	2: LAYOUT CONSTRUCTION
	3: SECONDARY CONSTRUCTION
	4: TYPOGRAPHY AND HEADLINES
	 4a: Page Specific
	 4b: Lists
	5: NAVIGATION
	  5a: Individual Navigation Hover States
	6: FORMS

=====================================
*/



/* ================================================================== */
/* =1: ==================== UNIVERSAL SETTINGS ====================== */
/* ================================================================== */


* { /* Clean Slate */
font-size: 100%;
margin: 0;
padding: 0;
}

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 62.5%; /* Setting the universal font size to 100% makes 1em = 10px (roughly) */
text-align: center; /* Centering for IE5 */
background: #E41E25 url(stat/bg_body.gif);
margin: 1em;
}

/* Accessibility */
.hidden {
position: absolute;
left: -9999px;
width: 0px;
overflow: hidden;
}


a {
text-decoration: none;
}
/* @group Links */
a:link {
	color: #871838;
}
a:visited {
	color: #354B6B;
}
a:hover {
	color: #354B6B;
	text-decoration: underline;
}
a:active {
	color: #354B6B;
	text-decoration: underline;
}
/* @end */


/* ========================================================= */
/* =2: ============ LAYOUT CONSTRUCTION ==================== */
/* ========================================================= */

#wrap {
width: 74.4em;
text-align: left; /* Overide IE5 Centering for all other browsers */
margin: 0 auto;
}

#header, #banner, #contentBlock, #footer {
margin-bottom: 0.7em;
border: 2px solid #0E133B;
background-color: #fff;
}
.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
 /* End hide */

#header {
height: 12em;
}

body#homePage #banner  {
height: 28em;
}

body#restoration #banner, body#electrical #banner, body#company #banner, body#news #banner, body#contact #banner{
height: 15em;
background-image: url(images/bg_restoration.jpg);
}

#contentBlock {
_float: left; /* IE HACK */
padding-bottom: 1em;}


/* ------------------------------------- */
/* This hack cures the non-wrapping container in Firefox */
#contentBlock:after, #content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* ------------------------------------ */

#content {
border-left: 1px solid #c5d1e6;
float:right;
/* margin: 2em 1.8em 0 26.5em; */
margin: 2em 0 0 0;
width: 445px;
padding: 0 20px 0 1em;
}
* html #content {
width: 435px;
}

#footer {
padding: 0.5em 2em;
clear: both;
height: 1.5em;
}



/* ===================================================================== */
/* =3: =================== SECONDARY CONSTRUCTION ==================== */
/* ===================================================================== */

#navAndNews {
margin: 2em 0 1em 1.5em;
width: 24em;
float: left;
_display: inline; /* IE Double float fix */
background-image: url(stat/bg_latestNews.gif);
}

p.header_strap {
display: block;
font-size: 1em;
width: 26.5em;
height: 9em;
float: left; /* FF Fix */
background: url(images/strap_lines/header_strap.jpg) no-repeat;
margin: 1.8em 0 0 1.5em;
_display: inline; /* IE Double float fix */
}

#bannerTop {
height: 12em;
background: url(images/big_homepage.jpg) no-repeat;
}

#bannerLower {
height: 16em;
background: url(images/big_homepage.jpg) 0 -12em no-repeat;
text-align: right;
padding-right: 2em;
}

h1.homePage_strap {
display: block;
font-size: 1em;
width: 40.5em;
height: 3.8em;
float: right;
margin: 4em 1em 0 0;
background: url(images/strap_lines/homePage_strap.gif) no-repeat;
}

p.homePage_strap2 {
display: block;
font-size: 1em;
width: 25.2em;
height: 2.8em;
float: right; /* FF */
background: url(images/strap_lines/homePage_strap2.gif) no-repeat;
margin-top: 1.5em;
}

/* Images are transient so I set this standard. Images required to behave differently
should use inline styles */
#content img {
border: 2px solid #E41E25;
margin: 0 1em 1em 0;
float: left;
}
/* ------------------------------------ */




/* ======================================================= */
/* =4: ============ TYPOGRAPHY AND HEADLINES ============= */
/* ======================================================= */


p {
line-height: 1.4em;
margin: 0 0 1em 0;
}

h1.logo {
font-size: 1em;
display: block;
float: right;
margin: 1.5em 1.5em 0 0;
_display: inline; /* IE Double float fix */
}

h1.logo a {
display: block;
height: 9.5em;
width: 13em;
background: url(stat/logo.gif) no-repeat;
}

#content h2 {
font-size: 1em;
display: block;
height: 1.5em;
margin-bottom: 1.5em;
}

#footer p {
float: left;
margin: 0;
}
#footer p.credit {
float: right;
}

/* =4a: =========== PAGE SPECIFIC ============= */

body#homePage #content h2 {
background: url(stat/headlines/recovering-the-irreplacable.gif) no-repeat;
}
body#restoration #content h2 {
background: url(stat/headlines/document-restoration.gif) no-repeat;
}
body#electrical #content h2 {
background: url(stat/headlines/electrical-restoration.gif) no-repeat;
}
body#company #content h2 {
background: url(stat/headlines/company-overview.gif) no-repeat;
}
body#news #content h2 {
background: url(stat/headlines/news.gif) no-repeat;
}
body#contact #content h2 {
background: url(stat/headlines/contact-us.gif) no-repeat;
}

body#restoration.caseStudyPage #content h2,
body#electrical.caseStudyPage #content h2 {
background: url(stat/headlines/case-studies.gif) no-repeat;
}

#content h3 {
font-size: 1.2em;
color: #E41E25;
margin-bottom: 0.5em;
}

body#company #banner h1 {
font-size: 1em;
height: 1.6em;
width: 30em;
background: url(stat/headlines/banner-company-overview.gif) no-repeat;
margin: 2em 1.5em;
}
body#restoration #banner h1 {
font-size: 1em;
height: 1.6em;
width: 30em;
background: url(stat/headlines/banner-document-restoration.gif) no-repeat;
margin: 2em 1.5em;
}
body#electrical #banner h1 {
font-size: 1em;
height: 1.6em;
width: 30em;
background: url(stat/headlines/banner-electrical-restoration.gif) no-repeat;
margin: 2em 1.5em;
}
body#news #banner h1 {
font-size: 1em;
height: 1.6em;
width: 30em;
background: url(stat/headlines/banner-news.gif) no-repeat;
margin: 2em 1.5em;
}
body#contact #banner h1 {
font-size: 1em;
height: 1.6em;
width: 30em;
background: url(stat/headlines/banner-contact.gif) no-repeat;
margin: 2em 1.5em;
}


h4 {
font-size: 1.3em;
color: #E41E25;
margin-left: 1.2em;
}


/* =4b: =========== LISTS ============= */

ul#casestudies {
list-style: none;
clear: both;
}

ul#casestudies li a {
font-weight: bold;
font-size: 1.1em;
line-height: 2em;
background: url(stat/case_study_arrow.gif) right 4px no-repeat;
padding-right: 1em;
margin-left: 1.3em;
color: #0e133b;
}

ul#casestudies li a:hover {
color: #e41e25;
}

dl#latestNews {
padding: 1em 0 0.5em 0;
clear: both;
}

dl#latestNews dt {
font: bold 1.1em/1.8em Verdana, Arial, Helvetica, sans-serif;
background-color: #fff;
text-transform: uppercase;
color: #CC0000;
padding-left: 0.5em;
margin-bottom: 1em;
}

dl#latestNews dd {
font-weight: bold;
font-size: 1.1em;
margin: 0 0 1em 0.7em;
padding-left: 2.5em;
background: url(stat/news_arrows.gif) 0 2px no-repeat;
height: 23px;
}

dl#latestNews dd a {
color: #0E133B;
}

#content ul, ol {
list-style: none;
margin: 0 0 1.5em 2em;
}
#content ul.noLeftMargin {
margin: -0.5em 0 1.5em 0;
_margin: -0.5em 0 1.5em 0.5em;
}

#content ul li {
font: bold 1em/1.5em Verdana, Arial, Helvetica, sans-serif;
padding-left: 1.3em;
margin-bottom: 0.5em;
background: url(stat/bullits.gif) no-repeat 2px 4px;
}

#content ol li {
margin-bottom: 0.5em;
}
body.caseStudyPage #content ul {
margin: 0;
} 
body.caseStudyPage #content ul li {
margin: 0;
border-bottom: 1px dotted #C5D1E6;
background: 0;
padding: 1em 0;
}


/* ======================================================= */
/* =5: =================== NAVIGATION ==================== */
/* ======================================================= */

ul#navigation {
list-style: none;
float: left;
margin-bottom: 0.5em;
background: #fff;
}

ul#navigation li {
border: 1px solid #0E133B;
_display: inline-block;
margin-bottom: 0.7em;
}

ul#navigation li a {
display: block;
height: 2.35em;
width: 23.8em;
background: url(stat/navigation.gif) no-repeat;
}
/* Hack */
* html ul#navigation li {
height: 1.3em;
h\eight: 2.35em;
display: inline;
}

/*
=5a: ======== Individual Navigation Hover States =====
*/
ul#navigation li.one a {
background-position: 0 -145px;
}
ul#navigation li.one a:hover {
background-position: 0 0;
}

/* Button Two Action */
ul#navigation li.two a {
background-position: 0 -168px;
}
ul#navigation li.two a:hover {
background-position: 0 -24px;
}

/* Button Three Action */
ul#navigation li.three a {
background-position: 0 -192px;
}
ul#navigation li.three a:hover {
background-position: 0 -48px;
}

/* Button Four Action */
ul#navigation li.four a {
background-position: 0 -216px;
}
ul#navigation li.four a:hover {
background-position: 0 -72px;
}

/* Button Five Action */
ul#navigation li.five a {
background-position: 0 -240px;
}
ul#navigation li.five a:hover {
background-position: 0 -96px;
}

/* Button Six Action */
ul#navigation li.six a {
background-position: 0 -264px;
}
ul#navigation li.six a:hover {
background-position: 0 -120px;
}

/*
Make buttons remain highlighted on the appropriate page
*/

body#homePage ul#navigation li.one a {
background-position: 0 0;
}
body#company ul#navigation li.two a {
background-position: 0 -24px;
}
body#restoration ul#navigation li.three a {
background-position: 0 -48px;
}
body#electrical ul#navigation li.four a {
background-position: 0 -72px;
}
body#news ul#navigation li.five a {
background-position: 0 -96px;
}
body#contact ul#navigation li.six a {
background-position: 0 -120px;
}

/* ========================================================= */
/* =6: ===================== FORMS ========================= */
/* ========================================================= */


fieldset {
border: none;
}

form#contactForm {
width: 34.4em;
_width: 34.7em;
margin-left: 2em;
}

form#contactForm legend {
display: none;
}

form#contactForm label {
font-size: 1.2em;
line-height: 1.5em;
color: #DC2227;
width: 11em;
display: block;
float: left;
}

form#contactForm input, textarea {
width: 15.3em;
border: 1px solid #0E133B;
padding: 2px;
}

form#contactForm textarea {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 12.8em;
_width: 15.3em;
height: 3em;
}

form#contactForm .submitInfo a {
float: right;
background: #fff url(stat/send_button.gif) no-repeat;
display: block;
width: 11.2em;
height: 1.6em;
}

form#contactForm .submitInfo a:hover {
background: #fff url(stat/send_button_hover.gif) no-repeat;
}

input.mandatory {
border-left: 2px solid #DC2227!important;
}