/*   
Theme Name: Smith Tunbridge Ayres
Theme URI: http://sta-surveyors.co.uk
Description: A custom-made Wordpress theme by the Cybermill
Author: The Cybermill
Author URI: http://cybermill.co.uk
Version: 1
*/

/* -------------------------------------------------------------------------------- */
/* Reset */
/* -------------------------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; }
:focus { outline:0; } body { line-height:1; color:black; background:white; } ol, ul { list-style:none; } table { border-collapse:separate; border-spacing:0; } caption, th, td { text-align:left; font-weight:normal; } blockquote:before, blockquote:after, q:before, q:after { content:''; } blockquote, q {	quotes:'' ''; }
article, aside, figure, footer, header, hgroup, nav, section { display: block; } img, object, embed {max-width: 100%;} form { margin:0; }

html { overflow-y: scroll; }

/* Tables */ table { font-size:inherit; font:100%; border-collapse:collapse; border-spacing:0; } td, td img { vertical-align:top; } th { font-weight:bold; vertical-align:bottom; } td { font-weight:normal; vertical-align:top; }
/* Image fixes */ .ie7 img { -ms-interpolation-mode: bicubic; } .ie6 html { filter: expression(document.execCommand("BackgroundImageCache", false, true)); }


/* -------------------------------------------------------------------------------- */
/* Typography
/* -------------------------------------------------------------------------------- */

