ÿþ/*======================================

      WELCOME TO THE STYLESHEET

 =====================================*/



/**************************************\

|------------COLOR SCHEME--------------|

|--------------------------------------|



\**************************************/



/**************************************/

/*              GLOBALS               */

/**************************************/

html, body { height: 100%; }

body

{

    background: url(../visual/layout/page-bg.gif) #000000 top left repeat-x;

}

.site-wrapper

{

    height: auto !important;

    min-height: 100%;

    margin-bottom: -50px;

}

#site-container

{

    position: relative;

	width: 915px;

	margin: 0 auto;

	padding-bottom: 27px; 

}

#site-main

{

    line-height: 1.6;

}

#site-foot, .push { height: 50px; }



/**************************************/

/*              HEADER                */

/**************************************/

#site-head 

{ 

    height: 60px;

    padding: 25px 0;

}

a#sitelogo { float: left; }

a#sitelogo img { display: block; }

#turntable-logo { position: absolute; top: 28px; left: 272px; }



#site-head .nav

{   

    float: right;

}

#site-head .nav

{

    height: 54px;

    background: url(../visual/layout/nav-bg.gif) top left repeat-x;

    border-radius: 5px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

}

#site-head .nav ul { list-style-type: none; }

#site-head .nav ul.root li { float: left; background: url(../visual/layout/nav-spacer.gif) top left no-repeat; }

#site-head .nav ul.root li:first-child { background: none; } 

#site-head .nav ul.root li a

{

    display: block;

    margin-left: 2px;

    padding: 0 19px 0 17px;

    font-size: 14px;

    line-height: 54px;

    font-family: Arial, Verdana, Tahoma, Serif;

    color: #000000;

    text-transform: uppercase;

    text-shadow: 0 0 0 #000000;

}

#site-head .nav ul.root li:first-child a { margin-left: 0; padding-left: 19px; } 

#site-head .nav ul.root li.active a { background-color: #FFFFFF; color: #ed1f20; }

#site-head .nav ul.root li.home.active a

{

    border-radius: 5px 0px 0px 5px;

    -moz-border-radius: 5px 0px 0px 5px;

    -webkit-border-top-left-radius: 5px;

    -webkit-border-bottom-left-radius: 5px;

}

#site-head .nav ul.root li.contact.active a

{

    border-radius: 0px 5px 5px 0px;

    -moz-border-radius: 0px 5px 5px 0px;

    -webkit-border-top-right-radius: 5px;

    -webkit-border-bottom-right-radius: 5px;

}

#site-head .nav ul ul { display: none; }



#site-head #ring-us

{

    position: absolute;

    top: 86px;

    right: 2px;

    background: url(../visual/ring-us.png) 0 50% no-repeat;

    padding-left: 30px;

    color: #FFFFFF;

    font-family: Arial, Verdana, Tahoma, Serif;    

    font-size: 18px;

    letter-spacing: 1px;

}



/**************************************/

/*             SITE MAIN              */

/**************************************/

#site-main .main

{

    float: right;

    width: 648px;

}

body.no-side #site-main .main { width: 100%; }



#site-main .main span.sub-title { display: block; margin-top: -25px; }

#site-main .main .inner

{

    padding: 30px;

    background: url(../visual/layout/content-bg.gif) top left repeat;

    border-radius: 15px;

    -moz-border-radius: 15px;

    -webkit-border-radius: 15px;

}





/**************************************/

/*            INDEX PAGE	          */

/**************************************/

body.index #site-main .main .inner ul { list-style-type: none; }

body.index #site-main .main .inner ul li

{

    margin-bottom: 5px;

    padding-left: 30px;

    background: url(../visual/tick.png) 0px 50% no-repeat;

}



/**************************************/

/*          SIDE NAVIGATION			  */

/**************************************/    

body.no-side #site-main .side { display: none; }

#site-main .side { float: left; width: 233px; }

