/* HTML5 Reset :: style.css */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
article, aside, figure, footer, header, hgroup, nav, section {display: block;}
/* Responsive images and other embedded objects
Note: keeping IMG here will cause problems if you're using foreground images as sprites.
If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}
/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}
/* we use a lot of ULs that aren't bulleted.
don't forget to restore the bullets within content. */
ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
input, select {vertical-align: middle;}
pre {
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}
select, input, textarea {font: 99% sans-serif;}
table {font-size: inherit; font: 100%;}
/* Accessible focus treatment
people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}
small {font-size: 85%;}
strong, th {font-weight: bold;}
td, td img {vertical-align: top;}
/* Make sure sup and sub don't screw with your line-heights
gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}
/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
button {cursor: pointer;}
/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}
/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}
/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/
/* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
body { background-color:#419504; font: 13px Arial, Helvetica, sans-serif; line-height:18px; position:relative;}
/* using local fonts? make sure to read up on Paul Irish's
Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */
/* we like off-black for text */
body, select, input, textarea {color: #ffffff;}
a {color:#70be11; text-decoration:none}
a:hover {color: #585858; }
/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #70be11; color: #fff; text-shadow: none;}
::selection {background: #70be11; color: #fff; text-shadow: none;}
/* j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #585858;}
ins {background-color: #585858; color: #000; text-decoration: none;}
mark {background-color: #585858; color: #000; font-style: italic; font-weight: bold;}
/*Font-Face*/
@font-face {
font-family: 'EconomicaRegular';
src: url('Economica-Regular-OTF-webfont.eot');
src: url('Economica-Regular-OTF-webfont.eot?#iefix') format('embedded-opentype'),
url('Economica-Regular-OTF-webfont.woff') format('woff'),
url('Economica-Regular-OTF-webfont.ttf') format('truetype'),
url('Economica-Regular-OTF-webfont.svg#EconomicaRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.forMobile {font: 42px 'EconomicaRegular',Helvetica,sans-serif; color:#333; color:#2c9a08; background:url("../images/line-inside.png") repeat-x left bottom; padding-bottom:30px; margin-bottom:20px }
.forMobile a { color:#333 }
.forDesktop, .desktopPic { display:none }
/*Basic*/
img { height:inherit }
hr { border:none 0; border-top:1px dashed #809547;height: 1px; margin-bottom:21px; clear:both}
.WhiteCaps { color:#FFF; text-transform:uppercase }
.PageWrapper { width:100%; margin:0 auto; padding:0; }
.ContentWrapper { width:100%; overflow:hidden; padding:0; position:relative; margin:0; min-width:360px}
.logo, .logohome { position:relative; background-color:#000; width:100%; margin:0; padding:0;}
/* Mobile Menu */
nav { padding:0; margin:0; background-color:#69ba0e; width:100%}
nav ul { padding:0; display:none; }
nav li a{ background-color:#69ba0e; border-bottom: 1px solid #fff; display:block; padding:15px 4%; color:white; text-align:left; text-decoration:none; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; width:92%; float:left; }
nav a:hover{ background:#adcc09; }
nav a#pull { display:block; background-color:#2c9a08; position:relative; padding:20px 0 20px 50px; font:21px EconomicaRegular, Helvetica, sans-serif; color:#fff }
nav a#pull:after { content:""; background: url('nav-icon.png') no-repeat; width:30px; height:30px; display:inline-block; position:absolute; left:18px; top:18px; }
/*FeatureButtons*/
.FeatureButton-Contact { border:1px solid #dadada; font:19px 'EconomicaRegular', Helvetica, sans-serif; margin-bottom:8px; }
.FeatureButton-Contact iframe { border:2px solid #fff; }
.FeatureButton-Contact a { border:2px; padding:20px 5px 20px 25px; display:block; font-weight:normal; color:#2c9a08; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;}
.FeatureButton-Range { background-color:#289428; border:1px solid #dadada; font:19px 'EconomicaRegular', Helvetica, sans-serif; margin-bottom:8px}
.FeatureButton-Lawncare{ background-color:#528618; border:1px solid #dadada; font:19px 'EconomicaRegular', Helvetica, sans-serif;}
.FeatureButton-Range a, .FeatureButton-Lawncare a { border:2px solid #fff; padding:20px 5px 20px 25px; display:block; font-weight:normal; color:#fff; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;}
.FeatureButton-Range a:hover, .FeatureButton-Lawncare a:hover, .FeatureButton-Contact a:hover { background-color:#333; color:#FFF}
/*Content*/
.PageWrapper { min-width:340px }
.Pics img { padding:10px; margin-bottom: 10px; border:1px solid #c7c7c7; border-left:15px solid #65b70d; display:block; }
.Content { background-color:#fff; padding:40px 8%; overflow:hidden; }
.Content h1 {font: 54px/68px 'EconomicaRegular', Arial, sans-serif;letter-spacing:-3px; color:#1857a6; padding:10px 0 40px}
.Content h2 { font:26px 'EconomicaRegular', Helvetica, sans-serif; color:#2c9a08; background:url("../images/line-inside.png") repeat-x left bottom; padding-bottom:30px }
.Content p { font:13px; padding:10px 0; color:#4c4c4c }
.Content ul { padding:0 0 0 15px; color:#4c4c4c; list-style:disc; line-height:21px}
.ContentLeft { float:left; width:100%; clear:both }
.ContentRight, .ContentMap { width:100%; margin-top:0; clear:both; }
.Threeway { width:100%; float:none; background:#fff; margin-bottom:10px; overflow:hidden}
.Threeway p { padding:10px 25px; color:#4c4c4c; display:block; min-height:100px}
.Threeway img { padding:0 3% 0 0; margin:0; border:0; float:left; width:40%}
.ThreeEnd { margin-right:0;}
/*Header*/
.HeaderFeatureImage { position:absolute; top:20px; right:38px; width:274px; background:#13a034 url("../images/green-bg.jpg") repeat-y left bottom; border-top:10px solid #333333; display:none}
.HeaderFeatureImage p { padding:15px 30px; font:19px 'EconomicaRegular', Helvetica, sans-serif;}
.HeaderSliderImage { position:absolute; top:20px; right:23px; width:300px; background:#13a034 url("../images/turf-lawn-grass.jpg") repeat-y right bottom; border-top:10px solid #333333; }
.HeaderSliderImage p { padding:15px 30px; font:19px 'EconomicaRegular', Helvetica, sans-serif;}
.HeaderImage { position:relative; background-color:#282828}
.HeaderTitleHome { padding:8%;}
.HeaderTitle { position:absolute; bottom:10px; left:0; padding-left:8%; }
.HeaderTitleHome h1, .HeaderTitle h1 { font: 24px/28px 'EconomicaRegular', Arial, sans-serif; color:#70be11; padding:10px 0 }
.HeaderTitleHome h1 { line-height:20px }
/* Footer */
.FooterWrapper { background:#000 url("../images/black-footer-tab.png") no-repeat left bottom; padding:15px 25px; overflow:hidden; margin:0 }
.FooterTerms { background:#70be11 url("../images/green-footer-tab.png") no-repeat left top; padding:25px; overflow:hidden; margin:0}
.FooterCredit { background: url("../images/footer-shadow.png") no-repeat left top; padding:7px 25px 35px; overflow:hidden; margin:0}
.FooterTerms img, .FooterCredit img { float:left; }
.FooterTerms img {display:none}
.FooterCredit p { padding:7px 4px; float:left; }
.FooterTerms p { padding:4px; float:left; font-size:11px; color:#1a8402; float:left;}
.FooterTerms strong { font-size:13px; color:#FFF; font-weight:normal}
.FooterTerms a { color:#333}
.FooterCredit a:hover, .FooterTerms a:hover { color:#fff}
.FooterMenu li { float:left; list-style:none; font-size:11px; }
.FooterMenu li a { text-decoration:none; color:#FFF; padding:9px 9px 9px 0; float:left; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; }
.FooterMenu li a:hover { text-decoration:none; }
/*Form*/
label { width: 140px; float: left; text-align: left; display: block; margin:5px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12px }
input {font-size:12px; padding:4px 2px; border:solid 1px #2c9a08; width:100&; margin:0; color:#666; font-family:Arial, Helvetica, sans-serif;}
textarea { font-size:12px; padding:4px 2px; border:solid 1px #2c9a08; width:100%; margin:0; color:#666; font-family:Arial, Helvetica, sans-serif; }
.submit { padding: 10px 0 0; }
.submit input { clear:both; width:120px; border:solid 1px #2c9a08; background-color:#2c9a08; color:#fff; height:35px; }
.ContentLeft label { width:160px; }
.ContentLeft input { width:100%; margin:0; color:#666; font-family:Arial, Helvetica, sans-serif;}
.ContentLeft textarea { width:100%; margin:0; color:#666; font-family:Arial, Helvetica, sans-serif; }
.ContentLeft .submit { padding: 10px 0 0 0; }
.ContentLeft .submit input { width:120px; color:#fff}
.HeaderSliderImage { display:none }
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Media queries!
-------------------------------------------------------------------------------*/
@media only screen and (min-width: 480px) {
.HeaderTitleHome { position:absolute; top:15%; left:0; padding-left:8%; width:300px;}
}
@media only screen and (min-width: 760px) {
.forMobile, .mobilePic { display:none}
.forDesktop, .desktopPic { display:block }
.HeaderTitleHome { position:absolute; top:10px; left:0; padding:0 0 0 8%; width:60%;}
.Pics img { float:right; padding:10px; border:1px solid #c7c7c7; border-left:15px solid #65b70d; margin:0 0 15px 25px }
.Threeway { width:30%; float:left; background:#65b70d; margin-right:3%;}
.Threeway p { padding:10px 25px; color:#fff; display:block; min-height:100px}
.Threeway img { padding:0; margin:0; border:0; float:none; width:100%}
.ThreeEnd { margin-right:0;}
body { background:#335b01 url("../images/grass-turf-lawn.jpg") repeat center top; font: 13px Arial, Helvetica, sans-serif; line-height:18px; position:relative;}
.PageWrapper { width:92%; margin:0 auto; }
.HeaderTitleHome { position:absolute; top:15%; left:0; padding-left:52px; width:300px;}
.HeaderTitleHome h1, .HeaderTitle h1 { font: 34px/38px 'EconomicaRegular', Arial, sans-serif; padding:10px 0 }
.HeaderTitleHome h1 { line-height:28px}
.FeatureButton-Range { background:#fff url("../images/dark-green-button-bg.jpg") no-repeat right center; margin-bottom:8px}
.FeatureButton-Lawncare{ background:#fff url("../images/green-button-bg.jpg") no-repeat right center; }
.Content { background:#fff url("../images/grass-page-bg.jpg") no-repeat right top; padding:40px 35px 40px 52px; }
.ContentLeft { float:left; width:60%; clear:none }
.ContentRight { float:right; width:35%; clear:none; padding:0; margin:155px 0 0 0 ; }
.ContentMap { float:right; width:35%; clear:none; padding:0; margin:0 ; }
.FooterTerms img {display:block}
/*Slider*/
.HeaderSliderImage {display:block; width:35%; overflow:hidden }
#slider {
display:block;
width: 300px; /* important to be same as image width */
height: 365px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 100%; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
width: 220px;
color: #fff;
display: none;
background:#13a034 url("../images/turf-lawn-grass.jpg") repeat-y left bottom;
padding:15px 50px 15px 30px; font:19px 'EconomicaRegular', Helvetica, sans-serif;
}
.clear {
clear: both;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 0;
padding-top:0;
height: 500px;
overflow: hidden;
}
}
@media only screen and (min-width: 990px) {
.HeaderSliderImage {display:block; width:300px }
/*Menu*/
.NavAreaHome{ background: url("../images/nav-shadow.png") no-repeat right bottom; width:250px; margin:285px 0 0 50px; padding:0 0 50px; float:left; }
.NavArea{ background: url("../images/nav-shadow.png") no-repeat right bottom; width:250px; margin:181px 0 0 50px; padding:0 0 50px; float:left; }
nav { list-style:none; padding:45px 0; margin: 0; background:#69ba0e url("../images/nav-bg.jpg") no-repeat 0 0; }
nav ul { display:block; }
nav li { margin: 0; padding: 0; overflow:hidden}
nav li a { border-bottom: none; background:url("../images/divider.png") repeat-x right bottom; width:200px; float:left; padding: 7px 5px 7px 45px; font:22px EconomicaRegular, Helvetica, sans-serif; text-decoration: none; color:#fff; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; }
nav li:hover a { background:#303030 url("../images/divider.png") repeat-x right bottom;}
nav .current a { background:#535252 url("../images/arrow.png") no-repeat right center; }
nav .current:hover a { background:#303030 url("../images/arrow.png") no-repeat right center;}
nav a#pull { display: none; }
.HeaderFeatureImage { display:block}
.HeaderImage { width:100%; margin:0 auto }
.ContentLeft { float:left; width:300px; clear:none }
.ContentRight { float:right; width:274px; margin-top:95px; clear:none }
.ContentMap { float:right; width:274px; clear:none }
/*Wrappers*/
.PageWrapper { width:990px; margin:0 auto; position:relative; }
.ContentWrapper { width:690px; overflow:hidden; padding:50px 0 0; position:relative;}
.logo { position:absolute; z-index:300; left:0; background-color:#000; width:320px}
.logohome { position:absolute; z-index:300; padding-top:104px; left:0; background-color:#000; width:320px }
/* Footer */
.FooterWrapper { background:#000 url("../images/black-footer-tab.png") no-repeat left bottom; padding:15px 25px; overflow:hidden; width:610px; margin-left:30px }
.FooterTerms { background:#70be11 url("../images/green-footer-tab.png") no-repeat left top; padding:25px; overflow:hidden; width:610px; margin-left:30px}
.FooterCredit { background: url("../images/footer-shadow.png") no-repeat left top; padding:7px 25px 35px; overflow:hidden; width:610px; margin-left:30px}
}