/*------------------------------------------------------ CSS Created: 22/07/2012 CSS Author: Jon Thompson email: jon@chamberinternet.co.uk website: www.chamberinternet.co.uk ------------------------------------------------------*/ * { margin:0; padding:0;} html, body { -webkit-font-smoothing: antialiased; font-family:Tahoma, Geneva, sans-serif; background-color: #000; } img { border:none; } ul, li { list-style:none; } :focus { outline:0; } h1, h2, h3, h4 { font-family: 'Muli', sans-serif; font-weight:400; font-style:normal; } #wrapper { width:1000px; margin:0px auto; } /* HEADER STYLES */ #header { float:left; position:relative; width:1000px; height:170px; background-color:#FFF; background-image: url(images/header/bg.jpg); background-repeat: no-repeat; background-position: right top; } #header .company-logo { position:absolute; top:10px; left:30px; width:220px; height:150px; } #header .cta { position:absolute; top:20px; left:366px; width:380px; height:auto; } #header .cta h2 { margin-bottom:0px; font-size:9px; } #header .cta .head-form-field { vertical-align:middle; margin-right:4px; border:solid 1px #007355; height:22px; line-height:22px; text-indent:4px; font-family:Arial, Helvetica, sans-serif; color:#666; } #header .cta .head-form-field.name { width:168px; } #header .cta .head-form-field.tel { width: 149px; } #header .cta .head-form-btn { vertical-align:middle; width:24px; height:24px; background-image: url(images/header/btn-form.png); background-repeat: no-repeat; background-position: 0px 0px; text-indent:-99999px; border:none; border:0;} #header .booking-btn { position:absolute; top:20px; right:10px; width:236px; height:137px; } /* NAVIGATION STYLES */ #navigation { float:left; position:relative; width:1000px; height:48px; z-index:100; } #navigation ul, #navigation li { float:left; position:relative; } #navigation li a { display:block; height:48px; text-indent:-9999px; background-repeat: no-repeat; background-position: 0px 0px; } #navigation li.home a { width:66px; background-image: url(images/navigation/home.png); } #navigation li.about a { width:68px; background-image: url(images/navigation/about.png); } #navigation li.servicing a { width:95px; background-image: url(images/navigation/servicing.png); }#navigation li.repairs a { width:88px; background-image: url(images/navigation/repairs.png); } #navigation li.vehicles a { width:84px; background-image: url(images/navigation/vehicles.png); } #navigation li.booking a { width:88px; background-image: url(https://www.kmotors.co.uk/wp-content/uploads/2015/03/onlinebooking2.png); } #navigation li.gearboxes a { width:103px; background-image: url(images/navigation/gearboxes.png); } #navigation li.parts a { width:106px; background-image: url(images/navigation/parts.png); } #navigation li.testimonials a { width:113px; background-image: url(images/navigation/testimonials.png); } #navigation li.blog a { width:61px; background-image: url(images/navigation/blog.png); } #navigation li.contact a { width:94px; background-image: url(images/navigation/contact.png); } #navigation li.endmenu a { width:34px; background-image: url(images/navigation/tuning.png); } #navigation li a:hover, #navigation li:hover a { background-position: 0px -48px; } #navigation li .sub-nav { display:none; float:left; position:absolute; top:48px; left:0px; width:auto; height:auto; padding:10px; background-color:#71BF44; width:232px; } #navigation li:hover .sub-nav { display:block; } #navigation li .sub-nav ul { background-image: url(images/navigation/hr.png); background-repeat: repeat-x; background-position: left top; } #navigation li .sub-nav li { background-image: url(images/navigation/hr.png); background-repeat: repeat-x; background-position: left bottom; } #navigation li .sub-nav li a { width:220px; font-size:13px; color:#FFF; height:auto; text-decoration:none; text-indent:0px; background-repeat:no-repeat; background-position:0px 10px; background-image:url(images/navigation/li.png); padding:5px 0px 5px 12px; } #navigation li .sub-nav li a:hover { text-decoration:underline; } /* CONTENT STYLES */ #content { float:left; width:960px; padding:20px; background-color:#FFF; } #content h1 { font-size:26px; color:#666; margin-bottom:15px; } #content h2 { font-size:20px; color:#007355; margin-bottom:15px; } #content h3 { font-size:18px; color:#007355; margin-bottom:10px; } #content h4 { font-size:16px; text-transform:uppercase; color:#007355; margin-bottom:10px; } #content p, #content ul { padding-bottom:20px; font-size:13px; color:#333; line-height:18px; } #content p.p1 { font-family: 'Muli', sans-serif; font-weight:400; font-size:16px; line-height:22px; color:#007355; } #content .txt-dg { color:#007355; } #content .txt-lg { color:#71BF44; } #content a { color:#007355; } #content a:hover { color:#71BF44; } #content li { background-image: url(images/content/li-lg.png); background-repeat: no-repeat; background-position: 0px 8px; padding-left: 15px; } #content ul.dg li { background-image: url(images/content/li-dg.png); } #content blockquote { border-left: solid 2px #007355; padding-left:20px; margin-bottom:20px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:14px; line-height:20px; color:#666; } #content .highlighted { background-color:#007355; color:#FFF; font-size:13px; margin-bottom:15px; padding:10px; } #content .highlighted.lg { background-color:#71BF44; } #content .note { font-size:12px; color:#007355; } #content .img-right { float:right; margin-left:15px; margin-bottom:15px; padding:0px; } #content .img-left { float:left; margin-right:15px; margin-bottom:15px; padding:0px; } #content .hr-top-dg, #logo-strip .hr-top { background-image: url(images/content/hr-horiz-dg.png); background-repeat: repeat-x; background-position: left top; padding-top:15px; } #content .hr-bot-dg { background-image: url(images/content/hr-horiz-dg.png); background-repeat: repeat-x; background-position: left bottom; margin-bottom:15px; } #logo-strip { float:left; width:960px; padding:0px 20px 20px 20px; background-color:#FFF; background-image: url(images/logo-strip/bg.png); background-repeat: no-repeat; background-position: right bottom; } #logo-strip ul, #logo-strip li { float:left; } #logo-strip li { margin-right:30px; } #content .side-widget { float:left; width:220px; margin-bottom:20px; background-color:#007355; } #content .side-widget h2 { float:left; width:200px; height:auto; font-family: 'Muli', sans-serif; text-transform:uppercase; font-size:14px; background-color:#71BF44; color:#FFF; padding:6px 10px; margin-bottom:0px; } #content .side-widget ul { float:left; width:200px; padding:10px; } #content .side-widget li { float:left; width:200px; background-image:url(images/content/side-bar/hr-sub-menu.png); background-repeat: repeat-x; background-position: left bottom; padding:5px 0px; } #content .side-widget li.last { background-image:none; } #content .side-widget li a { display:block; width:188px; background-image: url(images/content/side-bar/li-sub-menu.png); background-repeat: no-repeat; background-position: 0px 7px; color:#FFF; padding-left:12px; text-decoration:none; } #content .side-widget li a:hover { text-decoration:underline; color:#71BF44; } /* 12 COL GRID */ .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { display:inline; float:left; position:relative; margin-left:10px; margin-right:10px; } .grid-1 { width:60px; } .grid-2 { width:140px; } .grid-3 { width:220px; } .grid-4 { width:300px; } .grid-5 { width:380px; } .grid-6 { width:460px; } .grid-7 { width:540px; } .grid-8 { width:620px; } .grid-9 { width:700px; } .grid-10 { width:780px; } .grid-11 { width:860px; } .grid-12 { width:940px; } .prefix-1 { padding-left:80px; } .prefix-2 { padding-left:160px; } .prefix-3 { padding-left:240px; } .prefix-4 { padding-left:320px; } .prefix-5 { padding-left:400px; } .prefix-6 { padding-left:480px; } .prefix-7 { padding-left:560px; } .prefix-8 { padding-left:640px; } .prefix-9 { padding-left:720px; } .prefix-10 { padding-left:800px; } .prefix-11 { padding-left:880px; } .suffix-1 { padding-right:80px; } .suffix-2 { padding-right:160px; } .suffix-3 { padding-right:240px; } .suffix-4 { padding-right:320px; } .suffix-5 { padding-right:400px; } .suffix-6 { padding-right:480px; } .suffix-7 { padding-right:560px; } .suffix-8 { padding-right:640px; } .suffix-9 { padding-right:720px; } .suffix-10 { padding-right:800px; } .suffix-11 { padding-right:880px; } .alpha { margin-left:0; } .omega { margin-right:0; } /* FORM STYLES */ #content .contact-form_wrapper { padding:0px; margin:0px; } #content .contact-form { width:940px; } #content .contact-form label { font-size:12px; margin-top:0px; } #content .contact-form label.gfield_label { color:#007355; font-size:14px; } #content .contact-form ul { padding-bottom:0px; } #content .contact-form li { background-image:none; padding:0px; margin:0px 0px 10px 0px;} #content .contact-form .text-field input { border:solid 1px #007355; font-family:Tahoma, Geneva, sans-serif; font-size:14px; color:#666; padding:4px; width:445px; } #content .contact-form .text-area textarea { border:solid 1px #007355; font-family:Tahoma, Geneva, sans-serif; font-size:14px; height:200px; padding:4px; width:930px; } #content .contact-form .gform_fields { padding-bottom:0px; } #content .contact-form .gform_footer { padding:0px; } #content .contact-form .gform_description p { padding-bottom:0px;} /* TABLE STYLES */ #content table.t-highlighted { margin-bottom:15px; font-family:Tahoma, Geneva, sans-serif; border-left:solid 1px #007355; } #content table.t-highlighted th, #content table.t-highlighted td { padding:5px; } #content table.t-highlighted th { background-color:#007355; font-size:14px; color:#FFF; border-right:solid 1px #FFF; } #content table.t-highlighted th.last { border-right:none; } #content table.t-highlighted td { font-size:13px; color:#333; border-right:solid 1px #007355; border-bottom:solid 1px #007355; } #content table.t-highlighted tr.even td { background-color:#E5F1EE; } /* FOOTER STYLES */ #footer { position:relative; float:left; width:960px; padding:20px 20px 10px 20px; margin-bottom:30px; color:#FFF; background-color:#007355; font-size:13px; } #footer h2 { font-size:18px; background-image: url(images/footer/hr.png); background-repeat: repeat-x; background-position: left bottom; padding-bottom:10px; margin-bottom:15px; } #footer p, #footer ul { line-height:18px; padding-bottom:15px; } #footer li { background-image: url(images/footer/li.png); background-repeat: no-repeat; background-position: 0px 7px; padding-left: 12px; } #footer .hr { background-image: url(images/footer/hr.png); background-repeat: repeat-x; background-position: left top; padding-top:10px; } #footer a { color:#fff; text-decoration: none; } #footer a:hover { text-decoration: underline; } #footer .copyright { line-height:22px; } #footer .social { float:right; width:204px; } #footer .social p, #footer .social ul { float:left; padding-bottom:0px; } #footer .social p { line-height:22px; width:150px; text-align:right; } #footer .social ul { width:54px; height:22px; } #footer .social li { float:left; margin-left:5px; padding:0px; background-image:none; } #footer .social li a { display:block; width:22px; height:22px; text-indent:-9999px; background-repeat: no-repeat; background-position: 0px 0px; } #footer .social li.facebook a { background-image: url(images/footer/facebook.png); } #footer .social li.twitter a { background-image: url(images/footer/twitter.png); } #footer .social li a:hover { background-position: 0px -22px; } #footer .ci { position:absolute; bottom:-20px; left:483px; } #footer .ci a { display:block; width:35px; height:12px; text-indent:-99999px; background-image: url(images/footer/ci.png); background-repeat: no-repeat; background-position: 0px 0px; } #footer .ci a:hover { background-position: 0px -12px; } /* Clear Floated Elements ----------------------------------------------------------------------------------------------------*/ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; }