#site-main .side .list

{

    padding: 0px 1px 48px;

    background: url(../visual/layout/content-bg.gif) top left repeat;

    border-radius: 15px;

    -moz-border-radius: 15px;

    -webkit-border-radius: 15px;

}

#site-main .side .list h3 { margin: 0; padding: 18px 18px; }

#site-main .side .list ul { border-top: 1px solid #383838; list-style-type: none; }

#site-main .side .list ul li { border-bottom: 1px solid #383838; }

#site-main .side .list ul li a

{

    display: block;

    padding: 15px 10px 15px 38px;

    background: url(../visual/layout/raquo.gif) #191919 18px 50% no-repeat;

    border-top: 1px solid #000000;

    border-bottom: 1px solid #000000;

    color: #FFFFFF;

}

#site-main .side .list ul li.active a { background-color: #292929; font-weight: bold; }



#site-main .side .image-gallery { margin-top: 10px; }

#site-main .side .image-gallery a { float: left; margin: 2px 2px; }

#site-main .side .image-gallery a img { display: block; border: 1px solid #000000; }



/**************************************/

/*           BUYERS' GUIDE            */

/**************************************/

body.buyersGuide .answers { position: relative; top: -10px; }



/**************************************/

/*              CONTACT               */

/**************************************/

body.contact .contact.form { min-height: 300px; }

body.contact .form .item div input, body.contact .form textarea { width: 265px; }

body.contact .action-message { width: 410px; }



body.contact .location { float: right; width: 280px; }



/**************************************/

/*               QUOTE                */

/**************************************/

.quote #tabs { position: relative; z-index: 2; }

.quote #tabs:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.quote .tab

{

    float: left;

    width: 274px;

    margin-right: 2px;

    -moz-border-radius: 5px 5px 0px 0px;

    -ms-border-radius: 5px 5px 0px 0px;

    -webkit-border-top-left-radius: 5px;

    -webkit-border-top-right-radius: 5px;

    border-radius: 5px 5px 0px 0px;

    background-color: #5c5c5c;

    font-size: 16px;

    line-height: 40px;

    text-indent: 15px;

    font-weight: bold;

    color: #8b8b8b;

}

