/* --- Global Styling --- */ body { font-family: Arial, Helvetica, sans-serif; margin-top:20px; font-size:13px; color:#666666; line-height:19px; } h1{ font-size: 18px; font-weight: bold; color: #006633; text-align: left; vertical-align: top; line-height: 28px; margin-bottom:20px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #666666; } p { } ul, ol{ padding-left: 2em; } ul li { font-size:13px; color:#666666; line-height:19px; list-style: square; } ol li { font-size:13px; color:#666666; line-height:19px; } #copy h2 { border-bottom:1px solid #999; } h3 { font-size:13px; color:#006633; } h2 { color:#006633; font-size:18px; } img { border: none; } .header { text-align: center; margin-bottom:10px; } .header img { max-width:100%; } .footerText { text-align:center; font-size:11px; margin-top:0; color:#666666; float: left; display:flex; flex-direction:column; } .divider { height:8px; width:100%; background-image: url('divider.jpg'); background-repeat: repeat-x; margin-bottom:20px; margin-top:10px; } .socialIcons { text-align:right; } .socialIcons a { margin-left:20px; text-decoration: none; } /* quickcart */ .quickcart{ float: left; height: 35px; line-height: 35px; margin: 23px 0 0; padding-bottom: 10px; text-align: right; } .quickcartinfo{ float: left; margin-right: 5px; text-align: right; } .quickcartbtn { height: 15px; line-height: 15px; text-align: right; margin-left: 3px; } .quickcartbtn .btn { font-size: 80%; background: #60BB46; color:#fff; text-decoration:none; display: inline-block; float: none; border: none; border-radius: 0; padding: 2px 5px; margin: 2px 3px 0 0; } .quickcartbtn .btn:hover{ background: #abd69b; color:#fff; text-decoration:none; } .quickcartbtn .btn:active  { background: #abd69b; border-bottom:0; margin-top:5px; } iframe { width:100%; } .homepageImage { max-width:100%; min-width:100%; } .homeBlockImageHolder { padding:5px; background-image: url('divider.jpg'); background-repeat:repeat; margin-top:20px; } .homeBlock h2 { font-size:15px; color:#006633; margin:0; padding:0; margin-top:20px; } .homeBlock p { margin-top:10px; height:60px; } .homeBlockImageHolder img { width:100%; } .readMore, a.btn,.btn, .button  { background: #60BB46; color:#fff; text-decoration:none; display:block; float:left; padding:15px 10px; border: none; border-bottom:5px solid #94c484; border-radius:5px; font-size:15px; font-weight:bold; } .readMore:hover, a.btn:hover,.btn:hover, .button:hover  { background: #abd69b; color:#fff; text-decoration:none; } .readMore:active, a.btn:active,.btn:active, .button:active  { background: #abd69b; border-bottom:0; margin-top:5px; } #head { font-size: 18px; font-weight: bold; color: #006633; text-align: left; vertical-align: top; line-height: 28px; margin-bottom:20px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } #head1 { font-size: 18px; font-weight: bold; color: #006633; text-align: left; vertical-align: top; height: 24px; } #copy { font-size: 13px; color: #999999; text-align: left; vertical-align: top; padding: 0px; margin-top: 10px; margin-bottom: 8px; line-height: 19px; } .copy1 { font-size: 13px; color: #999999; text-align: left; vertical-align: top; padding: 0px; margin-top: 10px; margin-bottom: 8px; line-height: 19px; text-decoration: none; } .bullet { font-size: 13px; color: #006633; text-align: left; vertical-align: top; padding: 0px; margin-top: 10px; margin-bottom: 8px; line-height: 19px; text-decoration: none; } #quote { font-size: 18px; font-style: italic; text-align: left; vertical-align: top; border-bottom-width: 1px; width: 244px; height: 65px; color: #006633; line-height: 120%; } .head { font-size: 18px; font-style: italic; text-align: left; vertical-align: top; border-bottom-width: 1px; width: 244px; color: #006633; line-height: 19px; } .subhead { font-size: 13px; font-weight: bold; text-align: left; vertical-align: top; border-bottom-width: 1px; color: #006633; line-height: 19px; } #rhbullet { font-size: 13px; font-style: italic; color: #006633; vertical-align: middle; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; padding-bottom: 8px; padding-top: 8px; float: left; width: 12px; font-weight: bolder; } #bulletindent { float: right; font-style: italic; font-size: 13px; color: #999999; border-bottom-color: #999999; border-bottom-style: solid; border-bottom-width: 1px; padding-top: 8px; padding-bottom: 8px; width: 232px; } #panel { width: 144px; clear: both; } /* --- Menu ---*/ .lhnavoff { margin:0; padding:0; list-style: none; margin-bottom:10px; } .lhnavoff ul { padding:0; margin:0; background-color:#fff; list-style:none; } .lhnavoff ul li ul li { border: none; margin-bottom:1px; padding: 0; background-color:#fff; list-style:none; } .lhnavoff ul li { padding: 0; margin-bottom:1px; list-style:none; background-color: #eaeaea; } .lhnavoff ul li a { font-size: 13px; color: #333333; padding:14px; display:block; text-align:left; font-weight:bold; text-decoration: none; } .lhnavoff ul li a span{ /*display: block; padding: 0 0 0 3%;*/ } .lhnavoff ul li a span img{ padding: 0 3% 0 0; } .lhnavoff ul ul { display: none; padding: 0 5%; } .lhnavoff ul li ul li a { font-weight:normal; text-decoration: none; } .lhnavoff .subsubmenu{ display: none; padding: 0 5%; } .lhnavoff ul li ul li ul li a { font-weight:normal; text-decoration: none; } .lhnavon { background: #abd69b !important; color: #006633 !important; font-weight:bold; } .subPage { display:block; padding-left:10px; text-decoration:none; color:#ccc; } .lhnavon > a{ color:#006633 !important; font-weight:bold; } .greyitals { font-style: italic; font-size: 13px; color: #999999; text-decoration: none; } .menuprefix{ position: absolute; } .menutext{ padding-left: 1em; } .grey { font-size: 13px; color: #999999; text-decoration: none; } #bulletindent1 { float: right; font-style: italic; font-size: 13px; color: #999999; padding-top: 8px; padding-bottom: 8px; width: 232px; } /* .lhnavoff > ul > li.has-sub > a span { background: url("arrow_down.png") 3% center no-repeat; } .lhnavoff > ul > li.has-sub.active > a span { background: url("arrow_right.png") 3% center no-repeat; } */ #rhbullet1 { font-size: 13px; font-style: italic; color: #006633; vertical-align: middle; padding-bottom: 8px; padding-top: 8px; float: left; width: 12px; font-weight: bolder; } .green { color: #006633; font-size: 13px; text-decoration: none; } #smallgrey { font-size: 10px; color: #999999; text-decoration: none; height: 36px; border-top-width: 1px; border-top-style: solid; border-top-color: #999999; padding-top: 4px; } .small { font-size: 10px; color: #999999; text-decoration: none; line-height: 12px; } p a{ color:#60bb46; font-weight:bold; } a:hover { color: #006633; } .subhead2 { font-size: 13px; font-weight: bold; text-align: left; vertical-align: top; border-bottom-width: 1px; color: #006633; line-height: 19px; margin-top: 10px; } /* #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a { margin: 0; padding: 0; border: 0; list-style: none; font-weight: normal; text-decoration: none; line-height: 1; font-family: 'Open Sans', sans-serif; font-size: 1em; position: relative; } #cssmenu { width: 250px; border-bottom: 4px solid #656659; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #cssmenu a { line-height: 1.3; } #cssmenu > ul > li:first-child { background: #66665e; background: -moz-linear-gradient(#66665e 0%, #45463d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66665e), color-stop(100%, #45463d)); background: -webkit-linear-gradient(#66665e 0%, #45463d 100%); background: linear-gradient(#66665e 0%, #45463d 100%); border: 1px solid #45463d; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #cssmenu > ul > li:first-child > a { padding: 15px 10px; background: url(menu_images/pattern.png) top left repeat; border: none; border-top: 1px solid #818176; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; font-family: 'Ubuntu', sans-serif; text-align: center; font-size: 1.2em; font-weight: 300;  text-shadow: 0 -1px 1px #000000; } #cssmenu > ul > li:first-child > a > span { padding: 0; } #cssmenu > ul > li:first-child:hover { background: #66665e; background: -moz-linear-gradient(#66665e 0%, #45463d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66665e), color-stop(100%, #45463d)); background: -webkit-linear-gradient(#66665e 0%, #45463d 100%); background: linear-gradient(#66665e 0%, #45463d 100%); } #cssmenu > ul > li { background: #e94f31; background: -moz-linear-gradient(#e94f31 0%, #d13516 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e94f31), color-stop(100%, #d13516)); background: -webkit-linear-gradient(#e94f31 0%, #d13516 100%); background: linear-gradient(#e94f31 0%, #d13516 100%); } #cssmenu > ul > li:hover { background: #e84323; background: -moz-linear-gradient(#e84323 0%, #c33115 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e84323), color-stop(100%, #c33115)); background: -webkit-linear-gradient(#e84323 0%, #c33115 100%); background: linear-gradient(#e84323 0%, #c33115 100%); } #cssmenu > ul > li > a { font-size: .9em; display: block; background: url(menu_images/pattern.png) top left repeat; color: #ffffff; border: 1px solid #ba2f14; border-top: none; text-shadow: 0 -1px 1px #751d0c; } #cssmenu > ul > li > a > span { display: block; padding: 12px 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #cssmenu > ul > li > a:hover { text-decoration: none; } #cssmenu > ul > li.active { border-bottom: none; } #cssmenu > ul > li.has-sub > a span { background: url(menu_images/icon_plus.png) 96% center no-repeat; } #cssmenu > ul > li.has-sub.active > a span { background: url(menu_images/icon_minus.png) 96% center no-repeat; } #cssmenu ul ul { display: none; background: #fff; border-right: 1px solid #a2a194; border-left: 1px solid #a2a194; } #cssmenu ul ul li { padding: 0; border-bottom: 1px solid #d4d4d4; border-top: none; background: #f7f7f7; background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec)); background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%); background: linear-gradient(#f7f7f7 0%, #ececec 100%); } #cssmenu ul ul li:last-child { border-bottom: none; } #cssmenu ul ul a { padding: 10px 10px 10px 25px; display: block; color: #676767; font-size: .8em; font-weight: normal; } #cssmenu ul ul a:before { content: '\00BB'; position: absolute; left: 10px; color: #e94f31; } #cssmenu ul ul a:hover { color: #e94f31; } */ /*--- Garden Watering Styles -------------------------------------------------------------- */ .popup h2 { color:#063; font-size:18px; height:24px; } .popup a { color:#03F !important; } a.red-link { color:#FF0000 !important; } #blackout { bottom:0; left:0; position:fixed; width:100%; z-index:100; height:100%; } .pop-box { display:none; position:absolute; top:15px; left:0; background:url(green-overlay.png); padding:10px; color:#fff; width:360px; border:1px solid #60bb46; z-index:999; } .watering a { font-weight:bold; color: #063; position:relative; } .watering a:hover .pop-box { display:block; } .video-box { position:fixed; top:15%; left:0; width:100%; z-index:200; text-align:left; } .vid-box { width:680px; margin:auto; padding:20px; background-color:#fff; -moz-box-shadow: 0px 0px 10px #333; -webkit-box-shadow: 0px 0px 10px #333; box-shadow: 0px 0px 10px #333; position:relative; font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#999; line-height:20px; } .close-icon { background:url(close.gif); height:26px; width:26px; display:block; float:right; } .vid-box h3 { color:#063; margin-top:0; } .rightBlock{ float:right; width: 50%; } .leftBlock { float:left; width:50%; } .waterBlock { padding:10px 0; border-bottom:1px solid #000; } .waterBlock:last-child { border-bottom: 0; } .waterBlock img { margin-left:20px; } .clear { clear:both; } .case-study { margin-top:20px; border:1px solid #ccc; background-color:#f9f9f9; padding:20px; } .case-study h3 { margin-top:0;	 } .case-study .csimage { height:100px; margin-right:20px; overflow:hidden; width:120px; float:left; border:1px solid #aad69b; } .case-study .maincsimage { height:120px; margin-right:20px; overflow:hidden; width:150px; float:left; border:1px solid #aad69b; } .case-study a { color:#006633; } .date { font-weight:normal; } .contactDetails { margin-bottom:20px; display:block; font-size:12px; text-align:right; } .contactDetails a { color:#000; } /* --- Request a Callback --- */ #racb { border-radius:5px; padding:10px; padding-right:0; color:white; margin-top:10px; float: left; } #racb input[type=text] { padding:10px 0; border-radius:3px; border:1px solid #94c484; width:160px; margin-right:5px; text-indent:5px; box-shadow: inset 0px 2px 5px #ccc; } #racb label { margin-right:5px; } #racb input[type=submit] { background-color:#60bb46; border:0; color:#fff; padding:10px 8px; font-size:15px; border-radius:3px; } .condClear { display:none; } .middle{ float:left; width:460px; } .left{ float:left; width:300px; } .right{ float:left; width:300px; } .right h2, .left h2{ font-size: 13px; font-weight: bold; text-align: left; vertical-align: top; border-bottom-width: 1px; color: #006633; line-height: 19px; margin-bottom:0px; }  .right p, .left p{ margin-top:0px; } .container{ width: 600px; padding:10px; margin:auto; } /* ---- Banner Styles ---- */  #bannerImage { position:relative; } .textOver { position:absolute; left:15px; bottom:15px; padding:5px; background-color:rgba(0,0,0,0.2); } .textOver h1 { margin:0; padding:0; color:#fff; font-size:15px; border:0; background-color: #60bb46; padding:5px; text-decoration:none; } #installation img, #watering img, #irrigation-systems img, #advice img { width:30%; float:right; margin-left:20px; margin-bottom:20px; } /* --- News --- */ .row .grid_9.news-block { margin-bottom:20px; padding-bottom:20px; border-bottom: 1px solid #ccc; } .news-image { display:block; height: 127px; background-repeat: no-repeat; background-size: 100%; background-size: cover; background-position: center center; border:5px solid #fff; position:relative; } .news-image::after { display:block; content: ""; position:absolute; top:-5px; right:-5px; left:-5px; bottom:-5px; border:1px solid #60bb46; } .news-block h3 a { color: #006633; text-decoration: none; font-size: 16px; line-height:24px; } .news-block h3 { margin-top:-4px; font-size: 13px; color:#999999; } .news-btn { display:block; background-color: #60bb46; border: 0; color: #fff; padding: 10px 8px; font-size: 15px; border-radius: 3px; float:left; text-decoration: none; font-weight:normal; } a.news-btn:hover { color:#fff; background-color:#58ad3f; } .news-article .date { float:right; font-size: 13px; color:#999999; position:relative; top:19px; } .news-article p { margin-top:0; } .max-img {  width:100%; height:auto; margin-bottom:20px } /* marketing */ .marketing-list-entry{ width: 23%; margin: 0 1%; float: left; } /* section */ .imageHolder { padding:5px; } .imageHolder_gray{ background: url('divider.jpg') repeat; } .imageHolder_red{ background: url('divider_red.jpg') repeat; } .imageHolder_blue{ background: url('divider_blue.jpg') repeat; } .imageHolder_green{ background: url('divider_green.jpg') repeat; } .imageHolder a{ width: 100%; height: 210px; overflow: hidden; display: block; background: #fff; text-align: center; } .imageHolder img { max-width: 100%; max-height: 100%; } .title, .title a { font-size:15px; color:#006633; margin:0; padding:0; margin-bottom: 10px; } /* product */ .mainimage{ overflow: hidden; } .extraimageblock{ padding-top: 10px; } .extraimage{ /*float: left; margin: 0 1% 0 0; width: 23%;*/ text-align: center; } .extraimage img{ border: none; max-width: 100%; max-height: 65px; } /* checkout */ .cpi { color:#fff; font: bold; display:block; float:left; width: 24%; padding-left: 1%; border-bottom:5px solid #94c484; } .cpi-active { background: #60BB46; } .cpi-inactive { background: #abd69b; } /* Recently Viewed Products List styles ------------------------------------ */ .recent-products {  margin: 10px auto; /*width:  425px;*/ } #rphtml { display: none;  visibility:hidden; } /* Used internally - do not delete */ #recenthtlist td { border: none; } #recenthtlist h2, .recenththeader h2 { text-align: center; padding-bottom: 5px; } #recenthtlist h2 { margin: 0; } .recenththeader h2 { margin: 0 20px 20px 0; } #recenthtlist { overflow: hidden; text-align: left; /*padding: 0 20px 30px 20px; margin-bottom: 10px;*/ } .content-area #recenthtitem {  clear: none; float: left; width: 25%; text-align: center; } #recenthtitem .imageHolder a { height: 205px; width: 205px; } .content-area #recenthtitem, #product-page-body #recenthtitem {  /*background: url("grad-up2.gif") repeat-x bottom; border: 1px solid #abd69b;*/ } .content-area #recenthtitem td { padding: 5px; } .content-area . .content-area .recenthtitemimage img { padding: 0; /*width: 75px;*/ width: 100%; } .content-area #recenthtitem .recenthtitemimage { padding-left: 5px; } .sidebar #recentstlist { overflow: hidden; } .sidebar #recenthtitem {  /* margin-top: 10px;*/ clear: left; text-align: center; border-collapse: collapse; } .sidebar #recenthtitem p { /* color: #106333; font-size: 11px; font-weight: bold; */ margin: 0; /* padding: 6px 0 6px 0; */ } .sidebar #recenthtitem img { padding: 0; margin: 0; border: none; } .recenthtitemspacer { width: 5px; } .recenthtitemdesc {} .recenthtitemprice {} #recenthtitem .recenthtitemdelete img { margin-left: 32px; } .recenthtitemspacer { width:2px !important;  border:0 !important; padding: 0px !important; } .recenthtbuttonleft { float: left; background: none; cursor: pointer; width: 100px; border: 0; } .recenthtbuttonright { float: right; background: none; cursor: pointer; width: 100px; border: 0; } /***** Screen Bigger than 960px *****/ @media only screen and (min-width:1200px) { .imageHolder a{ height: 270px; } } /***** Tablet (Smaller than 959px) *****/ @media only screen and (min-width: 768px) and (max-width: 959px) { .imageHolder a{ height: 162px; } } /***** Phone (portrait 300px) *****/ @media only screen and (max-width: 767px) { .imageHolder a{ height: 190px; } } /***** Phone (landscape 420px) *****/ @media only screen and (min-width: 480px) and (max-width: 767px) { .imageHolder a{ height: 190px; } } @media only screen and (max-width: 480px)  { .imageHolder a{ height: 190px; } } @media only screen and (max-width: 767px) { .footerText { align-items:center;} select.form_input_general.ajs-attr { margin: 0px 0px 0px -81px; } p.cart-button-placement + p { clear: both; }