/**
  *
  *
  * @author James Thatcher <james@brandfour.com>
  * @version 0.2
  * @revision $Revision: 0.02 $
  * @date $Date: Thu, 27 Sept 2007 10:47:25 GMT $
  * $RCSfile: style.css,v $
  *
  * @todo
  *
  *
  * @history
  * Thu, 27 Sept 2007 10:47:37 GMT - Initially created file
  *
  *  UPDATES:
  *
  **/



*{border:0;margin:0;padding:0;background:transparent;}

body {
    font-family: verdana,trebuchet ms, verdana, arial, tahoma;
    font-size: 11px;
    color: #666666;
    line-height: 155%;
    margin-top: 0px;
    margin: auto;
    border: 0;
}

a:link {
    color: #666666;
    text-decoration: underline;
}
a:hover {
    color: #333333;
    text-decoration: none;
}
a:visited {
    color: #888888;
    text-decoration: underline;
}
ul li { margin-left: 12px; }
ul br { display: none; }

/******************************************************************************/
/*                      CUSTOMER FILES CSS CODE BELOW                         */
/******************************************************************************/


ul.files {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.files li.fileheader {
    list-style-type: none;
    margin-top: 10px;
    height: 30px;
    display:block;
}

ul.files li.file {
    display:block;
    list-style:none;
    margin-bottom: 10px;
}

/* main titles (personal files, group files) */
h2.filetitle {
    padding-bottom:10px;
    border-bottom:1px dotted #333;
}
/* subtitles  (insurances etc) */
h3 {
    font-size: 12px;
    font-family: tahoma, verdana, helvetica;
    font-weight: bold;
    color: #7e9db9;
    margin-bottom:10px;
}
a.button{
    float:left;
    font-weight:bold;
    border-top:1px solid #999;
    border-left:1px solid #999;
    border-right:1px solid #333;
    border-bottom:1px solid #333;
    color:#333;
    width:auto;
    clear:both;
    text-decoration:none;
}
a.button:hover{
    border-top:1px solid #333;
    border-left:1px solid #333;
    border-right:1px solid #999;
    border-bottom:1px solid #999;
    color:#333;
}
a.button span{
    background:#d4d0c8 url(images/bg_btn.gif) repeat-x;
    float:left;
    line-height:24px;
    height:24px;
    padding:0 10px;
    border-right:1px solid #777;
    border-bottom:1px solid #777;
    clear:both;
    display:block;
}
a.button:hover span{
    border:none;
    border-top:1px solid #777;
    border-left:1px solid #777;
    background:#d4d0c8 url(images/bg_btnOver.gif) repeat-x;
    cursor:pointer;
}
a.button span.b{
    background:#d4d0c8 url(images/bg_btnL.gif) repeat-x;
    float:left;
    line-height:20px;
    height:44px;
    padding:0 10px;
    border-right:1px solid #777;
    border-bottom:1px solid #777;
    clear:both;
    display:block;
}
a.button:hover span.eb{
    border:none;
    border-top:1px solid #777;
    border-left:1px solid #777;
    background:#d4d0c8 url(images/bg_btnELOver.gif) repeat-x;
    cursor:pointer;
}
a.button span.eb{
    background:#d4d0c8 url(images/bg_btnEL.gif) repeat-x;
    float:left;
    line-height:20px;
    height:64px;
    padding:0 10px;
    border-right:1px solid #777;
    border-bottom:1px solid #777;
    clear:both;
    display:block;
}
a.button:hover span.b{
    border:none;
    border-top:1px solid #777;
    border-left:1px solid #777;
    background:#d4d0c8 url(images/bg_btnLOver.gif) repeat-x;
    cursor:pointer;
}


/******************************************************************************/
/*                                    END                                     */
/******************************************************************************/


p {
    margin-bottom: 15px;
}

.cls {
    height: 1%;
    clear: both;
    display: block;
}
.nice_vlight_gray  { color: #A0A0A0; } .nice_vlight_gray_bg { background: #A0A0A0; }
.nice_light_gray   { color: #797E79; } .nice_light_gray_bg  { background: #797E79; }
.nice_med_gray     { color: #464646; } .nice_med_gray_bg    { background: #464646; }
.nice_dark_gray    { color: #252525; } .nice_dark_gray_bg   { background: #252525; }
.nice_green        { color: #B0F950; } .nice_green_bg       { background: #B0F950; }
.nice_blue         { color: #8ECAFE; } .nice_blue_bg        { background: #8ECAFE; }

#pagesettings {
    display:block;
    text-align: center;
    margin: auto;
    text-align: center;
    z-index: 99999;
}
#pagesettings #settings {
}
#pageConfig {
    /*width: 100%;*/
    display: block;
    z-index: 99999;
}
label {
    position: relative;
    width: 140px;
    float: left;
    padding: 2px 0;
}
textarea {
    background-color: #F4F4F4;
    border-color: #CBCBCB #D1D1D1 #D3D3D3 #D3D3D3;
    border-style: solid;
    border-width: 1px;
    padding: 2px;
    width: 180px;
    height: 100px;
    font: inherit;
}
textarea:focus {
    background: #E0E0E0;
    border-color: #BBBDBC #CCCCCC #D3D3D3 #D3D3D3;
}



#header {
    width: 100%;
    height: 104px;
    margin: auto;
    position: relative;
    clear: both;
    margin-top: 90px;
    background: #D4D4D6 url(images/top-bg.png) repeat-x;
    color: #FFF;
    z-index: 10001; /* IE6 Fix*/
}
    #headerleft {
        position: absolute;
        width: 230px;
        height: 70px;
        top: 57px;
        left: 60px;
        z-index: 1000;
    }
        #headerlogo a {
            display: block;
            height: 70px;
            width: 230px;
            background: url(images/top-logo.png) left top no-repeat;
            text-indent: -4000em;
            z-index: 1000;
        }

    #headerright {
        margin-left: 650px;
        width: 237px;
    }
        #headerwater {
            position: absolute;
            margin-top: -109px;
            display: block;
            width: 237px;
            height: 215px;
            background: url(images/top-water.png) left top no-repeat;
        }

