/* * Tasty - Restaurant Responsive Theme * * WARNING: This file is a core part of the * BNE HTML Framework & Tasty 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 Tasty * * @version: 1.0 * @updated: 07/15/2013 * * * === Table of Content === * * 1) Main Page Structures * 2) Typography Styles * 3) Header Section * 4) Primary Menu * 5) Featured Section * 6) Main Content Section * 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) Main Page Structures * ========================================================= */ /* == Body BG == */ body { background-image: url('../images/page_bg.jpg'); background-position: center center; background-color: #2f2f2f; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } /* == Main Containers == */ #wrapper { padding:0 10px; width: auto;} #wrapper > .container { background: white url('../../images/textures/textile_light.png') repeat; -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5); -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5); box-shadow: 0px 0px 5px rgba(0,0,0,.5); } /* == Page Sections == */ #header-wrapper, #featured-wrapper, #main-content-wrapper, #footer-wrapper { position: relative; } .inner-content { padding-left:20px; padding-right:20px; } /* ============================================================ * 2) Typography Styles * ========================================================= */ /* == Headings == */ h1, h2, h3, h4, h5, h6 { font-family: 'Playball', cursive; } .entry-title { text-align:left; border-color: #ff675b;} /* == Links == */ a, a:visited { color: #ff675b; } a:hover, .sidebar .widget .menu ul li a:hover { color: #ff675b; } .sidebar .widget .menu ul li a.active { color: #ff675b; } /* == Dropcaps == */ .dropcap.round, .dropcap.square { background: #ff675b; } /* == Blockquotes == */ blockquote { border: none; } blockquote:before { font-family: FontAwesome; content: "\f10d"; margin-right: 25px; font-size: 2.0em; color: #ff675b; } blockquote cite { text-align: right; font-size:2.0em; font-family: 'Playball', cursive; } /* ============================================================ * 3) Header Section * ========================================================= */ #header-wrapper { border-top:5px solid #333; } #header-wrapper .inner-content { border-top:5px solid #ff675b; } #header-wrapper #logo img { max-width: 100%; } #header-widget { margin-bottom:10px; } /* ============================================================ * 4) Primary Menu * ========================================================= */ /* == Mobile Nav == */ .js .selectnav { margin-top: 10px; } /* == Main Nav BG & Position == */ #access { background-color: transparent; background-image: none; filter: none; border: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; float:right; } /* == All Levels == */ #primary-menu li a { font-family: 'Playball', cursive; color: #444; -webkit-transition: color 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } /* == Level 1 Only == */ #primary-menu > li > a { font-size: 25px; } #primary-menu > li > a.sf-with-ul:after { display: none; } #primary-menu > li { border-right: 0; } /* == Hover and Active State == */ #primary-menu > li > a.active, /* Current page */ #primary-menu > li > a:hover, /* Hover */ #primary-menu > li.sfHover > a /* If Level 2 is hovered */ { color: #ff675b; background:none; } /* == Level 2 Only == */ #primary-menu > li > ul { } /* == Level 2 & 3 == */ #primary-menu ul { background: #222; border:0; -webkit-box-shadow: 0px 0px 5px #000; -moz-box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000; } #primary-menu li li a { font-size: 15px; color: #999; } #primary-menu li li a:hover { background: #ff675b; color: white; } /* Active State (Children) */ #primary-menu li li a.active { background: #ff675b; color: white; } /* Level 2 First Child Arrow */ #primary-menu ul li:first-child > a:after { content: ''; position: absolute; left: 10%; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #222; } /* Remove top arrow for level 3+ */ #primary-menu ul ul li:first-child > a:after { border:none;} /* ============================================================ * 5) Featured Section * ========================================================= */ #featured-wrapper { border-top:1px solid rgba(0,0,0,.3); border-bottom:1px solid rgba(0,0,0,.3); -webkit-box-shadow: 0 8px 10px -10px rgba(0,0,0,.5), 0 -8px 10px -10px rgba(0,0,0,.5); -moz-box-shadow: 0 8px 10px -10px rgba(0,0,0,.5), 0 -8px 10px -10px rgba(0,0,0,.5); box-shadow: 0 8px 10px -10px rgba(0,0,0,.5), 0 -8px 10px -10px rgba(0,0,0,.5); } #featured-wrapper .inner-content { padding: 0px; } #featured-wrapper .flexslider { margin: 0px; background: transparent; padding:0px; border: 0; position: relative; } #featured-wrapper .gmap { margin-bottom: 0px; } #featured-wrapper .flexslider .slides > li {position: relative} #featured-wrapper .flexslider .flex-caption { top: auto; bottom: 0; right: auto; left:0; text-align: center; width: 100%; font-family: 'Playball', cursive; color: white; font-size: 35px; padding: 20px; } /* ============================================================ * 6) Main Content Section * ========================================================= */ #main-content-wrapper { -webkit-box-shadow: inset 0px -8px 7px -7px rgba(0,0,0,.3); -moz-box-shadow: inset 0px -8px 7px -7px rgba(0,0,0,.3); box-shadow: inset 0px -8px 7px -7px rgba(0,0,0,.3); } .sidebar { padding: 8px 0px 10px 0px; } /* ============================================================ * 7) Footer Section * ========================================================= */ #footer-wrapper { color: #aaa;} #footer-wrapper .inner-content { padding:20px; } #footer-wrapper .row:last-child { margin-bottom:0px; } #footer-wrapper .pretty, #footer-wrapper img.pretty { background: #222; border-color: #111; -webkit-box-shadow: 0px 0px 3px #000; -moz-box-shadow: 0px 0px 3px #000; box-shadow: 0px 0px 3px #000; } /* == Footer Widgets == */ #footer-widgets .widget-title { color: #eee; text-shadow: 1px 1px 0px rgba(0,0,0,.3); } #footer-widgets { background:#333; } /* == Footer Copy == */ #footer-copy { background:#111; } #footer-copy .row:last-child { margin-bottom:0px; } #footer-copy a { } #footer-copy a:hover { } /* == Footer Nav == */ #footer-navigation { } #footer-navigation li a { color: #ff675b; } #footer-navigation li a:hover { color: #ff675b; } /* == ScrollToTop Button == */ .scrollToTop { position: absolute; right: 0; bottom: -12px; } /* ============================================================ * 8) Blog Loop / Single Post * ========================================================= */ .entry-meta { text-align:left; } /* ============================================================ * 9) Buttons * ========================================================= */ /* Default Styles */ /* ============================================================ * 10) Images * ========================================================= */ /* Default Styles */ /* ============================================================ * 11) Forms * ========================================================= */ /* Default Styles */ /* ============================================================ * 12) Flexslider * ========================================================= */ .flex-direction-nav a { color: #ff675b; } .flex-control-nav { width: auto; } .flexslider .flex-caption { background: #ff675b; background: rgba(255, 103, 91, .6); } /* == Testimonial Flexslider == */ .flexslider blockquote { border:0; margin:0; padding:0; } .testimonial-flexslider.flexslider .flex-content { background: #fefefe url('../../images/textures/vintage_light.png') repeat; } /* ============================================================ * 13) Tabs and Toggles * ========================================================= */ /* == Tabs == */ .bne-tabs-framed .tab-nav ul li a, .bne-tabs-open .tab-nav ul li a, .bne-tabs-open .tab-nav ul li.active a, .bne-tabs-framed .tab-nav ul li.active a { font-family: 'Playball', cursive; font-size: 1.3em; font-weight: normal; } .bne-tabs-framed .tab-nav { height: auto; border-bottom: none;} .bne-tabs-framed .tab-nav ul li a { border: 1px solid #ccc; border-right: none; border-bottom: 1px solid #ccc !important; border-radius:0; margin: 0px; background: #f2f2f2; color: #444; } .bne-tabs-framed .tab-nav ul li:last-child a { border-right: 1px solid #ccc; } .bne-tabs-framed .tab-nav ul li a:hover { background: #e6e6e6; color: #444; } .bne-tabs-framed .tab-nav ul li.active a { background: #ff675b; color: white; border-bottom:0; border-color: #ff675b; } .bne-tabs-framed .tab-container { margin-top: -1px; border: 1px solid #e5e5e5; } /* == Toggles == */ .toggle-trigger a { background-image: none; background: #f2f2f2; font-family: 'Playball', cursive; font-size: 1.3em; font-weight: normal; border: 1px solid #ccc; } .toggle-trigger a.active { background: #ff675b; color: white; border-color: #ff675b; } .toggle-trigger a:before { background: #f3f3f3; border-right: 1px solid #ccc; padding: 18px; margin: -16px; margin-right: 12px; } .toggle-trigger a.active:before { color: white; background: #ff675b; border-right-color: #EF6056; } .toggle-content { background: #fff; } /* ============================================================ * 14) Tables * ========================================================= */ /* Default Styles */ /* ============================================================ * 15) Additional Responsive Settings/Overrides * ========================================================= */ /* Mobile & Tablet */ @media only screen and (max-width: 800px) { /* Main Menu */ #primary-menu li a { font-size: 1.2em ; } .js .selectnav { float: right; } } /* Mobile */ @media screen and (max-width: 480px) { /* Main Menu */ .js .selectnav { float: none; } /* Featured Slider */ #featured-wrapper .flexslider .flex-caption { font-size: 20px; padding: 10px 10px 20px 10px; } }