/*
font-family: 'Dancing Script', cursive;
font-family: 'Didact Gothic', sans-serif;
    
Pink: #ED1E79
Blue: #02458C

lite blue:2px dotted #8bd;
lite pink:#FFF0F6;
*/


/* (R) Patch */
sup{
    top: -0.8em;
    font-size: 48%;
}




/* Layout */
#content .wrapper{
    width:845px;
    padding:0;
    margin:0 auto;
    overflow:hidden;
    position:relative;
}
#content .section{
    position:absolute;
    right: 56px;
    top: 25px;
}
#content .section div{
    float:left;
    height:59px;
}




/* Rounded corners */
.corner-tl,
.corner-tr,
.corner-br,
.corner-bl{
    position:absolute;
    width:10px;
    height:10px;
}

.corner-tl{
    top:0; left:0;
    background:transparent url(../images/round_tl.png);
}
.corner-tr{
    top:0; right:0;
    background:transparent url(../images/round_tr.png);
}
.corner-br{
    bottom:0; right:0;
    background:transparent url(../images/round_br.png);
}
.corner-bl{
    bottom:0; left:0;
    background:transparent url(../images/round_bl.png);
}





/* Leaf title */
#content .section .block-left{
    background:transparent url(../images/leaf_l.png) repeat-x;
    width:17px;
}
#content .section .block-right{
    background:transparent url(../images/leaf_r.png) repeat-x;
    width:17px;
}
#content .section .block-main{
    background:transparent url(../images/leaf_c.png) repeat-x;
}
#content .section h1{
    font-family:'Dancing Script',cursive;
    color:#02458C;
    line-height:59px;
    padding:0 3px;
    font-size:34px;
}






/* Products */
#content .products{
    position:relative;
    width:670px;
    float:left;
    background:#C3E2F4 url(../images/bg_sand.jpg) no-repeat top;
    overflow:hidden;
}
#content .description h2{
    border-bottom:2px dotted #999;
    padding:0 0 3px 0;
    margin:0 0 12px 0;
}
#content .description a{
    text-decoration:underline;
    font-style:italic;
    opacity:0.9;
}
#content .description a:hover{
    color:#ed1e79 !important;
    opacity:1;
}






#content .body-sprays {
    background-image:url(../images/bg_bs.jpg) !important;
}
#content .new-products {
    background-image:url(../images/image.jpg) !important;
	background-position: 0px -80px;
	text-shadow: 0 0 2px rgba(0,0,0,0.7);
}
#content .new-products h2,
#content .new-products h3,
#content .new-products p,
#content .new-products li,
#content .new-products a,
#content .body-sprays h2,
#content .body-sprays h3,
#content .body-sprays p,
#content .body-sprays li,
#content .body-sprays a{
    color:#fff !important;
}





/* New Prods */
#content .new-products .description{
    position: absolute;
    right: 65px;
    top: 116px;
    width: 194px;
}
#content .new-products .image{
    height: 440px;
    line-height: 440px;
    text-align: center;
    width: 416px;
    position:relative;
}
#content .new-products .image img{
    vertical-align:center;
}

#content .new-products .new-spray{
    position: absolute;
    top: 75px;
    left:227px;
    width: 54px;
    height: 293px;
    border-radius: 4px;
}
#content .new-products .new-rollon{
    position: absolute;
    top: 158px;
    left: 227px;
    width: 74px;
    height: 181px;
    border-radius: 20px;
}
#content .new-products .new-spray:hover,
#content .new-products .new-rollon:hover{
    background:rgba(255,255,255,0.15);
}
#content .new-products .spray-left{
    left: 138px;
}
#content .new-products .rollon-left{
    left: 116px;
}






/* All Prods */
#content .all-products .list{
    margin-top:50px;
    padding:0 52px 40px 52px;
    overflow:hidden;
}
#content .all-products .list h2{
    padding:50px 0 3px 0;
    margin:0 0 0 0;
    font-size:22px;
    clear:both;
}
#content .all-products .list h3{
    margin:0 0 20px 0;
    padding:0 0 8px 0;
    border-bottom:2px dotted #888;
    font-size:14px;
}
#content .all-products .list .item{
    display:block;
    float:left;
    overflow:hidden;
    width:70px;
    padding:0 0 16px 20px;
    text-align:center;
    color:#333;
}
#content .all-products .list .item:hover{
    color:#ed1379;
}
#content .all-products .list .item img{
    width:60px;
    padding:0 0 6px 0;
}
#content .all-products .list .item span{
    display:block;
    height:30px;
    overflow:hidden;
}