body { font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 1.8em; font-weight: 300; color: #fff; }

h1,h2,h3,h4,h5,h6 { clear: both; padding: 0; font-family: 'Open Sans', sans-serif; }

.ie7 h1, .ie7 h2, .ie7 h3 { font-weight: normal; }

h1 { margin:5px 0;  font-size: 28px; line-height: 38px; font-size: 2rem; line-height: 2.286rem; }
h2, h3 { margin:20px 0; font-size: 16px; line-height: 26px; font-size: 1.286rem; line-height: 1.714rem; }

h3 { font-weight: 600; }
h4 { margin:10px 0; font-size: 14px; font-size: 1rem; font-weight: bold; text-transform: uppercase; }

p { margin: 0 0 10px 0; }

/* Link defaults */
a { color: #fff; text-decoration: none; } /* White */ 
a:hover,a:active { border-bottom: 1px solid #a5c741; } /* Green*/ 

/* Lists */
ul { margin: 20px 0 20px 0; list-style: disc inside; }
ol { margin: 20px 0 20px 0; list-style: outside decimal; }
ul li,ol li { margin: 5px 0; }
ul ul { margin: 0 0 0 20px; }

strong { font-weight: bold; }
em { font-style: italic; }
sub { font-size: 11px; }
small { font-size: 0.85%; }
del { text-decoration: line-through; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

pre, code, kbd, samp { font-family: monospace, sans-serif; }
abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor:help; }

hr { clear: both; display: block; height: 1px; border: 0; border: none; border-top: 1px solid #c6c6c6; border-bottom: 1px solid #fff; margin: 30px 0; padding: 0; }

.green { color: #a5c741; }

/* -------------------------------------------------------------------------------- */
/* Buttons, inputs */
/* -------------------------------------------------------------------------------- */

input,select,textarea { display: inline-block; float: none; font-size: 1rem; font-family: sans-serif; color: #002d59; background: #eee; padding: 2%; margin: 0; width: 100%; border: none; border: 1px solid #ccc; box-sizing: border-box;  }
input, select { vertical-align: middle; }

input:focus,select:focus,textarea:focus { color: #111; }

button { width: auto; overflow: visible; }

input[type="radio"] { width: auto !important; vertical-align: text-bottom; }
input[type="checkbox"] { width:auto !important; vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

.clickable, label, input[type=button], input[type=submit], button { cursor: pointer; }

label { font-size: 14px; line-height: 14px; margin-bottom: 10px; font-weight: 300; text-transform: uppercase; color: #eee; }
.req { color: #a5c741; padding-left: 2px; }

/* Default button style */
.button, .wpcf7 .wpcf7-submit { border: none; display: inline-block; width: auto; padding: 10px; margin: 0; font-weight: 300; text-decoration: none; text-transform: uppercase; font-size: 1.222rem; cursor: pointer; }
.button:after, .wpcf7 .wpcf7-submit:after { content: "\00bb"; padding-left: 5px; } 
.wpcf7-submit { float: right; }

/* Button colours */
.button, .wpcf7 .wpcf7-submit { color: #fff; background: #a5c741; }   
.button:hover, .wpcf7 .wpcf7-submit:hover { position: relative; top: 2px; text-decoration: underline; }

.alignright { float: right; padding: 0 0 2% 4%; text-align: right; }
.alignleft { float: left; padding: 0 4% 2% 0; text-align: left; }
.aligncenter { padding: 2% 0; text-align: center; margin: 0 auto;}

p.wp-caption-text { background: #01203D; color: #fff; font-style: italic; padding: 4% 5%; width: 87%; font-size: 14px; line-height: 18px; }
.wp-caption img { display: block; }


/* ---------------------------------------------------------------------------------------------------------------------------------------------- */
/* Layout */
/* ---------------------------------------------------------------------------------------------------------------------------------------------- */
html { overflow-x: hidden; }
html,body { width: 100%; min-width: 100%; }

body { background: #002d59; position: relative; left: 0; }
body.push-toleft { left: -240px; }
#main-menu, body, body.push-toleft { -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease; transition: all 0.3s ease; }

.wrapper { margin: 0 20px; }

.left { float: left; }
.right { float: right; } 

/* Reused across site to align elements centrally within 100% width */
.align { width: 100%; max-width: 1520px; margin: 0 auto; }

    /* Good ol' clearfix */
    .cf:before,.cf:after { content: " "; display: table; }
    .cf:after { clear: both; }
    .cf { *zoom: 1; } /* For IE 6/7 only */
    
    
/* -------------------------------------------------------------------------------- */
/* Header */
/* -------------------------------------------------------------------------------- */

header { padding: 20px 0 0 0; }

#menu-click, #nav-close  { display: block; overflow: hidden; text-indent: -9999px; }

.logo-link:hover, #menu-click:hover, #nav-close:hover { text-decoration: none!important; border-bottom: none!important; } 

.logo-link {  display: block; overflow: hidden; width: 192px; height: 44px; } 
.logo-link img { max-width: 100%; }

#menu-click { background: url('_/images/menu.png') no-repeat top left; width: 72px; height: 71px; position: absolute; top: 0; right: 0; }
#nav-close { background: url('_/images/close.png') no-repeat top left; width: 32px; height: 31px; float: right; margin: 20px; }
.menu-top { height: 71px; border-bottom: 1px solid #a5c741; }


/* -------------------------------------------------------------------------------- */
/* Menu */
/* -------------------------------------------------------------------------------- */

.main-nav { background: #1A426A; width: 240px; min-height: 100%; position: absolute; top: 0; z-index: 1000; right: -240px; }
    .main-nav li { list-style: none; display: block; margin: 0; padding: 0; border-bottom: 1px solid #a5c741; }
    .main-nav ul { padding: 0 10px 40px 10px; border: none; margin-top: 0; }
        .main-nav a { display: block; width: 100%; padding: 20px 0; text-transform: uppercase; font-size: 16px; }
        .main-nav a:hover { border: none; }


/* -------------------------------------------------------------------------------- */
/* Main Area */
/* -------------------------------------------------------------------------------- */

.main-text-area h3 { margin-top: 40px; }

.banner, .main-text-area { text-align: center;}
.inner { padding: 40px 0; }   
.main-content-wrapper, .main-text-area { padding-bottom: 40px; }

.ie7 .main-text-area, .ie8 .main-text-area { clear: both!important; overflow: hidden; }

/*Home page services*/

.services { max-width: 100% !important; }
.services ul { margin: 0; }
    .services li { display: inline-block; vertical-align: top; list-style: none; width: 49%; margin: 0 0 40px 0; text-align: center; }
    .services a { font-size: 1rem; text-transform: uppercase; } 
    .services li:last-child, .services li:nth-last-child(2) { margin-bottom: 0; }
    
.ie7 .services li { float: left; }
    
.icon { display: block; background: #fff; width: 120px; height: 120px; margin: 0px auto 20px auto; overflow: hidden; border-radius: 50%; position: relative; }  
    .icon img { display: block; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; max-width: 80%; height: auto; }
    
.about-us .icon img { max-width: 100%; }
    
.ie7 .icon img { position: static; top: auto; left: auto; right: auto; bottom: auto; margin: 0px auto; }

/*Tabs*/

.tabs { border-top: 1px solid #284d71; } 

#tabs .inner { padding-bottom: 0; }

#show-services { width: 100%;  margin-bottom: 20px; text-align: center; box-sizing: border-box;  }
.tab-menu { margin-bottom: 20px;  }
.tab-menu ul { display: none; }
    .tab-menu li { list-style: none; display: block; }
    .tab-menu li h2 { margin: 0; padding: 0 10px; font-size: 1rem; }
    .tab-menu li a { display: block; padding: 20px 0 ; border-bottom: 1px solid #284d71; }
 
    .tab-pages .icon { display: inline-block; margin: 0 40px 40px 0; float: left; }
    .tab-pages h1, .tab-pages h2, .tab-pages h3, .tab-pages h4, .tab-pages h5, .tab-pages h6 { display: inline;  }
     h2.tab-title { font-size: 1.667rem; line-height: 2rem; display: inline-block; margin: 0 0 20px 0; min-width: 50%; }
     .tab-pages ul { clear: both; margin: 40px 0 0 0; }
     .tab-pages ul li { list-style: disc outside; margin-left: 15px; }
     .ui-state-active a { border-bottom: 1px solid #a5c741; }
     
    .tab-pages .contact-info ul li { list-style: none; margin: 0; }
     
/*About Tabs*/

.qual { padding-left: 5px; font-size: 1rem; }

.contact-info { float: left; }
.column .contact-info { width: 100%; }
.contact-info ul { margin-top: 0; margin-bottom: 40px; }
    .tab-pages .contact-info ul li, .contact-info ul li { list-style: none; margin: 0; }
    .contact-info ul li a { font-size: 12px; }
        .letter { display: inline-block; width: 15px; text-align: center; }
        .contact-info .pipe {color: #a5c741; }
        
/*Contact Page*/

.column, .find-us { text-align: left; }

.column h2, .find-us h2 { font-weight: 300; text-transform: capitalise; width: 100%; margin:0 0 20px 0; padding-bottom: 10px; border-bottom: 1px solid #a5c741; }
.column .contact-info h2, .find-us .address-details h2 { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.acf-map  { height: 360px; }
.address { margin-bottom: 20px; }
.address { text-transform: none\0; font-size: 14px\0; line-height: 28px\0; }

.info-window { width: 200px; color: #333!important; line-height: 18px; }

.address-details { margin-bottom: 20px; font-size: 1rem; line-height: 1.6rem; }
.address-details h3 { font-size: 18px; margin: 0; }

    
/* -------------------------------------------------------------------------------- */
/* Content - Extra */
/* -------------------------------------------------------------------------------- */

#NoScript {position:fixed; top:0; left:0; width:100%; z-index:9999999; background:rgba( 0, 0, 0, 0.5);  text-align:center;}

#NoScript p{color:#fff; padding:20px 150px; font-size:16px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}

/* -------------------------------------------------------------------------------- */
/* Footer */
/* -------------------------------------------------------------------------------- */

footer { margin: 0 10px; border-top: 1px solid #a5c741; padding: 10px 0; font-size: 10px; }
    .pipe { display: inline-block; padding: 0 0 0 5px; }
    .pipe:after { content: "\007c"; padding: 0 5px 0 0; }
    
.reg, .reg-address { display: block; }
.reg-address { line-height: 14px; margin: 4px 0; }
.company-info .pipe { display: none; }


/* -------------------------------------------------------------------------------- */
/* Comments */
/*-------------------------------------------------------------------------------*/

.post-comments { float:left; border:1px solid #333; border-left:none; border-right:none; padding:0 0 20px 0; margin:0 0 20px 0; }

    #comments { width:100%; float:left; margin:20px 0; clear:both; }

.commentlist ul { margin:0; }
        .commentlist li { width:100%; float:left; clear:both; margin:0; padding:0; }

.commentlist .comment-body { background:#fff; padding:10px; margin:5px 0; }

        .commentlist .comment-author { font-size:16px; line-height:30px; color:#4a4a4a; }  
.commentlist .comment-author cite { font-weight:bold; }

.commentlist .comment-author img { display:none; margin:0 !important;  }

        .commentlist .comment-meta { font-size:12px; margin:0 0 10px 0; }

        .commentlist .comment-meta a { }
            .commentlist .comment-meta a:hover { }

        .commentlist .reply { margin:15px 0 0; text-indent:10px; }
            .commentlist .reply:before { content:'\BB'; }

.commentlist .children { margin:0 0 0 15px; list-style:none; font-size:16px; clear:both; }

.commentlist .children .comment-body { background:#ccc; }

#respond { padding:15px; clear:both; }

#respond h2 { width:100%; float:left; font-size:18px; text-transform:uppercase; font-weight:normal; color:#fff; margin:0 0 10px 0; }

#respond form,
#respond textarea,
#respond input { float:none; }

    #respond form input,
    #respond form textarea { margin:10px 0; border:none; font-family:'courier new',monospace; }

#respond #submit { display:inline-block; padding:8px 15px; margin:0 3px; cursor:pointer; background:#d1204e; font-family:arial,sans-serif; color:#fff; border-radius:0; border:none; box-shadow:0px 0px 2px 0px rgba(0, 0, 0, 0.3 ); }

#respond #submit:hover { background:#1d99d5; }


/* -------------------------------------------------------------------------------- */
/* CF7  */
/* -------------------------------------------------------------------------------- */

/* Contact Page form  */
.field { margin-bottom: 40px; }

.wpcf7 textarea    { height: 180px; }

/* Responses */
.wpcf7 .wpcf7-display-none { display: none; }

.wpcf7 .wpcf7-not-valid-tip { color: #a5c741; font-size: 14px; clear: both; float: right; margin-top: 10px; }
.ie7 .wpcf7 .wpcf7-not-valid-tip { width: 100%; }

.wpcf7 .wpcf7-validation-errors, .wpcf7 .wpcf7-mail-sent-ok  { clear: both; margin: 10px 0 40px 0; padding: 10px 20px; border: none; font-weight: normal; background: #a5c741; color: #fff; line-height: 20px; }
.wpcf7 .wpcf7-mail-sent-ok { background: #a5c741;}

.wpcf7 img.ajax-loader { padding: 0 15px; border: none; z-index: 9999; }

.wpcf7 .wpcf7-form-control-wrap { position: static; }

.wpcf7 .wpcf7-not-valid-tip-no-ajax { color: #a5c741; font-size: 12px; display: block; }


/* -------------------------------------------------------------------------------- */
/* Media Queries  */
/* -------------------------------------------------------------------------------- */


@media handheld, only screen and (min-width: 420px) {

.icon { width: 140px; height: 140px; }

.pipe { padding: 0 0 0 10px; }
.pipe:after { padding: 0 10px 0 0; }

.contact-info ul li a { font-size: 1rem; }

}

@media handheld, only screen and (min-width: 580px) {  

.logo-link { width: 311px; height: 71px; }

.services li { width: 32.5%; }
.services li:nth-last-child(3) { margin-bottom: 0; }    



}


@media handheld, only screen and (min-width: 750px) { 

body { font-size: 16px; }
.address { font-size: 16px\0; line-height: 32px\0; }

h1 { font-size: 32px; line-height: 46px; font-size: 2rem; line-height: 2.286rem; }
h2, h3 { font-size: 18px; line-height: 28px; font-size: 1.286rem; line-height: 1.714rem; }  
h4 { font-size: 16px; font-size: 1rem;  }


header { padding: 40px 0 0 0; }

.icon { width: 170px; height: 170px; }  
.icon img { max-width: none; }
.services .icon { margin-bottom: 40px; }

.column h2, .find-us h2 { margin:0 0 40px 0; }

.main-content-wrapper, .main-text-area { padding-bottom: 80px; }
.inner { padding: 80px 0;  }  

.tab-menu, .tab-pages { float: left; width: 30%; }

#tab-menu { display: block!important; }
#show-services { display: none; }

.tab-menu {  border-right: 1px solid #a5c741; margin-right: 8%; box-sizing: border-box; }
    .tab-menu li { list-style: none; width: 92%; margin: 0; padding-right: 8%; }
    .tab-menu li h2 { margin: 0; padding: 0; font-size: 1.286rem; }
    .tab-menu li a { width: 80%; }
    .tab-menu li.ui-state-active { background: url('_/images/selected-tab.png') no-repeat 100% 40%; }


.tab-pages { width: 62%; } 
.ie7 .tab-pages { width: 60%; }

.column, .address, .acf-map, .company-info { float: left; }

.column { width: 40%; }
.column:first-child, .address { margin-right: 20%; }

.address { width: 20%; }
.acf-map { width: 60%; margin-top: 8px; }

.company-info, .cybermill { width: 100%; }
.cybermill { float: right; text-align: right; }

.reg, .reg-address, .company-info .pipe { display: inline; }

}


@media handheld, only screen and (min-width: 980px) { 

.company-info, .cybermill { width: 80%; }
.cybermill { width: 20%; }

.acf-map  { height: 405px; }

}

@media handheld, only screen and (min-width: 1024px) { 

.mobile { display: none !important; }
body { font-size: 18px; }
.address { font-size: 18px\0; line-height: 36px\0; }

.main-nav { background: none; width: auto; height: auto; position: static; top: auto; right: auto; }
    .main-nav ul, .main-nav li { padding: 0; border-bottom: none; }
    .main-nav ul { padding: 0; }
    .main-nav li { border-left: 1px solid #a5c741; display: block; float: left; padding: 60px 40px 0px 20px; }
    .main-nav li:last-child { padding-right: 0; }
        .main-nav a { display: block; width: auto; padding: 0; margin: 0; text-transform: uppercase; font-size: 1rem; border-bottom: 1px solid #002D59;}
        .main-nav a:hover, .current_page_item a { border-bottom: 1px solid white; }

.icon img { max-width: 100%; }


}

@media handheld, only screen and (min-width: 1140px) {  


h1 { margin:5px 0;  font-size: 60px; line-height: 72px; font-size: 3.333rem; line-height: 4rem; }
h2, h3, .services a { margin:20px 0; font-size: 24px; line-height: 34px; font-size: 1.333rem; line-height: 1.889rem; }

.logo-link { width: 412px; height: 93px; }

.main-content-wrapper, .main-text-area { padding-bottom: 140px; }
.middle { max-width: 80%; margin: 0px auto; }
.inner { padding: 140px 0; }

.icon { width: 200px; height: 200px; } 

footer { margin: 0 50px; }



}


@media handheld, only screen and (min-width: 1240px) {
  
.main-nav li { padding-right: 80px; }


}