/* total width:   : 980px
-60px margin-left : 920px;
*/
#container {
    position: relative;
    width: 940px;
    height: auto;
    margin: 0;
    padding: 0;
    background: #FFF;
}

    #leftholder {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 320px;
        height: inherit;
    }
    #left {
        background: #fff;
        padding: 77px 0px 20px 60px;
        /*height: auto;*/
        /*height: 907px;*/
        border-right: 1px solid #D2D0DE;
        position: relative;
    }
        #left #Legionella_Control_Compliance {
            width: 242px;
            height: 25px;
            background: url(images/left-legion.png) no-repeat top;
            display: block;
            text-indent: -5000em;
        }
        #left #Legionella_Control_Compliance.sel,#left #Legionella_Control_Compliance:hover { background-position: bottom; }

        #left #Cooling_Water_Treatment {
            width: 195px;
            height: 24px;
            background: url(images/left-cooling.png) no-repeat top;
            display: block;
            text-indent: -5000em;
        }
        #left #Cooling_Water_Treatment.sel,#left #Cooling_Water_Treatment:hover { background-position: bottom; }

        #left #Boiler_Water_Treatment {
            width: 197px;
            height: 23px;
            background: url(images/left-boiler.png) no-repeat top;
            display: block;
            text-indent: -5000em;
        }
        #left #Boiler_Water_Treatment.sel,#left #Boiler_Water_Treatment:hover { background-position: bottom; }

        #left #Chemical_Cleaning {
            width: 158px;
            height: 24px;
            background: url(images/left-chemical.png) no-repeat top;
            display: block;
            text-indent: -5000em;
        }
        #left #Chemical_Cleaning.sel,#left #Chemical_Cleaning:hover { background-position: bottom; }

        #left #Routine_Seasonal_Cleaning {
            width: 217px;
            height: 19px;
            background: url(images/left-routine.png) no-repeat top;
            display: block;
            text-indent: -5000em;
        }
        #left #Routine_Seasonal_Cleaning.sel,#left #Routine_Seasonal_Cleaning:hover { background-position: bottom; }

        #left #Renovation_Cleaning {
            width: 174px;
            height: 20px;
            background: url(images/left-renovation.png) no-repeat top;
            display: block;
            text-indent: -5000em;
        }
        #left #Renovation_Cleaning.sel,#left #Renovation_Cleaning:hover { background-position: bottom; }

        #left #PreCommission_Cleaning {
            width: 215px;
            height: 19px;
            background: url(images/left-precommission.png) no-repeat top;
            display: block;
            text-indent: -5000em;
        }
        #left #PreCommission_Cleaning.sel,#left #PreCommission_Cleaning:hover { background-position: bottom; }

        #left #Dosage_Control_Equipment {
            width: 226px;
            height: 24px;
            background: url(images/left-dosage.png) no-repeat top;
            display: block;
            text-indent: -5000em;
        }
        #left #Dosage_Control_Equipment.sel,#left #Dosage_Control_Equipment:hover { background-position: bottom; }

        #left #Analytical_Services {
            width: 163px;
            height: 24px;
            background: url(images/left-analytical.png) no-repeat top;
            display: block;
            text-indent: -5000em;
        }
        #left #Analytical_Services.sel,#left #Analytical_Services:hover { background-position: bottom; }

        #left #Chemical_Products_Delivery {
            width: 233px;
            height: 24px;
            background: url(images/left-chemicalproducts.png) no-repeat top;
            display: block;
            text-indent: -5000em;
        }
        #left #Chemical_Products_Delivery.sel,#left #Chemical_Products_Delivery:hover { background-position: bottom; }

            #left #Bacteriological_Screening {
                width: 217px;
                height: 20px;
                background: url(images/left-bacterialogical.png) no-repeat top;
                display: block;
                text-indent: -5000em;
            }
            #left #Bacteriological_Screening.sel, #left #Bacteriological_Screening:hover { background-position: bottom; }

            #left #Corrosion_Monitoring {
                width: 217px;
                height: 20px;
                background: url(images/left-corrosion.png) no-repeat top;
                display: block;
                text-indent: -5000em;
            }
            #left #Corrosion_Monitoring.sel, #left #Corrosion_Monitoring:hover { background-position: bottom; }


        #left #Water_Treatment_Summaries {
                width: 230px;
                height: 20px;
                background: url(images/left-water.png) no-repeat top;
                display: block;
                text-indent: -5000em;
            }
            #left #Water_Treatment_Summaries.sel, #left #Water_Treatment_Summaries:hover { background-position: bottom; }

		#left #Training_and_Consultancy {
                width: 205px;
                height: 24px;
                background: url(images/left-training.png) no-repeat top;
                display: block;
                text-indent: -5000em;
            }
            #left #Training_and_Consultancy.sel, #left #Training_and_Consultancy:hover { background-position: bottom; }

		#left #System_Water_Health_Check {
                width: 220px;
                height: 24px;
                background: url(images/left-system.png) no-repeat top;
                display: block;
                text-indent: -5000em;
            }
            #left #System_Water_Health_Check.sel, #left #System_Water_Health_Check:hover { background-position: bottom; }

        #left #left-contact {
            /*margin-top: 150px;*/
            position: absolute;
            top: 400px;
            left: 60px;
            background: url(images/left-contact.png) no-repeat;
            display: block;
            width: 227px;
            height: 59px;
            text-indent: -5000em;
        }

        #left #left-logos  {
            position: absolute;
            top: 480px;
            left: 60px;
            background: url(images/left-logos.png) no-repeat bottom;
            display: block;
            height: 75px;
            width: 187px;
            text-indent: -5000em;
            cursor: pointer;
        }
        #left #left-logos:hover {
            background-position: top;
        }

    #rightholder {
        width: 622px;
        margin-left: 320px;
        background: #FFF;
        border-left: 1px solid #D2D0DE;
		min-height:560px;
    }
        #right {
            padding: 2px 16px 10px 16px;
            /*border-left: 1px solid #D2D0DE;*/
            min-height: 500px;
            /*height: 991px;*/
            clear:both;
        }

        #right #menu {
            display: block;
            position: absolute;
            /*position: relative;*/
            /* clear: both; */
            margin-bottom: 20px;
            width: 462px;
        }
            #right #menu ul {
            /*margin: 0.5em 1em 0 1em !important;
            margin: 0.5em 0.5em 0 1em;*/
            padding: 0;
            }

            #right #menu ul li {
            display: inline;
            list-style: none;
			float:left;
			margin-left:2px;
            }

            #right #menu ul li .split {
                clear: right;
            }
            #right #menu ul li a {
            float: left;
            margin-right: 2px;
            margin-bottom: 2px;
            }
                #menu-about {
                    display: block;
                    outline: none;
                    width: 149px;
                    height: 20px;
                    background: url(images/menu-about.png) no-repeat top;
                    text-indent: -5000em;
                }
                #menu-about:hover, #menu-about.sel {
                    background-position: bottom;
                }
                #menu-clients {
                    display: block;
                    outline: none;
                    width: 150px;
                    height: 20px;
                    background: url(images/menu-clients.png) no-repeat top;
                    text-indent: -5000em;
                }
                #menu-clients:hover, #menu-clients.sel {
                    background-position: bottom;
                }
                #menu-contact {
                    display: block;
                    outline: none;
                    width: 150px;
                    height: 20px;
                    background: url(images/menu-contact.png) no-repeat top;
                    text-indent: -5000em;
                }
                #menu-contact:hover, #menu-contact.sel  {
                    background-position: bottom;
                }
                #menu-services {
                    display: block;
                    outline: none;
                    width: 149px;
                    height: 21px;
                    background: url(images/menu-services.png) no-repeat top;
                    text-indent: -5000em;
                }
                #menu-services:hover, #menu-services.sel  {
                    background-position: bottom;
                }
                #menu-testimonials {
                    display: block;
                    outline: none;
                    width: 149px;
                    height: 21px;
                    background: url(images/menu-testimonials.png) no-repeat top;
                    text-indent: -5000em;
                }
                #menu-testimonials:hover, #menu-testimonials.sel  {
                    background-position: bottom;
                }
                #menu-news {
                    margin-left: 1px;
                    display: block;
                    outline: none;
                    width: 149px;
                    height: 21px;
                    background: url(images/menu-news.png) no-repeat top;
                    text-indent: -5000em;
                }
                #menu-news:hover, #menu-news.sel  {
                    background-position: bottom;
                }
                #menu-customer {
                    display: block;
                    outline: none;
                    float: right;
                    /*margin-top: -22px;*/
                    /*margin-top: -65px;*/
                    width: 89px;
                    height: 42px;
                    background: url(images/menu-customer.png) no-repeat top;
                    text-indent: -5000em;
                }
                #menu-customer:hover, #menu-customer.sel  {
                    background-position: bottom;
                }
        #content {
            position: relative;
            margin-top: 80px;
            clear: both;
        }
    #holder {
        position: relative;
        width: 940px;
        height: auto;
        background: #E8E5E2;
        clear: right;
        /*border: 1px solid blue;*/
    }

        #holder #rightholder {
            position: absolute;
            width: 170px;
            right: 0px;
            margin: 0;
            padding: 0;
            top: 0px;
            height: 100%;
            z-index: 100;
        }
    #holder #rightholder #right{
        margin: 5px;
    }

        .content-left{
            width: 285px;
            /*margin-right: 10px;*/
            height: auto;
            float: left;
            background: #fff;
            padding-right: 10px;
        }
        .content-right{
            width: 285px;
            /*margin-left: 10px;*/
            height: auto;
            float: right;
        }

        /*#holder #rightholder #right #drag-palette {
            width: 169px;
            height: 169px;
            background: url(images/drag-palette.png) no-repeat;
            position: fixed;
            display: block;
            top: 330px;
            left: 790px;
            z-index: 99999;
        }*/
        #holder #rightholder #right #drag-palette {
            width: 169px;
            height: 169px;
            background: url(images/drag-palette.png) no-repeat;
            position: absolute;
            display: block;
            top: 216px;
            left: -13px;
        }

    #footerholder {
        clear: both;
        width: 880px;
        margin-left: 60px;
    }

    #footerleft {
        float: left;
        width: 180px;
        height: 22px;
        border-top: 1px solid #D2D0DE;
        color: #AA9C95;
    }

    #footerright {
        width: 699px;
        height: 22px;
        float: right;
        text-align: right;
        border-top: 1px solid #D2D0DE;
    }
    #footerright div{
        margin: 0.2em 1em 0 1em !important;
        margin: 0.3em 0.5em 0 1em;
        font: 600 1.0em arial, sans-serif;
        color: #AA9C95;
    }

