/*-------------------------------------------------- version: screen.css - 1.6 created: 20-01-2011 author: Joe Bloggs ~ GlobalGraphics Associates Ltd. email: webmaster@globalgraphics.co.uk website: http://www.globalgraphics.co.uk/ --------------------------------------------------*/ @import url("base.css"); @import url("generic.css"); @import url("enrichment.css"); @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:700); @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700); #header, #wrap, #banner, #footer { width: 100%; } #content { width: 680px; float: left; margin-right: 40px; padding-right: 39px; border-right: 1px solid #dddddd; } #content.full { width: 100%; float: none; border:none; } #aside { width: 160px; float: left; } .container { display: block; margin:0 auto; width: 940px; padding: 0 10px;} #logo { text-indent:-99999px; display: block;} /*------------------------------ Wireframe Presentation Only Feel Free To Delete ------------------------------*/ /*----------------------------------------------------------------------------------------------------*/ /* GENERIC */ /*----------------------------------------------------------------------------------------------------*/ body { font-weight: 400; font-size: 14px; font-family: 'Open Sans' ,Arial, Helvetica, sans-serif; color: #556375; } a, a.active, a:hover, a:visited { text-decoration: none; color: #98e325; } p { font-weight: 400; font-size: 14px; font-family: 'Open Sans' ,Arial, Helvetica, sans-serif; color: #2d333b; line-height: 25px; margin-bottom: 20px; } span.para { font-size: 14px; color: #525252; margin-bottom: 15px; font-weight: 600; line-height: 18px; display: block; } h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans' ,Arial, Helvetica, sans-serif; font-weight: 600; color: #111111; line-height:1.2em; margin-bottom: 20px; } h1{ font-size:40px; } h2{ font-size:36px; } h3{ font-size:26px; } h4{ font-size:24px; } h5{ font-size:20px; } h6{ font-size:12px; } strong.heading,h3.heading { color: #000000; font-size: 18px; font-weight: 700; font-family: 'Open Sans' ,Arial, Helvetica, sans-serif; display: block; margin-bottom: 30px; } h3.heading { margin-bottom: 15px!important; padding-top: 10px; } .red { font-size: 14px; font-weight: 500; color: #d90000; } /* FORM BASIC */ form.basic fieldset { background: none; padding:0px; border:none; } form.basic ul li input[type="text"] { background: #eeeeee; height: 32px; width: 281px; font-size: 14px; font-family: 'Open Sans' ,Arial, Helvetica, sans-serif; color: #556375; line-height: 32px; padding-left: 15px; border: none; } form.basic ul li textarea { background: #eeeeee; height:92px; width: 281px; font-size: 14px; font-family: 'Open Sans' ,Arial, Helvetica, sans-serif; color: #556375; line-height: 32px; padding-left: 15px; border: none; } form.basic ul li label { cursor: text; font-size: 14px; font-family: 'Open Sans' ,Arial, Helvetica, sans-serif; color: #556375; top: 18px !important; left: 15px !important;} .button, .basic input.button { background: #e33304 url(../img/ui/button-bg.png) repeat-x; font-size: 14px; font-family: 'Open Sans' ,Arial, Helvetica, sans-serif; font-weight: 700; line-height: 40px; height: 40px; width: 130px; border: none; padding: 0; text-transform: uppercase; color: #ffffff; display: block; text-align: center; } .button:hover, .basic input.button:hover { color: #ffffff; } #page-home .bx-wrapper .bx-viewport { background: none; border: none; box-shadow: none; left: auto; } #inner-banner { background: #e33304 url(../img/ui/inner-banner.png) left center; background-size: cover; margin-bottom: 35px; } #inner-banner h1 { line-height: 140px; color: #ffffff; margin-bottom: 0; } /*----------------------------------------------------------------------------------------------------*/ /* HEADER */ /*----------------------------------------------------------------------------------------------------*/ #page-home #header { border-bottom: 5px solid #92c741; } #header { padding: 10px 0; } #logo { width:132px; height:72px; float:left; background:url(../img/ui/logo-new.png) no-repeat; } #info { float: right; margin-bottom: 20px; padding-top: 20px; display:none; } #info span { font-size: 14px; color: #b6c0c1; text-transform: uppercase; float: left; line-height: 25px; margin-right: 10px; } #info a { float: left; border: 1px solid #ccd3d4; font-size: 13px; color: #000000; background:url(../img/ui/red-bullet.png) 60px center no-repeat; padding: 4px 30px 4px 10px; } /* Navigation */ #nav { float: right; clear: right; margin-top: 40px; position: relative; z-index: 100; } #nav > li { float: left; margin-left: 60px; font-family: 'Open Sans' ,Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 600; line-height: 15px; position: relative; } #nav li a { color: #111111; display: block; } #nav li a.active{ color: #234285; } #nav li a:hover { color: #98e325; } #nav > li > ul.dropdown { left: -999em; position: absolute; top: 15px; width: 240px; z-index: 2000; background: #fff; padding: 30px 0px 10px; } #nav > li:hover > ul.dropdown { left:auto; top: 15px; } #nav > li ul li a { padding: 0 10px; font-size: 15px; color: #000000; line-height:26px; } #nav > li ul li a:hover { color: #fff; } #nav > li ul li:hover {background:#98e325;} #nav > li ul li.active { background:#98e325;} /*----------------------------------------------------------------------------------------------------*/ /* BANNER */ /*----------------------------------------------------------------------------------------------------*/ #banner { background:url(../img/banner.jpg) center top no-repeat; background-size:cover; margin-bottom: 55px; } #banner .bxslider li { height: 455px; } #banner .bxslider li span.text-outer { position: absolute; text-align: center; width: 700px; left: 120px; top: 135px; background:url(../img/ui/trans-gray.png) repeat; padding: 35px 40px 40px;} #banner .bxslider li a { height: 100%; display: block; } #banner .bxslider li a span.text { font-size: 50px; font-family: 'Roboto Condensed' ,Arial, Helvetica, sans-serif; color: #ffffff; line-height: 55px;} #banner .bxslider li a span.text span { color: #92c741;} /*----------------------------------------------------------------------------------------------------*/ /* CONTENT */ /*----------------------------------------------------------------------------------------------------*/ #page-home .client-text { margin-bottom: 65px; padding-bottom: 30px; text-align: center; /*border-bottom: 1px solid #e1dddf;*/ } #page-home .client-text h1 { font-size: 36px; line-height: 40px; color: #234285; background: url('../img/ui/line.png')no-repeat bottom center; padding-bottom: 30px; } #page-home .client-text img { margin-left: 40px; display:none; } #page-home .client-text p { color:#2d333b; font-size: 15px; } #feature { margin-bottom: 50px; border-bottom: 1px solid #e1dddf; padding-bottom: 50px; display:none; } ul.feature li { width: 300px; float: left; margin-right: 20px; margin-bottom: 40px; } ul.feature li span { display: block; } ul.feature li span.image { position: relative; border-bottom: 3px solid #fd3309; } ul.feature li span.image img { display: block; } ul.feature li span.image span { font-size: 18px; font-family: 'Open Sans' ,Arial, Helvetica, sans-serif; color: #ffffff; position: absolute; bottom: 0px; padding: 20px 15px 10px; background: url(../img/ui/black-trans.png); width: 270px; line-height: 18px; } ul.feature li span.text-outer { background: #f5f5f5; padding: 15px 13px; } ul.feature li span.text { font-size: 14px; color: #566375; margin-bottom: 10px; line-height: 18px; } ul.feature li span.cta { font-size: 14px; color: #566375; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #ebebeb; } ul.feature li span.mail { padding-left: 30px; background:url(../img/ui/mail.png) left center no-repeat; font-size: 12px; line-height: 15px; } ul.feature li:hover span.cta { color: #fd3309; } #feature .bx-controls-direction a { width: 19px; height: 59px; margin: 0; top: 110px; } #feature .bx-wrapper .bx-prev { background:url(../img/ui/prev.png) left center no-repeat; left: -55px; } #feature .bx-wrapper .bx-next { background:url(../img/ui/next.png) right center no-repeat; right: -55px; } #page-home #content .primary { margin-right: 80px; margin-bottom: 40px; width: 405px; float: left;} #page-home #content .primary.last { margin-right: 0; } #page-home #content .guide { margin-bottom: 10px; display: none; } #page-home #content .guide strong.heading { font-size: 18px; font-weight: 700; color: #000000; margin-bottom: 5px; } .guide span.image { width: 25px; float: left; margin-right: 20px; } #page-home #content .primary p{ color: #999999; font-size:13px; } .guide span.text-outer {float: left; } .guide span.text-outer span.title { font-size: 13px; line-height: 25px; margin-bottom: 20px; display: block; color:#727272; } .guide span.text-outer a { display: inline-block; font-size: 14px; color:#92c741; font-style: italic; } .contact-today { background:url(../img/ui/contact-bg.png) center center no-repeat; background-size: cover; text-align: center; padding: 35px 0 20px; } .contact-today strong.heading { font-size: 63px; color: #ffffff; text-transform: uppercase; margin-bottom: 10px; } .contact-today span.para { color: #a8c4ff; width: 560px; margin: 0 auto 15px; } /* enquiryForm */ #enquiryForm { width: 620px; text-align: center; margin: 0 auto; } #enquiryForm input[type="text"] { background:url(../img/ui/trans-bg.png) repeat; color: #ffffff; width: 601px; } #enquiryForm ul li.left, #enquiryForm ul li.right { width: 305px; } #enquiryForm ul li.left input[type="text"], #enquiryForm ul li.right input[type="text"] { width: 286px; } #enquiryForm ul li.last { clear: both; } #enquiryForm #ctelephone { margin: 0; } #enquiryForm ul li label { color: #ffffff; } #enquiryForm input.button { width: 192px; height: 42px; background: #99cb4e; border: 1px solid #99cb4e; margin: 0 auto; font-weight: 600; line-height: 40px; } /*----------------------------------------------------------------------------------------------------*/ /* ASIDE */ /*----------------------------------------------------------------------------------------------------*/ #aside strong.heading { font-size: 18px; font-weight: 600; color: #92c741!important; margin-bottom: 20px; } .aside-nav { margin-bottom: 0; } .aside-nav li { font-size: 15px; line-height: 20px; margin-bottom: 15px; display: block; background:url('../img/ui/arrow.png')no-repeat left 6px; padding-left: 10px; } .aside-nav li.last { margin: 0; } .aside-nav li a { color: #333333; } .aside-nav li a.active{ color: #234285; } .aside-nav li a:hover { color: #92c741} .aside-nav li span { color: #92c741; margin-right: 5px; } /*----------------------------------------------------------------------------------------------------*/ /* FOOTER */ /*----------------------------------------------------------------------------------------------------*/ #sub-footer { margin-bottom: 45px; } #sub-footer span.call-us { font-weight: 700; color: #92c741; font-size: 20px; text-transform: uppercase; } #sub-footer span.call-us span { font-size: 40px; display: block; } #footer { background:url(../img/ui/footer-bg.png) center center no-repeat; background-size: cover; padding: 35px 0 20px; } #footer ul.footer > li { width: 300px; margin-right: 60px; float: left; } #footer ul.footer li.last { margin: 0; width: 220px; } #footer ul.footer { padding-bottom: 20px; margin-bottom: 30px; border-bottom: 1px solid #555555; display: none; } #footer ul li strong.heading { font-size: 22px; font-weight: 600; color: #cccccc; margin-bottom: 20px; } #footer ul li span.para { color: #999999; font-size: 13px; margin-bottom: 10px; } #footer ul.footer li a { color: #ffffff; font-size: 13px; } #footer ul li span.para span { float: left; width: 185px;] } #footer ul li span.para span.icon { margin-right: 20px; color: #fd3309; width: auto; } #footer ul li span.para a { color: #999999; } #footer #copyright { margin-bottom: 0; float: left; } #footer #copyright li { font-size: 13px; font-weight: 600; color: #ffffff; } #footer #copyright li a{ color:#2e70ff; } #footer #footer-links { float: left; clear: both; margin-bottom:0 ; } #footer #footer-links li { float: left; margin-right: 10px; padding-right: 10px; /*border-right: 1px solid #999999;*/ line-height: 12px; font-size: 12px; font-weight: 600; color:#999999; } #footer #footer-links li a { color: #999999; } #footer #footer-links li.last { border: none; } #footer .social { float: right; padding-top: 0; margin-bottom:0 ; } #footer .social li { margin-right: 20px; float: left; } #footer .social li.last { margin: 0; } #footer .social li a{ background: url(../img/ui/social-icons.png) no-repeat; width: 27px; height: 31px; display: block; } #footer .social li a.twitter { background-position: 0 -31px; } #footer .social li a.googleplus { background-position: 0 -62px; } #footer .social li a.youtube { background-position: 0 -93px; } /* subscribeForm */ #subscribeForm ul li label { font-size: 13px; font-weight: 600; color: #999999; left: 16px !important; } #subscribeForm ul li input[type="text"] { width:183px; height: 30px; padding-right: 100px; border: 1px solid #555555; background: #000000; font-size: 13px; font-weight: 600; color: #999999; } #subscribeForm ul li input.button { background:url(../img/ui/subscribe-bg.png) repeat-x; width: 90px; height: 30px; right: 5px; top: 10px; position: absolute; line-height: 30px; font-size: 13px; font-weight: 600; } /* PROPERTY DETAIL PAGE */ #product-gallery { width: 540px; margin-right: 40px; } #product-gallery li { margin-bottom: 20px; } #product-gallery li a, #product-gallery li img { display: block; } #product-gallery li.moreviews { float: left; margin-right: 20px; width: 120px; } #product-gallery li.last { margin-right: 0; } #product-detail { width: 360px; } #product-detail h2 { font-size: 26px; } #product-detail a.button { float: left; margin: 0 20px 40px 0; } #product-detail .call-us { font-weight: 700; font-size: 12px; color: #000000; text-transform: uppercase; } #product-detail .call-us span { font-size: 22px; color: #fd3309; display: block; } #product-detail .social li { margin-right: 20px; float: left; list-style: none; } #product-detail .social li.last { margin: 0; } #product-detail .social li a{ background: url(../img/ui/social-red.png) no-repeat; width: 28px; height: 31px; display: block; } #product-detail .social li a.twitter { background-position: 0 -31px; } #product-detail .social li a.googleplus { background-position: 0 -62px; } #product-detail .social li a.youtube { background-position: 0 -93px; } /* CONTACT PAGE */ #page-contact #content .triple { width: 300px; float: left; margin-right: 20px; margin-bottom: 50px; } #page-contact #content .triple.last { margin: 0; } #page-contact #content .triple p a {color:#234285; font-weight: 600; } #page-contact #content .triple p a:hover{ color: #98e325;} /* ABOUT US PAGE */ #page-about .client-text h2 { color:#234285; } /*CURRENT OPENINGS */ #page-current-openings #current-openings .job { padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid #666666;} #page-current-openings #current-openings .job.last{ border-bottom: none; } #page-current-openings #current-openings .job .required-skill { width:350px; float:left; } #page-current-openings #current-openings .job .nice-to-have { float:right; width:300px; }