﻿/*--- FORMS - all default styles ---*/

.form {
    margin-top: 25px;
    min-height: 1px;
}
.form p {
    margin-top: 8px;
    margin-bottom: 8px;
}
.form h4 {
    margin-top: 12px;
    margin-bottom: 8px;
}

.formhead58595b {
    padding: 0px;
    background-color: #58595b;
    height: 22px;
    font-weight: bold;
    color: #FFFFFF;
    vertical-align: bottom;
    line-height: 24px;
    text-align: center;
}
    
.formhead {
    padding: 0px;
    background-color: #58595b;
    min-height: 22px;
    font-weight: bold;
    color: #FFFFFF;
    vertical-align: bottom;
    line-height: 24px;
    text-align: center;
    -webkit-border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -ms-border-radius: 10px 10px 0px 0px;
    -o-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
}

.formbody {
    padding: 10px 15px 15px 15px;
    border: 1px solid #C0C0C0;
}

.formbuttons {
    margin-top: 15px;
    text-align: center;
}

.formerror {
    margin: 25px;
    border: 1px dashed #FF0000;
    padding: 8px;
}



.form_block { }



.form_block div.row {
    vertical-align:text-bottom;
    overflow: auto;
}
.form_block div.row input[type="submit"].inline {
    margin: 0px 0 5px 20px; 
    padding: 4px 4px 2px 4px;
    line-height: 12px;
}
.form_block div.row select.name_title {
    width:auto;
}


.form_block .productblock {
    border-top: 1px solid #c0c0c0;
}
.form_block .productblock div.product {
    border-bottom: 1px solid #c0c0c0;
    padding: 5px 0;
}
.form_block .productblock div.product span {
    padding-right: 10px;
}



.form_block h3 {   
    font-size: 14px; 
    margin-top: 1.5em;
    margin-bottom: 15px;
    color: #000;
}
.form_block h3.nomargintop {
    margin-top: 0px;
}

.form_block div.form_error {   
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #C0C0C0;
    padding: 15px 5px 15px 5px;
    background: #F6F6F6;
}

.form_block div.form_buttons {   
    padding: 20px;
    text-align: right;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #C0C0C0;
}

.form_block div.form_buttons div.col_left {
    float: left;
    width: 550px;
    text-align: left;
}
.form_block div.form_buttons div.col_right {
    float: right;
    width: 320px;
}

.form_block input[type="radio"] {
    padding-bottom:8px;
}

.form_block option.dropdowntitle {
    color: #fff;
    background-color: #666;
}

.form_block span.radio-h {
	padding-left: 2%;
}


.form_block div.row label {
}


.form_block div.row.fullwidth label {
    width: 88.5%;
    margin-left: 5%;
    text-align: left;
    display: block;
    overflow: auto;
}
.form_block div.row.fullwidth label span.radio {
    width: 10%;
    display: block;
    margin-bottom: 5%;
    float: left;
}
.form_block div.row.fullwidth label span.text {
    width: auto;
    display: block;
    float: left;
}
.form_block div.row.fullwidth span.value {
   width: auto;
}





/*-- BUTTONS --*/

.formbuttons #loading {
    display:none;
    text-align: center;
    font-weight: bold;
}