#mainholder {
    position: relative;
    height: auto;
    top: -23px;
    margin-left: 60px;
    /*display: block;*/
    /*width: 750px;*/
    width: 925px;
    padding: 0;
}

.item {
	float: left;
	position: relative;
	width: 149px;
	height: 170px;
	border: 1px solid #eee;
	margin: 10px;
	border-right: 2px solid #ddd;
	border-bottom: 2px solid #ddd;
	background-color: #fff;
	background-position: left top;
	background-repeat: no-repeat;
	cursor: move;
}
#cart .item {
	width: 75px;
	height: 75px;
	margin: 5px;
	background-position: -40px -22px;
	border-width: 1px;
	cursor: default;
}

.item span
{
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 0.8em;
	font-weight: bold;
	width: 100%;
	text-align: center;

}


.over {
    background: url(images/textarea_background.gif) repeat;
    cursor: pointer;
}
.hidden {display: none !important;}


.editbox {
    width: 285px;
    font: inherit;
}
#edittext {
        float: right;
        display: block;
        clear: both;
}
#edittextholder, #savetextholder, #canceltextholder {
    float: right;
    width: 70px;
    height: 20px;
    background: #ccddaa;
    text-align: center;
    margin: 0 4px;
    border-color: #CBCBCB #D1D1D1 #D3D3D3 #D3D3D3;
    border-style: solid;
    border-width: 1px;
} #savetextholder { width: 140px; }

