/*
Theme Name: Nova Wide
Theme URI: http://www.mysupernova.com
Author: Cesar Pineda
Author URI: http://www.cesarpineda.com
Version: 1.8
Description: Theme to be used for $239 clients.
*/

@import url("style.php");

/* 1600px / 16px = 100em */
@media only screen and (min-width: 100em) {
#mainwrap {width: 70% !important; background: none;}
#main {}
#content {width: 64%; float: left; margin: 0; padding: 0 0 0 0; text-align: left;}
#nav .menu .sub-menu {width: 200px; margin: 4% 0 0 0; padding: 1%; display: none; position: absolute; z-index:1001; border: none; text-align: left; background: <?php echo $PrimaryColor; ?>;}
}

/* 1400px / 16px = 87.5em - 1599 / 16px = 99.9375em */
@media only screen and (min-width: 87.5em) and (max-width: 99.9375em) {
#mainwrap {width: 78% !important; background: none;}
#main {}
#nav .menu .sub-menu {width: 200px; margin: 5% 0 0 0; padding: 1%; display: none; position: absolute; z-index:1001; border: none; text-align: left; background: <?php echo $PrimaryColor; ?>;}
}

/* 1300px / 16px = 81.25em - 1399px / 16px = 87.4375em*/
@media only screen and (min-width: 81.25em) and (max-width: 87.4375em) {
#mainwrap {width: 88% !important; background: none;}
#main {}
#nav .menu .sub-menu {width: 200px; margin: 5% 0 0 0; padding: 1%; display: none; position: absolute; z-index:1001; border: none; text-align: left; background: <?php echo $PrimaryColor; ?>;}
#sidebar .ngg-widget {padding: 3% 0 0 12%;}
}

/* 1101px / 16px = 68.8125em - 1299 / 16px = 81.1875em */
@media only screen and (min-width: 68.8125em) and (max-width: 81.1875em) {
#nav .menu .sub-menu {width: 200px; margin: 5% 0 0 0; padding: 1%; display: none; position: absolute; z-index:1001; border: none; text-align: left; background: <?php echo $PrimaryColor; ?>;}
#sidebar .ngg-widget {padding: 3% 0 0 8%;}
}

/* 901px / 16px = 56.3125em - 1100px / 16px = 68.75em */
@media only screen and (min-width: 56.3125em) and (max-width: 68.75em) {
#header #toggle-view {width: 100%; margin:0; padding: 0; list-style:none; float: right; overflow: hidden;}
#nav {margin: 0 0 0 0;}
.menu a {font-size: 1em;}
#sleft h1 {font-size: 1.5em;}
#sleft h2 {font-size: 1.5em;}
#logohover img {width: 60%;}
#nav .menu .sub-menu {width: 200px; margin: 5% 0 0 0; padding: 1%; display: none; position: absolute; z-index:1001; border: none; text-align: left; background: <?php echo $PrimaryColor; ?>;}
#content {width: 62%;}
#sidebar {width: 35%;}
#sidebar .ngg-widget {padding: 3% 0 0 5%;}
#sidebar-home {width: 35%;}
}

/* 800px / 16px = 50em - 1400px / 16px = 87.5em */
@media only screen and (min-width: 50em) and (max-width: 87.5em) {
#mainwrap {width: 96% !important; background: none;}
#main {}
}

/* 480px / 16px = 30em */
@media only screen and (max-width: 30em) {
#sliderwrap, #sliderfull, #slider, .slider-wrapper {position: absolute !important; top: -9999px !important; left: -9999px !important;}
.one_half {width: 100% !important; margin: 1% 0 !important; float: none !important;}
.one_half_last {width: 100% !important; margin: 1% !important; float: none !important;}
.two_thirds {width: 100% !important; margin: 1% 0 !important; float: none !important;}
.two_thirds_last {width: 100% !important; margin: 1% 0 !important; float: none !important;}
}

/* 240px / 16px = 15em - 479px / 16px = 29.9375em */
@media only screen and (min-width: 15em) and (max-width: 29.9375em) {
#header .teltop {font-size: 1em !important;}
#mobile-nav h3 {font-size: 1.3em !important;}
#sleft h1, h2 {font-size: 1.5em !important;}
h1 {font-size: 1.8em;}
h2 {font-size: 1.675em;}
h3 {font-size: 1.65em;}
h4 {font-size: 1.625em;}
h5 {font-size: 1.5em;}
#main iframe {width: 100% !important; height: 200px !important;}
#mainwrap .shr_class {width: 100% !important; height: 200px !important; overflow: hidden !important; display: block !important;}
}

