/* =====================================================================	
	form.css
========================================================================
   	Author: James Dacosta
   	Date:	07/03/07
------------------------------------------------------------------------
	Comments
------------------------------------------------------------------------
   	
   	Forms framework default presentation
   	overide in form_config.css if neccessary
   	
   	
========================================================================*/ 





/* =typography
------------------------------------------------------------------------*/


div.form_outline,
ul#page_indication{
	line-height:1.6;
}

/* the font size explicitly defined for form */
div.form_outline,
ul#page_indication,
form.basic textarea
{
	font-family:Arial, sans-serif;
}

ul#page_indication,form.basic fieldset li
{
	list-style-type:none;
}

div.form_outline,
ul#page_indication,
form.basic input,
form.basic select,
form.basic textarea
{
	font-size:small;
 	color:#000;	
}

/* for safari - reduces text width http://24ways.org/2006/knockout-type */
ul#page_indication li, 
form.basic legend#form_title,
.show-help dt a,
#helpnotes dt a,
#flash_helpnotes dt a
{
 	text-shadow:0 0 0 #000; 
}



/* title of the form (bold left part is page title and lighter right part is form title)*/
form.basic legend, form.basic legend#form_title
{
 	color:#000;
	font-size:140%;
}

form.basic legend#form_title span
{
	color:#888;
}


form.basic fieldset fieldset label, form.basic fieldset fieldset span.legend
{
	text-align:left;
}

/* all bold text */
form.basic em,
form.basic div#form_errors li,
.show-help dt a,
#helpnotes dt a,
#flash_helpnotes dt a
{
	font-weight:bold;
}

/* em used for required fields e.g. <label for="name">Question <em>required</em></label>*/
form.basic em
{
	font-style:italic;
	text-align:left;
}

/* button used for extra help popup */
form.basic a.help,
form.basic em
{
	text-indent:-9999em;
}

form.basic li strong.error,
#form_errors li,
form.basic em
{
	color:#c00;
}

.show-help a,.show-help a
{
	text-decoration:none;
}

.show-help a:hover,.show-help a:hover
{
	text-decoration:underline;
	cursor:pointer;
}

form.basic a.close,a.close
{
	color:#fff;
	cursor:pointer;
}

form.basic a.close:hover,a.close:hover
{
	text-decoration:none !important;
	color:#fff;
}

a.text-link
{
	text-indent:none !important;
	
}

/* need help? link top right of form page*/
div.form_utilities,p#form_help_close
{
	text-align:right;
	font-size:100%;
}

div.form_utilities a,p#form_help_close a
{
	color:blue;
}

div.form_outline a
{
	outline:none;
}

#helpnotes dt a{
	color:#000;
}





/* =layout & dimensions {
------------------------------------------------------------------------*/

div.form_outline,
ul#page_indication
{
	margin:0;
 	padding:0;
}

div.form_content{
		padding:0 10px;
}

div.form_outline
{
	position:relative;
	padding-top:20px;
 }

ul#page_indication li
{
	margin:0;
 	float:left;
	display:block;
	padding:10px;
}

form.basic,form.basic fieldset
{
	margin:0;
	padding:0;
}


form.basic label,form.basic fieldset fieldset span.legend
{
	display:inline-block;
	vertical-align:top;
	padding:0;
}

label.labelhack{
	line-height:1%;
}


form.basic fieldset ol,form.basic fieldset li,form.basic p
{
	margin:0;
	padding:0;
}

form.basic div#form_description,
form.basic div#form_errors
{
	padding-top:5px;
	padding-bottom:5px;
}

form.basic div#form_description p
{
	padding:5px 0;
}

form.basic fieldset li,div.notes,p.notes
{
	clear:left;
	position:relative;
	overflow:hidden;
}

/* padding for all the text on the left including the main heading*/
form.basic fieldset li,form.basic p,form.basic strong
{
	padding-top:5px;
	padding-bottom:5px;	
}

div.notes{
 	padding-top:10px;
	padding-bottom:10px;	
}

