/*------------------------
	Hi-Tec Coatings CSS	
	Copytright © 2011
	nwonline.co.uk
-------------------------*/

body { background: #2869a2 url('../images/site/bg_body.png') 0 0 repeat-x;	font-family: Arial, Helvetica, sans-serif; margin: 0}

/*components*/
#index_wrap { width:960px; height: auto; margin: 15px auto 0 auto; padding: 0; background: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 2px 5px 1px #1c5484;
-moz-box-shadow: 0px 2px 5px 1px #1c5484;
box-shadow: 0px 2px 5px 1px #1c5484; position: relative }

/* Page Corner Hacks */
span.corner { width: 5px !important; height: 5px !important; position: absolute !important; display: block !important; padding: 0 !important; margin: 0 !important;}
span.corner.tl { background: url('../images/site/pageCorners.png') 0 0 no-repeat; top: 0; left: 0;}
span.corner.tr { background: url('../images/site/pageCorners.png') -5px 0 no-repeat; top: 0; right: 0;}
span.corner.bl { background: url('../images/site/pageCorners.png') 0 -5px no-repeat; bottom: 0; left: 0;}
span.corner.br { background: url('../images/site/pageCorners.png') -5px -5px no-repeat; bottom: 0; right: ;}
	
/* Header */
#header { width:960px; height:116px; margin: 0; position: relative; color: #343434; font-size: 14px; line-height: 20px }
#header #logo { float: left; width: 202px; height: 86px; position: absolute; top: 12px; left: 10px; background: url('../images/site/hi-tec-coatings-logo.png') 0 0 no-repeat }
#header #logo a { float: left; width: 202px; height: 86px; display: block }
#header #logo a:hover { text-decoration: none }

#header #tel { display: block; width: 300px; position: absolute; right: 125px; text-align: right; top: 83px }
#header .address { display: block; width: 300px; position: absolute; right: 125px; text-align: right; top: 38px }
#header .experience { position: absolute; right: 10px; top: 10px; width: 95px; height: 95px; background: url('../images/site/25-years.gif') 0 0 no-repeat }

/* Layout */
#contentWrap{ width:960px; padding: 0; margin: 0; background-image: url('../images/site/bg-page-wrap.gif'); background-repeat: repeat-y; overflow: hidden }

#mainContent {width:759px;float:left;padding: 0 0 10px 0 ; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; min-height: 210px }

img.floatright { margin: 0 0 15px 15px }
img.floatleft { margin: 0 15px 15px 0 }

/*Typography*/
p { color: #555;  font-size: 12px; line-height: 18px;}
a:link, a:visited {	text-decoration: none; color: #0868a2 }
a:hover, a:active { text-decoration: underline;}

#mainContent p a { color: #0868a2; text-decoration: underline;}
#mainContent p a:hover { color: #666; font-weight: bold; font-size: 12px; text-decoration: none;}
#mainContent blockquote { font-size: 12px; line-height: 19px; color: #555; font-style: italic; margin: 10px 40px 10px 40px; border-left: 2px solid #2873b2; padding: 5px 0 5px 10px;}

#mainContent ul { padding: 10px 0; list-style-type: disc ; list-style: disc ; margin: 0;}
#mainContent ol { padding: 10px 0; list-style-type: decimal ; list-style: decimal ; margin: 0;}
#mainContent ul li { font-size: 12px; line-height: 19px; color: #555; list-style-type: disc ; list-style: disc ; margin: 0 0 0 30px}
#mainContent ol li { font-size: 12px; line-height: 19px; color: #555; list-style-type: decimal ; list-style: decimal ; margin: 0 0 0 30px}

#mainContent abbr { cursor:help; background: url('../images/site/dotted.jpg') 0 bottom repeat-x;  font-size: 12px; line-height: 19px; font-weight: bold;}

.mainText { padding: 10px }
.paddingWrap { padding: 10px }

/*Contact Forms*/
#contact_form { width: 718px; padding: 15px 10px 10px 10px;margin: 10px 0; background: #F7F7F7; border-top: 1px solid #dedede; border-bottom: 1px solid #ccc; overflow: hidden;}
#contact_form .row { overflow: hidden; margin: 0 0 3px }
#contact_form form { float: left; width: 670px; margin: 0 0 0 40px; }
#contact_form label { width: 120px; float: left; clear: both; font-size: 12px; line-height: 26px; color: #666;}
#contact_form label#textarea{ width: 120px; float: left; clear: both; font-size: 12px; line-height: 26px; color: #666; height: 110px;}
#contact_form input[type=text] { float: left;  font-size: 12px; line-height: 21px; color: #666; width: 262px; margin: 2px 0; padding: 2px 4px; border: 1px solid #ccc; padding: 3px }
#contact_form input[type=text].long { width: 374px }

#contact_form label.error { width: 120px; float: left; font: normal 11px/26px sans-serif; color: #c00; clear: none; margin: 0 0 0 10px}

#contact_form #submit { width: 90px; float: left; margin: 10px 0 0 120px; padding: 5px 0; clear: both; border: 1px solid #bababa; background-color: #d6d6d6; font-weight: bold;} 
#contact_form textarea {  font-size: 12px; line-height: 18px; color: #666; padding: 4px; float: left; width: 420px; height: 110px; margin: 0; border:	1px solid #ccc}	
#contact_form select {  font-size: 12px; line-height: 23px; color: #666; height: 23px; float: left; width: 272px; margin: 0;}
#contact_form small {  font-size: 11px; line-height: 18px }
#contact_form em { font-style: italic;}

/*headers*/
h1, h2, h3, h4, h5, h6 { color: #0868a2; font-weight: bold; font-size: 22px; line-height: 30px; padding: 0; margin: 0; }
h1 { text-transform: uppercase }
h2 { font-size: 18px; line-height: 22px; padding: 5px 10px 0 0}
h3 { font-size: 14px; line-height: 22px; padding: 5px 10px 0 0}
h4 { font-size: 12px; line-height: 19px; }

/*three col*/
div#options { padding-bottom: 0;}
#mainContent ul.threeCol { width: 749px; margin: 0; overflow: hidden; border-bottom: 1px solid #d5d5d5; border-top: 1px solid #d5d5d5; padding: 20px 0 20px 10px }
#mainContent ul.threeCol li { width: 233px; margin: 0 20px 0 0; float: left; list-style: none}
#mainContent ul.threeCol li.noMargin { margin: 0 }
#mainContent ul.threeCol li h2 { padding: 0; margin: 0; text-transform: uppercase; margin: 0 0 10px }
#mainContent ul.threeCol li h2 a { font-size: 16px; line-height: 16px; font-weight: bold; color: #0868a2; letter-spacing: 0; padding: 0; background: none; height: auto; width: auto }
#mainContent ul.threeCol li h2 a:hover { text-decoration: none }

#mainContent ul.threeCol li p {  font-size: 11px; line-height: 16px; color: #666; margin: 0 0 15px }
#mainContent ul.threeCol li a { color: #0868a2;  font-size: 11px; line-height: 18px; text-decoration: none; margin: 5px 0 0; display: block; width: 232px; height: 111px; background-image: url('../images/site/threeColShadow.png') } 
#mainContent ul.threeCol li a:hover { text-decoration: underline }
#mainContent ul.threeCol li p a:hover { color: #666;  font-size: 12px; line-height: 18px; text-decoration: underline;}

/*left col nav*/
#sidebar { float: left; width: 190px; height: 100%; padding: 0 ; margin-left: 10px; border-top: 1px solid #d5d5d5 }
#sidebar ul { float: left; list-style-type: none;  font-size: 12px; line-height: 24px; margin-bottom: 15px }
#sidebar li { float: left; clear: both; display: block; width: 190px; border-bottom: 1px solid #dfdfdf;  padding: 0; }
#sidebar li a {display: block; color: #0868a2;  font-size: 12px; line-height: 24px; padding-left: 10px;}
#sidebar li a:hover{ color: #1a1a1a; text-decoration: none; background-color: #efefef }
#sidebar li a.current { color: #222; background-color: #e3e3e3 }

#sidebar .section { margin: 0 0 10px; }

/* Homepage Gallery */
#mainContent .homeGallery { background: #f7f7f7 url('../images/site/homeGallery.gif') 0 0 repeat-x; border-bottom: 1px solid #d5d5d5; display: block; overflow: hidden; width: 749px; height: 110px; margin: 0; padding: 15px 0 10px 10px }
#mainContent .homeGallery li { background-image: url('../images/site/homeGalleryImage.png'); width: 136px; height: 99px; padding: 2px 3px 4px; list-style-type: none; margin: 0 7px 0 0; float: left }
#mainContent .homeGallery li.noMargin { margin: 0 }

/* Splash */
div#slider { width: 739px; height: 250px; position: relative; margin:10px; padding: 0; background: #fff url('../images/bg_sidebar.jpg') 0 0 repeat-x; clear: both; overflow: hidden}
div#slider img { width: 739px }


/*Breadcrumb*/
.breadcrumb { height: 24px; background-color: #eeeeee; line-height: 24px; overflow: hidden; padding: 0 10px; border-bottom: 1px solid #dfdfdf; color: #666 }
.breadcrumb span { float: left; width: 100px; font-size: 11px }
#mainContent .breadcrumb ul { width: 724px; margin: 0; padding: 0; overflow: hidden }
#mainContent .breadcrumb ul li { float: left; display: inline; margin: 0; padding: 0 5px 0 0;  font-size: 11px; line-height: 24px; }

#mainContent .breadcrumb ul li a { color: #0868a2; background: url('../images/site/bcArrow.gif') right 8px no-repeat; display: block; padding-right: 14px }

#mainContent .breadcrumb .back_link { float: right; }
#mainContent .breadcrumb .back_link a { font-size: 11px; line-height: 33px; color: #0868a2; }


/*footer*/
#footer{ width: 980px; height: 40px; clear:both; padding: 5px 0; color: #fff; font-size: 11px; line-height: 19px; margin: 0 auto}
#footer a { color: #fff;  font-size: 11px; line-height: 19px;}
#footer a:hover { text-decoration: underline; color: #6487cb;}
#footer .foot_sec {	width: 45%;	float: left; padding: 10px 15px; margin: 0;}
#footer .foot_sec.left { float: left;}
#footer .foot_sec.right { float: right; font-size: 11px; line-height: 19px;}
#footer .foot_sec ul { margin: 0; padding: 0; float: left; width: 90%; list-style:none; text-align: center;  font-size: 11px; line-height: 19px; margin: 0 }
#footer .foot_sec ul li { display: inline; float: left; padding: 0 7px; border-left: 1px solid #6487cb;  font-size: 11px; line-height: 19px;}
#footer .foot_sec ul li.noBorder { padding-left: none; border: none }
#footer .foot_sec ul li a { list-style-type: none;  font-size: 11px; line-height: 19px;}
#footer .foot_sec ul li:first-child { padding: 0 7px 0 0; border-left: none;} 

/* Gallery */
.album { border-top: 1px solid #d5d5d5; padding-top: 10px }
.album h2 { padding: 0; margin: 0 0 10px }
.pic-thumb { background: #0868a2; background: url(../images/site/allAlbums.png) 0 0 no-repeat; float: right !important; margin-right: 9px !important }
.pic-thumb div { display: none !important }
#pics { font-size: 12px; color: #555 }
.album-title { font-size: 12px; font-weight: bold; display: block; margin: 5px 0 0 }