/*
Theme Name: Respond
Theme URI: http://www.mysupernova.com
Author: Cesar Pineda
Author URI: http://www.cesarpineda.com
Version: 1.1
*/



@import url("style.php");

/* 200px / 16px = 12.5em - 399px / 16px = 24.9375em */
@media only screen and (min-width: 12.5em) and (max-width: 24.9375em) {
.hide {display: none;}
#wrap {width: 95%;}

#header {height: auto !important; padding: 2% 0;}
#textlogo {width: 70%; margin: 0 auto;}
#textlogo img {width: 70%; margin: 0 0 2% 15%;}

#content {width: 100%;}
#sidebar {width: 100%;}
#sidebar img {width: 50%; margin: 0 0 1% 25%; clear: both; display: block;}
#vcardside img {width: auto !important; margin: 0 0 0 0; padding: 0 0 9px 0; clear: none; display: inline; background: none;}
.shadow {width: 90%;}
#footer {width: 90%;}
#sliderwrap {-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}
#slides {display: none;}
#slideside {width: 98%; padding: 1%;}
#vcardside .nottitle {margin: 1% 0; padding: 2% 0; font-size: 1.1em; font-weight: bold; background: #ffffff url('images/titlegrad-light.png') repeat;}
#firstcoupon, #lastcoupon {width: 98%; margin: 2% 0; padding: 1%; float: left; background: none;}
#youtube .image {width: 90%; font-size: .8em;}
blockquote {border-left: 10px solid #dddddd; margin: 20px 0 20px 0 !important; padding: 5px; font-weight: bold; background: #eeeeee;}
#social {margin: 0 0 0 0; float: left !important;}
#social img {width: 30px !important; margin: 0 2% 0 0; float: left; text-align: left;}
#contentfullhome .box {width: 100%; float: none; margin: 0 0; clear: none;}
#contentfullhome .boxmid {width: 100%; float: none; margin: 4% 0; clear: none;}
}

/* 400px / 16px = 25em - 599px / 16px = 37.9375em */
@media only screen and (min-width: 25em) and (max-width: 37.4375em) {
.hide {display: none;}
#wrap {width: 90%;}

#header {height: auto !important; padding: 2% 0;}
#textlogo {width: 70%; margin: 0 auto;}
#textlogo img {width: 70%; margin: 0 0 2% 15%;}

#content {width: 100%;}
#sidebar {width: 100%;}
#sidebar img {width: 50%; margin: 0 0 1% 25%; clear: both; display: block;}
#vcardside img {width: auto !important; margin: 0 0 0 0; padding: 0 0 9px 0; clear: none; display: inline; background: none;}
.shadow {width: 90%;}
#footer {width: 90%;}
#sliderwrap {-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}
#slides {display: none;}
#slideside {width: 98%; padding: 1%;}
#vcardside .nottitle {margin: 1% 0; padding: 2% 0; font-size: 1.1em; font-weight: bold; background: #ffffff url('images/titlegrad-light.png') repeat;}
#youtube .image {width: 90%; font-size: 1.3em;}
blockquote {border-left: 10px solid #dddddd; margin: 20px 0 20px 5px !important; padding: 5px; font-weight: bold; background: #eeeeee;}
#social {margin: 0 0 0 0; float: left !important;}
#social img {width: 30px !important; margin: 0 2% 0 0; float: left; text-align: left;}
#contentfullhome .box {width: 100%; float: none; margin: 0 0; clear: none;}
#contentfullhome .boxmid {width: 100%; float: none; margin: 4% 0; clear: none;}
}

/* 600px / 16px = 37.5em - 799px / 16px = 49.9375em */
@media only screen and (min-width: 37.5em) and (max-width: 49.4375em) {
.hide {display: none;}
#wrap {width: 90%;}

#header {height: auto !important; padding: 2% 0;}
#textlogo {width: 70%; margin: 0 auto;}
#textlogo img {width: 70%; margin: 0 0 2% 15%;}

#content {width: 100%;}
#sidebar {width: 100%;}
#sidebar img {width: 50%; margin: 0 0 1% 25%; clear: both; display: block;}
#vcardside img {width: auto !important; margin: 0 0 0 0; padding: 0 0 9px 0; clear: none; display: inline; background: none;}
.shadow {width: 90%;}
#footer {width: 90%;}
#sliderwrap {-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}
#slides {display: none;}
#slideside {width: 98%; padding: 1%;}
#vcardside .nottitle {margin: 1% 0; padding: 2% 0; font-size: 1.1em; font-weight: bold; background: #ffffff url('images/titlegrad-light.png') repeat;}
#youtube .image {width: 90%; font-size: 1.3em;}
blockquote {border-left: 10px solid #dddddd; margin: 20px 0 20px 5px !important; padding: 5px; font-weight: bold; background: #eeeeee;}
#social {margin: 0 0 0 0; float: left !important;}
#social img {width: 30px !important; margin: 0 2% 0 0; float: left; text-align: left;}
#contentfullhome .box {width: 100%; float: none; margin: 0 0; clear: none;}
#contentfullhome .boxmid {width: 100%; float: none; margin: 4% 0; clear: none;}
}

/* 800px / 16px = 50em - 999px / 16px = 74.9375em */
@media only screen and (min-width: 50em) and (max-width: 62.4375em) {
.hide {display: none;}
#wrap {width: 90%;}
#nav .menu-main-container {width: 90%; float: right; font-size: .8em;}
#header {height: auto !important; padding: 2% 0;}
#textlogo {width: 70%; margin: 0 auto;}
#textlogo img {width: 70%; margin: 0 0 2% 15%;}

#content {width: 100%;}
#sidebar {width: 100%;}
#sidebar img {width: 50%; margin: 0 0 1% 25%; clear: both; display: block;}
#vcardside img {width: auto !important; margin: 0 0 0 0; padding: 0 0 9px 0; clear: none; display: inline; background: none;}
.shadow {width: 90%;}
#footer {width: 90%;}
#sliderwrap {-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}
#slides {display: none;}
#slideside {width: 98%; padding: 1%;}
#vcardside .nottitle {margin: 1% 0; padding: 2% 0; font-size: 1.1em; font-weight: bold; background: #ffffff url('images/titlegrad-light.png') repeat;}
#social {margin: 0 0 0 0; float: left !important;}
#social img {width: 30px !important; margin: 0 2% 0 0; float: left; text-align: left;}
#footercontent .copyright {width: 100%; text-align: center; float: none;}
#footercontent .design {width: 100%; text-align: center; float: none;}
}

/* 1000px / 16px = 62.5em - 1199px / 16px = 74.9375em */
@media only screen and (min-width: 62.5em) and (max-width: 74.9375em) {
#wrap {width: 95%;}
.shadow {width: 95%;}
#footer {width: 95%;}
#vcardside .contents {margin: 2% 0;}
#vcardside .buttons {margin-top: 0}
#vcardside .nottitle {margin: 2% 0; padding: 1% 0;}
#vcardside .titles {padding-top: 0; padding-bottom: 0;}
#nav .menu-main-container {width: 82%; float: right; font-size: .9em;}
}

/* 1200px / 16px = 75em - 1399px / 16px = 87.4375em */
@media only screen and (min-width: 75em) and (max-width: 87.4375em) {
#wrap {width: 80%;}
.shadow {width: 80%;}
#footer {width: 80%;}
#vcardside .nottitle {margin: 3% 0; padding: 2% 0;}
#vcardside .titles {padding-top: 1%; padding-bottom: 1%;}
#vcardside .nottitle {margin: 2% 0; padding: 1% 0;}
#vcardside .titles {padding-top: 1%; padding-bottom: 1%;}
#nav .menu-main-container {width: 80%; float: right; font-size: .9em;}
}

/* 1400px / 16px = 87.5em - 1499 / 16px = 99.9375em */
@media only screen and (min-width: 87.5em) and (max-width: 99.9375em) {
#wrap {width: 71%;}
.shadow {width: 71%;}
#footer {width: 71%;}
#vcardside .nottitle {margin: 3% 0; padding: 2% 0;}
#vcardside .titles {padding-top: 1%; padding-bottom: 1%;}
#nav .menu-main-container {width: 80%; float: right; font-size: .9em;}
}

/* 1600px / 16px = 100em - 1799 / 16px = 112.4375em */
@media only screen and (min-width: 100em) and (max-width: 112.4375em) {
#wrap {width: 61%;}
.shadow {width: 61%;}
#footer {width: 61%;}
#vcardside .nottitle {margin: 2% 0; padding: 1% 0;}
#vcardside .titles {padding-top: 0%; padding-bottom: 0%;}
#nav .menu-main-container {width: 80%; float: right; font-size: .9em;}
}

/* 1800px / 16px = 112.5em - 1999 / 16px = 124.9375em */
@media only screen and (min-width: 112.5em) and (max-width: 124.9375em) {
#wrap {width: 60%;}
.shadow {width: 60%;}
#footer {width: 60%;}
#vcardside .nottitle {margin: 3% 0; padding: 2% 0;}
#vcardside .titles {padding-top: 1%; padding-bottom: 1%;}
#nav .menu-main-container {width: 81%; float: right; font-size: 1em;}
}

/* 799px / 16px = 49.9375em */
@media only screen and (max-width: 49.9375em) {
/* -- Mobile Menu -- */
#mobile-nav {width: 100%; height: auto; margin: 0 0 0 0 !important; clear: both; position: inherit !important; top: 0 !important; right: 0 !important; background: #ffffff url('images/body.png') repeat;}
#mobile-nav #toggle-view {width: 100%; list-style:none; margin: 0 0 0 0 !important; padding: 0;}
#mobile-nav #toggle-view li {list-style:none; border-bottom: none !important; position: relative; cursor:pointer;}
#mobile-nav #toggle-view h3 {width: 60% !important; margin: 2% 0 2% 20%; padding: 1% 0 !important; text-align: center; clear: both; cursor: pointer; text-shadow: 1px 1px 1px #000000; filter: dropshadow(color=#000000, offx=1, offy=1); color: #ffffff; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9); -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9); -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);}
#mobile-nav #toggle-view .panel {margin: 0 0 0 0 !important; padding: 2% 0 0 0 !important; display:none; overflow: hidden; background: #999999 url(images/texture_transperant.png) repeat; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9);}
#nav {position: absolute !important; top: -9999px !important; left: -9999px !important;}
#mobile-nav ul, li {margin:0; padding:0; list-style:none; z-index: 999999;}
#mobile-nav .menu-main-container {width: 98% !important; margin: 0 auto;}
#mobile-nav .menu li {width: 49% !important; float: left; margin: 0 .5% 2% .5% !important; text-align: center !important;}
#mobile-nav .menu a {width: 100% !important; height: auto; margin: 0 0 2% 0 !important; padding: 4% 0 !important; font-weight: bold; font-size: 1.2em; line-height: normal; background: #ffffff url(images/titlegrad-button.png) repeat-x center; 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); text-shadow: none; filter: none;}
#mobile-nav .menu ul {width: auto; margin: 0 0 0 0; display: block; position: inherit; z-index:1001; border: none; text-align: left;}
#mobile-nav .menu ul li {width: 100% !important; margin: 0 0 0 0 !important;}
}