/*------------------------------------------------------------------ [Responsive Stylesheet] Project: Base Admin Version: 2.0 Last change: 03/25/2013 Assigned to: Rod Howard (rh) [Table of contents] 1. Max Width: 767px 2. Max Width: 1200px 3. Max Width: 979px *** Any customizations made to this should be added to the custom.css stylesheet in order to separate your customizations and make upgrading in the future easier. *** -------------------------------------------------------------------*/ .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } .hide-text { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .input-block-level { display: block; width: 100%; min-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*------------------------------------------------------------------ [1. Max Width: 480px] */ @media (max-width: 480px) { .error-container h1 { font-size: 72px; } .shortcuts .shortcut { width: 95px; } .shortcuts .shortcut .shortcut-label { font-size: 12px; } .shortcuts .shortcut .shortcut-icon { font-size: 24px; } } @media (min-width: 768px) { .subnav-collapse.collapse { height: auto!important; overflow: visible!important; } } /*------------------------------------------------------------------ [1. Max Width: 767px] */ @media (max-width: 767px) { #back-to-top { display: none !important; } #main { padding: 0 10px; margin-right: -20px; margin-left: -20px; } .subnavbar { margin-left: -20px; margin-right: -20px; } .subnavbar .btn-subnavbar { display: block; } .subnavbar .subnavbar-inner { height: auto; } .subnavbar .mainnav { display: block; width: 100%; height: auto; margin-top: 1em; margin-bottom: 1.5em; border: none; } .subnavbar .mainnav > li { float: none; width: 100%; height: auto; margin-bottom: 1em; text-align: left; border: none; } .subnavbar .mainnav > li > a { display: block; padding-top: 5px; padding-bottom: 5px; margin-right: .5em; color: #CCC; font-size: 13px; font-weight: 600; } .subnavbar .mainnav > li > a > span { display: inline; } .subnavbar .mainnav > li > a > i { display: inline; margin-right: .5em; margin-bottom: 0; font-size: 14px; } .subnavbar .mainnav > li > a .caret { margin-top: 8px; } .subnavbar .mainnav > li.active > a { color: #F90; background: transparent; } .subnavbar .dropdown .dropdown-menu { position: static; float: none; width: 100%; background: transparent; border: none; box-shadow: none; } .subnavbar .dropdown .dropdown-menu a { padding: 8px 40px; color: #FFF; font-weight: 600; } .subnavbar .dropdown .dropdown-menu::before, .subnavbar .dropdown .dropdown-menu::after { display: none; } .subnavbar .dropdown.open .caret { display: inline-block; } .subnavbar .dropdown-submenu > a:after { display: none; } .subnavbar .dropdown-submenu > .dropdown-menu { display: block; } .subnavbar .dropdown-submenu > .dropdown-menu > li > a { padding-right: 20px; padding-left: 60px; } .subnavbar .subnavbar-open-right .dropdown-menu { left: auto; right: 0; } .subnavbar .subnavbar-open-right .dropdown-menu::before, .subnavbar .subnavbar-open-right .dropdown-menu::after { left: auto; right: 12px; } .subnavbar .subnavbar-open-right .dropdown-menu::after { right: 13px; } .extra { margin-right: -20px; margin-left: -20px; } .extra .container { padding: 0 20px; } .footer { margin-right: -20px; margin-left: -20px; } .footer .container { padding: 0 20px; } .footer #footer-terms { margin-top: 1em; text-align: left; } .footer #footer-terms a { margin-left: 0; margin-right: 1em; } .item-row { display: block; *zoom: 1; } .item-row:before, .item-row:after { display: table; content: ""; line-height: 0; } .item-row:after { clear: both; } .item-row .item-label { display: block; width: 100%; margin-bottom: 1.5em; } .item-row .item-content { display: block; width: 100%; } } /*------------------------------------------------------------------ [3. Max Width: 979px] */ @media (max-width: 979px) { .navbar-fixed-top { position: static; margin-bottom: 0; } .navbar .btn-navbar { font-size: 18px; background: none; filter: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .navbar .container { padding: 0 10px; } .subnavbar .subnavbar .container { width: auto; } } /*------------------------------------------------------------------ [2. Max Width: 1200px] */ @media (min-width: 1200px) { .navbar .search-query { width: 200px; } }