/*
	CSS code to layout forms and form elements
*/

/* @import url(form-progress.css); */

/*****************************************************************************************
 *			Fieldset styling
 ****************************************************************************************/
 
/************************
 * style fieldsets
 ************************/
#main fieldset {
	margin: 0;
	padding: 0;
	border: none;
	display: block;
}

#main fieldset fieldset {
	margin: 0;
}

/************************
 * style the legend 
 ************************/
#main fieldset legend {
	font-size: 1.45em;
	font-weight: normal;
	padding: 0 0 7px 0;
	margin: 0;
	line-height: 1;
	color: black;
}
@media all { /* not mac ie */
	/* >= IE6 */
	* html #main fieldset legend {
		position: relative;
		left: -8px;
	}
	/* IE 7 */
	*:first-child+html #main fieldset legend {
		position: relative;
		left: -8px;
	}
}





/*****************************************************************************************
 *			2 Column form layout
 ****************************************************************************************/
 
/************************
 * styling for form items (make each one a row)
 ************************/
 
 /* generic form item */
#main .formItem {
	padding: 2px 0 2px 100px; /* padding-left is width of first column */
	color: #333;
	position: relative;
	overflow: hidden;
}

/* the first form item */
body #main .firstFormItem {
	border-top: none;
}

/* the first form item in a nested fieldset */
body #main fieldset fieldset .firstFormItem {

}

/* child form items */
#main .formItem .formItem {

}

/* the first child form item */
#main .formItem .firstFormItem {
	padding-top: 0;
}

.left 
{
	float: left;
}


/************************
 * styling for form item labels (make them the first column)
 ************************/
 
/* make the control label appear in the leftmost column */
#main .formItem label {
	width: 100px;		/* width of first (label) column */
	margin: -0.1em 0 0 -100px;
	float: left; 
	padding: 4px 0;
	font-weight: normal;
	line-height: 1.2em;
	position: relative;
	color: #fff;
	font-size: 1em;
}

#main .admin-fields .formItem label {
	width: 135px;		/* width of first (label) column */
	margin: -0.1em 0 0 -100px;
}

#main .control
{
	margin: 0.5em 0;
}

#main .formItem .control {
	margin: -0.1em 0 0 40px;
}

html .control label,
html #main .formItem .control label {
	float: none;
	margin: 0;
	padding: 0 0 0 0.75em;
}

#main .formItem .formItem label {

}

/* the (required) image */
#main label img {
	position: absolute;
	right: -20px;
	top: 5px;
}


/************************
 * styling for an important form item
 ************************/

/* make the form item text bigger with extra padding */
#main .importantFormItem {
	padding-top: 14px;
	padding-bottom: 14px;
}

/* adjust the height of the required image */
#main .importantFormItem label img {
	top: 18px;
}

/* adjust the label for the changed padding */
#main .importantFormItem label {

}

#main .importantFormItem .control {
	font-size: 130%;
}




/*****************************************************************************************
 *			Styling for control elements
 ****************************************************************************************/

/* top level control items */
#main .formItem .control {
	display: block;
}

/* nested controls */
#main .formItem .control .control {
	float: left; /* put them in a horizontal line */
	margin: 0 7px 0 0;
}


/************************
 * Default control item appearance
 ************************/
#main .textbox input {
	background-color: black !important; /* important necessary to stop google toolbar from changing colour of our fields and making text unreadable */
	border: 1px solid #313030;
	color: #fff;
	font-size: 1em;
	margin: 0;
	display: block;
	padding: 2px !important;
	float: right;
}

#main .textbox textarea 
{
	background-color: black !important; /* important necessary to stop google toolbar from changing colour of our fields and making text unreadable */
	border: 1px solid #313030;
	color: #fff;
	margin: 0;
	padding: 2px;
	border: 1px solid #999;
	display: block;
}
#main .formItem select {
	margin: 0;
	display: inline;
	background-color: black !important; /* important necessary to stop google toolbar from changing colour of our fields and making text unreadable */
	padding: 1px !important;
	font-size: 1em;
	color: #fff;
	border: 1px solid #909090;
	float: right;
}

#main .formItem a
{
	color: #c1c0c0;
}

#main .buttons
{
	padding: 0.75em 0.75em 0.75em 0;
	margin: 0;
	display: block;
}

#main .buttons a
{
	color: #c1c0c0;
	font-size: 1em;
	display: block;
}

#main .checkoutlink a
{
	color: #c1c0c0;
	font-size: 1em;
	display: block;
}


#main .button
{
	padding-right: 0.75em;
}


#main .formItem .login-buttons
{
	padding: 0.75em 0 0.75em 38px;
	margin: 0;
}

#main .formItem .login-buttons a
{
	padding: 0.5em 0;
	margin: 0;
	font-size: 1em;
	display: inline;
}

#main .formItem input.button {
	border: none;
	float:left;
}

#main .formItem .control label {
	float: none;
	vertical-align: middle;
	width: auto;
	margin: 0;
	padding: 0;
	text-align: left;
	font-weight: normal;
}

#main .formItem .control input {
	vertical-align: middle;
	padding: 0;
}

#main .formItem .control .control label {

}

#main .formItem .control .control input {

}

/* only mac ie \*//*/
	* html #main .formItem input,
	* html #main .formItem textarea,
	* html #main .formItem select { display: inline !important; }
/* end hack */


/************************
 * Control widths
 ************************/
 
