/* * Natista - Theme * * WARNING: This file is a core part of the * BNE HTML Framework & Natista Theme. This theme * is designed around this file NEVER being altered. * It is advised that any edits to the way this file * displays its content be done with the custom.css file * already provided for you in /assets/css/custom.css * then add that file into your page * * @author Kerry Kline * @copyright Copyright (c) 2013, Kerry Kline * @link http://www.bluenotesentertainment.com * @package BNE HTML Framework * @package Natista * * @updated: 03/16/2013 * * * === Table of Content === * * 1) General Page & Typography Styles * 2) Header Section * 3) Primary Menu * 4) Mobile Navigation Menu * 5) Featured Section * 6) Main Content Section#footer-copy-wrapper * 7) Footer Section * 8) Blog Loop / Single Post * 9) Buttons * 10) Images * 11) Forms * 12) Flexslider * 13) Tabs and Toggles * 14) Tables * 15) Additional Responsive Settings/Overrides * */ /* ============================================================ * 1) General Page & Typography Styles * ========================================================= */ body {background: url('../images/bg.png') repeat; } /* Main container of each section */ .container { width: 100%; max-width: 1100px; } .inner-content { padding: 20px; } /* == Headings == */ h1, h2, h3, h4, h5, h6 {font-family: 'Exo', sans-serif;} .entry-title, #footer-wrapper .widget-title { border-bottom: 8px #77be43 double; } .entry-title { text-align:left; } .entry-title.center { text-align:center; } /* == Alignments == */ .aligncenter, div.aligncenter { margin-bottom:15px; } /* ============================================================ * 2) Header Section * ========================================================= */ #header-wrapper .inner-content { padding-bottom: 0px; } #header-wrapper .message .button {margin-right:0px;} /* ============================================================ * 3) Primary Menu * ========================================================= */ /* == Main Menu BG == */ #access, .js #access { background-color: #012349; z-index: 999; border-left: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid #012349; border-radius: 0px; background-image: linear-gradient(top, #3288cf, #0a5599); border-bottom-style: none; border-bottom-color: inherit; border-bottom-width: medium; } /* == Level 1 Only == */ #primary-menu > li { border-right: 1px solid #000; /* IE < 9 */ border-right: 1px solid rgba(0, 0, 0, 0.15); border-left: 1px solid rgba(255, 255, 255, 0.15); } #primary-menu > li > a { line-height: 40px; padding: 5px 20px; font-weight:normal; display: block; text-shadow: 0 1px rgba(0, 0, 0, 0.3); color: #ffffff; font-size: 16px; } /* Transition */ #primary-menu > li, #primary-menu > li:hover { -webkit-transition: background-color .2s linear, color .2s linear; -moz-transition: background-color .2s linear, color .2s linear; -o-transition: background-color .2s linear, color .2s linear; -ms-transition: background-color .2s linear, color .2s linear; transition: background-color .2s linear, color .2s linear; } /* Active State */ #primary-menu > li > a.active { background: #0E468C; /* IE < 9 */ background: rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); } #primary-menu > li:first-child a.active, #primary-menu > li:first-child a:hover { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } /* Hover State */ #primary-menu > li:hover { background: #0E468C; background: rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-left: 1px solid rgba(0, 0, 0, 0.2); border-right: 1px solid rgba(0, 0, 0, 0.2); } #primary-menu > li > a:hover { color: #77be43; background: none; } /* == Level 2 == */ #primary-menu > li > ul { margin-top: 52px; } #primary-menu ul { background: transparent; /* IE < 9 */ background: rgba(255, 255, 255, 0.95); -webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); } #primary-menu ul a { color: #666; font-weight: 400; text-transform: none; font-size: 14px; text-shadow: none; border-top: 1px solid rgba(0, 0, 0, 0.05); line-height: 1.6em; padding: 14px 20px 14px 20px; } #primary-menu ul a:hover { background-color: rgba(0, 0, 0, 0.03); color:#012349; } /* ============================================================ * 4) Mobile Navigation Menu * ========================================================= */ /* * With this theme, we're going to not use the default * select mobile nav that is called from bne-plugins.js. * Instead, we're going to use a Responsive button that displays * the same navigation as above and called from theme.js * (The select Nav is disabled via /framework/theme/js/theme.js) */ /* Hide Menu Button Initially */ #menu-icon { display: none; } /* Show the Mobile Menu & Menu Button when the viewport is < 600px */ @media screen and (max-width: 600px) { /* == Menu Icon == */ #menu-icon { line-height: 1em; width: inherit; text-align: center; display: block; /* show menu button */ background:none; text-align: center; box-shadow: none; border:none; color:white; text-shadow: 0 1px rgba(0, 0, 0, 0.3); -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } /* == Mobile Nav Background == */ #primary-menu { clear: both; position: relative; top: 100%; width: auto; z-index: 10000; padding: 0px; margin-bottom:20px; display: none; /* visibility will be toggled with jquery */ } #primary-menu li { clear: both; float: none; margin:0; } /* == Links == */ #primary-menu a, #primary-menu ul a { display: block; } #primary-menu li a { font-size: 1em;color: white; } /* == Top level Hover State == */ #primary-menu > li > a:hover { } /* == Top Level Active State == */ #primary-menu li a.active { } /* == Children == */ #primary-menu ul { width: auto; position: static; display: block; border: none; } #primary-menu li ul { margin-top: 5px; margin-left:20px; background: rgba(0,0,0,.2); } #primary-menu li li a:hover { background: none; color: white;} } /* == Ensure #primary-menu is visible when viewport is > 600px == */ @media screen and (min-width: 601px) { #primary-menu { display: block !important; margin-left: 19px; } } /* ============================================================ * 5) Top Content Wrapper * ========================================================= */ #featured-wrapper .inner-content { padding-top: 0px; padding-bottom:0px;} /* == Flexslider in the Top Content Wrapper == */ #featured-wrapper .flexslider { margin: 0px; background: none; padding: 0px; border: none; position: relative; -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; zoom: 1; z-index: 2; } /* #featured-wrapper .flexslider:before, #featured-wrapper .flexslider:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } #featured-wrapper .flexslider:after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; } */ /* * Add a shadow to the featured slider's frame * Controlled via JS */ .slider-shadow { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-origin: padding-box; background-position: 0 0; background-repeat: no-repeat; background-size: 100% auto; margin:0px auto\0/; /* IE 8 */ max-width: 900px\0/; /* IE 8 */ position: relative; z-index: 1; } .slider-shadow.shadow-type1 {background-image: url('../images/shadow1.png'); margin-bottom: -30px; height: 30px; } .slider-shadow.shadow-type2 {background-image: url('../images/shadow2.png'); margin-bottom: -30px; height: 30px; } /* ============================================================ * 6) Main Content Section * ========================================================= */ #main-content-wrapper .inner-content { padding-top: 0px; padding-bottom:20px;} #main-content-wrapper .canvas { background:#ffffff; border: none; } /* == Sidebar == * .sidebar { padding: 7px 0px 10px 0px; } /* ============================================================ * 7) Footer Section * ========================================================= */ /* == Scroll To Top Button Displayed via theme.js == */ .scrollToTop {float: right; display: block; margin-top: -40px !important; position: relative;z-index: 2;} /* == Top Footer Area == */ #footer-wrapper { background: #3ab54a; border-top:1px solid #ccc; -webkit-box-shadow: 0 5px 5px -6px rgba(0, 0, 0, 0.5) inset; -moz-box-shadow: 0 5px 5px -6px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 5px 5px -6px rgba(0, 0, 0, 0.5) inset; } /* == Second Footer Area (Copy) == */ #footer-copy-wrapper { background-color: #012349; box-shadow: 0 0.5px 3px rgba(0, 0, 0, 0.5) inset; color: white; background-image: linear-gradient(top, #3288cf, #0a5599); } #footer-wrapper h2 { font-weight:bold; color: #012349; } #footer-copy-wrapper .footer-logo { max-width: 200px; } #footer-copy-wrapper .row p { margin-bottom:0px; } #footer-copy-wrapper .bne-contact-bar { padding-top:13px; padding-bottom:13px; } #footer-copy-wrapper a { color: white; } /* == Footer Menu == */ #footer-navigation ul { margin:0; padding:0; float:right; } #footer-navigation li { list-style: none; text-transform: normal; position:relative; z-index:98; float:left; padding:0 7px; margin: 0px; cursor:pointer; } #footer-navigation li a { color: white; } #footer-navigation li a:hover { color: white; text-decoration: underline; } /* ============================================================ * 8) Blog Loop / Single Post * ========================================================= */ /* == Individual Blog Post Spacing == */ .blog-post { margin: 0px 0px 60px 0px; } .entry-meta { text-align: left; } /* Comments == */ #comments .comment-body { border: none; } #comments ul.children { border-left: none;} /* ============================================================ * 9) Buttons * ========================================================= */ /* DEFAULT STYLES */ /* ============================================================ * 10) Images * ========================================================= */ /* DEFAULT STYLES */ /* ============================================================ * 11) Forms * ========================================================= */ /* DEFAULT STYLES */ /* ============================================================ * 12) Flexslider * ========================================================= */ /* DEFAULT STYLES */ /* ============================================================ * 13) Tabs and Toggles * ========================================================= */ /* == Toggles == */ .toggle-trigger a:before {color: inherit; font-size: 1.1em;} .toggle-trigger a:hover {opacity: 1;} .toggle-content {border: 1px solid #e5e5e5; border-top:none;} .toggle-trigger a { background-color: #f6f6f6; background-image: -webkit-linear-gradient(top, #fff, #f6f6f6); background-image: -moz-linear-gradient(top, #fff, #f6f6f6); background-image: -ms-linear-gradient(top, #fff, #f6f6f6); background-image: -o-linear-gradient(top, #fff, #f6f6f6); background-image: linear-gradient(top, #fff, #f6f6f6); cursor: pointer; border: 1px solid #e5e5e5; font-size: 1.0em; font-weight: bold; } .toggle-trigger a.active { background-color: #3288cf; box-shadow: 0 1px 8px rgba(0,0,0, .6) inset; color: white; border-color: #006bc5; background-image: linear-gradient(top, #3288cf, #0a5599); } /* ============================================================ * 14) Tables * ========================================================= */ /* DEFAULT STYLES */ /* ============================================================ * 15) Additional Responsive Settings/Overrides * ========================================================= */ /* == All Mobile Sizes (devices and browser) == */ @media only screen and (max-width: 768px) { /* Font size for Primary Menu */ #primary-menu > li > a {font-size: .9em; } /* Center Footer Copy and Nav */ #footer-copy-wrapper { text-align:center; } #footer-navigation ul { margin:0 auto; display: inline-block; float:none; } /* Flexslider Caption */ .flex-caption {font-size:.7em;} } /* 600 matches the default viewport of when the main menu shifts to a Button menu */ @media only screen and (max-width: 600px) { /* Center Social Icons */ .bne-contact-bar ul { float: none; text-align: center; } .bne-contact-bar li { display: inline-block; float: none; margin: -1px; } #header-widget, #header-wrapper #header-widget .message { text-align: center; } }