.subtitle {
        /*display: block;*/
        color: #16074D;
        border-bottom: 1px solid #C5C1D2;
        padding-bottom: 1px;
        margin: 0;
        font-family: georgia, "times new roman", serif;
        font-size: 14px;
    }

form {
  padding: 0;
  margin: 0;
}

/* If you're finding the input elements get pushed down, increase the width */
/*
label {
  float: left;
  width: 25%;
  vertical-align: top;
}
*/
input {background:#d1dae2; color:#132e44;border:1px solid #1c3c57;padding:1px 3px;-moz-border-radius:3px;font-size:10px;font: 400 1em verdana, sans-serif;}
input:hover,input:focus {background:#455c6f;color:#fff;}
input[type="text"],textarea{border: 2px solid #D9D9D9;background:#fff}
input[type="text"]:hover,textarea:hover {color:#1a1a1a;background:#fff;}
input[type="text"]:focus,textarea:focus {border-color:#A3A3A3;color:#1a1a1a}
/*input,
textarea,
select {
  padding: 1px;
  font: 400 1em verdana, sans-serif;
  color: #999;
  background: #EEE;
  border: 1px solid #CCC;
}

input:focus,
input:hover,
textarea:focus,
textarea:hover,
select:focus,
select:hover {
  color: #000;
  background: #E7F1F3;
  border: 1px solid #888;
}*/

input.noBorder,
input:focus.noBorder,
input:hover.noBorder {
  padding: 0;
  border: 0;
}

input.button {
  padding: 2px 5px;

  font: 400 0.9em verdana, serif;
  cursor: pointer;

  color: #fff;
  background: #FC3307;
  border-width: 1px;
  border-style: solid;
  border-color: #FF7800 #691300 #691300 #FF7800;
}

input.radio {
  background: none;
  border: 0px;
}

form.general {
    }
    /* 10/07/07 - thatch - Fixed opera bug; removed form.general from inputs */
    form.general fieldset{
        border:none;
        margin:0; padding:0;
    }
    .validation-failed {
        border: 1px solid #f00;
    }
    .validation-passed {
    }
    .validation-advice {
        margin-left: 100px;
        margin: 2px 2px 0px 140px;
        font-style: italic;
        padding: 2px;
        color:#fff;
        background-color:#f00;
        width: 182px;
    }
    .warning {
        border: 1px solid #c66;
    }
    .warning-advice {
        margin: 2px;
        padding: 2px;
        color:#fff;
        background-color:#bbb;
    }
    .ajax-loading {
        padding: 20px 0;
        background: url(/images/spinner.gif) no-repeat center;
        z-index: 99999;
    }
    .ajax-loading form, .ajax-loading2 form { display: none; }
    .ajax-loading2 {
        padding: 40px 10px;
        background: url(/images/spinner.gif) no-repeat center 80%;
        z-index: 999999;
        font-size: 14px;
        font-weight: bold;
        vertical-align: top;
    }

    /*.ajax-loading input, .ajax-loading textarea, .ajax-loading label { display: none; }*/
    fieldset legend{
        color:#cc0033;
    }

    form.general br {
        display: none;
    }
    label {
        width: 160px;
        float: left;
        padding: 2px 0;
        display:block;
        overflow:hidden;
    }
    form.general .right {
        font-size: 9px;
    }
    input.t{
        background-color: #F4F4F4;
        border-color: #CBCBCB #D1D1D1 #D3D3D3 #D3D3D3;
        border-style: solid;
        border-width: 1px;
        padding: 2px;
        width: 180px;
    }
    input.t:focus {
        background: #E0E0E0;
        border-color: #BBBDBC #CCCCCC #D3D3D3 #D3D3D3;
    }
    form.general textarea {
        background-color: #F4F4F4;
        border-color: #CBCBCB #D1D1D1 #D3D3D3 #D3D3D3;
        border-style: solid;
        border-width: 1px;
        padding: 2px;
        width: 180px;
        height: 100px;
        font: inherit;
    }
    form.general textarea:focus {
        background: #FFEFE0;
        border-color: #BBBDBC #CCCCCC #D3D3D3 #D3D3D3;
    }
    option {
        background: #F4F4F4;
        padding: 1px 0px 1px 5px;
    }
    select {
        background: #F4F4F4;
        border-color: #BBBDBC #CCCCCC #D3D3D3 #D3D3D3;
        border-style: solid;
        border-width: 1px;
    }




#accordion {
    position: relative;
    margin: 0;
}

.toggler {
	position: relative;
        color: #222;
	margin: 0;
	padding: 2px 5px;
	background: #eee;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-top: 1px solid #f5f5f5;
	border-left: 1px solid #f5f5f5;
	font-size: 12px;
	font-weight: normal;
	font-family: 'Andale Mono', sans-serif;
        cursor: pointer;
}

.tflash {
    background: #FF0720;
}
.tnorm {
    background: #eee;
}

.done {
    background: #B2D281;
    color: #325B0A;
    font-weight: bold;
}
.donesub {
    background: #DDEEC2;
}

.tcomp {
    position: absolute;
    right: 0px;
    font-size: 9px;
    font-family: 'Andale Mono', sans-serif;
}