﻿/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/
form
{
	width:100%;
}

fieldset { display:block; text-align: left; padding:20px; margin: 5px 5px; border: solid 1px #CCC; width: 480px; }

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; }

.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.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;
}

fieldset .sexy-field-container { float:left; }
.sexy-field-container > input, .sexy-tf { width:220px; }
.sexy-field-container > input.long, .sexy-tf.long { width:300px; }

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;
}

.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;
}
.sexy-field-container span.field-validation-error 
{
	margin-left:auto;
	left: 6px;
	top: 5px;
	position: absolute;
}


/*******************************************************
**************** The sexy fields ***********************
*******************************************************/
/*
.ui-sexySelect { float:left;}
.ui-sexySelect-west { background-image:url(../Images/iField-west.png); width:12px; height:25px; }
.ui-sexySelect-center { background-image:url(../Images/iField-center.png); height:25px; padding-top:3px; background-repeat:repeat-x; margin-right:28px; }
.ui-sexySelect-east { background-image:url(../Images/iField-east.png); background-position:-28px 0px; width:28px; height:25px; cursor:pointer; }
.ui-sexySelect-east.required { background-position:-84px 0px; }
.ui-sexySelect-east.valid { background-position:-112px 0px; }
.ui-sexySelect-east.error, .ui-sexySelect-east.input-validation-error { background-position:-140px 0px; }
.ui-sexySelect-east:hover { background-position:-56px 0px; }

.ui-sexyTextField { color:#33516a; }

.ui-sexySelect-optionListing { z-index:10000; position:absolute; display:none; background-color:#F3F3F3; overflow:auto; border:1px #CCC solid; font-family:Arial; }
.ui-sexySelect-option { text-align:left; color:#33516a; padding:2px; cursor:pointer; border-bottom:1px #CCC solid; }
.ui-sexySelect-option:hover, .ui-sexySelect-option.selected { color:#FFF; background-color:#3f6483; }

.ui-sexyText { float:left; }
.ui-sexyText-west { background-image:url(../Images/iField-west.png); width:12px; height:25px; }
.ui-sexyText-center { background-image:url(../Images/iField-center.png); height:25px; padding-top:3px; background-repeat:repeat-x; margin-right:28px; }
.ui-sexyText-east { background-image:url(../Images/iField-east.png); background-position:0px 0px; width:28px !important; height:25px !important; cursor:pointer; border:0px; }
.ui-sexyText-east.required { background-position:-168px 0px; }
.ui-sexyText-east.valid { background-position:-196px 0px; }
.ui-sexyText-east.error, .ui-sexyText-east.input-validation-error { background-position:-224px 0px; }
*/

.ui-sexyList { float:left; margin-bottom: 5px; }
.ui-sexyList-ne { width:29px; height:54px; background-image:url(../Images/sexyList-ne.png); }
.ui-sexyList-nc { height:9px; background-image:url(../Images/sexyList-nc.png); background-repeat:repeat-x; }
.ui-sexyList-nw { width:12px; height:54px; background-image:url(../Images/sexyList-nw.png); }
.ui-sexyList-ce { width:29px; background-image:url(../Images/sexyList-ce.png); background-repeat:repeat-y; }
.ui-sexyList-cw { width:12px; background-image:url(../Images/sexyList-cw.png); background-repeat:repeat-y; }
.ui-sexyList-se { width:29px; height:21px; background-image:url(../Images/sexyList-se.png); }
.ui-sexyList-sc { height:5px; background-image:url(../Images/sexyList-sc.png); background-repeat:repeat-x; }
.ui-sexyList-sw { width:12px; height:21px; background-image:url(../Images/sexyList-sw.png); }
.ui-sexyList-canvas { background-color:#FFF; overflow:auto; }
.ui-sexyList-add { width:20px; height:20px; background-image:url(../Images/sexyList-add.png); margin-left:4px; cursor:pointer; }
.ui-sexyList-remove { width:20px; height:20px; background-image:url(../Images/sexyList-remove.png); margin-left:4px; cursor:pointer; }
.ui-sexyList-eGap { width:20px; height:4px; margin-left:4px; }
.ui-sexyList-item { background-color:#F3F3F3; border-bottom:1px #CCC solid; cursor:pointer; color:#33516a; }
.ui-sexyList-item.selected { background-color:#bad1ec; color:#33516a; }
.ui-sexyList-item:hover { color:#FFF; background-color:#3f6483; }

.ui-sexyToolMenu { width:236px; margin-bottom:5px; }
.ui-sexyToolMenu-headContainer { width:236px; height:31px; background-image:url(../Images/sexyToolMenu-content.png); background-repeat:repeat-y; }
.ui-sexyToolMenu-head { width:236px; height:31px; background-image:url(../Images/sexyToolMenu-head.png); }
.ui-sexyToolMenu-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-sexyToolMenu-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-sexyToolMenu-close { float:right; width:14px; height:14px; background-image:url(../Images/sexyToolMenu-buttons.png); background-position:-32px 0px; cursor:pointer; margin-right:8px; }
.ui-sexyToolMenu-minimize { float:right; width:14px; height:14px; background-image:url(../Images/sexyToolMenu-buttons.png); background-position:-16px 0px; cursor:pointer; }
.ui-sexyToolMenu-maximize { float:right; width:14px; height:14px; background-image:url(../Images/sexyToolMenu-buttons.png); background-position:-0px 0px; cursor:pointer; }