/* Theme Name: Bare Author: Creative Unit Author URI: http://www.creativeunit.com.au/ Version: 1.2.1 */ /* ----------------------------------------------------------------------------- CONTENTS ----------------------------------------------------------------------------- 1. Constants 2. Boilerplate overrides 2.1. Base 2.2. Links 2.3. Typography 2.4. Forms 3. Globals 3.1. Tags -- headings, etc. 3.2. Classes 4. Template styles 4.1. Header 4.2. Footer 4.3. Content 5. Page-specific styles 5.1. Blog 1 5.2. Home 5.3. Preview 5.4. Contact 5.4.1. Form /* ----------------------------------------------------------------------------- CONSTANTS 1 -------------------------------------------------------------------------- */ /* Colours Name 100% 50% 25% Yellow #fed300 Cyan #00aeef /* Fonts OpenSansLight OpenSansLightItalic OpenSansRegular OpenSansItalic OpenSansSemibold OpenSansSemiboldItalic OpenSansBold OpenSansBoldItalic OpenSansExtrabold OpenSansExtraboldItalic /* ----------------------------------------------------------------------------- BOILERPLATE OVERRIDES 2 -------------------------------------------------------------------------- */ /* Base */ html { font-family: 'OpenSansRegular', Arial, sans-serif; -webkit-font-smoothing: antialiased; } body {} ::selection, ::-moz-selection {} /* Links */ a, a:visited { color: #00aeef; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } a:hover { text-decoration: none; } a:active {} a.button { background-color: #555; border-radius: 5px; color: #fff; float: right; font-family: 'OpenSansBold', Arial, sans-serif; font-size: 0.9em; margin: 0 0 5px 5px; padding: 5px 20px; text-decoration: none; text-transform: uppercase; } a.button:hover, a.button-hover { background-color: #000; margin: 5px 0 0 5px; } a.button:active {} /* Typography */ b, strong { font-family: 'OpenSansBold', Arial, sans-serif; font-weight: normal; } blockquote {} blockquote em {} cite, em, i, q { font-family: 'OpenSansItalic', Arial, sans-serif; font-style: normal; } q:before { content: '\201C'; } q:after { content: '\201D'; } /* Forms */ input, select, textarea { border: 1px solid #ddd; font-family: 'OpenSansRegular', Arial, sans-serif; -webkit-font-smoothing: antialiased; padding: 9px; } select { -webkit-appearance: none; background: #fff url('img/arr.png') 100% 50% no-repeat; border-radius: 0; } textarea {} input[type="submit"] { background-color: #00aeef; color: #fff; } input[type="submit"]:hover {} input[type="submit"]:active {} input[type="submit"][disabled="disabled"] { background-color: #ddd; color: #fff; } /* ----------------------------------------------------------------------------- GLOBALS 3 -------------------------------------------------------------------------- */ /* Tags 3.1 */ h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1 { color: #555; float: left; font-family: 'OpenSansBold', Arial, sans-serif; font-size: 2.5em; line-height: 1.2; margin: 0; } h1.long { font-size: 2em; line-height: 1.4; width: 530px; } h1.long-2 { margin-bottom: 0.5em; } h2 { font-family: 'OpenSansBold', Arial, sans-serif; font-size: 2.5em; margin: 0.4em 0; } h3 { font-size: 2em; font-family: 'OpenSansBold', Arial, sans-serif; margin: 0.5em 0; } h3 span { background-color: #222; color: #fff; padding: 0 10px; } /* Classes 3.2 */ .attachment-medium { float: right; margin: 1em 0 1em 35px; } .col_1 { float: left; width: 50%; } .col_2 { float: left; text-align: right; width: 50%; } .content-box { border-top: 1px dotted #ccc; padding: 1em 0; } .fax, .ph1, .ph2 { text-transform: uppercase; } .full-width { width: 100% !important; } .light { font-family: 'OpenSansLight', Arial, sans-serif; } .numb { cursor: text; text-decoration: none; } .to-none { text-transform: none; } .to-upper { text-transform: uppercase; } .transition { transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } .user-submitted h1 { float: none; font-size: 1.8em; line-height: 1.4; margin: 0.67em 0; } .user-submitted h2 { font-size: 1.6em; margin: 0.83em 0; } .user-submitted h3 { font-size: 1.4em; margin: 1em 0; } .user-submitted h4 { font-size: 1.2em; } .user-submitted h5 { font-size: 1em; } .user-submitted h6 { font-size: 0.8em; } .user-submitted img {} /* ----------------------------------------------------------------------------- TEMPLATE STYLES 4 -------------------------------------------------------------------------- */ /* Header 4.1 */ #main-header { position: relative; } .royalSlider { height: 385px; width: 100%; } .royalSlider > img { visibility: hidden; } .rsMinW .rsBullets { z-index: 999; } .rsMinW .rsArrowLeft, .rsMinW .rsArrowRight { bottom: 216px; z-index: 999; } #slider-overlay { background: url('img/gradient.png') repeat-y; height: 385px; position: absolute; top: 0; width: 100%; z-index: 998; } #slider-overlay .content { left: 30px; margin-top: -3em; position: absolute; top: 50%; width: 40%; } #slider-heading { color: #fff; font-family: 'OpenSansBold', Arial, sans-serif; font-size: 3em; line-height: 1; text-shadow: 0 0 5px #000; } #slider-caption { background-color: #ccc; background-color: rgba(255, 255, 255, 0.8); border-radius: 10px; color: #222; display: block; font-size: small; margin: 1em 0; padding: 10px; text-decoration: none; } #slider-caption:hover { background-color: #fff; } #top-bar { background-color: #000; color: #fff; font-size: small; padding: 10px; } #main-nav { font-size: small; position: absolute; right: 0; top: 0; z-index: 999; } #main-nav ul { margin: 0; padding: 0; } #main-nav ul li { float: left; } #main-nav ul li a { color: #fff; display: block; padding: 10px; text-decoration: none; } #main-nav ul li a:hover { background-color: #444; } .page-template-page-about-php .li-2 a, .page-template-page-services-php .li-3 a, .page-template-page-products-php .li-4 a, .page-template-page-promotions-php .li-5 a, .page-template-page-privacy-php .li-6 a, .page-template-page-contact-php .li-7 a, .home .li-1 a { background-color: #fed300 !important; color: #000 !important; } #subheader { background: url('img/subheader.png') no-repeat 50% 0; min-height: 174px; padding: 20px 30px; } #phone-number-hero { float: right; font-family: 'OpenSansBold', Arial, sans-serif; font-size: 2em; margin: 0; } #phone-number-hero .ph1 { color: #000; text-decoration: none; } #subtitle { clear: left; float: left; font-family: 'OpenSansBold', Arial, sans-serif; font-size: 1.5em; line-height: 1.2; margin: 0; } /* Footer 4.2 */ #specials { background: #ddc07c url('img/bg-bottom.jpg') no-repeat 50% 100%; padding: 80px 0 70px; position: relative; } #specials>img { position: absolute; top: 0; } #specials>div.grid_22 { position: relative; } #specials-header { background-color: #000; border-radius: 10px; color: #fff; display: block; font-family: 'OpenSansBold', Arial, sans-serif; font-size: 1.5em; height: 60px; line-height: 60px; padding: 0 20px; position: relative; text-decoration: none; } #specials-header span { float: left; } #specials-header span.out, #specials-header span.over { color: #fed300; margin-left: 20px; } #specials-header span.over { height: 0; overflow: hidden; padding-left: 10px; width: 0; } #specials-header:hover span.out { display: none; } #specials-header:hover span.over { color: #fff; height: auto; padding-left: 0; width: auto; } #specials-header figure { display: none; height: 126px; position: absolute; right: 10px; top: -40px; width: 233px; } #list-of-specials { list-style-type: none; margin: 15px 0; padding: 0; } #list-of-specials li { float: left; margin: 0 0 5px 15px; width: 280px; } #list-of-specials li.item_1 { clear: left; margin: 0 0 5px; } #list-of-specials li a { color: #fff; display: block; margin-bottom: 10px; text-decoration: none; } #list-of-specials li a:hover { margin: 10px 0 0; } .specials-content { background-color: #000; border-radius: 10px; font-size: 0.8em; height: 240px; padding: 20px; } .specials-content h3 { color: #fed300; font-size: 1.6875em; margin: 0; } .specials-content h3 span { background-color: transparent; padding: 0; } .specials-content .attachment-medium { float: none; height: auto; margin-left: 0; width: 100%; } .specials-content figure { float: right; margin: 1em 0 1em 10px; } .specials-content p strong { color: #fed300; font-size: 1.125em; } .specials-item-footer { background-color: #fed300; border-radius: 10px; color: #000; font-family: 'OpenSansBold', Arial, sans-serif; padding: 10px 20px; text-transform: uppercase; } #list-of-specials li a:hover .specials-item-footer { background-color: #fff; } #contact { background-color: #444; color: #fff; padding: 45px; text-transform: capitalize; } #contact a { color: #fff; } #contact h2 { color: #fed300; margin: 0; } #contact p { font-size: 0.9em; } #contact figure { float: right; margin: 1em 0 1em 10px; } #contact figure img { border-radius: 10px; } #contact .ph1 { color: #fed300; font-family: 'OpenSansBold', Arial, sans-serif; font-size: 1.5em; line-height: 1; } #map { background-color: #555; float: right; height: 350px; width: 400px; } #subfooter_1 { background-color: #fed300; font-size: small; line-height: 1; padding: 10px 45px 10px 30px; } #footer-nav { float: left; } #footer-nav ul { list-style-type: none; margin: 0; padding: 0; } #footer-nav ul li { float: left; border-right: 1px dotted #000; } #footer-nav ul li a { color: #000; display: block; margin: 5px 0; padding: 0 12px; text-decoration: none; } #footer-nav ul li a:hover { margin: 10px 0 0; } #subfooter_1 .ph1 { color: #fff; float: left; font-family: 'OpenSansBold', Arial, sans-serif; margin: 5px 0 5px 12px; } #signature { float: right; margin: 5px 0; } #signature a { color: #000; text-decoration: none; } #signature a:hover { border-bottom: 1px dotted #000; } #subfooter_2 { font-size: small; padding: 15px 45px; } /* Content 4.3 */ #content { padding: 25px 45px 65px; } /* ----------------------------------------------------------------------------- PAGE-SPECIFIC STYLES 5 -------------------------------------------------------------------------- */ /* Blog 1 5.1 */ .blog-1 #main-nav, .blog-1 #phone-number-hero, .blog-1 #subtitle { display: none; } #list-of-sites { list-style: none; padding: 0; } #list-of-sites li a { border-top: 1px solid #eee; display: block; padding: 9px 0; text-decoration: none; } #list-of-sites li a .title { float: left; } #list-of-sites li a .status { background: #ccc; border-radius: 2px; color: #fff; float: right; font-size: small; height: 1.75em; line-height: 1.75; text-align: center; text-transform: uppercase; width: 80px; } #list-of-sites li a.pending .status { background: #ffb85b; } #list-of-sites li a.live .status { background: #5dc57d; } #list-of-sites li a:hover { padding-right: 40px; } #list-of-sites li a.pending:hover { border-top: 1px solid #ffb85b; } #list-of-sites li a.pending:hover .title:after { content: ' — Preview'; } #list-of-sites li a.live:hover { border-top: 1px solid #5dc57d; } .blog-1 #specials-header span.over { height: auto; width: auto; } .blog-1 #main-footer { border-top: 1px solid #eee; } .blog-1.home #main-footer { border-top: 0; } .blog-1 #contact { display: none; } .blog-1 #subfooter_1 { display: none; } /* Home 5.2 */ .home #main-nav { background-color: #000; background-color: rgba(0, 0, 0, 0.5); border-radius: 5px; right: 10px; top: 10px; } .home #main-nav ul { padding: 0 20px; } .home #main-nav ul li a:hover { background-color: #000; } #three-ws { padding: 30px 0; } #thumbnail { height: 209px; position: relative; } #thumbnail img { border-radius: 10px; } #thumbnail figcaption { background-color: #000; border-radius: 10px; bottom: 0; color: #fff; font-family: 'OpenSansBold', Arial, sans-serif; font-size: 0.9em; padding: 5px; position: absolute; text-align: center; width: 220px; } #thumbnail figcaption em { font-family: 'OpenSansBold', Arial, sans-serif; line-height: 1; } #three-ws h2 { margin: 0 10px; } #three-ws .content-box { background-color: #eee; border-top: 0; border-radius: 10px; font-size: 0.8em; overflow: hidden; padding: 0 10px; } #three-ws .content-box p { margin: 10px 0; } /* Preview 5.3 */ html.preview { height: 100%; } html.preview body { background: #ffd204 url('img/swirl.gif') no-repeat 50% 75%; margin: 0; } html.preview body div { font-family: 'OpenSansLight', Arial, sans-serif; font-size: 2em; left: 1em; margin-top: -1em; position: absolute; right: 1em; text-align: center; top: 50%; } html.preview body div em { background-color: #000; color: #fff; font-family: 'OpenSansLightItalic', Arial, sans-serif; } /* Contact 5.4 */ .page-template-page-contact-php #content { padding: 25px 35px 65px 45px; } /* Form 5.4.1 */ .wpcf7-form { margin: 1em 0; } .wpcf7-form-fields { list-style-type: none; margin: 0; padding: 0; } .wpcf7-form-fields li { float: left; margin: 5px 0; width: 440px; } .wpcf7-form-fields input { width: 410px; } .wpcf7-form-fields select { width: 430px; } .wpcf7-form-fields textarea { width: 850px; } .wpcf7-form-fields input[type="submit"] { text-transform: uppercase; width: 430px; } .wpcf7-validates-as-required, .wpcf7-quiz { background-image: url('img/asterisk.png'); background-position: 100% 10px; background-repeat: no-repeat; } .wpcf7-form-fields .empty { color: #bbb; } .wpcf7-form-fields .valid { background-color: #dfd; background-image: none; } .wpcf7-form-fields .invalid, .wpcf7-not-valid { background-color: #fdd; background-image: none; color: #222; } .wpcf7-not-valid-tip-no-ajax { clear: both; display: block; font-size: small; padding: 5px 10px; } .wpcf7-response-output { background-color: #eee; border: 0 !important; float: left; margin: 5px 0 !important; padding: 10px !important; text-align: center; width: 850px; } .wpcf7-display-none { display: none; } .wpcf7-mail-sent-ok { background-color: #dfd; } .wpcf7-validation-errors { background-color: #fdd; }