form.basic legend#form_title,
form.basic fieldset li,
div.notes,
form.basic p,
form.basic strong,
form.basic div#form_description,
form.basic div#form_errors
{
	padding-left:15px;
	padding-right:15px;	
}

form.basic legend#form_title{
	padding-top:15px;
	padding-bottom:15px;	
}

div.form_utilities{
	padding:2px 15px;
}

form.basic p.notes, form.basic div#form_errors p
{
	padding:0;
}

form.basic li p,form.basic li strong
{
	padding:5px 0;
}


form.basic fieldset fieldset label,
form.basic fieldset fieldset div
{
	display:block;
	width:auto;
	float:left !important;
}

/* positioning for required field indicator */
form.basic em
{
	display:block;
	width:10px;
	height:10px;
	position:absolute;
	top:10px;
	left:0;
}


/* sets the width for text, textarea fields and radio/checkbox labels */
form.basic .text,form.basic select,form.basic fieldset fieldset div, form.basic fieldset fieldset span.legend,form.basic fieldset fieldset div.multiple-select,form.basic li.double-input div,form.basic label,form.basic fieldset fieldset label, form.basic fieldset fieldset span.legend
{
	width:45%;
}


/* sets the width for text, textarea fields and radio/checkbox labels */
form.basic li.extend .text,form.basic li.extend select,form.basic fieldset li.extend fieldset div
{
	width:22%;
	margin-left:3% !important;
}

form.basic li.extendCurrFix .text,form.basic li.extendCurrFix select,form.basic fieldset li.extendCurrFix fieldset div
{
	width:20%;
	/*margin-left:5% !important;*/
}


form.basic li.extend label,form.basic fieldset li.extend fieldset label
{
	width:73%;
}


form.basic textarea,form.basic select,form.basic li#secondary-action input,form.basic li#submit input,form.basic fieldset fieldset div,form.basic input.text,form.basic li span
{
	/*margin-left:5%;*/
}

form.basic fieldset fieldset span.legend{
	margin-left:0;
	float:left;
 }

form.basic div#top-buttons span#page-nav
{
	position:absolute;
	top:0;
	right:18px;
}


form.basic fieldset fieldset div label
{
	clear:both;
	padding-left:0;
	width:99%;
}

form.basic fieldset fieldset div
{
	padding-left:3px;
	
 }



form.basic a.help
{
	position:absolute;
	top:3px;
	right:0;
	display:block;
	width:25px;
	height:25px;
}

form.basic a.help:hover
{
	background-position:bottom left;
}

form.basic div.notes a.help
{
	position:absolute;
	top:3px;
	right:0 !important;
}

form.basic div.notes span.helpnote
{
	position:absolute;
	line-height:25px;
	right:30px;
}

form.basic button.text-button
{
	background:none;
	border:none;
 	margin:0;
	padding:0;
}

form.basic fieldset li#submit
{
	margin-top:15px;
	padding-bottom:0 !important;
	text-align:left;
}

form.basic fieldset li#secondary-action{
	text-align:center;
}

form.basic fieldset li#submit input,form.basic fieldset li#secondary-action input
{
	margin-left:0;
	outline:none;
	padding:0;
}

form.basic fieldset li#submit input.lastbutton
{
	position:absolute;
	right:0;
}

form.basic fieldset li.final-buttons label
{
	width:22.5%;
}

form.basic fieldset li#secondary-action
{
	margin-top:0;
	padding-top:0 !important;
}

#helpnotes dd strong,#flash_helpnotes dd strong
{
	padding:0;
}

form.basic legend#form_title span
{
	padding-left:0.4em;
	margin-left:0.1em;
}

form.basic li strong.error,#form_errors li
{
	display:block;
	margin:0;
	padding:0;
}

form.basic li.double-input strong.error
{
	position:absolute;
	top:2em;
	left:15px;
	width:300px;
	margin:0;
	padding:0;
}

form.basic li span
{
	display:inline-block;
}

