/* Theme Name: WSME Framework Theme URI: http://viewportindustries.com/products/starkers Description: The WSME Wordpress theme! Version: 4.0 Author: Websites Made Easy Ltd Author URI: http://wsme.co.nz Tags: starkers, naked, clean, basic */ /* =========================== CONTENTS: 01 Sensible defaults 02 Typography 03 Media queries =========================== */ /* ---------------------------------------------------------------------------------------------------------- 01 Sensible defaults ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ @import "css/reset.css"; div, article, section, header, footer, nav, li { position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ } .group:after { display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ } body { background:#fff; /* Don't forget to style your body to avoid user overrides */ } ::-moz-selection { background:#ff0; color:#333; } ::selection { background:#ff0; color:#333; } /* ---------------------------------------------------------------------------------------------------------- 02 Typography ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* 14 / 16 = 0.875em (14px equivalent) 16 / 16 = 1em (16px equivalent) 18 / 16 = 1.125em (18px equivalent) 21 / 16 = 1.3125em (21px equivalent) 24 / 16 = 1.5em (24px equivalent) 30 / 16 = 1.875em (30px equivalent) */ /* ---------------------------------------------------------------------------------------------------------- GLOBAL------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ body, input, textarea { background:#323232;color:#666666;font-family:helvetica, arial, sans-serif; font-size:14px;}/*'Proxima Nova','Myriad Pro',Arial,Helvetica,sans-serif;*/ h1, h2, h3, h4, h5, h6 { line-height:1.3; margin-bottom:10px;font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ } h1{font-size:28px; text-transform:normal;} h2{font-size:22px;} h3{font-size:18px;} a{color:#000;} a:hover{color:#020202;} p{margin:5px 0 10px;} /* ---------------------------------------------------------------------------------------------------------- HEADER ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ .header{background:#fff; padding:20px 0;} .phone{color:#a5a5a5; text-align:right; margin-top:10px; font-size:20px; } .phone .light{color:#a5a5a5;} .email{text-align:right;} .email a{color:#a5a5a5; font-size:16px; } .email a:hover{color:#020202; text-decoration:none;} .menu{background:#fff; border-top:1px solid #d8d8d8; border-bottom:1px solid #d8d8d8;} #menu-primary li{display:inline-block; float:left; font-size:14px;} #menu-primary li a{color:#5e5e5e; padding:10px 0 ;display:inline-block; margin:0 15px 0 0; border-bottom:2px solid #fff;} #menu-primary li a:hover, #menu-primary li.current-menu-item a {text-decoration:underline; /*border-bottom:2px solid #323232; */} #menu-primary li ul {display: none; margin: 0; position: absolute;z-index: 9999; background:#fff; min-width:180px;} #menu-primary li ul li { margin: 0; padding: 0; width: 100%;} #menu-primary li ul li a { border-bottom: 1px solid #A8A8A8; font-size: 12px; padding: 4px 6% 3px; margin-bottom:5px; text-shadow: none; width: 88%;} #menu-primary li:hover ul{display:block;} #menu-primary li ul li ul {display: none!important; margin: 0 0 0 180px; top:0; position: absolute;z-index: 9999; background:#fff; min-width:150px;} #menu-primary li ul li ul li{ margin: 0; padding: 0; width: 100%;} #menu-primary li ul li ul li a { border-bottom: 1px solid #a5a5a5;font-size: 12px; padding: 4px 6%; text-shadow: none; width: 88%;} #menu-primary li ul li:hover ul{display:block!important;} .banner{min-height:50px; background:#dedede; border-bottom:1px solid #d8d8d8;padding:2% 0;} .page_banner { min-height: 200px; } /* ---------------------------------------------------------------------------------------------------------- CONTENT ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ .cycle-slideshow{max-height:350px; overflow:hidden;} .woocommerce {float:none;} #content{background:#fff; padding:20px 0;} .woocommerce #content, .woocommerce-page #content{padding:5px 0 20px 0;} .alignright{float:right; margin:0 0 20px 10px;} .alignleft{float:left; margin:10px 10px 10px 0;} /*===============================================================================================*\ Contact \*===============================================================================================*/ .contact_form{background:#fff;} .contact_form p {margin:0;background:#fff;} .contact_form input{width:96%; padding:2%;} .contact_form input.wpcf7-acceptance{width:auto;} .contact_form textarea{width:96%; padding:2%; min-height:82px;background:#fff;} .contact_form .wpcf7-checkbox {width:50%;} .contact_form input[type="submit"] {width:25%;background:#eee; margin-top:10px;} .contact_form input[type="submit"]:hover { background:#ddd;} .contact_form .ajax-loader {} .contact_form span.wpcf7-not-valid-tip {position:absolute; top:-13px; right:0px; background:none; border:none; text-align:right; width:auto; display:block; font-size:10px; color:red;} div.wpcf7-response-output {text-align:right; margin:0!important;} .contact_form < form {margin-bottom:0;} .contact_form .acceptance, input{background:#fff;} input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly]{background-color:#ffc1c1;} .testimonial-container{display:block; border-bottom:1px solid #a8a8a8;padding-bottom:1%; margin-bottom:1%;} .testimonial-container:last-child{border-bottom:none; margin:; padding:0;} .testimonial p{font-style:italic} .testimonial-title{text-align:right;} table{margin-bottom:20px;} table th{background:#a5a5a5; color: #fff; font-weight:bold; padding: 8px 10px; font-size:14px;} table td{padding:5px 10px; border-bottom:1px solid #a5a5a5;} table.pricelist{} table.pricelist tr.titles td{font-weight:bold; background:#ddd;} table.pricelist td{padding:5px 10px; border:1px solid #ddd;} table.history-table td{border-bottom:none;} .product-summary{} .product-summary table{display:block;clear:both; margin:20px 0;} .product-summary table tr:first-child td{ background:#fff;} .product-summary th{background:#fff; color:#666666; font-weight:normal; text-align:left; padding:5px 0; border-right:30px solid #fff; width:33%;} .product-summary table td{width:auto; padding:1px 0;background:none; border-bottom:none; border-right:30px solid #fff;} .product-summary table td:last-child, .product-summary th:last-child{border-right:none;} .expand{font-size:18px;white-space:nowrap;width:156px;} .expand img{width:16px;} .ui-accordion-header {border-top:1px solid #a5a5a5; margin:0; padding:10px 0; color:#a5a5a5;} .ui-accordion .ui-accordion-header:first-child {border:none; padding-top:0;} .ui-state-hover {cursor:pointer; color:#020202;} .ui-state-active {color:#020202;} .ui-state-active .expand{display:none;} .ui-accordion-content img{margin-bottom:20px;} .ui-accordion-content table img{margin:0;} .eco{} h1 .eco{font-size:37px; line-height:28px;} /* ---------------------------------------------------------------------------------------------------------- FOOTER ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ .footer {min-height:50px; padding:20px 0;color:#a8a8a8;font-size:12px;} .footer a{color:#a8a8a8;} .footer a:hover{color:#fff;text-decoration:none;} #wsme{-webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s;} #wsme {display: block!important; min-height: 16px; padding:0 24px 0 0!important; background: url(wsme.png) scroll no-repeat center right transparent; font-size:12px; color:#a8a8a8;} #wsme:hover {background-position: left; color:#FFF; padding:0 0 0 24px!important;text-decoration:none;} /*************WOOCOMMERCE*************************/ .menu li, ul.products li.product h3, ul.products li.product .price, .all-prod-but, .all-prod-but a, .credit a h3, .buyers-guide a h3 { -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } ul.products li.product h3 {position: absolute; line-height: 1; bottom: 0; left: 0; padding:5%!important; min-height:27px; background:#999; filter: alpha(opacity=90)!important; opacity: 0.9!important; color:#fff; width:90%; font-weight:normal;} ul.products li.product:hover h3 {padding:10% 5%!important;} mark.count, mark, h3 mark.count, ul.products .count{display:none!important;} .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce #content input.button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page #respond input#submit, .woocommerce-page #content input.button{display:none!important;} .woocommerce .woocommerce-breadcrumb, .woocommerce-page .woocommerce-breadcrumb{font-size:11px!important; color:#a8a8a8;} /* ---------------------------------------------------------------------------------------------------------- 03 Media queries (using a mobile-first approach) ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ h1.product_title.entry-title { margin-left: -82px; } /* 400 and up */ @media screen and (min-width:400px) { { /* Place your styles here for all widths greater than 400px */ } } /* Retina Display */ @media screen and (-webkit-min-device-pixel-ratio:2) { { /* Place your styles here for all 'Retina' screens */ } }