/* Categories */
#content .category{
    height:440px;
    overflow:hidden;
}
#content .category .list{
    position:relative;
}
#content .category .list .item{
    position:relative; /* needed to make slide effect */
    display:none;
}
#content .category .list .item .image{
    height:370px;
    line-height:370px;
    text-align:center;
    width:380px;
}
#content .category .list .item .description{
    position:absolute;
    top:166px;
    left:300px;
    width:240px
}

#content .category .list #back,
#content .category .list #next{
    opacity:.7;
    position:absolute;
    top:200px
}
#content .category .list #back:hover,
#content .category .list #next:hover{
    opacity:1;
}
#content .category .list #back{
    left:30px;
}
#content .category .list #next{
    right:30px;
}







/* Legal stuff */
#content .legal{
    background:#fff;
    padding:50px 40px;
}






/* Contact form */
#content .contact{
    background:#fff;
    overflow:hidden;
    position:relative;
    padding:0 0 20px 0;
}
#content .contact .window{
    overflow:hidden;
    width:332px;
    float:left;
    margin:112px 0 0 60px;
    overflow:hidden;
}
#content .contact .window .title{
    width:332px;
    overflow:hidden;
}
#content .contact .window .title div{
    float:left;
    width:8px;
    height:39px;
}
#content .contact .window .title .block-left{
    background:transparent url(../images/leaf_pl.png)
}
#content .contact .window .title .block-right{
    background:transparent url(../images/leaf_pr.png)
}
#content .contact .window .title .block-main{
    background:#ED1E79;
    width:296px;
    padding:0 10px;
}
#content .contact .window .title .block-main h2{
    font-family:'Dancing Script',cursive;
    font-size:29px;
    line-height:39px;
    height:39px;
    color:#fff;
}
#content .contact .window .content{
    padding:22px;
}
#content .contact .window .content h3{
    padding:0 0 22px 0;
}
#content .contact .window .content h3,
#content .contact .window .content h4{
    font-weight:bold;
    margin:0;
}
#content .contact .window .content p{
    line-height:15px;
}
#content .contact .window .content label{
    display:inline-block;
    float:left;
    width:75px;
    margin:6px 0 0 0;
}
#content .contact .window .content input,
#content .contact .window .content textarea{
    float:left;
    width:204px;
    margin:3px 0 10px 0;
}
#content .contact .window .content textarea{
    height:94px;
}
#content .contact .window .content input.button{
    float:right;
    width:101px;
    height:31px;
    line-height:31px;
    padding:0;
    margin:0 4px 0 4px;
    border:none;
    background:transparent url(../images/button_p.png);
    color:#fff;
    font-family:'Dancing Script',cursive;
    font-size:22px;
}







/* Experience */
#content .experience{
    float:left;
    overflow:hidden;
    width:715px;
    min-height:430px;
    background-color:#fff;
    position:relative;
}
#content .experience .slide{
    display:none;
    overflow:hidden;
}

#content .promos{
    float:left;
    width:130px;
    height:430px;
    overflow:visible;
    background:#E1F1FA;
    position:relative;
    z-index:9990;
}
#content .promos .thumb{
    display:block;
    margin-bottom:1px;
    position:relative;
    overflow:hidden;
    height:102px; /* 90 + border + border */
    width:130px;
}
#content .promos .thumb.active{
    width:142px; /* 130 + border + border */
    padding-left:10px; /* arrow width */
    left:-22px; /* -border - border - padding-left */
    background:transparent url(../images/left_arr.png) no-repeat center left;
}
#content .promos .thumb img{
    position:absolute;
    z-index:9997;
    opacity:.4;
    width:130px;
    height:90px;
    top:6px; /* border */
    right:6px; /* border */
}
#content .promos .thumb.active img,
#content .promos .thumb:hover img{
    opacity:1;
}

#content .promos .thumb div{
    position:relative;
    z-index:9998;
    border:6px solid #89A8C9; /* border */
    /* lastly, in js, line */
    height:90px;
}
#content .promos .thumb.active div{
    border-color:#005585;
}

/*
#content .promos .thumb span{
    display:block;
    padding:5px 8px;
    line-height:11px;
    font-size:11px;
    overflow:hidden;
    height:33px;
    text-align:center;
}
#content .promos .thumb:hover span,
#content .promos .thumb.active span{
    color:#E1F1FA;
    background:#00507E;
    border:none !important;
}
*/

