﻿/*/// Online Playgrounds Stylesheet ///*/

#wrap{position: relative; width: 994px; margin: 0 auto;}

#wrap #top{height: 25px; line-height: 25px; background: url(/images/bg-top.gif) #b4d32d no-repeat top left; text-align: right; color: #000; font-weight: bold; padding: 0 15px 0 0;}
#wrap #top a{color: #000;}

#wrap #hdr{position: relative; height: 130px;}
#wrap #hdr .newwebsite{position: absolute; top: 10px; left: 12px;}
#wrap #hdr .logo{position: absolute; top: 13px; left: 165px;}
#wrap #hdr .basketsearch{position: absolute; width: 313px; height: 72px; top: 25px; right: 12px; background: url(/images/bg-basketsearch.gif) no-repeat top left;}
#wrap #hdr .basketsearch .basketholder{position: absolute; width: 303px; height: 32px; line-height: 32px; top: 0; left: 0; font-size: 110%; padding: 0 0 0 10px; color: #333;}
#wrap #hdr .basketsearch .basketholder strong{font-size: 110%;}
#wrap #hdr .basketsearch .basketholder a.basket{position: absolute; top: 4px; right: 7px;}
#wrap #hdr .basketsearch .searchholder{position: absolute; width: 313px; height: 32px; bottom: 0; left: 0;}
#wrap #hdr .basketsearch .searchholder input{position: absolute; width: 200px; top: 7px; *top: 5px; left: 12px; border: none;}
#wrap #hdr .basketsearch .searchholder input.submit{width: 62px; height: 23px; top: 4px; left: auto; right: 12px;}

#wrap .column{float: left;}
#wrap .left{width: 153px; margin: 0 10px 0 0;}
#wrap .lrg{width: 580px; padding: 0 10px;}
#wrap .right{width: 221px; margin: 0 0 0 10px;}

#wrap .homecol h1{font-weight: bold; font-size: 1.6em; color: #517110;}
#wrap .homecol span{font-size: 1.4em;}

#wrap .accred{position: relative; height: 60px; color: #888; font-size: 90%; line-height: 1.1em; margin: 10px 0 0 0;}
#wrap .accred div{position: absolute; left: 25px;}
#wrap .accred .disclaimer{width: 210px; top: 10px; left: 170px;}
#wrap .accred .accreditations{top: 13px; left: auto; right: 265px;}
#wrap .accred .copyright{top: 45px; left: auto; right: 15px;}

