/*
 * W&J Knox Stylesheet
 * Author: William Brown
 * TheCreativeFoundry.co.uk
 *
 */

*{
	margin: 0;
	padding: 0;
}
a, a:active,a:visited{ color: #ffffff; text-decoration: none; }
html, body{
    background-color: #234F5F;
    color: #ffffff;
    font-family: Verdana, Arial, serif;
    font-size: 8pt;
}
body{ height: 100%; }
#border{
    background: transparent url(../images/shadow.png) repeat-y fixed center;
    margin: 0 auto;
    width: 808px;
}
#container{
    margin: 0 auto;
    width: 788px;     
}
#container #header{
    height: 150px;
    background-color: #000000;
    position: relative;
}
#container #header #logo{
    position: absolute;
    bottom: 12px;
    left: 30px;
}
#container #header #logo img{ float: left; }
#container #header #logo a img{ border: none; }
#container #header #logo span{ float: left; clear: left; color: #57af63; }
#container #header #navigation a:hover{ color: #57af63; } 
#container #header #navigation a#current{ color: #57af63; font-size: 18pt; } 
#container #header #navigation{
    position: absolute;
    bottom: 0;
    right: 0;
    padding-bottom: 12px;
    padding-right: 12px;
    text-transform: uppercase;
}
#container #header #navigation ul{ list-style: none; }
#container #header #navigation ul li{ display: inline; padding: 0 4px; font-size: 12px; }
#container #header #navigation ul li a:hover{ text-decoration: underline; }
#container #imageContainer{      
    border-bottom: 6px solid #5a90cf; /* blue */
    border-top: 6px solid #57af63; /* green */
    height: 500px;
    overflow: hidden; /* for javascript effect */
    position: relative;
    width: 788px;
    z-index: 80;       
}
/*
#container #imageContainer a{
    cursor: pointer;
    z-index: 1000;
    display: block;
}
*/
#container #imageContainer a#home{
    display: block; height: 500px; width: 788px; z-index: 10; cursor: resize
}
#container #imageContainer object{ z-index: 1; }
#container #imageContainer #galleryContainer, #container #imageContainer #fasttrackContainer{ position: absolute; bottom: -5px; left: 0; background-color: #595D5F; height: 1%; z-index: 90; }                               
#container #imageContainer #login{
    margin: auto;
    text-align: center;
    width: auto;
}
#container #imageContainer #login form .formrow{ position: relative; float: left; clear: left; width: 300px; margin: 4px 0; }
#container #imageContainer #login form .formrow .formleft{ width: 80px; }
#container #imageContainer #login form .formrow .formright{ width: 220px; }
#container #imageContainer #login form .formrow .formleft, .formright{ float: left; }
/*#container #imageContainer #login form .formleft    */
#container #imageContainer #login input{ width: 100%; background-color: #000000; color: #57af63; border: 1px solid #57af63; padding: 2px; }
#container #footer{
    background-color: #000000;
    display: block;
    height: 120px;  
    position: relative;
}
#container #footer p{
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    text-align: center;
}
#container #content{
    background-color: #000000;
}
#container #content #subnav ul{ list-style: none; }
#container #content #subnav ul li{ display: inline; padding: 0 1px; font-size: 10pt; }
#container #content #subnav{
    background-color: #000000;
    border-bottom: 6px solid #57af63; /* green */
    padding: 16px;
    padding-left: 0;
    padding-left: 22px;
    text-transform: uppercase;
}
#container #content #subnav ul li a#current{ color: #5a90cf; font-size: 14pt; }
#container #content #subnav ul li a:hover{ color: #5a90cf; text-decoration: underline; }
#container #content #left{
    clear: none;
    float: left;
    margin-top: 18px;
    width: 400px;
}
#container #content #left ul{ list-style: none; padding-left: 40px; }
#container #content #right{
    clear: none;
    float: right;
    width: 388px;
    margin-top: 18px;
}
#container #content #right h1{ margin-left: 36px; font-size: 10pt; color: #57af63; }
#container #content #right p{ margin: 18px 36px 0 36px; line-height: 1.5; }
#container #info{ position: relative; }
#container #info address{ position: absolute; right: 0; padding: 4px; z-index: 1; color: #57af63; }
.clear{ clear: both; }


/* TEMP */
span#tagline{ color: #57af63; }
span#fast{ display: block; background-color: #57af63; float: left; padding: 5px; padding-bottom: 10px; position: absolute; bottom: 0; left: 20px; font-weight: bold; text-transform: uppercase; z-index: 100; }
span#fasttrackbtn{ display: block; background-color: #57af63; float: right; padding: 5px; padding-bottom: 10px;  position: absolute; bottom: 0; left: 20px; font-weight: bold; text-transform: uppercase; z-index: 100; }       

span#gallery{ display: block; background-color: #5a90cf; float: right; padding: 5px; padding-bottom: 10px; position: absolute; bottom: 0; right: 20px; font-weight: bold; text-transform: uppercase; z-index: 1000; }   
span#clickMaximiseText, span#clickMinimiseText{ position: absolute; top: 50%; left: 31%; margin: auto; font-size: 16pt; text-align: center; display: inline; /*display: hidden;*/ opacity: 0.0; z-index: 90; }