/* 240px / 16px = 15em - 900px / 16px = 56.25em */
@media only screen and (min-width: 15em) and (max-width: 56.25em) {
.hide {position: absolute !important; top: -9999px !important; left: -9999px !important;}
body {background-attachment: fixed !important;}
.dark {padding: 1.5% 0 0 0;}
#firstcoupon, #lastcoupon {width: 99% !important; margin: 0 0 1% 0 !important; padding: .5%; float: left; clear: both; background: #ffffff;}
.teltop {width: 80%; margin: 2% 0 3% 10% !important; position: inherit !important; top: 0 !important; left: 0 !important; font-weight: bold; text-align: center !important; float: none !important; font-size: 1.8em !important; line-height: 1.5em; background: #f0f0f0 url(images/libg.png) right center no-repeat; clear: both; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);}
.teltop a {padding: 0 15% !important;}
.call {position: inherit !important; top: 0 !important; left: 0 !important;}
.contact {position: absolute !important; top: -9999px !important; left: -9999px !important;}
#sidebar-full .one_third {width: 100% !important; margin: 1% 0 !important; float: none !important;}
#sidebar-full .one_third_last {width: 100% !important; margin: 1% 0 !important; float: none !important;}
#header {width: 94%; padding: 3%; text-align: center !important;}

#logohover {width: 100%; margin: 0 auto; padding: .5%; position: inherit; overflow: hidden; float: none; z-index: 100; background: none;}
#logohover .text {width: 100%; float: left; display: block;}
#logohover .text h1 {width: 100%; text-align: center; margin: 6% 0 2% 0;}

#sliderwrap {width: 98% !important; padding: 0 1% !important;}
#slider {width: 100% !important; margin: 0 0 2% 0 !important;}
#slider .nivo-prevNav {margin: -5% 0 0 1% !important;}
#slider .nivo-nextNav {margin: -5% 1% 0 0 !important;}
#slideside {width: 100% !important; height: auto; margin: 0; padding: 0 0 !important; float: left; background: #ffffff;}
#sleft {position: absolute !important; top: -9999px !important; left: -9999px !important;}
#sleft .call {position: absolute !important; top: -9999px !important; left: -9999px !important;}
#sleft img {width: 60%; margin: 1% 0 0 0; box-shadow: 0 0 10px rgba(0, 0, 0, 1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 1); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 1);}
#sright {width: 98%; margin: 0 auto; float: none; box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);}
#mainwrap {width: 98% !important; margin: 2% auto; padding: 0 1% !important; background: none;}
#main {width: 94%; padding: 3%;}
#content {width: 100% !important; float: left; margin-right: 0; padding: 0 0 0 0; text-align: left;}
#sidebar {width: 100% !important; clear: both !important; float: left !important; padding: 0 0 1% 0; margin: 0 0 0 0;}
#sidebar-home {width: 100% !important; clear: both !important; float: left !important; padding: 0 0 1% 0; margin: 0 0 0 0;}

#nav {width: 100%; height: auto; margin: 3% 0 0 0 !important; padding: 0 0 0 0; float: none; overflow: hidden; font-weight: bold; z-index: 99999; text-align: center;}
#nav .menu-main-container {float: none; margin: 2% auto; width: 20%;}
.menu {width: 98%; margin: 0 auto; padding: 2%; text-align: center; line-height: 2em;}

#contentfullhome .box {width: 100% !important; float: left; margin: 0 0 5% 0 !important;}
#contentfullhome .boxmid {width: 100% !important; float: left; margin: 0 0 5% 0 !important;}
#contentfullhome .box a:hover {background: #dddddd;}
#contentfullhome .boxmid a:hover {background: #dddddd;}
#contentfullhome .link {margin: 10px 0 5px 0; padding: 0 20px; color: #ffffff; clear: both; display: inline-block; font-size: 1.5em; line-height: 2em; font-weight: bold; cursor: pointer; text-shadow: 1px 1px 1px #000000; filter: dropshadow(color=#000000, offx=1, offy=1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);}
#contentfullhome  .link:hover {color: #ffffff !important;}
/* -- Footer -- */
#footer {width: 94%; padding: 3%;}
#footercontent .copyright {width: 100% !important; font-size: .9em; float: left; text-align: center; margin: 0;}
#footercontent .design {width: 100% !important; font-size: .9em; color: #333333; text-align: center !important; float: right;}
#footernav {width: 90% !important; height: auto; margin: 2% auto !important; float: none !important;}
#footernav .menu {margin: 0 auto; padding: 0 0 0 0; text-align: center;}
#footernav .menu-footer-container {width: auto; height: auto; margin: 0 auto; background: none; display: block; text-align: left;}
#footernav .menu li {width: 100% !important; float: left; margin: 0 0 1% 0 !important; text-align: center !important;}
#footernav .menu a {width: 80% !important; margin: 0 0 !important; padding: 0 10% !important; font-size: 1.5em; line-height: 1.5em;}
#footernav .menu a:hover {background: #f0f0f0 !important;}
/* -- Social -- */
#social {width: 60%; clear: both; margin: 2% auto; text-align: center;}
#social img {width: 30px !important; margin: 0 2% 0 0; text-align: center;}