/* 
mobile styles
Colorado Encyclopedia 
Greg Vogl 2017-02-06
*/

@media only screen and (max-width: 979px) {
.tb-megamenu .nav-collapse { width: auto; }
.tb-megamenu .nav-collapse .dropdown-menu { background-color: #ffffff; }
.tb-megamenu .nav-collapse .dropdown-menu li > a { color: black !important; }
}
@media only screen and (max-width: 830px) {
#footer #block-block-3.block,
#block-menu-menu-top-menu h2 { display: none !important; }
}
@media only screen and (max-width: 780px) {
#block-menu-menu-top-menu,
#header #block-block-3 { display: none; }
.not-front .region-header #block-search-form { margin-top: 105px; }
#ce-category-key { float: none; display: block; margin-top: 0; }
.region-header #block-search-form { left: 10px; right: auto; }
#footer li { float: none !important; }
#footer li a { 
float: left !important; 
padding: 5px !important; margin: 5px !important; 
font-size: 1.4em; 
border-radius: 5px !important; 
color: #002B5D !important; background-color: rgba(255, 255, 255, 0.7); width: 8em !important; 
display: inline-block !important;
width: 6.5em !important;
}
#footer-wrapper, #footer-wrapper .section { padding: 0; }
#footer li a:hover { color: #002B5D; background-color: white; text-decoration: none; }
#footer li a span.ext { display: none; }

#footer #block-menu-menu-bottom-menu li a[href="https://www.facebook.com/coencyclopedia/"],
#footer #block-menu-menu-bottom-menu li a[href="https://twitter.com/coencyclopedia"] { 
    background-size: 32px 32px;
	background-position: center right;
	width: auto;
	height: auto;
	display: block;
	color: inherit;
}

}
@media only screen and (max-width: 640px) {
/* use main menu instead of megamenus */
#main-menu { visibility: visible; }
#block-tb-megamenu-main-menu { display: none; }
/* move search form */
#prototype { display: none; }
.region-header { float: none; }
#logo { display: inline-block; float: none; padding: 5px; margin: 0; }
.region-header #block-search-form { display: inline-block; position: relative; margin: 0 !important; left: 5px !important; display: block; float: none; }
.region-header #block-search-form .form-text { width: 90%; }
#search-form input#edit-keys, #block-search-form .form-item-search-block-form input { max-width: 95%; }
#sidebar-first { font-size: 1.2em; }
#sidebar-first li a { display: inline-block; width: 100%; background-color: #ffffff; padding-left: 5px; border-radius: 5px; }
#content .section, .sidebar .section { padding: 0 5px; }
a#menu-toggle { background-color: rgb(255, 255, 255, 0.7); }
#main-menu { background-color: #224974; }
#main-menu-links li { width: auto; display: inline-block; }
#main-menu-links li a { width: 7em; display: inline-block; margin: 2px; }
#toc { font-size: 1em; max-width: 100%; }
#toc ul { display: none; }
#rv { position: absolute; right: 5px; margin-top: -2em; z-index: 100; }
}
@media only screen and (max-width: 570px) {
.sidebar .section { padding: 0; }
.sidebar .block { background-color: #bdc9d5; border: 0; } 
.sidebar h2 { padding: 5px 0 0 5px; border: 0; text-shadow: none; font-size: 1em; }
#sidebar-first h2:after { 
    content: "";
    background: url(/sites/all/themes/rbce/images/toggle.png) no-repeat;
    width: 22px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 10px;
}
.sidebar .block { padding: 5px; }
}
@media only screen and (min-width: 560px) and (max-width: 850px) {
.one-sidebar #sidebar-first, .one-sidebar #sidebar-second { width: 33%; }
.one-sidebar #content { width: 65%; display: inline-block; }
}
@media only screen and (min-width: 460px) and (max-width: 640px) {
/* large phones - keep main menu buttons in one row */
#main-menu-links li { width: 24%; }
#main-menu-links li:nth-child(3n) { margin-right: 5px; }
#main-menu-links li:nth-child(4n) { margin-right: -5px; }
}
@media only screen and (max-width: 440px) {
/* small phones - hide Prototype, shrink header */
#site-name:after { display: none; }
.region-header { float: none; margin: 0; }
.region-header #block-search-form { width: 100%; }
}
@media only screen and (max-width: 385px) {
/* very small phones - shrink header */
#logo { padding: 5px; }
#header div.section { min-height: 110px; }
#name-and-slogan { padding: 10px 10px 8px; margin: 0; }
}