/* standard width controls */
#main .textbox input,
#main .formItem textarea,
#main .formItem .short-help,
#main .formItem .control
 {
	width: 190px;
}
#main .formItem select {
	width: 195px;
}

/* small control widths */
#main .textbox .short input,
#main .formItem .short textarea,
#main .formItem input.short,
#main .formItem textarea.short,
#main .formItem .short .short-help {
	width: 100px;
}
#main .formItem .short select
#main .formItem select.short {
	width: 107px;
}

/* wide control widths */
#main .textbox .wide input,
#main .formItem .wide textarea,
#main .formItem input.wide,
#main .formItem textarea.wide,
#main .formItem .wide .short-help {
	width: 350px;
}
#main .formItem .wide select,
#main .formItem select.wide {
	width: 357px;
}





/*****************************************************************************************
 *			Specific control styles
 ****************************************************************************************/

/************************
 * buttons
 ************************/

/* only mac ie \*//*/
* html #main .buttons .control .control { float: left; clear: none;}
/* end hack */

#main .buttons {

}


/************************
 * Radio button
 ************************/
/* ie / win specific fix */
@media all { 
	/* only win ie */
	* html #main .formItem span.control {
		height: 0;
	}
}

/************************
 * OR form items
 ************************/

#main .orFormItems {
	padding-left: 0;
	border: 1px dashed #ccc;
	padding-top: 0;
}

#main .orFormItems p {
	margin: 7px 0 7px 7px;
}

#main .orFormItems .formItem {
	padding-top: 32px;
	padding-bottom: 7px;
	background: url(../images/backgrounds/bg_formItem_or.gif) left top no-repeat;
}
#main .orFormItems .formItem label {
	margin-left: -168px;
}

#main .orFormItems .firstFormItem {
	background-image: none;
	padding-top: 7px;
}

#main .orFormItems .formItem .formItem {
	background-image: none;
	padding-top: 7px;
}

#main .orFormItems .formItem .firstFormItem {
	padding-top: 0;
}

#main .followingOrFormItem {

}


/************************
 * CONTAINER form items
 ************************/
#page #main .containerFormItem {
	padding-left: 0;
}




/*****************************************************************************************
 *			focus highlighting
 ****************************************************************************************/

/* style the label when the associated control has focus */
#main .formItem label.arbHasFocus {

}

#main .textbox input.arbHasFocus,
#main .textarea textarea.arbHasFocus {
	border: 1px solid #585858;
}

#page #main .formItem select.arbHasFocus {
	border: 1px solid #585858;
}


/*****************************************************************************************
 *			error highlighting
 ****************************************************************************************/
 
#main .errorItem label {
	color: #EA5200;
}

#main .errorItem input,
#main .errorItem textarea {
	border: 1px solid #EA5200;
	color: #EA5200;
}
#main .errorItem select {
	border: 1px solid #EA5200;
}

/*****************************************************************************************
 *            required field stuff
 *****************************************************************************************/

#main .required label {
	/*color: #f68b1e;*/
}

#main .required input {
	/*border:1px solid #503317;*/
}

#main p.required-note {
	font-size: 0.91135em;
	padding-bottom: 1em;
}




/*****************************************************************************************
 *            examples for form items
 *****************************************************************************************/

.formItem small.example {
	color: #888888;
	display:block;
	float:left;
	padding-left:40px;
	width:190px;
}


/*****************************************************************************************
 *            required field stuff
 *****************************************************************************************/

b.shipping-cost
{
	font-size:125%;
	color:#f68b1e;
}


/*****************************************************************************************
 *			inline status messages
 ****************************************************************************************/
#main .formItem .status {
	margin: 0.5em 0 0 0;
}

#main .formItem .errorStatus {
	float: right;
	padding-right: 0.35em;
	padding-top: 0.15em;
	
}
@media all {
	* html #main .formItem .errorStatus { background-position: 3px 0; }
}




/*****************************************************************************************
 *			disabled controls
 ****************************************************************************************/
#main .disabled label {
	color: #666;
}

#main .disabled input,
#main .disabled textarea,
#main .disabled select {
	background-color: #eee;
	border: 1px solid #ccc;
	color: #666
}



/*****************************************************************************************
 *			help styling
 ****************************************************************************************/

/************************
 * short help
 ************************/

#content .formItem .short-help {

}

#main .formItem .short-help p,
#main .formItem p.short-help {
	margin: 4px 0 0 0;
	padding: 0;
}

/* help inside a control */
#main .formItem .control .short-help {
	margin-left: 0;
}

/************************
 * long help
 ************************/

#content .formItem .long-help {

}




/*****************************************************************************************
 *			print link styling
 ****************************************************************************************/

/* we have an empty div with id=print-link in the html, hide it */
#main div#print-link {
	display: none;
}

/* javascript replaces the above div with an a tag with id="print-link" */
#main a#print-link {
	margin-left: auto;
	display: block;
	background-image: url(../images/buttons/but_print.gif);
	height: 23px;
	width: 97px;
}




/*****************************************************************************************
 *			misc styling
 ****************************************************************************************/

/************************
 * clearfix (float clearing) for controls
 ************************/
/*ClearFix for good browsers*/
html > body .formItem:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* only mac ie \*//*/
* html .control { display: inline-block !important; }
*//* end hack */

/* Hides from IE-mac, clearfix for IE/win and reset for not IE/mac \*/
* html .formItem {height: 1%;}
.formItem {display: block;}
/* End hide from IE-mac */