label.button span.name {
    display: inline-block;
    width: 60px;
    padding-right: 8px;
}
label.button span.value  {
    display: inline-block;
    min-width: 200px;
}
label.button {
    display: block;
    margin-bottom:10px;
    padding: 5px;
    background-color: #f6f6f6;
    border: 1px solid #ddd;
}
label.button:hover,
label.button:focus {
    color: #000 !important;
    border: 1px solid #3c7fb1;
    background-color:#e6f5fd;
	background: -webkit-gradient(linear, left top, left bottom, from(#eaf6fd), to(#afdef8)); 
	background: -webkit-linear-gradient(top, #eaf6fd, #afdef8);
	background: -moz-linear-gradient(top, #eaf6fd, #afdef8);
	background: -ms-linear-gradient(top, #eaf6fd, #afdef8);
	background: -0-linear-gradient(top, #eaf6fd, #afdef8);
	background: linear-gradient(top, #eaf6fd, #afdef8);
    cursor:pointer;
}


#submitbutton, 
.submitbutton,
#form_app .form_block input[type="submit"] {
    min-width: 100px;
    height: 40px;
    font-weight: bold;
    color: #000000;
    text-align: center;
    font-size: 16px;
    margin-top: 1em;
    padding: 0 15px;
    border: 1px solid #bbb;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    background-color:#f2f2f2 ;
	background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#d4d4d4)); 
	background: -webkit-linear-gradient(top, #f2f2f2, #d4d4d4);
	background: -moz-linear-gradient(top, #f2f2f2, #d4d4d4);
	background: -ms-linear-gradient(top, #f2f2f2, #d4d4d4);
	background: -0-linear-gradient(top, #f2f2f2, #d4d4d4);
	background: linear-gradient(top, #f2f2f2, #d4d4d4);
    -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -ms-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -o-box-shadow: inset 0 0 1px 1px #f6f6f6;
    box-shadow: inset 0 0 1px 1px #f6f6f6;
}
label.submitbutton,
span.submitbutton  {
    height: 38px;
    min-width: 100px;
    line-height: 38px;
    display: inline-block;
}
#submitbutton:hover, 
#submitbutton:focus, 
.submitbutton:hover, 
.submitbutton:focus,
#form_app .form_block input[type="submit"]:hover,
#form_app .form_block input[type="submit"]:focus {
    color: #000 !important;
    border: 1px solid #3c7fb1;
    background-color:#e6f5fd ;
	background: -webkit-gradient(linear, left top, left bottom, from(#eaf6fd), to(#afdef8)); 
	background: -webkit-linear-gradient(top, #eaf6fd, #afdef8);
	background: -moz-linear-gradient(top, #eaf6fd, #afdef8);
	background: -ms-linear-gradient(top, #eaf6fd, #afdef8);
	background: -0-linear-gradient(top, #eaf6fd, #afdef8);
	background: linear-gradient(top, #eaf6fd, #afdef8);
    cursor:pointer;
}


.submitbutton.sml {
	font-weight: normal !important;
	font-size: 9pt;
}
.submitbutton.normal {
	font-weight: normal !important;
}
.submitbutton a,
.submitbutton a:hover,
.submitbutton a:visited {
	color: #000000;
    text-decoration: none;
}

#submitbutton.red,
.submitbutton.red,
.form_block .submitbutton.red,
#form_app .form_block input[type="submit"].red,
#form_app .form_block input[type="submit"].red,
div.form_block input[type="submit"].red:not(.button) {
    color: white !important;
    border: 1px solid #d83526 !important;
    background-color: #fe1a00 !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
    background: -webkit-linear-gradient(top, #fe1a00 5%, #ce0100 100% );
    background: -moz-linear-gradient(top, #fe1a00 5%, #ce0100 100% );
    background: -ms-linear-gradient(top, #fe1a00 5%, #ce0100 100% );
    background: -o-linear-gradient(top, #fe1a00 5%, #ce0100 100% );
    background: linear-gradient(top, #fe1a00 5%, #ce0100 100% );
    box-shadow: 1px 1px 2px rgba(0,0,0,.2);
}
    #submitbutton.red:hover:not(.button),
    #submitbutton.red:focus:not(.button),
    .submitbutton.red:hover:not(.button),
    .submitbutton.red:focus:not(.button),
    .form_block .submitbutton.red:hover:not(.button),
    .form_block .submitbutton.red:focus:not(.button),
    #form_app .form_block input[type="submit"].red:hover:not(.button),
    #form_app .form_block input[type="submit"].red:focus:not(.button),
    div.form_block input[type="submit"].red:hover:not(.button),
    div.form_block input[type="submit"].red:focus:not(.button) {
        color: #faddde !important;
        background-color: #ce0100;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
        background: -webkit-linear-gradient(top, #ce0100 5%, #fe1a00 100% );
        background: -moz-linear-gradient(top, #ce0100 5%, #fe1a00 100% );
        background: -ms-linear-gradient(top, #ce0100 5%, #fe1a00 100% );
        background: -o-linear-gradient(top, #ce0100 5%, #fe1a00 100% );
        background: linear-gradient(top, #ce0100 5%, #fe1a00 100% );
        box-shadow: 1px 1px 2px rgba(0,0,0,.2);
        cursor: pointer;
    }



.form_block input[type="file"] {
    height: 20px;
}
.form_block input[type="file"].filebutton {
    height: 30px;
}

@media (-webkit-min-device-pixel-ratio:0) {
    /* saf3+, chrome1+ ONLY */
    
    .form_block input[type="file"],
    .form_block input[type="file"].filebutton {
        /*-webkit-appearance: button;
        -moz-appearance: button;*/
        border: 1px solid #bbb;
        -webkit-border-radius: 0px !important;
        -moz-border-radius: 0px !important;
        -ms-border-radius: 0px !important;
        -o-border-radius: 0px !important;
        border-radius: 0px !important;
        cursor:pointer;
        background-color:#f2f2f2;
    }
}

.form_block input[type="file"]::-webkit-file-upload-button {
    height: 20px;
    padding: 0 15px;
    border: 0px solid #bbb;
    border-right: 1px solid #bbb;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -ms-border-radius: 0px !important;
    -o-border-radius: 0px !important;
    border-radius: 0px !important;
    background-color:#f2f2f2 ;
	background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#d4d4d4)); 
	background: -webkit-linear-gradient(top, #f2f2f2, #d4d4d4);
	background: -moz-linear-gradient(top, #f2f2f2, #d4d4d4);
	background: -ms-linear-gradient(top, #f2f2f2, #d4d4d4);
	background: -0-linear-gradient(top, #f2f2f2, #d4d4d4);
	background: linear-gradient(top, #f2f2f2, #d4d4d4);
    -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -ms-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -o-box-shadow: inset 0 0 1px 1px #f6f6f6;
    box-shadow: inset 0 0 1px 1px #f6f6f6;
}
.form_block input[type="file"].filebutton::-webkit-file-upload-button {
    min-width: 80px;
    height: 30px;
    font-weight: bold;
    color: #000000;
    font-size: 14px;
}
.form_block input[type="file"]::-webkit-file-upload-button:hover,
.form_block input[type="file"]::-webkit-file-upload-button:focus {
    color: #000 !important;
    background-color:#e6f5fd;
	background: -webkit-gradient(linear, left top, left bottom, from(#eaf6fd), to(#afdef8)); 
	background: -webkit-linear-gradient(top, #eaf6fd, #afdef8);
	background: -moz-linear-gradient(top, #eaf6fd, #afdef8);
	background: -ms-linear-gradient(top, #eaf6fd, #afdef8);
	background: -0-linear-gradient(top, #eaf6fd, #afdef8);
	background: linear-gradient(top, #eaf6fd, #afdef8);
    cursor:pointer;
}








/*--- 4 collum  styling ---*/
.form_block div.con4_1,
.form_block div.con4_2,
.form_block div.con4_3 {
    clear:left;
	float:left;
    width:100%;
    position:relative;
    right:25%;
} 
.form_block div.con4_4 {
    clear:left;
	float:left;
    width:100%;
    position:relative;
    overflow:hidden;
} 
.form_block div.col4_1 {
    position:relative;
    float: left;
    width: 21%;
	left:77%;
	overflow:hidden;
    padding-top: 10px;
    padding-bottom: 10px;
}
.form_block div.col4_2 {
    position:relative;
    float: left;
    width: 21%;
	left:81%;
	overflow:hidden;
    padding-top: 10px;
    padding-bottom: 10px;
}
.form_block div.col4_3 {
    position:relative;
    float: left;
    width: 21%;
	left:85%;
	overflow:hidden;
    padding-top: 10px;
    padding-bottom: 10px;
}
.form_block div.col4_4 {
    position:relative;
    float: left;
    width: 21%;
	left:89%;
	overflow:hidden;
    padding-top: 10px;
    padding-bottom: 10px;
}

.form_block div.col4_double {
	width: 46%;
}

.form_block div.col2_half {
	width: 23% !important;
}






/*--- 2 collum styling ---*/
.form_block div.con2_1 {
    clear:left;
	float:left;
    width:100%;
    position:relative;
    right:50%;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #C0C0C0;
} 
.form_block div.con2_2 {
    clear:left;
	float:left;
    width:100%;
    position:relative;
    overflow:hidden;
} 

.form_block div.col2_1 {
    position:relative;
    float: left;
    width: 46%;
	left:52%;
	overflow:hidden;
    padding-top: 10px;
    padding-bottom: 10px;
}

.form_block div.col2_2 {
    position:relative;
    float: left;
    width: 46%;
	left:56%;
	overflow:hidden;
    padding-top: 10px;
    padding-bottom: 10px;
}











/*--- Facebook apps ---
there is some overides inside forms.css
*/

#form_app .form_block input[type="text"],
#form_app .form_block input[type="number"],
#form_app .form_block input[type="file"] {
    width: 300px;
}
#form_app .form_block input, 
#form_app .form_block textarea {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 18px;
    padding: 2px 3px 3px 3px;
}
#form_app .form_block select {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 18px;
    padding: 1px;
}
    
#form_app .form_block input[type="text"], 
#form_app .form_block input[type="number"], 
#form_app .form_block textarea,
#form_app .form_block select {
    padding: 6px;
    border: 1px solid #bbb;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -ms-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -o-box-shadow: inset 0 0 1px 1px #f6f6f6;
    box-shadow: inset 0 0 1px 1px #f6f6f6;
}

#form_app .form_block input[type="text"]:focus, 
#form_app .form_block input[type="number"]:focus, 
#form_app .form_block textarea:focus,
#form_app .form_block select:focus {
    border: 1px solid #3c7fb1;
}




    
    
    
#form_app .form_block div.row {
    padding: 10px 0;
}

#form_app .form_block span.name {
    display: inline-block;
    width: 120px;
    padding-bottom: 8px;
    padding-right: 8px;
}

#form_app .form_block span.number {
    display: inline-block;
    width: 20px;
    padding-bottom: 8px;
    padding-right: 8px;
    text-align: right;
}

#form_app .form_block span.value {
    display: inline-block;
    min-width: 300px;
    padding-bottom:8px;
}

#form_app .form_block span.radio {
    display: block;
    padding: 10px 0 0 10px;
}
#form_app .form_block span.radio-h {
    padding: 0 10px;
}
#form_app .form_block span.check {
    display: block;
}


#form_app .form_block div.row2 {
    padding: 10px 0;
}

#form_app .form_block div.row2 span.name {
    width: 60px;
}

#form_app .form_block div.row2 span.value {
   min-width: 180px;
}

#form_app .form_block div.row2 input[type="text"],
#form_app .form_block div.row2 input[type="number"],
#form_app .form_block div.row2 input[type="file"] {
    width: 180px;
}






/*--- wizzard only ---*/

#wizzard .form_block {  
    border: 1px solid #bbb;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    z-index: 10;
}
#wizzard .form_block div.con4_1,
#wizzard .form_block div.con4_2,
#wizzard .form_block div.con4_3,
#wizzard .form_block div.con4_4,
#wizzard .form_block div.col4_1,
#wizzard .form_block div.col4_2,
#wizzard .form_block div.col4_3,
#wizzard .form_block div.col4_4 {
    z-index: 10;
}
#wizzard .form_block div.con4_1.bgwhite,
#wizzard .form_block div.con4_2.bgwhite,
#wizzard .form_block div.con4_3.bgwhite,
#wizzard .form_block div.con4_4.bgwhite {
    background-color: #fff;
}
#wizzard .form_block div.form_buttons {
    z-index: 10;
    background-color: #fff;
    position:relative;
} 

#wizzard .form_block div.form_error {
    z-index: 10;
    position:relative;
}

/* 4 collum override */
#wizzard .form_block div.con4_1,
#wizzard .form_block div.con4_2,
#wizzard .form_block div.con4_3 {
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #C0C0C0;
} 


/* 2 collum override */
#wizzard .form_block div.con2_1 {
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #C0C0C0;
    background: #fff;
} 

/* Other */
#wizzard .form_block div.col {
    padding: 10px;
}

#wizzard .form_block div.col_product,
#wizzard .form_block div.col_enquiry {
    position: relative;
    overflow: hidden;
    padding: 10px;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #c0c0c0;
}
#wizzard .form_block div.col_completed {
    position: relative;
    overflow: hidden;
    padding: 10px;
}


#wizzard .form_block div.col_hints,
#wizzard .form_block p.col_hints {
    font-size: 8.5pt;
    line-height: 11pt;
} 

#wizzard .form_block div.region_temp,
#wizzard .form_block div.info {
    background-color: #f6f6f6;
    font-size: 12px;
}
#wizzard .form_block div.frostydays,
#wizzard .form_block div.productnote {
    background-color: #3a4f68;
    font-size: 8pt;
    color: #cfcfcf;
}

#wizzard .form_block div.region_temp h3,
#wizzard .form_block div.info h3 {
    margin: 0px;
    font-weight: bold;
}
#wizzard .form_block div.frostydays h3,
#wizzard .form_block div.productnote h3 {
    margin: 0px;
    font-weight: normal;
    line-height: 1.8em;
    color: #fff !important;
}

#wizzard .form_block div.region_temp span.info,
#wizzard .form_block div.info span.info,
#wizzard .form_block div.frostydays span.info,
#wizzard .form_block div.productnote span.info{
    display: block;
    margin-top: 5px;
    margin-right: 3px;
    font-size: 9pt;
    line-height: 13pt;
}

#wizzard .form_block div.region_temp img,
#wizzard .form_block div.info img {
    float: left;
    padding-right:10px;
    padding-left:5px;
}

#wizzard span.dim_name {
    display: inline-block;
    width: 60px;
    padding-bottom:8px;
}

#wizzard span.dim_input {
    display: inline-block;
    min-width: 120px;
    padding-bottom:8px;
}

#wizzard span.name {
    display: inline-block;
    width: 120px;
    padding-bottom: 8px;
    padding-right: 8px;
    text-align: right;
}

#wizzard span.value {
    display: inline-block;
    min-width: 100px;
    padding-bottom:8px;
}



#wizzard .graphwrapper {
    position: relative; 
    width:450px; 
    border: 1px solid #c0c0c0; 
    margin-top: -30px; 
    padding: 15px 15px 10px 15px; 
    background: #f6f6f6;
     -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

#wizzard .graphtitle {
    text-align: center;
    font-size: 14px; 
    text-decoration: underline;
    color: #333;
}
    
#wizzard div.bargraph {
    overflow: visible; 
    position: relative; 
    margin-top:0px;
}
    

#wizzard .vert_text {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
}

#wizzard div.bargraph .vert_text {
    position: absolute;
    top: -2px;
    left: 1px;
    padding: 0px;
    margin: 0px;
}

#wizzard div.selection {
    padding:8px 8px 0 8px; 
    margin-top:-5px;
    background-color: #f6f6f6;
    border: 1px solid #ddd;
}