/* $Id: forms.css,v 1.8 2008-02-23 14:39:49 patrick Exp $ */

.forms_notempty { font-weight: bolder; color: #600; }
.forms_highlight:hover { background-color: #9cf; }
.forms_itemerror { font-weight: bolder; color: #f00; margin: 5px; }
.forms_itemerroron { font-weight: bolder; color: #f00; border: 3px solid #f00; height: 100%;}
.forms_itemerrorglobal { display: none; border: double #d00 2px; background: #ffdfdf; font-size: larger; font-weight: bolder; padding: 5px; }
.forms_notify_change { background-color: #f90 !important; }

form label span {
        display: block;
        float: left;
        width: 25%;
        padding: 0 5px 0 0;
        text-align: right;
	height: 100%;
}

form.form1 > fieldset.fset1 { margin: 2em 10px 2em 0; border: 2px solid #c4dfbe; }
form.form1 > fieldset.fset1 > legend { font-size: larger; font-style: italic; border: 2px solid #c4dfbe; padding: 0 1em; }

form.form1 > fieldset.fset1 > div { clear: both; padding-top: 10px; vertical-align: top; }
form.form1 label.lab1 {
        float: left;
        width: 30%;
        text-align: right;
        height: 100%;
        vertical-align: top;
        margin: 0;
        padding-right: 0.5em;
}

form.form1 fieldset.fset2 { border: none; }
form.form1 fieldset.fset2 legend { border: none; }

/* Inspired by Gustafson_Boston_Aaron_Learningtoloveforms_BOS.pdf */
form.form2 { border: 0; margin: 0; padding: 0; }
form.form2 > fieldset { margin: 2em 10px 2em 0; border: 2px solid #c4dfbe; }
form.form2 > fieldset > legend { font-size: larger; font-style: italic; font-weight: 500; border: 2px solid #c4dfbe; line-height: 180%; padding: 0 1em; }
form.form2 > fieldset ol { line-height: 150%; list-style-type: none; margin: 0; padding: 0; }
form.form2 > fieldset ol > li { clear: both; margin: 0 0 0.75em; padding: 0;}
form.form2 > fieldset ol > li > label { display: block; float: left; line-height: 160%; margin-right: 10px; text-align: right; width: 30%; height: 100%; vertical-align: top; }
form.form2 > fieldset ol > li > label:after { content: " :"; }
/* input, textarea widht: 250px; */
form.form2 > fieldset ol > li > input, form.form2 > fieldset ol > li > textarea, form.form2 > fieldset ol > li > select { background: #d0ddd0;}
form.form2 > fieldset ol > li > input:focus, form.form2 > fieldset ol > li > textarea:focus, form.form2 > fieldset ol > li > select:focus, form.form2 > fieldset ol > li > select:focus > optgroup > option { background: #fff; }
form.form2 > fieldset ol > li > select:focus > optgroup { background-color: #d0ddd0; }
form.form2 > fieldset ol > li > input { font: 1em Arial, Helvetica, sans-serif;}
form.form2 > fieldset ol > li > textarea { line-height: 130%;}

/* Resizable textareas */
form.form2 > fieldset ol > li > div.or { padding-left: 31%; }
form.form2 > fieldset ol > li > div.or > div > textarea { background: #d0ddd0;}
form.form2 > fieldset ol > li > div.or > div > textarea:focus { background: #fff; }



form.form2 > fieldset ol > li.error { border: 2px solid #d00; padding: 2px; }
form.form2 > fieldset ol > li.error strong.error { color: #d00; display: block; padding-left: 5px; text-align: left; }
form.form2 > fieldset ol > li.error input, form.form2 > fieldset ol > li.error textarea, form.form2 > fieldset ol > li.error select { background: #ffdfdf; border: 2px solid #d00; }

/* Radiogroups = <fieldset class=radio><legend><span>General label</span></legend><ul><li><input type=radio name= value= />option label</li><li><input type=radio name= value= />option label</li></ul></fieldset> */
form.form2 > fieldset ol > li > fieldset.radio { border: none; padding: 0.2em 0 0 0; margin: 0;}
form.form2 > fieldset ol > li > fieldset.radio > ul { font-size: 1em; margin: 0; padding: 0;  list-style-type: none; }

/* checkboxes <li class=><label><input type=checkbox />Label</label></li>
form.form2 > fieldset > ol > li.checkbox > label { display: block; float: none; margin-left: 125px; text-align: left; }
*/

/* date as multiple selects :
<fieldset class=date>
<legend><span>Date</span></legend>
<ol>
<li><label for=>Date</label><select id=></select></li>
<li><label for=>Month</label><select id=></select></li>
<li><label for=>Year</label><select id=></select></li>
</ol>
</fieldset>

form.form2 > fieldset > ol > li > fieldset.date { border: 0; padding: 0; position: relative; }
form.form2 > fieldset > ol > li > fieldset.date > ol { list-style: none; margin: 0 0 0 30%; padding: 0; }
form.form2 > fieldset > ol > li > fieldset.date > ol > li { float: left; }
form.form2 > fieldset > ol > li > fieldset.date > ol > li > select { background: #d0ddd0; margin: 0 .25em 0 0; }
form.form2 > fieldset > ol > li > fieldset.date > ol > li > select:focus { background: #fff; }
form.form2 > fieldset > ol > li > fieldset.date > ol > li > label { position: absolute; left: -999em; }
form.form2 > fieldset > ol > li > fieldset.date > legend > span { display: block; line-height: 160%; text-align: right; position: absolute; top: 0; left: 0; }

*/

form.form2 > fieldset ol > li > label > sup.help { position: relative; color: #c66; font-size: smaller; cursor: help; font-weight: normal; }
form.form2 > fieldset ol > li > label > sup.help > span { display: none; }
form.form2 > fieldset ol > li > label > sup.help:hover { font-weight: normal; }
form.form2 > fieldset ol > li > label > sup.help:hover > span {
	position: absolute;
	top: 25px;
	left: 5px;
	width: 200px;
	display: block;
	background: #c66;
	color: #000;
	border: 1px solid #c06;
	padding: 2px;
	font-size: smaller;
	text-align: justify;
	z-index: 2;
	height: auto;
}

.ac_results {
	border: 1px solid gray;
	background-color: #ccf;
	padding: 0;
	margin: 0;
	list-style: none;
	position: absolute;
	z-index: 10000;
	display: none;
	/*max-height: 15em;*/
	/*overflow: auto;*/
}

.ac_results li {
	padding: 0px 5px;
	white-space: nowrap;
	color: #101010;
	text-align: left;
}

.ac_over {
	cursor: pointer;
	background-color: #f69;
}

.ac_match { text-decoration: underline; color: #101010;}