/*
* BNE HTML Framework - Responsive CSS File
*
* WARNING: This file is a core part of the
* BNE HTML Framework. This framework 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 include that file into your page as the
* last css file.
*
* @author Kerry Kline
* @copyright Copyright (c) 2013, Kerry Kline
* @link http://www.bluenotesentertainment.com
* @package BNE HTML Framework
*
* @version: 1.6
* @updated: July 10, 2013
*
*/
/* ============================================================
* Media Queries
* - To activate, include this css file into the
* section of each page, AFTER the base.css file but BEFORE
* your custom.css file, if used.
* - Make sure the is correct in the
*
* ========================================================= */
/* Main container of each section
* This overrides the default width found in base.css to
* allow all sections to be responsive
*/
.container { width: 100%; max-width: 980px; }
/* == Smaller than standard 960 (devices and browsers) == */
@media only screen and (max-width: 959px) {}
/* == Tablet Portrait size to standard 960 (devices and browsers) == */
@media only screen and (min-width: 768px) and (max-width: 959px) { }
/* == All Mobile Sizes (devices and browser) == */
@media only screen and (max-width: 768px) {
/* Header Adjustments */
#header-wrapper #branding {margin-bottom:20px;}
#header-wrapper #logo {text-align:center;}
#header-wrapper #logo img {width: 100%;}
/* Main Menu */
#primary-menu li a { font-size: 0.8em ; }
/* Footer */
#footer-copy { text-align:center; }
#footer-copy p {margin-bottom: 0px;}
#footer-navigation { text-align:center; }
#footer-navigation ul { margin:0 auto; display: inline-block; float:none; text-align: center; }
}
/* == Between Tablets and Mobile == */
@media screen and (max-width: 600px) {
/* Mobile Nav
* - At resolutions 600 or lower, the main nav styles will be removed
* and replaced by the select menu created from the bne-plugins.js file.
*/
.js #access {background:none; border:0; box-shadow:none; float:none; filter:none;}
.js #primary-menu { display: none; }
.js .selectnav { display: block; width: 200px; margin:0 auto;}
/* Responsive Gallery Grid */
.gallery li.span1, .gallery li.span2, .gallery li.span3, .gallery li.span4 {width:100%;}
.gallery img {height: auto !important; width: 100%; }
.gallery li .image-overlay .image-overlay-bg {width: 101% !important;}
}
/* == Mobile Landscape Size to Tablet Portrait (devices and browsers) == */
@media only screen and (min-width: 481px) and (max-width: 766px) {}
/* == Mobile Portrait Size to Mobile Landscape Size (devices and browsers) == */
@media only screen and (max-width: 480px) {
/* Header Social Side */
#header-widget h3, #header-widget p, #header-widget {text-align:center; }
#header-wrapper .bne-contact-bar ul { float: none; text-align: center; }
#header-wrapper .bne-contact-bar li { display: inline-block; float: none; margin: -1px; }
/* Main Content Area */
#main-content-wrapper .canvas {padding:20px;}
/* Grid System */
.row {margin-left: 0;}
[class*="span"] {margin-left: 0;}
.span-one,.span-two,.span-three,.span-four,.span-five,.span-six,.span-seven,.span-eight,.span-nine,.span-ten,.span-eleven,.span-twelve,.span-one-half,.span-one-third,.span-one-fourth,.span-two-thirds,.span-two-third,.span-three-fourths,.span-three-fourth,.span-one-fifth, .span-sidebar,.span-sidebar-left,.span-sidebar-right,.span-content-center,.span-content,.span-content-left,.span-content-right,.span-full-width
{width: 100%;}
/* Tabs */
.bne-tabs .tab-nav ul li { float:none; }
.bne-tabs-framed .tab-nav { height: inherit;}
.bne-tabs-framed .tab-nav ul li a {border-radius: 0; margin:0;}
.bne-tabs-open .tab-nav,.bne-tabs-open .tab-nav ul li.active a {background-image: none;}
/* Form Fields */
input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea { width: 80%; }
/* Images */
.pretty, img.pretty {max-width: 98%;}
}