#content .promos .dots{
    height:17px;
    width:118px;
    padding:10px 6px;
    overflow:hidden;
    position:absolute;
    bottom:0;
    background:#49c url(../images/grad_blue.gif) repeat-x bottom;
    border-bottom-right-radius: 14px;
    text-align:right;
}
#content .promos .arrow{
    background:transparent url(../images/next_white.gif) no-repeat 50% 50%;
    display:inline-block;
    width:20px;
    height:15px;
    cursor:pointer;
}
#content .promos .dot{
    background:transparent url(../images/balls_white.gif) no-repeat 0px 50%;
    width:10px;
    height:13px;
    display:inline-block;
    margin:1px;
    cursor:pointer;
}
#content .promos .dot.active{
    background:transparent url(../images/balls_white.gif) no-repeat -10px 50%;
}




/* Experience generic form */
#content .experience form.promo-form a{
    text-decoration: underline;
}

#content .experience form.promo-form .field-text{
    float: left;
    overflow: hidden;
    width: 90%;
    padding:0 1em 1em 0;
}
#content .experience form.promo-form .field-text label{
    display: inline-block;
    margin-bottom: 0.25em;
    width: 100%;
}
#content .experience form.promo-form .field-text input{
    width: 100%;
    color: #888;
}


#content .experience form.promo-form .field-checkbox,
#content .experience form.promo-form .field-radio{
    float: left;
    overflow: hidden;
    width: 100%;
    padding:0 1em 1em 0;
}

#content .experience form.promo-form .field-checkbox input,
#content .experience form.promo-form .field-radio input{
    margin:0 0.5em 0 0;
}

#content .experience form.promo-form .g-button-submit{
    font-family: "Dancing Script", cursive;
    font-size: 24px;
    height: 45px;
    line-height: 45px;
    width:120px;
}





/* Home */
#content .slideshow{
    position:relative;
    width:845px;
    height:370px;
}
#content .slideshow .slides{
    position:relative;
    overflow:hidden;
    width:845px;
    height:340px;
}
#content .slideshow .slides .slide{
    display:block;
    position:absolute;
    top:0;
    left:0;
}
#content .slideshow .slides .slide{
    
}
#content .slideshow .dots{
    position:absolute;
    bottom:10px;
    right:20px;
}

#content #carousel .dot,
#content .slideshow .dot{
    background:transparent url(../images/balls.gif) no-repeat 0px 0px;
    width:10px;
    height:10px;
    display:inline-block;
    margin:1px;
    cursor:pointer;
}
#content #carousel .dot.active,
#content .slideshow .dot.active{
    background:transparent url(../images/balls.gif) no-repeat -10px 0px;
}


#content #carousel .dots{
    text-align:center;
    margin-top:8px;
}
#content #carousel .dot{
    cursor:default;
}


#carousel{
    position:relative;
}
#carousel .slides{
    height:160px;
    position:relative;
}

#carousel .slides .slide{
    position:absolute;
    overflow:hidden;
    width:260px;
    height:160px;
    box-shadow:0 0 14px rgba(0,0,0,0.6);
}

#carousel .slides .slide img{
    width:100%;
    height:100%;
}

#carousel .back,
#carousel .next{
    position:absolute;
    cursor:pointer;
    top:60px;
}

#carousel .next{
    right:70px;
    opacity:0.7;
}
#carousel .back{
    left:70px;
    opacity:0.7;
}
#carousel .next:hover,
#carousel .back:hover{
    opacity:1;
}

#carousel .slides .description{
    background:#F9AFD2;
    color:#02458C;
    font-size:11px;
    position:absolute;
    width:260px;
    height:100px;
    bottom:-74px;
}
#carousel .slides .description p{
    padding:0 12px;
    margin:0 0 6px 0;
}

#carousel .slide h3{
    background:#ED1E79;
    color:#fff;
    font-family:'Dancing Script',cursive !important;
    font-size:18px;
    font-weight:normal;
    padding:3px 12px;
}

#carousel .slides .description a{
    position:absolute;
    right:14px;
    bottom:12px;
    font-family:'Dancing Script',cursive;
    font-size:17px;
    font-weight:normal;
    font-style:normal;
    text-decoration:none;
    color:#fff;
}
#carousel .slides .description a:hover{
    color:#ED1E79;
}