/***************************************************************************************
******* Name		: form.css
******* URI		: /elements/css/form.css
******* Description: Contains basic styles for all form elements site-wide.
*******			  Extra styles for form elements may be defined in module/page styles
******* Author		: Congruent Media
******* Author URI	: http://www.congruentmedia.com
***************************************************************************************/
fieldset {
 border: none;
 margin: 0 0 1em;
 width: 100%;
}
 div.section_caption {
	 color: #0063a5;
	 font-size: 13px;
	 font-weight: bold;
	 margin: 15px 0;
 }
 .form_element {
	 margin: 0 0 10px;
	 position: relative;
	 z-index: 1;
 }
 .widget-container {margin: 0;}
 .widget .form_element {
	 float: left;
	 margin: 0 10px 0 0;
	 padding: 0 20px 0 0;
	 width: auto;
 }
 .control,
 #container #middle #primaryContent .buttons {padding-left: 150px;}
 #secondaryContent .control {padding: 0;}
	.form_element  label {
		 display: block;
		 float: left;
		 font-weight: bold;
		 line-height: 1.5em;
		 margin-left: 10px;
		 width: 140px;
	 }
	 .form_element input,
	 .form_element select,
	 .form_element textarea,
	 .form_element .input,
	 .form_element .input_basket {
		 display: block;
		 float: left;
		 line-height: 1.5em;
		 position: relative;
		 width: 250px;
	 }
	 
		 .form_element .markItUp .markItUpEditor {
			float: none;
			width: 625px;
		 }
	 .widget .form_element label {width: 100px;}
	 .widget .form_element input,
	 .widget .form_element select,
	 .widget .form_element textarea,
	 .widget .form_element .input,
	 .widget .form_element .input_basket,		 
	 .input td input {width: auto;}
	 
	 .m2 .form_element input {width: 115px;}
	 
	 .input_basket label, .input_basket input,
	 .inline label, .inline input, .inline div {
		 display: inline;
		 float: none;
		 width: auto;
	 }
		 .input_basket label, .inline label {margin: 0 10px 0 5px;}
		 .input_basket input, .inline input {vertical-align: middle;}
		 .required label {font-weight: bold;}
		 .control input,
		 .form_element input.submit,
		 #middle #primaryContent .form_element a.submit {
			/*background: transparent url(/elements/images/global/goldBarSprite.jpg) 0 0 repeat-x;*/
			background: transparent url(/elements/images/global/lightGoldBarSprite.jpg) 0 0 repeat-x;
			border: 1px solid #c1a241;
			color: #836301;
			display: inline-block;
			float: none;
			font: bold 0.9em/28px Arial, Helvetica, sans-serif;
			height: 30px;
			padding: 0 8px;
			cursor: pointer;
			text-align: center;
			text-decoration: none;
			text-transform: uppercase;
			vertical-align: top;
			width: auto;
		 }
		 #middle #primaryContent .form_element a.submit {height: 28px;}
		.control input[type="submit"]:hover,
		.form_element input.submit:hover,
		#middle #primaryContent .form_element a.submit:hover {background-position: 0 -30px;}
	 .input #colorCode {
		 display: block;
		 height: 15px;
		 position: absolute;
		 right: -25px;
		 top: 0;
		 width: 15px;
	 }
	 .error input, .error textarea, .error select {background: #febebe;}
	 .error label {color: #ea8989;}
	 #secondaryContent .form_element input,
	 #secondaryContent .form_element select,
	 #secondaryContent .form_element textarea,
	 #secondaryContent .form_element .input {width: 215px;}
	 #secondaryContent .control input {float: right; margin: 0; width: auto;}

/***************************************************************************************
******* TOOLTIP STYLES
***************************************************************************************/
div.tooltip {position: absolute; display: none; top: -10px; right: -270px; width: 230px; min-height: 30px; _height: 30px; padding: 5px; color: #000; z-index: 9999;}
div.form_element div.errors {background: #febebe; border: 2px solid #ea8989;}
div.form_element div.hint {background: #bcfcbc; border: 2px solid #70e270;}
div.form_element div.hintWrapper {
	background: transparent url(/elements/images/icons/question.png) 0 0 no-repeat;
	border: none;
	cursor: pointer;
	display: block;
	height: 16px;
	min-height: 16px;
	padding: 0;
	position: absolute;
	left: 410px;
	top: 0;
	width: 16px;
	z-index: 999999999;
}
.widget div.form_element div.hintWrapper {left: auto; right: 0;}
div.tooltip .arrow {display: none; width: 15px; height: 40px; position: absolute; top: 0; left: -15px; background: transparent url(/elements/images/messaging/successArrow-trans.png) 0 0 no-repeat;}
div.errors .arrow {background-image: url(/elements/images/messaging/errorArrow-trans.png);}

div.tooltip ul, div.tooltip ul li, #primaryContent div.tooltip ul li, #secondaryContent .widget div.tooltip ul li {background: none; list-style: none; margin-left: 0; padding: 0;}
#secondaryContent div.tooltip {left: -245px; width: 200px;}
#secondaryContent div.tooltip .arrow {background: transparent url(/elements/images/messaging/errorArrowRight-trans.png) 0 0 no-repeat; left: auto; right: -15px;}

/***************************************************************************************
******* ERROR/SUCCESS MESSAGING STYLES
***************************************************************************************/
.messageBox {
 border: 2px solid #000;
 border-width: 2px 0;
 color: #000;
 line-height: 1.333em;
 margin: 1em 20px;
 padding: 5px 10px 5px 48px;
}
 .messageBox.error,
 fieldset .error input,
 fieldset .error textarea {
	 background: #febebe url(/elements/images/messaging/error.png) 16px 50% no-repeat;
	 border-color: #ea8989;
 }
 .messageBox.success,
 fieldset .success input,
 fieldset .success textarea {
	 background: #bcfcbc url(/elements/images/messaging/success.png) 16px 50% no-repeat;
	 border-color: #70e270;
 }
 .messageBox.loading,
 fieldset .loading input,
 fieldset .loading textarea {
	 background: #bcfcbc url(/elements/images/messaging/loading.gif) 16px 50% no-repeat;
	 border-color: #70e270;
 }
fieldset .error input,
fieldset .success input,
fieldset .loading input,
fieldset .error textarea,
fieldset .success textarea,
fieldset .loading textarea {background-image: none;}
fieldset .error .markItUp .markItUpEditor {
 background-color: transparent;
 background-position: 0 0;
}

#secondaryContent .messageBox {margin: 0 0 1em;}