.quote .tab.disabled { color: #6e6e6e; }

.quote .tab.active

{

    border-bottom: 1px solid #ee1f20;

    background-image: -webkit-gradient(

        linear,

        left bottom,

        left top,

        color-stop(0, rgb(181,183,185)),

        color-stop(1, rgb(255,255,255))

    );

    background-image: -moz-linear-gradient(

        center bottom,

        rgb(181,183,185) 0%,

        rgb(255,255,255) 100%

    );

    color: #ee1f20;

}

html.no-cssgradients .quote .tab.active { background: url(../visual/quote/tab-bg.gif) top left repeat-x; }



.quote .lrgBtn

{

    display: inline-block;

    width: 244px;

    height: 48px;

    background: url(../visual/quote/lrgBtn.png) 0 0 no-repeat;

    line-height: 48px;

    font-size: 18px;

    text-align: center;

    color: #FFFFFF;

    font-weight: bold;

}

.quote .lrgBtn.disabled { background-position: 0 -48px; color: #BAB9B9; }



html.multiplebgs .quote .lrgBtn.emailQuote { background: url(../visual/quote/btnImgs.png) 13px -50px no-repeat, url(../visual/quote/lrgBtn.png) 0 0 no-repeat; text-indent: 36px; }

html.multiplebgs .quote .lrgBtn.emailQuote.sent { background-position: 41px -153px, 0 0; }

html.multiplebgs .quote .lrgBtn.printQuote { background: url(../visual/quote/btnImgs.png) 29px 3px no-repeat, url(../visual/quote/lrgBtn.png) 0 -96px no-repeat; text-indent: 45px; }

.quote .lrgBtn.printQuote { background-position: 0 -96px; }



html.multiplebgs .quote #your-quote .lrgBtn.processing

{

    background: url(../visual/quote/processing.gif) 22px 50% no-repeat, url(../visual/quote/lrgBtn.png) 0 -48px no-repeat;

    color: #BAB9B9;

    text-indent: 16px;

}

html.no-multiplebgs .quote #your-quote .lrgBtn.processing { background-position: 0 -48px; }



.quote .section

{

    position: relative;

    z-index: 1;

    top: -1px;

    border: 1px solid #4c4c4c;

    padding: 20px;

}

.quote .section:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.quote .section .leftCol { float: left; width: 300px; }

.quote .section .rightCol { float: right; width: 508px; }

.quote .section h3 { margin-bottom: 6px; color: #cca300; font-size: 1.5em; }

.quote .section .note

{

    display: block;

    margin-bottom: 10px;

    color: #8e8e8e;

    font-size: 1em;

    line-height: 1.3;

}



.quote .radioSelect { position: relative; margin-bottom: 5px; padding-left: 30px; }

.quote .radioSelect input { position: absolute; top: 1px; left: 0; }

.quote .radioSelect label { font-size: 1.2em; font-weight: normal; }



.quote .toolTipContents

{

    display: none;

    z-index: 10;

    position: absolute;

    top: -5px;

    width: 200px;

    padding: 10px;

    background-color: #212121;

    border: 1px solid #737373;

    opacity: 0.95;

    color: #FFFFFF;

}



    /* specs */

    .quote .turntableSize .radioSelect label { position: relative; padding-right: 25px; }

    .quote .turntableSize .radioSelect label:hover .toolTip { display: block; }

    .quote .turntableSize .radioSelect label .toolTip

    {

        cursor: pointer;

        display: none;

        position: absolute;

        top: 0px;

        right: 0px;

        width: 17px;

        height: 17px;

        background: url(../visual/quote/info.png) 100% 50% no-repeat;

    }

    .quote .turntableSize .radioSelect .toolTipContents { margin-left: 50px; z-index: 6; }

    

    .quote .turntableOperation, .quote .installTimescale { margin-top: 20px; }

    .quote #specs .lrgBtn { float: right; margin-top: 15px; }

    .quote .radioImgSelect input { display: none; }

    .quote .topSurface:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

    .quote .topSurface .radioImgSelect

    {

        position: relative;

        float: left;

        margin: 0 8px 8px 0;

        -moz-border-radius: 3px;

        -webkit-border-radius: 3px;

        -ms-border-radius: 3px;

        border-radius: 3px;

        border: 2px solid transparent;

    }

    .quote .topSurface .radioImgSelect label { display: block; cursor: pointer; }

    .quote .topSurface .radioImgSelect label img { display: block; }

    .quote .topSurface .radioImgSelect.selected

    {

        border: 2px solid #cca300;

    }

    .quote .topSurface .radioImgSelect .toolTip { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }

    .quote .topSurface .radioImgSelect .toolTipContents { width: 340px; margin-left: 70px; z-index: 5; }

    .quote .topSurface .radioImgSelect .toolTipContents.left { margin-left: -362px; }

    .quote .topSurface .radioImgSelect .toolTipContents b { display: block; margin-bottom: 10px; }



    .quote .additionalInfo { margin-top: 10px; }

    html.placeholders .quote .additionalInfo .note { display: none; }

    .quote .additionalInfo textarea { width: 496px; height: 110px; }

    /* end specs */

    

    /* details */

    .quote #details .item { margin-bottom: 5px; }

    .quote #details .item label { display: inline-block; width: 150px; }

    .quote #details .item input[type=text] { width: 220px; }

    .quote #details .item input.postcode { width: 70px; }

    .quote #details .item.checkbox label { width: auto; }

    .quote #details .subscribe.note

    {

        width: 490px;

        margin: 20px 0 0;

        font-size: 0.9em;

    }

    .quote #details .item .error { border: 1px solid #C23535; background-color: #FFCDCD; }

    .quote #details .item .errMsg

    {

        position: absolute;

        left: 401px;

        margin-top: -27px;

        padding: 0 10px 0 8px;

        background-color: #9D2222;

        font-size: 11px;

        line-height: 27px;

    }

    .quote #details .item input.postcode + .errMsg { left: 251px; }

    .quote #details .item select.howHeard + .errMsg { left: 289px; }

    .quote #details .lrgBtn { float: right; }

    /* end details */

    

    /* the quote */

    .quote #your-quote.section { padding-bottom: 140px; }

    .quote #your-quote .leftCol { width: 480px; }

    .quote #your-quote .note { font-size: 1.2em; }

    .quote #your-quote .note .changeTab { color: #cca300; }

    .quote #your-quote .note .changeTab:hover { color: #EED77C; }

    

    .quote #your-quote .summaryItem * { font-size: 1.5em; line-height: 1.8; }

    .quote #your-quote .summaryItem h4 { display: inline-block; width: 150px; color: #aeadad; }

    

    .quote #your-quote .quoteBox

    {

        position: absolute;

        top: 42px;

        right: 50px;

        width: 304px;

        height: 170px;

        border: 2px solid #9e9e9e;

        background-image: -webkit-gradient(

            linear,

            left bottom,

            left top,

            color-stop(0, rgb(189,191,193)),

            color-stop(1, rgb(255,255,255))

        );

        background-image: -moz-linear-gradient(

            center bottom,

            rgb(189,191,193) 0%,

            rgb(255,255,255) 100%

        );

        background-image: linear-gradient(

            center bottom,

            rgb(189,191,193) 0%,

            rgb(255,255,255) 100%

        );

        -moz-border-radius: 5px;

        -webkit-border-radius: 5px;

        -ms-border-radius: 5px;

        border-radius: 5px;

        font-size: 18px;

    }

    html.no-cssgradients .quote #your-quote .quoteBox { background: url(../visual/quote/tab-bg.gif) #BCBEBF top left repeat-x; }

    .quote #your-quote .quoteBox .leadIn { position: absolute; top: 6px; left: 12px; color: #5c5c5c; }

    .quote #your-quote .quoteBox .figure

    {

        position: absolute;

        top: 0px;

        left: 0px;

        width: 100%;

        line-height: 168px;

        font-size: 34px;

        color: #ed1f20;

        text-align: center;

        font-weight: bold;

    }

    .quote #your-quote .quoteBox .figure .small { font-size: 18px; position: relative; top: -12px; }

    .quote #your-quote .quoteBox .exVat { position: absolute; bottom: 10px; right: 15px; color: #878787; }

    .quote #your-quote .lrgBtn

    {

        position: absolute;

        bottom: 58px;

        left: 50%;

    }

    .quote #your-quote .lrgBtn.calculateQuote { margin-left: -122px; }

    

    .quote #your-quote .lrgBtn.emailQuote { margin-left: -305px; }

    .quote #your-quote .lrgBtn.printQuote { margin-left: 61px; }

    

    .quote #your-quote .note.foot

    {

        position: absolute;

        bottom: 0px;

        right: 10px;

        font-size: 95%;

    }

    .quote #your-quote .quoteNote { right: 10px; }

    .quote #your-quote .note.foot.installation { left: 10px; font-size: 20px; text-decoration: underline; }

    /* the quote */

    

/**************************************/

/*              SITEMAP               */

/**************************************/

#sitemap ul { margin-left: 20px; }



/**************************************/

/*               FOOTER               */

/**************************************/

#site-foot { background-color: #212121; }

#site-foot .inner

{

    width: 912px;

    margin: 0 auto;

    line-height: 50px;

}

#site-foot .links { float: right; }

#site-foot .links a

{

    float: left;

    padding: 0 10px;

    background: url(../visual/layout/pipe.gif) 100% 50% no-repeat;

    color: #9d9d9d;

}

#site-foot .links a#skylightmedia { background: none; color: #FF0000; }

#site-foot .copyright { float: left; }



/*********************************/

/*             IMAGE             */

/*********************************/

#site-main .framed-images

{

    position: relative;

    z-index: 1;

    margin-bottom: 75px;

    border-radius: 15px 15px 0px 0px;

    -moz-border-radius: 15px 15px 0px 0px;

    -webkit-border-top-left-radius: 15px;

    -webkit-border-top-right-radius: 15px;

    border: 1px solid #4e4e4e;

}

#site-main .framed-images .image

{ 

    position: absolute; 

    top: 0px; 

    left: 0px;

    width: 100%;

    height: 100%;

    background-repeat: no-repeat;

    background-position: 0 0;

    border-radius: 15px 15px 0px 0px;

    -moz-border-radius: 15px 15px 0px 0px;

    -webkit-border-top-left-radius: 15px;

    -webkit-border-top-right-radius: 15px;

    color: #FFFFFF;

    font-family: Arial, Verdana, Tahoma, Serif;

}

#site-main .framed-images .image h3

{

    position: absolute;

    top: 70px;

    left: 50px;

    font-size: 35px;

    color: #FFFFFF;

}

#site-main .framed-images.single .image h3 { top: 50px; }

#site-main .framed-images .image h3 span { color: #FF0000; }

#site-main .framed-images .image p

{

    position: absolute;

    width: 250px;

    top: 85px;

    left: 50px;

    font-size: 24px;

    line-height: 1.2;

}



#site-main .framed-images .overlay

{

    position: absolute;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

    background: #FFFFFF;

    border-radius: 15px 15px 0px 0px;

    -moz-border-radius: 15px 15px 0px 0px;

    -webkit-border-top-left-radius: 15px;

    -webkit-border-top-right-radius: 15px;

}

#site-main .framed-images .bottom

{

    position: absolute;

    bottom: -47px;

    left: -1px;

    width: 100%;

    height: 46px;

    background: url(../visual/layout/banner-bottom-repeat.gif) #000000 top left repeat-x;

    border-radius: 0px 0px 15px 15px;

    -moz-border-radius: 0px 0px 15px 15px;

    -webkit-border-bottom-right-radius: 15px;

    -webkit-border-bottom-left-radius: 15px;

    border: 1px solid #4e4e4e;

    border-top: 0px;

    z-index: 10;

}



#site-main .framed-images .bottom .british-made

{

    position: absolute;

    bottom: 16px;

    left: 18px;

    padding-left: 36px;

    background: url(../visual/british-flag.gif) 0px 50% no-repeat;

    font-style: italic;

    line-height: 15px;

    font-size: 12px;

}

#site-main .framed-images .bottom a { position: absolute; bottom: 1px; }

#site-main .framed-images .bottom a:hover { bottom: 2px; }

#site-main .framed-images .bottom a.brochure { left: 288px; }

#site-main .framed-images .bottom a.showcase { left: 533px; }

#site-main .framed-images .bottom a.quote { left: 728px; }



body.products .flashMovie { width: 635px; height: 405px; margin-bottom: 35px; }



/* Custom error styling */

.unauthorised .action-message.error, .members .action-message.error

{

    padding: 20px 20px 20px 60px;

    background: url(../visual/layout/user-error.png) 15px 10px no-repeat #FCECEC;

}



.quote-disclaimer {color:#000;background-color:#E9EAEA;width:425px;height:165px;padding:15px;margin-bottom:15px;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;border:3px solid red;margin:0px auto;cursor:pointer;}

.quote-disclaimer li {margin-left:20px;}

.quote-disclaimer h2 {color:#000;text-align:center;}

.quote-disclaimer-close {float:right}