/* CSS Document */

/* ----- HTML STYLES ----- */
/* undo some of the default styling of common (X)HTML browsers */
html {font: 0.625em  Arial, Verdana sans-serif;}
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code {  }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,td,tr,th,td
{ margin:0px; padding:0px; font:  Arial, Verdana sans-serif; border:none; color: #002246;}

/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none; }

/* de-italicize address */
address { font-style:normal }

body {text-align: center; margin: 0px 0px; padding:0px; font:Arial, Helvetica, sans-serif; background-color:#bbbbbb;}

/* ----- CUSTOM STYLES : Global formatting----- */

.divider001 {clear:left;}

/* ----- CUSTOM STYLES ----- */

#container {position:relative; text-align: left; width: 955px; margin:0px auto 0px auto; background:#ffffff;}

#title {position:relative; float:left; height:83px; width: 955px; background: url(images/titleBar.jpg) repeat-x ;}
#title h1 {position:absolute; top:9px; left:235px; font-size:1.8em; font-weight:normal; color:#AF0917; padding:0px;}
.logo {display:inline; float:left; width:199px; height:71px; margin-left:13px; background: url(images/logo.gif) no-repeat;}
.phone {position:absolute; top:56px; right:18px; color:#4F5A61; font-weight:bold; font-size:1.5em; }
#title a.enquiry {position:absolute; top:0px; right:186px; font-size:1.1em; font-weight:bold; text-align:center; display:block; width:123px; height:20px; background-color:#4f5a61; color:#FFFFFF; padding-top:8px;}
#title a.emergency {position:absolute; top:0px; right:22px;font-size:1.1em; font-weight:bold; text-align:center; display:block; width:156px; height:20px; background-color:#AF0917; color:#FFFFFF; padding-top:8px;}
#title a.enquiry:hover {background-color:#2D3337;}
#title a.emergency:hover {background-color:#ED0C1D;}


/* ----- NAVBAR001 STYLES ----- */
#navBar001 {position:absolute; top:58px; left:235px;}
#navBar001 ul {}
#navBar001 li {float:left; font-size:1.2em; color:#3C4C58; padding-right:5px;}
#navBar001 li a {color:#3C4C58;}
#navBar001 li a:hover {color:#000000;}
#navBar001 li a.current {color:#000000;}

/* ----- NAVBAR002 STYLES ----- */
#navBar002 {position:absolute; top:100px; left:12px; width:217px; }
#navBar002 h1 {width:200px; font-size:1.2em; font-weight:bold; color:#AF0917; padding:0px; border-bottom:1px solid #DFE0E1; line-height:1.9em;}
#navBar002 ul {font-size:1.2em; padding-bottom:20px;}
#navBar002 li {width:200px; color:#AF0917; border-bottom:1px solid #DFE0E1; line-height:1.9em;}
#navBar002 li a {color:#3C4C58;}
#navBar002 li a:hover {color:#AF0917;}
#navBar002 li a.current {color:#AF0917;}

/* ----- TITLE PAGE STYLES ----- */
#titlePage {float:right; width:743px; background:url(images/titlePageBack.gif) no-repeat; padding-bottom:20px;}
#titlePage .mainStory {display:inline; float:left; width:706px; height:232px; margin:19px 0px 0px 19px; background:#ffffff;}
.mainStory h1 {color:#4F5A61; font-size:1.8em; padding:20px 0px 0px 485px;}
.mainStory p {color:#4F5A61; font-size:1.2em; padding:10px 13px 0px 485px; line-height:1.4em;}
.mainStory p a {color:#AF0917;}

.subStory {display:inline;float:left; width:218px; height:233px; margin:19px 0px 0px 19px;}
.subStory h2 {color: #AF0917; font-size: 1.6em; font-weight: bold; padding: 15px 0px 0px 0px;}
.subStory h2 a {color: #AF0917; font-size: 100%; font-weight: bold; padding: 15px 0px 0px 0px;}
.subStory p {float:left; color: #000000; font-size: 1.2em; padding: 10px 0px 0px 0px; line-height:1.4em;}
.subStory p a {color:#AF0917;}

.subStory2 {display:inline;float:left; width:218px; height:113px; margin:19px 0 0 26px;}
.subStory2 h2 {color: #AF0917; font-size: 1.6em; font-weight: bold; padding: 15px 0 0 0px;}
.subStory2 h2 a {color: #AF0917; font-size: 100%; font-weight: bold; padding: 15px 0 0 0px;}
.subStory2 p {float:left; color: #000000; font-size: 1.2em; padding: 10px 0px 0px 0px; line-height:1.4em;}
.subStory2 p a {color:#AF0917;}

/* ----- CONTENT STYLES ----- */
#content {padding:15px 10px 18px 25px; float:right; width:711px; min-height:500px; height:auto !important; height:500px;}
#content h1 {color:#4F5A61; font-weight:bold; width:380px; font-size:1.8em; line-height:1.4em; padding:10px 0 15px 0;}
#content h2 {color:#AF0917; font-weight:bold; width:380px; font-size:1.4em; line-height:1.4em; padding:10px 0 0px 0;}
#content h3 {color:#AF0917; font-weight:bold; width:370px; font-size:1.4em; line-height:1.4em;}
#content h4 {clear:left; color:#AF0917; font-size:1.2em; font-weight: bold; padding:10px 0 10px 0;}
#content p {color:#4F5A61; width:380px; font-size:1.2em; line-height:1.4em; padding-bottom:15px;}
#content ul {margin-left:15px; padding-bottom:20px;}
#content .grey li {color: #4F5A61;font-size:1.2em; background-image:url(images/bulletGrey.gif); background-repeat:no-repeat;  margin:0px 60px 4px 00px; width:340px; padding-left:12px;}
#content .red li {list-style-type:disc; color:#AF0917; padding:0 0 0px 0;}
#content li p {width:370px;}
#content span {color:#AF0917; font-style:italic; font-size:1.4em; line-height:1.2em;}
#content a {color:#AF0917;}
#content a:hover {text-decoration:underline;}
.contactDetails td {font-size:1.2em; color:#4F5A61; padding-right:10px;}
#content img {padding-bottom:10px;}

/* ----- CONTENT STYLES ----- */
#panel {position:relative;display:inline;float:right; width: 307px; height:488px; margin:0px 0px 0px 0px ; background: url(images/rightBack.gif);}

#panel-copy {display:inline-block;  width: 286px; height:464px; margin:8px 0px 0px 9px ; background: #AF0917; position:relative;}
#panel-copy img {display:block; padding:0px; margin:0px;}
#panel-copy h2 {width: 246px; color:#FFFFFF; font-size: 1.6em; font-weight:normal; font-style:italic; line-height:1.4em; padding:13px 20px 10px 20px;}
#panel-copy ul {padding:10px 0px 10px 7px;}
#panel-copy ul li {color:#FFFFFF; background-image:url(images/bullet.gif); background-repeat:no-repeat; width:230px; font-size:1.2em; margin:0px 0px 0px 0px; padding:0px 0px 0px 12px; line-height:1.4em;}
#panel-copy h1 {color:#FFFFFF; font-size:1.4em; width:246px; padding:20px 0px 10px 20px;}
#panel-copy p {color:#FFFFFF; font-size:1.2em; width:246px; padding:20px 0px 10px 20px;}
#panel-copy a {color:#FFFFFF;}

#panel-logo {width: 286px; margin: 15px 0px 0px 9px;}
#panel-logo img {padding:0px;}
#panel-logo h5 {}
#panel-logo p.details {width:auto; padding-top:10px;}

/* ----- CASE STUDIES PANEL STYLES ----- */
#panel-case-study { float:right; width:286px; height:464px; background-image:url(images/clear-line-panel-case-study.jpg); padding:11px 10px 11px 10px; }
#panel-case-study h1 {color:#FFFFFF; font-size:1.8em; padding:25px 25px 10px 25px; width:230px;}
#panel-case-study ul {width:236px; padding:0px 0px 0px 0px; border-top:1px solid #C13F4A; margin-left:25px;}
#panel-case-study ul li {width:236px; border-bottom:1px solid #C13F4A; color:#FFFFFF; list-style-type:none; font-size:1.2em; padding:0px; line-height:1.8em;}
#panel-case-study ul li a {display:block; width:226px; color:#FFFFFF; padding-left:10px;}
#panel-case-study ul li a.current {background-color:#890712;}
#panel-case-study ul li a:hover {background-color:#890712; text-decoration:none;}

/* ---- OUR CLIENTS STYLES ---- */
.clientThumb {display:inline;float:left; width:99px; height:99px;border-right:1px dashed #aaaaaa;border-bottom:1px dashed #aaaaaa;}
.clientThumbRight {float:left; width:99px; height:99px;border-bottom:1px dashed #aaaaaa;}
.clientThumbBottom {float:left; width:99px; height:99px;border-right:1px dashed #aaaaaa;}
.clientThumbBottomRight {float:left; width:99px; height:99px;}

/* ---- INSTALLATION PORTFOIO PAGE ---- */
.portfolioThumb {display:inline;width:70px; height:70px; float:left; margin:0px 10px 10px 0px;}

/* ---- FORM STYLING ---- */

#address {display:none;}
form {width:360px; padding-bottom:30px;}
.spacer {height:24px; margin-bottom:5px; width:360px;}
.spacer label {float:left; width:150px; font-size:1.2em;}
.spacer input {float:left; border:1px solid #777777; height:22px; width:200px;}
.spacer select {float:left; border:1px solid #777777; height:22px; width:202px;}
.spacer .short-label {width:90px; margin-right:10px;}
.large-spacer {height:60px; margin-bottom:5px; width:360px;}
.large-spacer label {float:left; width:150px; font-size:1.2em;}
.large-spacer textarea {float:left; border:1px solid #777777; height:48px; width:196px;}
.spacer-short {margin-bottom:5px; width:360px;}
.spacer-short label {float:left; width:322px; font-size:1.2em;}
.spacer-short input {float:left; border:1px solid #777777; height:22px; width:30px; border:none;}
.spacer a {float:left; font-size:1.2em; padding-top:3px; text-decoration:underline;}
.submit-button {float:right; width:80px; height:24px; background:#AF0917; color:#ffffff; border:1px solid #aaaaaa; margin:5px 8px 0 0; }


/* ----
#navBar {display:inline; width:199px; height:517px; float:left;padding:0 0 0 13px; font-size:1.2em;}
#navBar h1 {font-size:1.0em; color: #AF0917; padding:0px 0px 0px 13px; border-bottom: 1px solid #dddddd;}
#navBar ul {padding:2px 0px 15px 0px;}
#navBar ul li{	color: #AF0917;	line-height:23px;	padding-left:13px; border-bottom: 1px solid #ebebeb;}
#navBar ul li a {color: #000000;}
#navBar h1 a {color: #AF0917;}
#navBar ul li a:hover {color: #AF0917;}
#navBar .top {}
#navBar .current {color:#AF0917;}
#navBar h1.enquiryButton {padding:5px; border:none;}
#navBar h1.enquiryButton a  {color:#ffffff; padding:5px; background-color:#AF0917; border:1px solid red;}
#navBar h1.enquiryButton a:active  {color:#ffffff;}
#navBar h1.enquiryButton a:hover {color:#ffffff;}
#navBar h1.enquiryButton a:visited {color:#ffffff;}


.halfCol {display:inline;float:left; width:350px;  margin: 0px 0px 0px 19px; }
.halfCol p {color: #4F5A61;font-size:1.2em; padding:20px 10px 0px 0px; line-height:1.3em;}
.halfCol h1 {color: #4F5A61;font-size:1.6em; font-weight:bold; padding:25px 0px 0px 0px ;}


#leftCol {display:inline; float:left; width:400px; margin: 0px 0px 0px 19px;  }

#leftCol p {
	color: #4F5A61;
	font-size:1.2em;
	line-height:1.3em;
	padding: 13px	10px 0px 0px;
}
#leftCol h1 {color: #4F5A61;font-size:1.6em; font-weight:bold; padding:25px 0px 0px 0px ;}
#leftCol .quote {color:#AF0917; font-size:1.6em; font-style:italic; padding-right:20px;}
#leftCol h2 {color:#AF0917; font-size:1.2em; font-weight: bold; margin:18px 0 15px 164px;}
#leftCol .listFloat {float:left;}
#leftCol ul {padding-top:10px;}
#leftCol ul li {color: #4F5A61;font-size:1.2em; list-style:url(images/bulletGrey.gif); margin:0px 60px 3px 20px;}
#leftCol p a {color:#AF0917;}
#leftCol p.highlight {color:#AF0917;}

#leftCol.sitemap {}
#leftCol.sitemap h1 {padding: 25px 0px 20px 0px;}
#leftCol.sitemap ul {}
#leftCol.sitemap li {}
#leftCol.sitemap a {color:#000000;}

#rightColHolder { position:relative;display:inline;float:right; width: 307px; height:488px; margin:17px 8px 0px 0px ; background: url(images/rightBack.gif); }
#rightColHolder.Holder001 {background:none; height:auto; background-color:#ffffff;}

#rightCol {display:inline-block; width: 286px; height:464px; margin:8px 0px 0px 9px ; background: #AF0917; position:relative;}
#rightCol.Col001 {display: block; height:auto; padding: 0px 0px 20px 0px;}

#rightCol h2 {color:#FFFFFF; font-size: 1.6em; font-weight:normal; font-style:italic; line-height:1.4em; padding:13px 20px 10px 20px;}
#rightCol h1 {color:#FFFFFF; font-size: 1.4em; line-height:1.4em; padding:15px 20px 5px 20px;}

#rightCol a {color:#FFFFFF; text-decoration:none;}

#portfolio {display:inline;margin: 0px 0px 0px 19px;}
#portfolio h1 {color: #4F5A61;font-size:1.6em; font-weight:bold; padding:25px 0px 0px 0px ;}
#portfolio p {color: #4F5A61;font-size:1.2em; padding:20px 10px 20px 0px; line-height:1.3em;}
.portfolioThumb {display:inline;width:70px; height:70px; float:left; margin:0px 10px 10px 0px;}


.enquiryForm {color: #4F5A61; font-size:1.2em; padding: 15px 20px 35px 20px; margin:30px 15px 0 0; background:#eeeeee; border:1px solid #aaaaaa;}

label  {float:left; width:120px;margin:0px 0px 3px 0px; padding-top:3px; }
input {float:right;width:205px; border:1px solid #aaaaaa; margin:0px 0px 3px 0px; }
select {float:right; width:207px; border:1px solid #aaaaaa; margin:0px 0px 3px 0px; }
textarea {float:right; width:203px; border:1px solid #aaaaaa; margin:0px 0px 3px 0px; }
.submit {float:right; width:80px; background:#AF0917; color:#ffffff; border:1px solid #aaaaaa }

.smallRed {color:#AF0917; font-size:0.8em; padding-left:5px;}


.listFloat {float:left; width:220px;}

.inputError { float:right; width:5px; }
.inputValidation { color: Red;}

.contactDetails { }
.contactDetails td {font-size:1.2em; color:#4F5A61; padding-right:10px;}

#contentFlash {margin:24px 0px 0px 19px;}

.footer {text-align:left; padding: 20px; overflow:hidden;}
.footer h1 {color:#000000; padding:0px; margin:0px;}
.footer p {color:#000000; padding:3px 0px 3px 0px;}

#less {text-align:right; color:#000000;}
.aboutPic {margin-top: 67px;}

/* ---- Footer Styles ---- */

.terms {float:left; position:relative; text-align:left; height:12px; width:500px; padding:4px 0 15px 0; background: #bbbbbb;}
.terms a {color:#000000;}
.terms a:hover {color:#FFFFFF;}

.designed {float:right; position:relative; text-align:right; height:12px; width:455px; padding:4px 0 15px 0; background: #bbbbbb;}
.designed a {color:#000000;}
.designed a:hover {color:#FFFFFF;}

/* ---- Enquiry Form Address Styles ---- */
#enquiry-form #address {display:none;}

