﻿/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/
form
{
	width:100%;
}

fieldset { display:block; text-align: left; padding:2px; margin: 5px 5px; border: solid 1px #CCC; width: 480px; overflow:hidden; }

fieldset.fugly
{
	background-image: none !important;
	width: auto;
	border: solid 1px #CCC;
	position: relative;
	padding: 5px;
	float:none;
}

fieldset p { margin: 2px 12px 10px 10px; }
fieldset div.legend { height:34px; display:block; padding:0px; text-align:left; font-weight:bold; font-size:12px; }
fieldset div.legend .buttons { position: absolute; right: 5px; top: 5px; }
fieldset legend { font-weight:bold; font-size:12px; color: #696969; }

.wysiwyg fieldset { width: auto; }
.wysiwyg fieldset label { display: block; }

.formfield { clear:both; padding: 3px; }
.formfield label { font-weight:bold; margin-right:20px; width:160px; display:block; float:left; }
fieldset.longLabels .formfield label { width:320px; }
.formfield.shortLabels label { width:120px; }
.formfield label.level2 { margin-left:20px; width: 140px; }
input[type=radio] + label { display:inline; width:auto !important; float:none; }

.ChemicalRiskAssessment .formfield:hover { background-color:#E9F0F5; }
.ChemicalRiskAssessment .formfield-warning:hover { background-color:#FFFFCC; }
.ChemicalRiskAssessment .formfield .warning-icon { display:none; margin: 3px; margin-bottom: 2px; float: right;}
.ChemicalRiskAssessment .formfield.nohighlight:hover { background-color:Transparent; }

.fugly .formfield { background: none !important; width: 760px;}

fieldset label.inline { display: inline; }

.fugly legend
{
	width: auto;
	background: none;
	color: #696969;
	padding: 0;
	clear: both;
	font-weight: bold;
}

.fugly .legend {
    background:none;
}

input[type=text],input[type=password], select, textarea
{
    width: 250px;
    border: 1px solid #CCC;
}

textarea
{
    resize: vertical;
}

.formfield textarea { /*float: right;*/ /* maybe another time */}

fieldset .styled-field-container { float:left; }
fieldset .styled-radio { display:none; }
.styled-field-container > input, .styled-tf { width:232px; }
.styled-field-container > input.long, .styled-tf.long { width:272px; }

input[type=radio],input[type=checkbox]
{
	width: auto;
	margin-right: 0.5em;
	border: none;
}

input[type=hidden]
{
	border: none;
}

div.formfield > input[disabled]
{
    border: none;
    color: #CCC;
}

/*.dateField { width:80px !important; }*/
.userField { width:100px !important; }

.double { width: 100%; clear: both;	float: none; }

.double select, .double textarea, .double input
{
	width: 340px;
}

.double input[type=radio], .double input[type=checkbox]
{
	width: auto;
}

.formfield p
{
	margin: 0 0 0 180px;
	padding: 0;
	line-height: normal;
}

.formfield ul
{
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	width: 250px;
}

.formfield ul.required
{
	border: solid 1px #FFEEEE;
	background-image: url(../Images/styled-validation-required.png);
	background-position: right top;
	background-repeat: no-repeat;
}

.formfield ul.invalid
{
	background-image: url(../Images/styled-validation-invalid.png);
}

.double ul
{
	width: 400px;
}

.double ul input[type=radio], .double ul input[type=checkbox]
{
	width: auto;
}

ul.horizontal li
{
	display: inline;
	margin: 0 1em 0 0;
	padding: 0;
}

ul.horizontal input
{
	float: none;
	display: inline;
	padding-right: 3px;
	vertical-align: middle;
}

label.error /* Needs updating to fix problem with jquery.validate messages not displaying in IE */
{
	margin-left: 180px;
	width: 250px;
}

li label.error
{
	margin-left: 0;
}

span.field-validation-error 
{
	display: block;
	clear: both;
	margin-left: 180px;
}
.styled-field-container span.field-validation-error 
{
	margin-left:auto;
	left: 6px;
	top: 5px;
	position: absolute;
}


/*******************************************************
**************** The styled fields ***********************
*******************************************************/
/*
.ui-styledSelect { float:left;}
.ui-styledSelect-west { background-image:url(../Images/iField-west.png); width:12px; height:25px; }
.ui-styledSelect-center { background-image:url(../Images/iField-center.png); height:25px; padding-top:3px; background-repeat:repeat-x; margin-right:28px; }
.ui-styledSelect-east { background-image:url(../Images/iField-east.png); background-position:-28px 0px; width:28px; height:25px; cursor:pointer; }
.ui-styledSelect-east.required { background-position:-84px 0px; }
.ui-styledSelect-east.valid { background-position:-112px 0px; }
.ui-styledSelect-east.error, .ui-styledSelect-east.input-validation-error { background-position:-140px 0px; }
.ui-styledSelect-east:hover { background-position:-56px 0px; }

.ui-styledTextField { color:#33516a; }

.ui-styledSelect-optionListing { z-index:10000; position:absolute; display:none; background-color:#F3F3F3; overflow:auto; border:1px #CCC solid; font-family:Arial; }
.ui-styledSelect-option { text-align:left; color:#33516a; padding:2px; cursor:pointer; border-bottom:1px #CCC solid; }
.ui-styledSelect-option:hover, .ui-styledSelect-option.selected { color:#FFF; background-color:#3f6483; }

.ui-styledText { float:left; }
.ui-styledText-west { background-image:url(../Images/iField-west.png); width:12px; height:25px; }
.ui-styledText-center { background-image:url(../Images/iField-center.png); height:25px; padding-top:3px; background-repeat:repeat-x; margin-right:28px; }
.ui-styledText-east { background-image:url(../Images/iField-east.png); background-position:0px 0px; width:28px !important; height:25px !important; cursor:pointer; border:0px; }
.ui-styledText-east.required { background-position:-168px 0px; }
.ui-styledText-east.valid { background-position:-196px 0px; }
.ui-styledText-east.error, .ui-styledText-east.input-validation-error { background-position:-224px 0px; }
*/

.ui-styledList { float:left; margin-bottom: 5px; }
.ui-styledList-ne { width:29px; height:54px; background-image:url(../Images/styledList-ne.png); }
.ui-styledList-nc { height:9px; background-image:url(../Images/styledList-nc.png); background-repeat:repeat-x; }
.ui-styledList-nw { width:12px; height:54px; background-image:url(../Images/styledList-nw.png); }
.ui-styledList-ce { width:29px; background-image:url(../Images/styledList-ce.png); background-repeat:repeat-y; }
.ui-styledList-cw { width:12px; background-image:url(../Images/styledList-cw.png); background-repeat:repeat-y; }
.ui-styledList-se { width:29px; height:21px; background-image:url(../Images/styledList-se.png); }
.ui-styledList-sc { height:5px; background-image:url(../Images/styledList-sc.png); background-repeat:repeat-x; }
.ui-styledList-sw { width:12px; height:21px; background-image:url(../Images/styledList-sw.png); }
.ui-styledList-canvas { background-color:#FFF; overflow:auto; }
.ui-styledList-add { width:20px; height:20px; background-image:url(../Images/styledList-add.png); margin-left:4px; cursor:pointer; }
.ui-styledList-remove { width:20px; height:20px; background-image:url(../Images/styledList-remove.png); margin-left:4px; cursor:pointer; }
.ui-styledList-eGap { width:20px; height:4px; margin-left:4px; }
.ui-styledList-item { background-color:#F3F3F3; border-bottom:1px #CCC solid; cursor:pointer; color:#33516a; }
.ui-styledList-item.selected { background-color:#bad1ec; color:#33516a; }
.ui-styledList-item:hover { color:#FFF; background-color:#3f6483; }

.ui-styledToolMenu { width:236px; margin-bottom:5px; }
.ui-styledToolMenu-headContainer { width:236px; height:31px; background-image:url(../Images/styledToolMenu-content.png); background-repeat:repeat-y; }
.ui-styledToolMenu-head { width:236px; height:31px; background-image:url(../Images/styledToolMenu-head.png); }
.ui-styledToolMenu-head h3 { font-size:12px; font-family:Arial; color:#FFF; font-weight:bold; margin:0px; padding:0px; padding-left:8px; padding-top:4px; margin-right:40px; }
.ui-styledToolMenu-content { width:220px; padding-bottom:2px; background-color:#e6f0fc; margin:0px auto; border:1px #CCC solid; border-top:0px; -moz-border-radius-bottomleft: .4em; -webkit-border-bottom-left-radius: .4em; -moz-border-radius-bottomright: .4em; -webkit-border-bottom-right-radius: .4em; }
.ui-styledToolMenu-close { float:right; width:14px; height:14px; background-image:url(../Images/styledToolMenu-buttons.png); background-position:-32px 0px; cursor:pointer; margin-right:8px; }
.ui-styledToolMenu-minimize { float:right; width:14px; height:14px; background-image:url(../Images/styledToolMenu-buttons.png); background-position:-16px 0px; cursor:pointer; }
.ui-styledToolMenu-maximize { float:right; width:14px; height:14px; background-image:url(../Images/styledToolMenu-buttons.png); background-position:-0px 0px; cursor:pointer; }

/* css for timepicker */
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }

.fieldsetFillPage { width: auto; margin-right: 0px; padding-right:0px; border-right-width:0px; }
.fieldsetFillPage .radiowrapper { width: 260px; float:right; }
.fieldsetFillPage label { width:auto; margin-right:2px; }
.fieldsetFillPage .styled-field-container { float:right; }

