/*  CLJ Carpentry Ltd Stylesheet  ** http://www.cljcarpentryltd.co.uk/  */
/*  *** Developed By Friendly Code - http://www.friendlycode.co.uk/ ***  */

body{font-family: "Century Gothic", Arial, Helvetica, sans-serif; background:#333; margin:0 auto; text-align:center; font-size:14px;}

p{margin:0 0 10px 0}
p a, h1 a, h2 a, h3 a, h4 a, h5 a{color:#617E9E; padding:3px 2px}
a:hover{background: #617E9E; color:#FFF}
h1,h2,h3,h4,h5,h6{margin:0 0 15px 0}
h1{font-size:25px}
h2{font-size:20px}
h3{font-size:20px}
h4{font-size:16px}
strong{font-weight:bold}
em{font-style:italic}

#wrapper{margin: 10px auto; position:relative; width:980px}

#header{}

#menu{height:50px; background:#4E4E4E; margin:10px 0 0; text-align:center; background:url(/images/menu-bg.jpg) repeat-x; line-height:25px}
#menu li{padding:0!important; margin:0!important; float:left; text-transform:lowercase; width:111px; position:relative}
#menu li a{color:#FFF; text-decoration:none; padding:12px 10px; font-size:16px; display:block; line-height:30px; margin:0}
#menu li a:hover, #menu li .active{background:#6484A5; padding-bottom:22px; border:none; height:16px}
#menu .red a:hover, #menu .red a.active{background:#AE000B}

#blue-bar{background:url(../images/blue-bar.jpg) repeat-x; height:50px; border-bottom:3px solid #aaa; padding:20px}
#blue-bar h1{color: #F0F0F0; float:left; font-weight:normal; margin:0}
#blue-bar span{float:right; line-height:30px; color:#333; font-size:22px;}
#blue-bar.red{background:url(../images/red-bar.jpg) repeat-x; }
#blue-bar.red span{color:#FFF}

#content{margin:0 0 5px 0; background:#F0F0F0; text-align:left; font-family:Arial, Helvetica, sans-serif; line-height:22px}
#content .banner{float:right; margin-left:20px}
#content #text-content{padding: 20px; }
#text-content img{float:right}
#text-content ul li{list-style:circle; margin-left:20px}


#latest-projects{float:right; width:400px; background:#F6F6F6; border: 1px solid #DADADA; text-align:left; padding:20px; margin-left:15px;}
#latest-projects .project{height:150px}
#latest-projects .project img{float:left; margin-right:20px; border:5px solid #617E9E}
#latest-projects .project img:hover{border:5px solid #455A79}
#latest-projects .project h4{margin-left:20px}
#latest-projects .project p{margin-left:20px}
#project-gallery{ padding:15px 10px 0; background:#F6F6F6; border: 1px solid #DADADA; margin:10px 0}

#services{margin:10px 0}
#services li{ list-style:none!important; padding:0!important; width:303px; float:left; margin:0 10px 10px 0 !important; }
#services li a{ padding:10px; background:#587595; display:block; color:#FFF; text-decoration:none;}
#services li a:hover{background:#6384A5; text-decoration:underline; font-weight:bold}

#footer{font-size:12px; background:#333333; height:10px;  background:#4E4E4E; clear:both; padding:20px; text-align:left; color:#ccc}
#footer a{color:#ccc; text-decoration:none; padding:4px 5px}
#footer a:hover{color:#FFF; background:#617E9E}
#footer p{}
#gMap{height:300px; border:1px solid #ddd; margin-bottom:20px}

.gallery li{margin:0; padding:0}
.gallery a{float:left; margin:10px 10px 0 0; background:#ccc; width:170px; height:130px; padding:4px; display:block}
.gallery a:hover{background:#617E9E}
.gallery img{width:170px; height:130px;}

#offers{list-style:none}
#offers li{float:left; margin:20px 20px 0 0!important; list-style:none!important; font-size:20px; position:relative}
#offers li a{ color:#FFF; background:#AE000B; width:200px; height:200px; display:block; padding:10px;}
#offers li a img{position:absolute; bottom:10px; right:10px}

.offer .gallery{width:400px; float:right}
.offer .gallery a{float:right; height:auto}
.offer .gallery img{width:170px; height:130px; float:none}

.offer .gallery a:hover{background:#900}
.offer .gallery div:hover{background: #D6ACAA}


.offer .gallery.doors{float:none; width:850px; margin-left:20px}
.offer .gallery.doors div{float:left; width:150px; height:225px; margin: 0 0 15px 0; text-align:center; padding:10px}
.offer .gallery.doors a{width:130px; height:170px; float:none; margin:0 auto}
.offer .gallery.doors img{width:130px; height:170px; float:none}

.offer .gallery span {font-size:11px}
.offer .gallery span span{color:#900; font-weight:bold; background:#FFF; display:block; margin:5px}


.offer .gallery.handles{float:none; width:850px; margin-left:20px}
.offer .gallery.handles div{float:left; width:170px; height:205px; margin: 0 0 15px 0; text-align:center}
.offer .gallery.handles a{width:130px; height:170px; float:none; margin:0 auto}
.offer .gallery.handles img{width:130px; height:170px; float:none}

.offer{border:4px solid #333; margin-bottom:10px; background: #FFE1D9; padding-bottom:10px}
.offer h2{background: #333; text-transform:uppercase; font-size:30px; color:#FFF; display:inline-block; padding:10px}
.offer h4{background:#AE000B; padding:10px; color:#FFF; font-weight:bold}
.offer .content{padding:10px}
.offer ul li{color:#AE000B; list-style:none}
.offer ul li strong{background:#AE000B; color:#FFF; padding:1px 3px;}

#project-gallery a{padding:1px}

#projects .project{background:#F6F6F6; border: 1px solid #DADADA; padding:20px; position:relative; margin-bottom:20px; height:130px}
#projects .project img {float:left; margin-right:20px; border: 1px solid #DADADA; }
#projects .project h4{text-transform:lowercase; font-weight:bold}

/** FORMS **/
#contactForm{float:right; width:522px}
form label{clear:left; float:left; width:150px; margin-bottom:5px}
input, textarea {padding:10px; background: #F6F6F6 ; border:1px solid #eee; float:left; width:350px; color:#617E9E; margin-bottom:5px; font-weight:bold; border:1px solid #DADADA}
input:hover, textarea:hover {border: 1px solid #617E9E}

textarea{height:100px; font-family:'Calibri','Myriad Pro','Helvetica Neue',Arial,Helvetica,sans-serif; font-size:16px}
.submit{width:370px; cursor:pointer; color:#617E9E}
.submit:hover{background:#617E9E; color:#F7F9FB}
.error{background:#FCD6D6 none repeat scroll 0 0;color:red;float:left;padding:10px;width:350px;}
.success{background: #F8FFEB; padding:10px;width:350px;}
.formInfo{margin-left:150px; margin-bottom:5px}
.formError{background:#FCD6D6 none repeat scroll 0 0; color:red; padding:10px; margin-bottom:10px}
.formSuccess{border: 1px solid #C5EFAB ; padding:10px; margin-bottom:10px; background:#F8FFEB}


.view-all{text-transform:lowercase; background:#617E9E; color:#FFF; padding:3px 5px; width:150px; text-align:center; float:right; border:1px solid #617E9E; text-decoration:none}
.view-all:hover{background:#FFF; color:#617E9E}

/** CLASSES **/
.clear{clear:both; height:0;line-height:0;margin:0;padding:0;}
.right{float:right; margin-left:10px; margin-bottom:10px}
.left{float:left; margin-right:10px; margin-bottom:10px}
.split-content{width:600px}
.no-margin{margin:0!important}
.no-margin-right{margin-right:0!important}
.quote-left{background:url(/images/quote-left.gif) no-repeat; text-indent:40px}
.quote-right{background:url("/images/quote-right.gif") no-repeat scroll 10px -1px transparent;
display:inline-block;height:20px;width:40px;}