form#contact{ padding: 10px; padding-left: 37px; }
form#contact input, form#contact textarea{ border: 1px solid #57af63; background-color: #000000; color: #57af63; width: 100%; }
form#contact .formrow{ float: left; clear: left; margin-bottom: 4px; }
form#contact .formrow .formright{ width: 250px; }
/* END TEMP */

#galleryContainer, #fasttrackContainer{ width: 100%; z-index: 95; border-top: 2px solid #57af63; background: #50a029; }
/*#galleryContainer img.small{ height: 140px; width: 180px; }*/
#galleryContainer img.small{ height: 180px; width: 200px; }
#galleryContainer img.large{ height: 320px; width: 440px; }
#galleryContainer h1{ text-align: center; margin: 8px 0; line-height: 25px; color: #57af63; }
/*#galleryContainer p{ width: 100%; text-align: center; font-size: 16pt; color: #ffffff; margin-bottom: 18px; }*/
#galleryImageInstructions{ width: 100%; text-align: center; margin-top: 13px; }
#galleryImageInstructions p{ width: 400px; font-size: 10pt; color: #ffffff; margin: 0 auto; }

/*#galleryContainer div{ margin-top: 20px; }*/
#galleryContainer div #galleryImageContainer{ margin-top: 20px; position: relative; width: auto; text-align: center; }
#galleryContainer div #galleryImageContainer a img{ border: 1px solid #57af63; }
#galleryContainer div #galleryImageContainer a:hover img{ border: 1px solid #000000; }

span#galleryImageDescription{ margin-bottom: 16px; }

#imageContainer #fasttrackContainer ul#fasttrackNav{ float: left; width: 200px; margin: 20px 20px 0 20px; list-style: none; }
#imageContainer #fasttrackContainer #fasttrackInformation{ float: left; width: 500px; height: 431px; margin-top: 20px; padding: 5px; border: 1px solid #CACACA; }


#hitLoc{ width: 10px; background-color: #ffffff; top: 0; left: 50%; height: 100%; position: absolute; } /* for javascript gallery slider */

/*#imageContainer #fasttrackContainer div{ padding-top: 10px; }*/

/* slider style */

.ui-slider { width: 100%; height: 23px; position: relative; background-image: url(../images/productbrowser_scrollbar_20070622.png); background-repeat: no-repeat; background-position: center center; }
.ui-slider-handle { position: absolute; z-index: 1; height: 23px; width: 12px; top: 0; left: 0; background: url(../i/edit.gif);  }
.ui-slider-handle-active { border: 1px dotted black;  }
.ui-slider-disabled .ui-slider-handle { opacity: 0.5; filter: alpha(opacity=50); }
.ui-slider-range { position: absolute; background: #50A029; opacity: 0.3; filter: alpha(opacity=30); width: 100%; height: 100%; }

/* Default slider backgrounds */
/*.ui-slider, .ui-slider-1 { background-image: url(i/slider-bg-1.png); }*/
.ui-slider, .ui-slider-1 { background-color: #57af63; }
.ui-slider-2 { background-image: url(i/slider-bg-2.png); }

/* end slider style */

/* slider specific CSS */
.sliderGallery { overflow: hidden; position: relative; margin: 0; /*padding: 10px; height: 160px;*/ height: 360px; width: 100%; }             
.sliderGallery ul { position: absolute; list-style: none; overflow: none; white-space: nowrap; padding: 0; margin: 0; padding-left: 60px; padding-right: 60px; }
.sliderGallery ul li { display: inline; }
/*
.slider { /*width: 542px;// width: 542px; height: 17px; margin-top: 140px; margin-left: 5px; padding: 1px; position: relative; background: url(images/productbrowser_scrollbar_20070622.png) no-repeat; }
*/
.slider { display: block; width: 542px; height: 17px; margin-top: 140px; margin-left: 5px; padding: 1px; position: relative; background-color: #57af63; }
.handle { position: absolute; cursor: move; height: 17px; /*width: 181px;*/ width: 100%; top: 0; left: 4px; background: url(images/productbrowser_scroller_20080115.png) no-repeat; z-index: 100; }                                                         
.slider span { color: #bbb; font-size: 80%; cursor: pointer; position: absolute; z-index: 110; top: 3px; }

#gallerySlider{ margin: 4px auto; width: 508px; z-index: 1000; }
ul.items li img{ border: 2px solid #57af63; }
.fastinfo{ display: none; }
.fastinfo p{ padding-left: 10px; }
#fasttrackInformation p{ margin: 8px 15px; margin-bottom: 10px; }
#fasttrackInformation table{ margin: 5px auto; text-align: center; width: auto; border: 1px solid #ffffff; }
#fasttrackInformation table tr td{ padding: 2px; }
ul#fasttrackNav li a:hover{ text-decoration: underline; color: #57af63; }