/*====================================================================
KLS DESIGNS - GLOBAL STYLE SHEET - Copyright 2008 KLS Designs Ltd
======================================================================*/

/* Global Styles */
* {margin: 0; padding: 0; border: 0; font-family: Arial, Helvetica, sans-serif;}
.clear {clear: both;}

/* Default Header Styles */
h1 {text-indent: -9999px; background: url(../images/logo.gif) 0 20px no-repeat; display: block; width: 255px; height: 121px;}
h2 {text-indent: -9999px; background: #fafafa; display: block; font-weight: normal; font-size: 24px; height: 50px; border-top: 1px solid #cbcbcb; border-bottom: 1px solid #cbcbcb;}

h3, h4, h5 {font-weight: normal; color: #3C3C4C;}
h3 {font-size: 18px; line-height: 14px; margin: 18px 0 8px 0; }
h4 {font-size: 18px; line-height: 14px; margin: 13px 0 18px 0;}
h5 {font-size: 14px; line-height: 14px; margin: 14px 0 12px 0;}

h4.spacer {margin-top: 40px;}

/* Default / Alternative P Styles */
p {padding: 0 60px 12px 0; color: #333; font-size: 12px; line-height: 16px;}

/*====================================================================
PAGE LAYOUT
======================================================================*/

body {background: url(../images/body_bg.gif) repeat-x top left; text-align: left;}
#header {width: 900px; height: 121px; margin: 0 auto; position: relative; background: url(../images/header_tel.gif) no-repeat 570px 40px;}
#container {width: 900px; margin: 0 auto; text-align: left; position: relative; background: url(../images/nav_shadow.gif) no-repeat top right; padding: 20px 0;}

#inner {padding: 30px 20px;}
#inner img.main {float: left; margin-right: 40px; margin-bottom: 20px; border: 2px solid #cbcbcb;}
#inner.ind {margin-bottom: 20px;}

#intro {border-bottom: 1px solid #cbcbcb; padding-bottom: 20px;}

#contentLeft {width: 300px; float: left; margin-bottom: 15px;}
#contentLeft img {margin: 0 40px 20px 0; border: 2px solid #cbcbcb;}
#contentRight {width: 550px; float: left;}

.contentList {float: left; border-top: 1px solid #cbcbcb; margin-top: 20px; padding-top: 20px;}
.contentList img {margin: 0 40px 0 0; float: left; }

#keyContainer {width: 870px; padding: 10px 15px; margin: 0 auto 10px auto; border-top: 1px solid #cbcbcb; }
#keyContainer p {text-align: center; padding-bottom: 0; padding-right: 0; font-size: 11px; }
#keyContainer a {font-weight: normal; color: #999999;}
#keyContainer a:hover {color: #3c3c4c;}

#footer {width: 870px; padding: 10px 15px; margin: 0 auto 20px auto; background: #fafafa; border-top: 1px solid #cbcbcb; border-bottom: 1px solid #cbcbcb;}
#footer p {text-align: center; padding-bottom: 0; padding-right: 0; font-size: 11px; }

img.servButton {margin: 0 0 5px 0px; }
img.emailButton {margin: 0 0 5px 0; }
img.last {margin-bottom: 15px;}
img.quote {margin: 12px 0;}

/* Services Panel */
#servPanel {width: 885px; height: 230px; padding: 15px 0 15px 15px; background: url(../images/servpanel_bg.gif) no-repeat; }

.servItem {width: 280px; height: 230px; float: left; position: relative; margin-right: 15px; }
#servPanel .itemDesign {background: url(../images/servpanel_1.gif) no-repeat;}
#servPanel .itemBuild {background: url(../images/servpanel_2.gif) no-repeat;}
#servPanel .itemManage {background: url(../images/servpanel_3.gif) no-repeat;}
#servPanel .itemDesign:hover, #servPanel .itemBuild:hover, #servPanel .itemManage:hover {background: url(../images/servpanel_block_hover.gif) no-repeat;}
.servItem h2 {color: #fff; background: none; border-top: none; padding-left: 15px; border-bottom: 1px solid #95959d; text-indent: 0; line-height: 42px; height: 42px;}
.servItem p {color: #fff; padding: 75px 20px 14px 15px;}
.servItem img {margin-left: 15px;}
.servItem img.thumb {position: absolute; top: 10px; right: 15px; border: 1px solid #95959d; margin: 0;}
.servItem img.view {position: absolute; top: 60px; left: 14px; width: 120px; height: 18px; margin: 0;}
.servItem:hover img.thumb {border: 1px solid #3c3c4c;}

.servItem a {color: #ffcc33; font-weight: normal;}
.servItem a:hover {text-decoration: underline;}

/* Portfolio */
#contentPort {width: 860px;}

/* Fleet Container */
.caseItem {width: 840px; background: #fafafa; border-top: 1px solid #cbcbcb; padding: 10px 10px 0 10px; position: relative; border-bottom: 1px solid #cbcbcb;}

.caseItem img {float: left; margin-right: 20px; margin-bottom: 15px; border: 2px solid #cbcbcb;}
.caseItem img:hover {border-color: #003366;}
.caseItem img.gallery {position: absolute; top: 30px; left: 716px; border: 0;}
.caseItem h4 {font-size: 18px; padding: 0 30px 6px 0; clear: none; margin-bottom: 0;}
.caseItem h5 {font-size: 14px; padding: 0 30px 6px 0; clear: none; margin: 0 0 10px 0;}
.caseItem ul {margin-left: 20px; margin-top: 10px; float: left; list-style-type: disc;}

.caseGal {width: 840px; background: #3c3c4c url(../images/gall_bg.jpg) no-repeat bottom; border-bottom: 2px solid #cbcbcb; margin-bottom: 15px;  padding: 12px 10px 0 10px;}
.caseGal img {float: left; margin-right: 20px; border: 2px solid #fff;}
.caseGal img:hover {border-color: #003366;}

.casePort {width: 840px; background: #fafafa; border-top: 1px solid #cbcbcb; padding: 10px 10px 0 10px; margin-bottom: 20px; position: relative; border-bottom: 1px solid #cbcbcb;}

.casePort img {float: left; margin-right: 23px; margin-bottom: 15px; border: 2px solid #cbcbcb;}
.casePort img:hover {border-color: #003366;}


/* Contact */
.conAdd {width: 250px; float: left; margin-bottom: 12px;}

/*====================================================================
TEXT STYLES & VARIATIONS
======================================================================*/

/* Image Replacement h2's */
h2.welcome {background: #fafafa url(../images/replacements/h2_welcome.gif) center 15px no-repeat;}
h2.about {background: #fafafa url(../images/replacements/h2_ourapproach.gif) center 15px no-repeat;}

/* Alternative Head / Text Styles */
.intro {font-size: 18px; line-height: 22px; padding: 2px 60px 16px 0;}
.feint {color: #666;}
.discreet {font-size: 9px; color: #666; line-height: 15px;}
.error {color: #CC0000; margin-bottom: 15px;}

/* Link Styles */
a {color: #3c3c4c; font-weight: normal; text-decoration: none; font-weight: bold;}
a:hover {color: #ffcc33; text-decoration: none;}

/* List Styles */
ul {font-size: 12px; color: #333; margin: 0 60px 14px 40px;}
ul li {line-height: 16px;}

ul#ind {list-style-type: none;}
ul#ind li {float: left; border-bottom: #f3f3f3; padding-right: 10px; border-right: 1px solid #ccc; margin-right: 10px;}
ul#ind li.last {border: none;}

ul#port {list-style-type: none; margin-left: 0;}
ul#port li {float: left; border-bottom: #f3f3f3; padding-right: 10px; border-right: 1px solid #ccc; margin-right: 10px;}
ul#port li.last {border: none;}

/*====================================================================
MAIN SITE NAVIGATION
======================================================================*/

ul#mainNav	{height: 28px; width: 528px; position: absolute; right: 10px; bottom: 0; background: url(../images/nav.gif) no-repeat top; margin: 0; }
ul#mainNav li {margin: 0;  padding: 0;	list-style: none; position: absolute; top: 0;}
ul#mainNav li, ul#mainNav a	{height: 28px; display: block;}
ul#mainNav li a	{text-indent: -9999px; text-decoration: none;}

#opt1 {left: 6px; width: 66px;}
#opt2 {left: 72px; width: 86px;}
#opt3 {left: 158px; width: 84px;}
#opt4 {left: 242px; width: 82px;}
#opt5 {left: 324px; width: 116px;}
#opt6 {left: 440px; width: 81px;}

#opt1 a:hover {background: transparent url(../images/nav.gif) -6px -28px no-repeat;}
#opt2 a:hover {background: transparent url(../images/nav.gif) -72px -28px no-repeat;}
#opt3 a:hover {background: transparent url(../images/nav.gif) -158px -28px no-repeat;}
#opt4 a:hover {background: transparent url(../images/nav.gif) -242px -28px no-repeat;}
#opt5 a:hover {background: transparent url(../images/nav.gif) -324px -28px no-repeat;}
#opt6 a:hover {background: transparent url(../images/nav.gif) -440px -28px no-repeat;}

#opt1 a.current {background: transparent url(../images/nav.gif) -6px -56px no-repeat;}
#opt2 a.current {background: transparent url(../images/nav.gif) -72px -56px no-repeat;}
#opt3 a.current {background: transparent url(../images/nav.gif) -158px -56px no-repeat;}
#opt4 a.current {background: transparent url(../images/nav.gif) -242px -56px no-repeat;}
#opt5 a.current {background: transparent url(../images/nav.gif) -324px -56px no-repeat;}
#opt6 a.current {background: transparent url(../images/nav.gif) -440px -56px no-repeat;}


/*============================================================
 Form
============================================================*/

form {padding: 0; margin: 0; border: 0; font-size: 12px; }
form fieldset {padding: 12px 20px 7px 20px; margin: 0 0 10px 0; border: 1px solid #cbcbcb; border-right: 0; border-left: 0; background: #fafafa;}

form label, textarea, select, input {display: block; float: left; padding-top: 3px; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #666; }
form label {margin: 0 5px 5px 0; text-align: left; width: 178px; padding-right: 5px;}
form input {height: 16px; width: 200px; border: 1px solid #ccc; padding: 2px; margin-bottom: 5px;}
form select {height: 20px; border: 1px solid #ccc; padding: 2px; margin-bottom: 5px; margin-right: 10px;}
form select.wide {width: 50px;}
form select.trade {width: 80px;}
form textarea {width: 250px; height: 150px; border: 1px solid #ccc; padding: 4px; margin-bottom: 7px;}
form textarea.alt {height: 75px;}
form textarea.big {width: 500px;}

form input.tick {width: 12px; height: 12px; margin: 3px 10px 5px 0;}
form label.tick {width: 200px; height: 12px; margin: 0 10px 5px 0;}
form label.last {margin-bottom: 15px;}
form label.long {width: 350px;}
form label.wide {width: 250px; margin-bottom: 18px;}
form input.other {margin-left: 188px; margin-bottom: 20px;}
form input.short {width: 40px; margin-right: 3px;}
form input.budget {width: 100px;}

form .inset {display: block; float: left; margin: 0 10px 5px 0; text-align: left; padding-top: 3px;}

form p.disclaimer {font-size: 10px; margin: 0; padding: 0; line-height: 12px;}

form input:hover, form#norm textarea:hover, form#norm .cvbutton:hover {border: 1px solid #333333;}
form .submit {float: none; height: 18px; width: 124px; padding: 0; margin: 16px 0 10px 0; border: 0;}
form#norm .submit:hover {border: none;}
form br {clear: left;}

form#error input {color: #ffcc33; background: #3C3C4C; border: 1px solid #000033; width: 120px; height: 21px; font-size: 12px;}
.goback {margin-left: 24px;}