#ftr{width: 954px; margin: 0 auto; font-size: 90%; padding: 32px 32px 20px 32px; *padding-left: 31px; line-height: 16px; color: #4C5F6A; background: url(/images/bg_ftr.gif) #c2c2c0 no-repeat top left;}
@media screen and (-webkit-min-device-pixel-ratio:0){#ftr{padding: 32px 32px 20px 31px;}}
#ftr .left{float: left; width: 600px;}
#ftr .right{float: right; width: 250px; text-align: right;}
#ftr a{text-decoration: none;}
#ftr a:hover{color: #898C90;}
#ftr span{color: #6D6F71;}

/*/// Navigation ///*/

ul#nav, ul#nav li, ul#nav ul{margin: 0; padding: 0; list-style: none; font-weight: bold;}

ul#nav li a{display: block; padding: 7px 0 7px 20px; text-decoration: none; color: #fff; margin: 0;}
ul#nav li a:hover, ul#nav li.on a{text-decoration: underline;}

ul#nav li.home{background: url(/images/nav/bg-home.gif) #48494b no-repeat top right;}
ul#nav li.home ul{background: #9ea0a2;}
ul#nav li.fitness{background: url(/images/nav/bg-fitness.gif) #9a0e20 no-repeat top right;}
ul#nav li.fitness ul{background: #aea8a8;}
ul#nav li.playground{background: url(/images/nav/bg-playground.gif) #8a2054 no-repeat top right;}
ul#nav li.furniture{background: url(/images/nav/bg-furniture.gif) #cb682b no-repeat top right;}
ul#nav li.grass{background: url(/images/nav/bg-grass.gif) #6c95c6 no-repeat top right;}
ul#nav li.commercial{background: url(/images/nav/bg-commercial.gif) #b4d230 no-repeat top right;}
ul#nav li.commercial ul{background: #a6a6a6;}
ul#nav li.domestic{background: url(/images/nav/bg-domestic.gif) #8fc229 no-repeat top right;}
ul#nav li.domestic ul{background: #a6a6a6;}

ul#nav ul{display: none;}
ul#nav li.on ul li a{text-decoration: none;}
ul#nav ul li a:hover, ul#nav ul li.on a{color: #000;}
ul#nav li.on ul{display: block;}

/*/// Homepage styles ///*/

.productreel{position: relative; margin: 0 0 15px 0;}
.productreel ul, .productreel ul li{margin: 0; padding: 0; list-style: none;}
.productreel ul li{display: none; width: 580px; height: 203px; background: url(/images/productreel/bg-one.jpg) no-repeat 0 0;}
.productreel ul li.two{background: url(/images/productreel/bg-two.jpg) no-repeat 0 0;}
.productreel ul li.three{background: url(/images/productreel/bg-three.jpg) no-repeat 0 0;}
.productreel ul li a{position: absolute; width: 56px; height: 18px; bottom: 28px; left: 300px; background: url(/images/productreel/btn-small.gif) no-repeat 0 0; padding: 3px 0 0 5px; color: #fff; text-decoration: none; font-weight: bold; font-size: 90%;}
.productreel .side{position: absolute; width: 180px; right: 0; top: 0; bottom: 0; z-index: 5; padding: 18px 20px 0 0; text-align: right;}
.productreel .side p{text-align: right; margin: 7px 0; color: #000;}
.productreel .side a{float: right; width: 109px; height: 30px; background: url(/images/productreel/btn.gif) no-repeat 0 0; color: #fff; text-decoration: none; line-height: 30px; font-weight: bold; padding: 0 0 0 10px; margin: 3px 0;}

.sourceapart{position: relative; width: 587px; height: 131px; background: url(/images/bg-sourceapart.gif) no-repeat 0 0;}
.sourceapart h3{position: absolute; top: 10px; left: 17px;}
.sourceapart .text{position: absolute; width: 280px; top: 17px; left: 150px; font-size: 1.2em; line-height: 20px;}
.sourceapart .text strong{font-size: 1.1em; color: #444;}
.sourceapart .button{position: absolute; top: 70px; right: 17px;}

/*/// Sidebar styles ///*/

.right .sidebar{position: relative; width: 221px; height: 86px; background: url(/images/sidebars/fitness.jpg) no-repeat top left; margin: 0 0 5px 0;}
.right .sidebar span{position: absolute; width: 95px; top: 10px; left: 10px; font-size: 16px; font-weight: bold; color: #fff; letter-spacing: -1px;}
.right .sidebar span u{font-size: 80%; text-decoration: none;}
.right .sidebar a{position: absolute; bottom: 10px; left: 10px; width: 71px; height: 18px; background: url(/images/sidebars/bg-btn.gif) no-repeat 0 0; color: #fff; text-decoration: none; font-weight: bold; letter-spacing: -1px; padding: 3px 0 0 5px;}
.right .sidebar a:hover{background-position: 0 -21px;}
.right .playground{background-image: url(/images/sidebars/playground.jpg);}
.right .furniture{background-image: url(/images/sidebars/furniture.jpg);}
.right .grass{background-image: url(/images/sidebars/grass.jpg);}
.right .planyourtrail{width: 221px; height: 207px; background-image: url(/images/sidebars/plan-your-trail.jpg);}
.right .planyourtrail a{bottom: 30px; left: 14px; background: none;}

.right .gen{height: auto; background: url(/images/sidebars/bg-gen-tl.gif) #8c936e no-repeat 0 0; padding: 3px 0 0 0; color: #fff; font-size: 90%;}
.right .gen .inner{background: url(/images/sidebars/bg-gen-bl.gif) #8c936e no-repeat bottom left; padding: 0 10px 3px 10px;}
.right .gen .inner h3{color: #fff; font-size: 145%; font-weight: bold;}
.right .gen .inner p{margin: 5px 0;}
.right .gen .inner img{margin: 5px 0;}

/*/// General Text, Images, Links Etc. ///*/

a.sidebar{display: block; border-bottom: 1px #fff solid;}
a.sidebar img{vertical-align: bottom;}
a.lime{color: #C0D62F;}

.prodprice{color: #90A432; font-weight: bold; font-size: 125%;}
.prodprice b{font-size: 60%;}

.catintro{font-weight: bold; color: #90A432;}
.trails{color: #AE1B24;}
.thermomarkers{color: #C9B51A;}
.play{color: #739D3A;}
.benches{color: #F26922;}
.spares{color: #008AB5;}

.sparesbox{float: left; width: 180px; margin: 10px 13px 10px 0; font-size: 100%; font-weight: bold;}
.sparesthumb{float: left; width: 73px; border: 1px #a1a1a1 solid; margin-right: 5px;}

.inset{float: left; margin: 0 10px 10px 0;}

div.optionsbtn
{
    float: left;
    width: 185px;
    margin: 0 15px 0 0;
    background: #f0f0f0;
    padding: 10px;
    font-size: 90%;
    border: 8px #cfcfcf solid;
    -webkit-border-radius: 10px;
    -webkit-border-bottomright: 0;
    -moz-border-radius: 10px;
    -moz-border-radius-bottomright: 0;
	-moz-border-bottom-colors: #ABABAB #B8B8B8 #C2C2C2 #CFCFCF #D9D9D9 #E5E5E5 #F5F5F5 #f0f0f0;
	-moz-border-top-colors: #ABABAB #B8B8B8 #C2C2C2 #CFCFCF #D9D9D9 #E5E5E5 #F5F5F5 #f0f0f0;
	-moz-border-left-colors: #ABABAB #B8B8B8 #C2C2C2 #CFCFCF #D9D9D9 #E5E5E5 #F5F5F5 #f0f0f0;
	-moz-border-right-colors: #ABABAB #B8B8B8 #C2C2C2 #CFCFCF #D9D9D9 #E5E5E5 #F5F5F5 #f0f0f0;
}
div.optionsbtn h2{border-bottom: 1px #A4B839 solid; padding: 0 0 2px 0; font-size: 130%; font-weight: bold; background: url(/images/bg-h2-online.gif) no-repeat bottom right;}
div.optionsbtn h2.cheque{background: url(/images/bg-h2-cheque.gif) no-repeat bottom right;}

/*/// Product Listing Styles ///*/

.paging{float: right; margin: 5px 0 10px 0; *margin: 0;}
.paging strong{float: left; line-height: 20px; margin-right: 3px;}

div.prodholder{border: 1px #aaa dashed; clear: both; zoom: 1; margin: 15px 0; background: #F2F8EA; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
div.prodholder:after{content: ".";clear: both;display: block;height: 0;visibility: hidden;}
div.prodholder h3{padding: 5px 10px; background: #B4D32D; color: #fff; margin: 5px; font-size: 125%; font-weight: bold; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
div.prodholder .prodimage{float: right; text-align: right; width: 165px; margin: 10px 10px 10px 0;}
div.prodholder .prodimage img{padding: 2px; border: 1px #ccc solid;}
div.prodholder .proddetails{float: left; width: 380px; margin: 20px 10px;}
div.prodholder .proddetails .price{font-size: 120%;}
div.prodholder .proddetails .price b{color: #ccc;}

a.paging, span.pagingCurrent
{
    display: block;
    float: left;
    padding: 2px 2px;
    font-weight: bold;
    text-decoration: none;
    border: 1px #ddd solid;
    margin: 0 2px;
}

a.paging:hover, span.pagingCurrent
{
    background: #C8DA4A;
    color: #fff;
}

.searchresults-retry{float: left; width: 410px; height: 44px; background: #B4D32D; padding: 0 0 0 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

/*/// Form Styles ///*/

form.contact label, form.contact input
{
    float: left;
    width: 120px;
    margin-bottom: 3px;
}

form.contact input, form.contact select, form.contact textarea
{
    width: 170px;
    border: 1px #ccc solid;
    margin-bottom: 5px;
}

form.contact select{width: 172px;}
form.contact textarea{width: 230px;}
form.contact input#submit {width: 70px; font-size: 100%; font-weight: bold; color: #fff; background: #C0D62F; padding: 1px 0;}
a.backbtn{float: left; font-weight: bold; font-size: 100%; text-decoration: none; padding: 0 3px; border: 1px #ccc solid; color: #fff; background: #C0D62F; width: 70px; text-align: center;}

div.prodholder form.prod
{
}

div.prodholder form.prod label{float: left; width: 55px; margin-top: 1px;}
div.prodholder form.prod select{float: left; width: 70px; font-size: 80%; border: 1px #ccc solid;}
div.prodholder form.prod input#submit{border: 0;}

.trailsreel ul{margin: 0; padding: 0;}
.trailsreel ul li{margin: 0; padding: 0; list-style: none; display: none;}
.trailsreel ul li img{-moz-border-radius: 5px; border: 2px #666 solid;}

.error
{
    color: Red;
    font-size: 90%;
    font-weight: bold;
}

