/*
Theme Name: Premier
Author: Jonathan Darouze
Version: 3.1
*/

@import url("http://www.skippertreeservice.com/wp-content/themes/Premier/style.php");

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

/* 1401px / 16px = 87.5625em - 1600px / 16px = 100em */
@media only screen and (min-width: 87.5625em) and (max-width: 100em) {
#mainwrap {width: 1200px !important; background: none;}
#nav .menu .sub-menu {width: 15%; margin: 3% 0 0 0; padding: 1%; display: none; position: absolute; z-index:1001; border: none; text-align: left; background: <?php echo $PrimaryColor; ?>;}
#content {width: 67%;}
#logohover img {width:50% !important;}
}


/* 1201px / 16px = 75.0625em - 1400px / 16px = 87.5em */
@media only screen and (min-width: 75.0625em) and (max-width: 87.5em) {
#mainwrap {width: 1200px !important; background: none;}
#content {width: 66%;}
#nav .menu .sub-menu {width: 15%; margin: 4% 0 0 0; padding: 1%; display: none; position: absolute; z-index:1001; border: none; text-align: left; background: <?php echo $PrimaryColor; ?>;}
#logohover img {width:50% !important;}
}


/* 901px / 16px = 56.3125em - 1200px / 16px = 75em */
@media only screen and (min-width: 56.3125em) and (max-width: 75em) {
#mainwrap {width: 96% !important; background: none;}
#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;}
#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%;}
#logohover img {width:50% !important;}
}



/* 481px / 16px = 30.0625em - 900px / 16px = 56.25em */
@media only screen and (min-width: 30.0625em) and (max-width: 56.25em) {
#mainwrap {width: 1200px !important; background: none;}
#nav .menu .sub-menu {width: 15%; margin: 4% 0 0 0; padding: 1%; display: none; position: absolute; z-index:1001; border: none; text-align: left; background: <?php echo $PrimaryColor; ?>;}
#nav {background: none !important; box-shadow: none !important; }
#slogan p {font-size: 0.85em; }
#logohover img {width:80%;}
.teltop {width: 60% !important;}
#bbb {margin: 0 auto !important; width: 75% !important; text-align:center !important; }
#side-widget {width: 65% !important; }
}


/* 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;}
.one_third {width: 100% !important; margin: 1% 0 !important; float: none !important;}
.one_third_last {width: 100% !important; margin: 1% 0 !important; float: none !important;}
.dark {display: 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: 1.5em !important;}
#mobile-nav h3 {font-size: 1.3em !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: }
#mainwrap .shr_class {width: 100% !important; height: 200px !important; overflow: hidden !important; display: block !important;}
.dark {display: none !important;}
#contactForm .leftbox {width: 100%; margin: 0 0; float: left; clear: none;}
#contactForm .rightbox {width: 100%; margin: 0 0 0 0; float: right; clear: none;}
#slogan p {font-size: 0.7em; }
#slogan  {font-size: 1.5em; }
#logohover img {width:90%;}
#slider2 {display:none; }
#logohover .text span {font-size: 2.5em;}
#logohover .text h1 {font-size: 2em !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% 2% !important; position: inherit !important; top: 0 !important; left: 0 !important; color: <?php echo $PrimaryColor; ?>; clear: both; display: inline-block; background: #ffffff url(http://www.skippertreeservice.com/wp-content/themes/Premier/images/gradientlight-big.png) repeat-x top; font-size: 1.5em; line-height: 2em; font-weight: bold; cursor: pointer; text-shadow: 1px 1px 1px #ffffff; filter: dropshadow(color=#ffffff, 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); border-radius: 7px 7px 7px 7px;}
.teltop a {padding: 0 15% !important;}
.teltop a hover {background: #ffffff url(http://www.skippertreeservice.com/wp-content/themes/Premier/images/gradientlight.png) repeat-x center;}
.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;}
#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; background: none !important; box-shadow: none !important;}
#nav .menu-main-container {float: none; margin: 2% auto; width: 50%;}
.menu {width: 98%; margin: 0 auto; padding: 2% !important; 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;}