.innerWrap:after,.innerLeft:after,.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .innerWrap,.innerLeft,.clearfix { display:inline-block; } .innerWrap,.innerLeft,.clearfix { display:block; } * html .innerLeft{ height:1px; } * html .clearfix { height:1px; } * html .clearfix { height:1px; } .clear { /*height: 1px;*/ clear: both; } * { margin: 0; padding: 0; text-decoration: none; font-size: 100%; outline: none; } code, kbd, samp, pre, tt, var, textarea, input, select, isindex { font: inherit; font-size: 1em; } dfn, i, cite, var, address, em { font-style: normal; } th, h1, h2, h3, h4, h5, h6 { font-weight: normal; } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet { border: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td, center { text-align: left; vertical-align: top; } body { background: white; } q { quotes: "" ""; } ul, ol, dir, menu { list-style: none; } sub, sup { vertical-align: baseline; } a { color: inherit; text-decoration: none; } /************************ ** * Colours *******************/ @orange: #f2672b; @grey: #4d4d4f; @lightGrey: #818181; @lightergrey: #939393; /******* ** FONTS ***/ /* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 18, 2011 10:16:41 AM America/New_York */ @font-face { font-family: 'DroidSansRegular'; src: url('/assets/fonts/DroidSans-webfont.eot'); src: url('/assets/fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/DroidSans-webfont.woff') format('woff'), url('/assets/fonts/DroidSans-webfont.ttf') format('truetype'), url('/assets/fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'DroidSansBold'; src: url('/assets/fonts/DroidSans-Bold-webfont.eot'); src: url('/assets/fonts/DroidSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/DroidSans-Bold-webfont.woff') format('woff'), url('/assets/fonts/DroidSans-Bold-webfont.ttf') format('truetype'), url('/assets/fonts/DroidSans-Bold-webfont.svg#DroidSansBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'BPreplayRegular'; src: url('/assets/fonts/BPreplay-webfont.eot'); src: url('/assets/fonts/BPreplay-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/BPreplay-webfont.woff') format('woff'), url('/assets/fonts/BPreplay-webfont.ttf') format('truetype'), url('/assets/fonts/BPreplay-webfont.svg#BPreplayRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'BPreplayItalic'; src: url('/assets/fonts/BPreplayItalics-webfont.eot'); src: url('/assets/fonts/BPreplayItalics-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/BPreplayItalics-webfont.woff') format('woff'), url('/assets/fonts/BPreplayItalics-webfont.ttf') format('truetype'), url('/assets/fonts/BPreplayItalics-webfont.svg#BPreplayItalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'BPreplayBold'; src: url('/assets/fonts/BPreplayBold-webfont.eot'); src: url('/assets/fonts/BPreplayBold-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/BPreplayBold-webfont.woff') format('woff'), url('/assets/fonts/BPreplayBold-webfont.ttf') format('truetype'), url('/assets/fonts/BPreplayBold-webfont.svg#BPreplayBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'BPreplayBoldItalic'; src: url('/assets/fonts/BPreplayBoldItalics-webfont.eot'); src: url('/assets/fonts/BPreplayBoldItalics-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/BPreplayBoldItalics-webfont.woff') format('woff'), url('/assets/fonts/BPreplayBoldItalics-webfont.ttf') format('truetype'), url('/assets/fonts/BPreplayBoldItalics-webfont.svg#BPreplayBoldItalic') format('svg'); font-weight: normal; font-style: normal; } /************************ ** * Headings *******************/ h1,h2,h3,h4,h5{ color:@grey; font-family: DroidSansBold, Arial, sans-serif; font-size:25px; margin:0 0 17px 0; span{ color:@orange; } } /************************ ** * body *******************/ body { background: #000000; font-family: arial, helvetica, sans-serif; font-size: 14px; color: @grey; text-align: center; } /************************ ** * inner wrap for any inner content with fixed width *******************/ .innerWrap{ width: 965px; margin:0 auto; } /************************ ** * heading wrap, includes header, navigation *******************/ #wrap { margin: 0 auto 0 auto; text-align: left; background: #FFFFFF url('/assets/images/header.jpg') 0 20px repeat-x; #header{ width:965px; #logo{ float:left; margin:0 5px 0 25px; } #getQuote{ margin-top: 20px; margin-right: 45px; float: right; .quoteButton{ border:@orange 3px solid; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding:7px 45px 7px 25px; font-family:DroidSansBold, Arial, sans-serif; background:@orange url('/assets/images/arwOrange.jpg') 90% 52% no-repeat; color:white; display: block; font-size:19px; } a:hover{ background:#FFFFFF url('/assets/images/arwOrangeWhite.jpg') 90% 52% no-repeat; color:@orange; } } #phoneAndEmail{ float:left; margin:15px 0 0; img{ display:block; } } } #navigation{ width: 965px; margin:0 0 60px 0; ul{ float:right; padding-right: 40px; li{ float:left; position: relative; a{ padding:10px 10px 6px 10px; color:#565656; display:inline-block; } } li:hover{ } .on{ background:@orange; color:#FFFFFF; } li:hover ul{ display: block; left: 0px; } ul{ padding:12px 5px 4px; background: #FFFFFF; border-bottom: 10px solid @orange; border-left: 1px solid @orange; border-right: 1px solid @orange; position: absolute; left: 9999px; display: none; top: 32px; li{ float: none; padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid #e4e4e4; } a{ color:#949498; display:block; min-width:120px; white-space:nowrap; padding:0 5px 0 5px; } a:hover{ color:#4d4d4f; } } } } } #content{ background: #FFFFFF; margin:0 auto; text-align: left; padding: 0 0 40px; } p{ margin-bottom: 15px; margin-top: 0; font-size: 14px; } p span{ margin-bottom: 15px; } /************************ ** * Inner pages *******************/ #innerLeftWrap{ width:680px; float:left; color:#393939; margin:0 20px 0 0; .innerLeft{ float:left; border:@orange 1px solid; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; width:620px; margin:0 0 20px; padding:28px; img{ float:right; padding-left:8px; padding-top:10px; padding-bottom:10px; max-width: 300px; clear: right; } h1,h2,h3{ margin:0 0 25px; } a{ text-decoration:underline; font-weight:bold; color: @grey; } p{ clear:left; } ul{ margin-top: 8px; li{ margin:0 0 10px; padding:2px 0px 2px 30px; background:url('/assets/images/bullet.jpg') 0 6px no-repeat; } } } #jscript{ width:680px; float:left; margin-bottom:15px; } } #testimonialsPage{ p{ font-size:12px; } h4{ font-size:12px; font-weight: bold; margin:0 0 10px; } } #innerRightWrap{ float:left; width:250px; margin:0 0 20px 0; padding-bottom: 20px; .innerRight{ border:@orange 1px solid; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; width:243px; padding:5px; margin-bottom: 20px; } #secondNav{ ul{ float:left; margin:0 0 20px; li{ float:left; margin:0 0 5px; a{ color: @orange; border: @grey 1px solid; width:235px; height: 32px; line-height:34px; overflow:hidden; display:block; font-weight:bold; font-size:15px; padding:0px 0 0px 15px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } a:hover,.on{ color:#FFFFFF; background:@grey; } } } } .testimonial{ background:url('/assets/images/white66.jpg') 0 0 no-repeat; p{ background:url('/assets/images/white99.jpg') 100% 100% no-repeat; padding:40px 20px 30px 30px; margin:0 0 10px; font-style: italic; color:#4d4d4f; } p.testimonialDetails{ font-weight:bold; background:none; padding:0; margin:0px; text-align: center; span{ font-weight: normal; } } } } /************************ ** * home section *******************/ #homeLeft{ float:left; width:325px; margin:0 20px 0 0; .innerLeft{ border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: @orange 1px solid; width:265px; padding:20px 28px 15px; margin:0 0 20px 0; img{ display:block; margin:0 auto; } a.readmore{ float:right; margin:10px 0 20px; text-decoration: underline; font-weight: bold; color: @grey; } } } #homeRight{ width:615px; float:left; h1,h2,h3,h4{ margin-bottom: 12px; } .innerRight,.topImage{ border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding:20px 25px; width:563px; border: @orange 1px solid; margin:0 0 20px 0; } .topImage{ padding:0.016em; width:610px; overflow:hidden; } ul.serviceList{ float:left; width:265px; margin:0 10px 20px 0; padding:10px 0 0 0; li{ margin:0 0 5px; font-family:DroidSansRegular, Arial, sans-serif; color:@grey; font-size: 19px; padding:0 0 0 20px; background:url('/assets/images/bullet.jpg') 0 50% no-repeat; a{color: @grey;} } li.alt{ color:@lightGrey; a{ color:@lightGrey; } } a.servicePage{ padding:0 34px 0 0; background:url('/assets/images/btnWhite.jpg') 100% 50% no-repeat; } } } /************************ ** * grey wrap seperates sections *******************/ .greyBar{ background:@grey; height:12px; } /************************ ** * second wrap is orange *******************/ #secondWrap{ padding:40px 0; background: @orange; #homeReviews{ float:left; width:325px; overflow:hidden; margin:0 20px 0 0; .review{ margin:0 0 20px; border:#f6986f 1px solid; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; background:#bb5c34 url('/assets/images/quote66.jpg') 5px 5px no-repeat; padding:45px 30px; color:#FFFFFF; text-align: left; p{ padding:5px 0 35px; margin:0 0 10px; background:url('/assets/images/quote99.jpg') 100% 100% no-repeat; } p.reviewDetails{ font-weight:bold; background:none; padding:0; margin:0; span{ font-weight: normal; } } } } #homeTestimonials{ border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border:@orange 1px solid; width:575px; float:left; background:#FFFFFF; padding:20px; text-align: left; h1,h2,h3,h4{ margin:0 0 15px; font-size: 22px; } p{ margin:0 0 20px; font-size: 12px; } } } /************************ ** * info words *******************/ #infoWords{ background:@grey; padding:20px 0px; font-size: 12px; color:#bebebe; text-align: left; .innerWrap{ width: 900px; } a{ color: #bebebe; } ul{ float:left; margin:0 10px 10px 0; width: 170px; li{ margin: 0 0 5px; } } p{ margin:0px 0px 10px; clear: both; } } /************************ ** * all testimonials *******************/ #thirdWrap{ background:@orange; padding:40px 0; #allTestimonials{ background:#FFFFFF; float:right; width:575px; padding:20px; text-align: left; p{ font-size:12px; margin:0 0 20px; } h4{ font-size:12px; font-weight: bold; margin:0 0 10px; font-family: Arial, sans-serif; } } } /************************ ** * logosbar *******************/ #logoBar{ background:#4c4c4c; padding:15px 0; text-align: center; } /************************ ** * footer *******************/ #footer{ padding:40px 0 15px; background:#1f1f1f; color:#bebebe; font-size: 12px; text-align: left; p{ margin-bottom: 15px; } .innerWrap{ padding:0 20px; width:920px; } div.weDo ul{ float:left; margin:0px 10px 15px 0; width:170px; li{ margin:0 0 3px; } } } #footerNav{ background:#000000; padding:20px 0; color:#FFFFFF; text-align: left; font-size: 12px; .leftFoot{ float:left; width:665px; } .rightFoot{ float:right; width:240px; } .innerWrap{ padding:0 20px; width:920px; } a{ color:#FFFFFF; } ul{ margin-bottom: 15px; width:100%; li{ float:left; color:#a8a8a8; overflow: hidden; padding:0 3px; margin-bottom:15px; a{ color:#a8a8a8; } ul{ display: none; } } li:after{ content: " | "; } .on{ color:#FFFFFF; a{ color:#FFFFFF; } } } #footerPhone{ float:right; width:180px; background:url('/assets/images/telephone.jpg') 0 50% no-repeat; padding:2px 0 2px 40px; margin:0 0 6px; } #footerEmail{ float:right; width:180px; background:url('/assets/images/email.jpg') 0 50% no-repeat; padding:2px 0 2px 40px; clear:right; } p{ margin-bottom: 10px; clear:left; span{ margin:0 10px; a{ text-decoration: underline; } } } } /* *********************** ** * Contact forms *******************/ #contact{ width:680px; float:left; color:#393939; margin:0 20px 0 0; a{ color:#393939; } .innerLeft{ float:left; border:@orange 1px solid; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; width:680px; margin:0 0 20px; padding:20px 0; } .innerPad{ width:620px; margin:0 auto; padding:10px 30px; } form{ .input{ float:left; clear:left; width:100%; min-height:18px; height:auto !important; height:18px; margin:0 0 10px; padding:5px 0; } h1,h2,h3,h4{ background:@grey; color:#FFFFFF; padding:5px 30px; } span{ font-size: 10px; font-style: italic; } label.radio{ margin-right:10px; width:auto; } label{ float:left; margin-right:25px; margin-bottom:25px; width:200px; } input,textarea,select{ float:left; margin-right:15px; color:#7b7b7b; font-size:12px; border: @orange 1px solid; padding:3px 5px; margin-bottom:5px; } radio{ border: none; } select{ min-width: 200px; } .calendar{ background:url('/assets/images/calendar.jpg') 65% 0 no-repeat; } input.submit{ border:@orange 3px solid; font-family:DroidSansBold,Arial,sans-serif; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding:5px 45px 5px 25px; background:@orange url('/assets/images/arwOrange.jpg') 90% 52% no-repeat; color:#FFFFFF; float:right; font-size:16px; } input.submit:hover,input.reset:hover{ cursor:pointer; } input.reset{ border:@grey 3px solid; font-family:DroidSansBold, Arial, sans-serif; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding:5px 50px 5px 30px; background:@grey url('/assets/images/arwGrey.jpg') 85% 52% no-repeat; color:#FFFFFF; float:right; font-size:16px; } } } /************************ ** * buttons and things *******************/ /*make things bold innit*/ .innerLeft{ a{ font-weight:bold; } } /*contact page starts*/ .emailC{ float:left; clear:left; padding:10px 10px 10px 60px; background:url('/assets/images/emailC.jpg') 0 50% no-repeat; a{ font-weight:normal; font-size:21px; } } .quote{ margin-bottom:10px; text-align:center; float:left; font-family: DroidSansBold, Arial, sans-serif; padding:15px 10px 10px 55px; background:url('/assets/images/quote.jpg') 0 70% no-repeat; a{ border:@orange 3px solid; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding:7px 25px 7px 15px; display:block; width:150px; background:#FFFFFF url('/assets/images/arwOrangeWhite.jpg') 95% 52% no-repeat; color:@grey; font-size:19px; span{ color:@orange; } } a:hover{ background:#FFFFFF url('/assets/images/arwOrangeWhite.jpg') 95% 52% no-repeat; color:@orange; } } #mobileC{ background:url('/assets/images/mobileC.jpg') 1% 50% no-repeat; padding:15px 0px 15px 50px; font-size:21px; } #telephoneC{ background:url('/assets/images/phoneC.jpg') 0 50% no-repeat; padding:15px 0px 15px 50px; font-size:21px; } /*contact page ends*/ .locationsButton{ text-align:center; float:right; font-family: DroidSansBold, Arial, sans-serif; a{ border:@orange 3px solid; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding:7px 28px 7px 20px; width:180px; display:block; background:@orange url('/assets/images/arwOrange.jpg') 97% 52% no-repeat; color:white; font-size:19px; } a:hover{ background:#FFFFFF url('/assets/images/arwOrangeWhite.jpg') 97% 52% no-repeat; color:@orange; } } .vanManTaunton{ float:right; text-align:center; font-family: DroidSansBold, Arial, sans-serif; padding:5px 0; p{ margin-bottom:15px; padding:3px; line-height: 5px; font-family:Arial, sans-serif; } a{ border:@grey 3px solid; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding:7px 25px 7px 20px; background:#FFFFFF url('/assets/images/arwWhite.jpg') 95% 52% no-repeat; color:@grey; width:170px; display:block; font-size:19px; span{ color:@orange; } } a:hover{ background:#FFFFFF url('/assets/images/arwWhiteGrey.jpg') 95% 52% no-repeat; color:@lightergrey; border:@lightergrey 3px solid; } } /**home more reviews**/ .homeMoreReviews{ text-align:center; font-family: DroidSansBold, Arial, sans-serif; margin-top: 30px; a{ border:#ffffff 3px solid; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; display:block; width:300px; padding:7px 15px 7px 5px; background:#ffffff url('/assets/images/arwOrangeWhite.jpg') 90% 52% no-repeat; color:@orange; font-size:19px; } a:hover{ background:#FFFFFF url('/assets/images/arwWhite.jpg') 90% 52% no-repeat; color:@grey; } } /**more reviews**/ .moreReviews{ text-align:center; font-family: DroidSansBold, Arial, sans-serif; margin-top: 30px; float: right; a{ border:@orange 3px solid; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; display:block; width:230px; padding:7px 15px 7px 0px; background:@orange url('/assets/images/arwOrange.jpg') 90% 52% no-repeat; color:white; font-size:19px; } a:hover{ background:#FFFFFF url('/assets/images/arwOrangeWhite.jpg') 90% 52% no-repeat; color:@orange; } } /******************* Global *********************/ .message, .alert, .notice, .success, .info { margin:10px 0; margin-left:15px; padding:0.5em; max-width:350px; border:2px solid #dddddd; } .error, .alert { background:#fbe3e4; color:@grey; border:#fbc2c4 2px solid; } .success { background:#e6efc2; color:#264409; border-color:#c6d880; } .info { background:#d5edf8; color:#205791; border-color:#92cae4; } .error a, .alert a { color:#8a1f11; text-decoration:underline; } .notice a { color:#514721; text-decoration:underline; } .success a { color:#264409; text-decoration:underline; } .info a { color:#205791; text-decoration:underline; }