/* * Centium Prime - Professional Business Theme * * WARNING: This file is a core part of the * BNE HTML Framework & Centium Prime 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 Centium Prime - Professional Business Theme * * @updated: 03/16/2013 * * * === Table of Content === * * 1) General Page & Typography * 2) Header * 3) Main Menu * 4) Mobile Navigation Menu * 5) Featured * 6) Main Content * 7) Footer * 8) Plugins (Flexslider & PrettyPhoto) * 9) Buttons * 10) Images * 11) Blog Loop / Single * 12) Forms * 13) Tabs & Toggles * 14) Tables * 15) Additional Responsive Settings/Overrides * */ /* ============================================================ * 1) General Page & Typography * ========================================================= */ /* == Global Page Styles == */ body { background: #ffffff; background-image:none; } .inner-content { padding: 20px; } /* == General Text == */ ::selection { background: #0099ff; color: #ffffff; opacity: 1; text-shadow:none; } /* == Headings == */ h1, h2, h3, h4, h5, h6 {font-family:Georgia, "Times New Roman", Times, serif; } .entry-title { margin-bottom: 1.0em; } .blog-post .entry-title { margin-bottom: auto; } /* == Links == */ #footer-wrapper a {text-shadow: none;} /* == List == */ /* == Widgets == */ #footer-widgets .widget-title {color: white; text-shadow:none;} /* ============================================================ * 2) Header * ========================================================= */ #header-wrapper { background: #663366 url('../images/header-wrapper-bg.png') repeat-x; } #header-wrapper #branding { margin-bottom: 0px; } /* == Contact Buttons in Header == */ #header-wrapper #header-widget .bne-contact-bar { padding-top:10px;} /* == Header Widget Text/Message == */ #header-wrapper #header-widget h3.message {color: #fff; text-shadow: none; padding-top:10px; } /* ============================================================ * 3) Main Menu * ========================================================= */ /* == Menu Background == */ #menu-wrapper { background-color: #BBB; border-top: 2px solid #ccc; background-image: linear-gradient(top, #292929, #131213); } #menu-wrapper .inner-content { padding: 0px 20px 0px 20px; } /* Menu background is now controlled by #menu-wrapper */ #access { background-color: transparent; background-image: none; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 15px; letter-spacing:0px; filter: none; /* IE 8 */ border: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } /* == Top Level Links == */ #primary-menu > li { border-right: 1px solid #CCC; -webkit-box-shadow: 1px 0 0 #CCC; -moz-box-shadow: 1px 0 0 #CCC; box-shadow: 1px 0 0 #CCC; } #primary-menu li a { color:#663366; } /* Add a transparent top border to match the hover/active states below */ #primary-menu > li > a { border-top: 4px solid transparent; } /* Top level hover State */ #primary-menu > li > a:hover { background: #999; border-top: 4px solid #663366; } /* Top Level Active State */ #primary-menu li a.active { background: #999; border-top: 4px solid #663366; } /* First Top Level Active/Hover Link to match #access border radius on the left side */ #primary-menu > li:first-child a.active, #primary-menu > li:first-child a:hover { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } /* == Level 2 and 3 == */ #primary-menu > li > ul { margin-top: 45px; } #primary-menu ul { background: #bbb; border: 1px solid #ccc; width: 200px; } /* Child Hover State */ #primary-menu li li a:hover { background: #999; border-top: 1px solid #663366;} /* Child Active State */ #primary-menu li li a.active { background: #999; border-top: 1px solid #663366;} /* ============================================================ * 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 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; margin: -1px 0px 0px 0px; padding: 8px 15px; display: block; /* show menu button */ width: inherit; text-align: center; -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 */ background-color: transparent; color: rgba(255,255,255,.85); text-shadow: none; -webkit-border-radius: 0px 4px 4px 4px; -moz-border-radius: 0px 4px 4px 4px; border-radius: 0px 0px 4px 4px; background-image: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.1)); } #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; } /* Top level Hover State */ #primary-menu > li > a:hover { background: #fff; } /* Top Level Active State */ #primary-menu li a.active { background: #fff; } /* == Children == */ #primary-menu ul { width: auto; position: static; display: block; border: none; background: inherit; } #primary-menu > li > ul { margin-top: 5px; margin-left:30px;} } /* Ensure #primary-menu is visible when viewport is > 600px */ @media screen and (min-width: 601px) { #primary-menu { display: block !important; } } /* ============================================================ * 5) Featured * ========================================================= */ /* == Featured Wrapper BG == */ #featured-wrapper { /* Choose from featured-bg1.png to featured-bg6.png */ background-image:url('../../../images/slider-back.png'); border-top:1px solid #ccc; -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.41); -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.41); box-shadow: inset 0 1px 3px rgba(0,0,0,0.41); } /* == Flexslider Styles within Featured Area == */ #featured-wrapper .flexslider { padding: 0 0px 40px 0; -webkit-box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000; border: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } /* ============================================================ * 6) Main Content * ========================================================= */ #main-content-wrapper { border-top: 2px solid #ccc; } #main-content-wrapper .canvas { padding: 0px; background: transparent; border-radius: 0px; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .sidebar { padding: 2px 0px 10px 0px; } /* ============================================================ * 7) Footer * ========================================================= */ /* == Top Footer Area == */ #footer-wrapper { background: #333; border-top:4px solid #666; } #footer-wrapper h3 { font-size:20px;} #footer-wrapper p { color:#CCC;} #footer-wrapper ul { color:#CCC;} #footer-wrapper a { color: #999; } /* == Second Footer Area (Copy) == */ #footer-copy-wrapper { background: #0e0e0e; border-top:2px solid #333; } #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: #999; } #footer-copy-wrapper p { font-size:15px; } /* == Footer Menu == */ #footer-navigation ul { margin:0; padding:0; color: #0099ff; 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: #999; } #footer-navigation li a:hover { color: #999; text-decoration: underline; } /* ============================================================ * 8) Plugins (Flexslider & PrettyPhoto) * ========================================================= */ /* == Flexslider == */ .flexslider { margin: 0px 0px 30px 0px ; border-width: 4px; border-color: #fff; padding: 0 0px 40px 0; /* Extra 1px rightpadding to align image with bottom area */ background: #fff url('../images/flex-bottom-bg.jpg') bottom repeat-x; box-shadow: 0px 0px 4px #999; } /* Move Flexslider Caption to the bottom right */ .flex-caption { width: 60%; padding: 0; margin-bottom: 0; position: absolute; right: 20px; left: inherit; float: right; bottom: -28px; background: none; color: white; text-shadow: -1px -1px 0 rgba(0, 0, 0, .3); font-size: .9em; line-height: 18px; font-style: italic; font-weight: bold; text-align: right; z-index: 999; } /* ============================================================ * 9) Buttons * ========================================================= */ /* ============================================================ * 10) Images * ========================================================= */ #footer-wrapper img.pretty {background: #333; border-color: #000; box-shadow: none;} /* ============================================================ * 11) Blog Loop / Single * ========================================================= */ /* ============================================================ * 12) Forms * ========================================================= */ /* == Comments Forms == */ #comments .comment-body { border: none; } #comments ul.children { padding: 0px 0 10px 20px; } .comment-form-wrapper textarea {width: 96%;} /* ============================================================ * 13) Tabs and Toggles * ========================================================= */ /* == Toggle Content Background == */ .toggle-content { background-color: #f2f2f4; -webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.05) inset; -moz-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.05) inset; box-shadow: 0 0px 10px rgba(0, 0, 0, 0.05) inset; } /* ============================================================ * 14) Tables * ========================================================= */ /* ============================================================ * 15) Additional Responsive Settings/Overrides * ========================================================= */ /* == All Mobile Sizes (Phones & Tables) == */ @media only screen and (max-width: 768px) { /* Header Message */ #header-wrapper #header-widget h3.message {font-size: 1.0em;} /* 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; } }