form.basic input.text,form.basic textarea,form.basic li span
{
	padding:0.15em;
}

/* for any notes needed at the bottom of the form (e.g. required field legend)*/
div.notes
{
	margin-top:20px;
}

.hide-element
{
	display:none;
}

.show-element
{
	display:block;
}

form.basic fieldset #form_errors ul
{
	margin:0;
	padding:5px;
}

form.basic fieldset #form_errors li
{
	margin:0;
	padding:0 8px;
}

#helpnotes dt,#flash_helpnotes dt
{
	margin:0;
	padding:10px 15px;
}

.show-help,.show-help
{
	display:block;
	position:absolute;
	width:303px !important;
	padding:0 10px 12px 0;
}

.show-help dt,.show-help dt
{
	padding-top:25px !important;
}

.show-help dd,#helpnotes dd,#flash_helpnotes dd
{
	margin:0;
	padding:15px;
}

#helpnotes dd p,#flash_helpnotes dd p
{
	margin-bottom:15px;
	padding:0;
}

.hide-help
{
	display:none;
}

span.help-locator
{
	width:0;
	height:0;
	margin:0 !important;
	padding:0 !important;
}

form.basic a.close,a.close
{
	position:absolute;
	top:0;
	right:10px;
	padding:0 5px;
}

a.text-link
{
	position:static !important;
	display:inline !important;
	width:auto !important;
	height:auto !important;
}

div.form_utilities,p#form_help_close
{
	display:block;
	margin-top:-20px;
}

span.util_details{
	float:left;
 	
}

span.need_help{
	display:block;
	float:right;
	padding-left:10px;
}






/* =backgrounds & borders
------------------------------------------------------------------------*/





div.form_outline,
ul#page_indication
{
	border:1px solid #999;
}

ul#page_indication
{
	background:#eee;
	border-bottom:4px solid #ddd;
}


form.basic fieldset
{
	border:solid 0 transparent;
}

form.basic fieldset fieldset,form.basic li.no-border
{
	border:none;
}

form.basic em
{
	background:url(../img/form/required.gif) top left no-repeat;
	background-position:0px 0px;
}

form.basic a.help
{
	background:url(../img/form/help.gif) top right no-repeat;
}

form.basic a.help:hover
{
	background-position:bottom left;
}


form.basic input.text,form.basic textarea,form.basic fieldset fieldset div.multiple-select
{
	border:2px solid #eee;
	background:#fafafa;
	border-color:#bfbfbf #e3e3e3 #e3e3e3 #bfbfbf;
}

/* visually separate elements*/
form.basic fieldset li
{
	border-bottom:1px solid #dedede;
}

form.basic fieldset li#secondary-action,form.basic fieldset li#submit
{
	border:none;
}

form.basic fieldset li#secondary-action input
{
	background:none !important;
	border:none;
}

.altrow
{
	background:#fafafa !important;
}

/* this is for if there are other legends on a form but perhaps the top legend is the main one */

form.basic legend#form_title span
{
	border-left:1px solid #999;
}

form.basic input.text:focus,form.basic textarea:focus
{
	background:#FFFFDB !important;
}

/* for any notes needed at the bottom of the form (e.g. required field legend)*/
div.notes
{
	background:url(../img/form/dotted.gif) top left repeat-x;
	background-position:0 -1px;
}

form.basic fieldset #form_errors
{
	background:#FAC9B9;
	border:1px solid #FAB49E; 
}

form.basic fieldset #form_errors li
{
	border:none;
}

#helpnotes dt,#flash_helpnotes dt
{
	background:#d3d3d3 url(../img/form/help-top.gif) top left repeat-x;
	border:1px solid #888;
	border-bottom:1px solid #888;
}

.show-help,.show-help
{
	background:url(../img/form/shadow.png) bottom right no-repeat;
}

.show-help dd,#helpnotes dd,#flash_helpnotes dd
{
	background:#eee;
	border:1px solid #999;
	border-top:none;
}

form.basic a.close,a.close
{
	border:1px solid #921C2D;
	background:#BC243B;
}

form.basic a.close:hover,a.close:hover
{
	background:#888;
	border:1px solid #666;
}

a.text-link
{
	background:none !important;
}

ul#page_indication li.reviewing_form
{
	background:#3AA2D9 !important;
}

div.form_utilities,p#form_help_close
{
	border-bottom:1px solid #eeb;
 	background:#FFFFCC;
}


span.need_help{
	border-left:1px solid #eeb;
}


/* =sub fields
------------------------------------------------------------------------*/

form.basic fieldset li ol{
	background:#f7f7f7;
}


form.basic fieldset li ol li{
	border-bottom:none;
	border-top:1px dotted #aaa;
}



/* =currency
------------------------------------------------------------------------*/

form.basic li.currency input
{
	margin-left:1%;
	width:20%;	
}

form.basic span.currency_sym
{
	padding:0 0 4px 0;
	font-size:105%;
 }

form.basic span.currency_sym *
{
  	vertical-align:middle !important;
}

/* =date, postcode and other short fields
------------------------------------------------------------------------*/
form.basic li.date input,
form.basic li.postcode input
{
	width:22%;
 }
form.basic li.short input.text,
{
	width:22%;
 }

/* =clear
------------------------------------------------------------------------*/

form.basic li.clear{
	padding:0;
}

/* =width
------------------------------------------------------------------------*/

form.basic li.short-width label{
	width:80px;
 	float:left;
 	display:inline;
 	padding-left:10px;
}




form.basic li.auto-width label, form.basic li.auto-width select,form.basic li.auto-width fieldset fieldset label, form.basic li.auto-width div
{
	width:auto;
 	float:none;
 	display:inline;
}



form.basic li.full-width label,form.basic li.full-width fieldset fieldset label, form.basic li.full-width div
{
	width:auto;
 	float:left;	
}


form.basic li.full-width label, 
form.basic li.full-width .text, 
form.basic li.full-width fieldset fieldset{
	display:block;
 	width:100%;
 	margin:0;
 	float:left;
 }


/* =alignment
------------------------------------------------------------------------*/

form.basic li.left  label{
	text-align:left !important;
}



/* =inline
------------------------------------------------------------------------*/

form.basic li.inline div{
 }

form.basic li.inline div label{
	display:inline !important;
 	float:none !important;
	width:25%;
 }

form.basic li.inline  label{
}


/* =repeating fields
------------------------------------------------------------------------*/

li.repeating-fields table{
	width:100%;
}

li.repeating-fields table label{
	position:absolute;
	top:-9999px;
}

li.repeating-fields table input, li.repeating-fields table select{
	width:90% !important;
 	margin-left:0 !important;
}

li.repeating-fields table input.button{
	width:auto !important;
}

li.repeating-fields table thead tr{
	text-align:left;
}
 
/* =checkbox columns
------------------------------------------------------------------------*/

form.basic fieldset  li.checkbox-cols fieldset div label{
    text-align:left;
    width:33%;
     float:left;
    clear:none;
    padding:0;
    margin:0;
}

form.basic fieldset  li.checkbox-cols fieldset div{
    width:100%;
 }


/* =misc
------------------------------------------------------------------------*/


.hide-element{
	display:none !important;
}

.show-element{
	display:block !important;
}


/* clearing */
div.form_utilities:after,
p#form_help_close:after,
ul#page_indication:after
{
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}


.error{
 	border: 1px solid #DD3721;
 	background: #FFC4BB;
}


/* =mozilla form fixes
------------------------------------------------------------------------*/

 


 form.basic fieldset fieldset div, x:-moz-any-link, x:only-child  {
	padding-left: 0px; 
}

form.basic fieldset fieldset span.legend,form.basic li label, form.basic li#secondary-action div, x:-moz-any-link, x:only-child {
 	 display: block;
 	 float: left;
#}
/* hidden from safari */