/* COLOR CODES
	orange - #eb6b08
	dark gray - #585858
	light gray - #c2c2c2
*/

/* Show that a field is required : <label class="required">LABEL TEXT</label>*/
label.required:after {
	content: " *";
	color:red;
}


#rightpanel form {
	margin: 0px;
	padding: 0px;
}

#rightpanel fieldset {
	background-color: #eee;
	display: block;
	margin: 0px 0px 30px;
	padding: 2px 2px;
}

/* button styles */
#rightpanel input[type="submit"], #rightpanel input[type="reset"], #rightpanel input[type="button"], #rightpanel button {
	background: url("/images/layout/button-bg.png") repeat-x top left;
	border: 2px solid #ccc;
	color: #444;
	cursor: pointer;
	font-weight: bold;
	min-width: 75px;
	padding: 0px 5px;
	text-transform: lowercase;
}

/* button styles */
#rightpanel input[type="submit"]:hover, #rightpanel input[type="reset"]:hover, #rightpanel button:hover,#rightpanel input[type="button"]:hover {
	background: url("/images/layout/button-bg-over.png") repeat-x top left;
}

/* .datefieldinput is a class given to the generated input field 
	by coldfusion's <cfinput type="datefield" /> 
*/
#rightpanel .datefieldinput {
	width: 126px;
}

#rightpanel fieldset {
	border: 1px solid #ccc;
}

#rightpanel input[type="date"], #rightpanel input[type="text"], #rightpanel input[type="number"], #rightpanel input[type="password"], #rightpanel input[type="file"], #rightpanel select, #rightpanel textarea, #rightpanel .datefieldinput {
	border: 2px solid #ccc;
}
#rightpanel .payment input[type="file"] {
	background-color: #FFFFFF;
	width: 210px;
}

#rightpanel input[type="text"].noborder, #rightpanel input[type="password"].noborder, #rightpanel input[type="file"].noborder, #rightpanel select.noborder, #rightpanel textarea.noborder, #rightpanel .datefieldinput.noborder {
	border: none;
}

#rightpanel input[type="text"], #rightpanel input[type="password"] {
	width: 146px;
}
#rightpanel input[type="text"].small {
	width: 50px;
}
#rightpanel input[type="text"].locked {
	color: #B3B1AE;
}
#rightpanel .orders input[type="text"] {
	width: 120px;
}

#rightpanel textarea {
	height: 92px;
	width: 306px;
}

#rightpanel textarea, #rightpanel input[type="text"], #rightpanel input[type="number"], #rightpanel input[type="password"], #rightpanel .datefieldinput {
	margin: 0;
	padding: 1px;
}

#rightpanel h4.legend {
	background: #333 url("/images/layout/white-gradient.png") repeat-x top left;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	margin: 0;
	padding: 5px 8px 6px;
}

#rightpanel input[type="checkbox"], #rightpanel input[type="radio"] {
	border: 2px transparent #ccc;
	line-height: 20px;
	margin: 2px 0;
}

#rightpanel legend {
	padding: 0px 4px;
}

#rightpanel label {
	font-weight: normal;
}

#rightpanel optgroup {
	background-color: #ddd;
	color: #444;
	font-style: normal;
	font-weight: bold;
}

#rightpanel option {
	background-color: #fff;
	color: #000;
	font-weight: normal;
	padding: 0px 5px 0px 5px;
}

/* root structure to hold list of form elements */
#rightpanel ul.fields {
	clear: both;
	overflow: visible;
	margin: 0;
	padding: 0;
}

/* element used to hold label and field or another stylized structure
   all elements will be aligned horizontally 
*/
#rightpanel ul.fields > li {
	float: left;
	list-style: none;
	margin: 4px 4px;
	min-width: 152px;
}
#rightpanel .orders ul.fields > li {
	min-width: 80px;
}

/* label and associated field vertical aligned within element */
#rightpanel ul.fields > li > * {
	display: block;
}
#rightpanel ul.fields > li > label {
	font-family: tahoma, verdana, arial, sans-serif;
	font-size: 12px;
}

#rightpanel ul.fields > li > span {
	margin-top: 5px;
}

#rightpanel .bold label {
	font-weight: bold;
}

#rightpanel ul.fields select {
	width: 152px;
}
#rightpanel .orders ul.fields select {
	width: 120px;
}

/* structure to hold collection of associated widgets
   i.e. radio buttons, checkboxes 
*/
#rightpanel ul.collection {
	display: block;
	margin: 0;
	min-width: 120px;
	overflow: auto;
	padding: 0;
	width: 152px;
}

/* element holds radio button or checkbox and label
   vertically aligned
 */
#rightpanel ul.collection > li {
	display: block;
	list-style-type: none;
	overflow: visible;
	padding: 0px 0px 2px 0px;
}

#rightpanel ul.collection li > input[type="checkbox"], #rightpanel fieldset ul.collection li > input[type="radio"] {
	vertical-align: top;
}

/* label for a radio button or checkbox in nested structure */
#rightpanel ul.collection li > label {
	display: inline-block;
	padding: 0px 5px;
	max-width: 120px;
	vertical-align: middle;
}

/* class used to override horizontal alignment of form fields to vertical alignment */
#rightpanel ul.vertical > li {
	clear: both;
	display: block;
	float: none;
	min-height: 35px;
	min-width: 1px;
	overflow: visible;
}

#rightpanel ul.fields.vertical > li {
	margin-top: 4px;
	margin-bottom: 4px;
}

/* aligns list elements horizontally (e.g. a list of checkboxes and respective labels) */
#rightpanel ul.horizontal > li {
	display: inline;
	padding-right: 0px 15px;
}

#rightpanel ul.collection.horizontal {
	min-width: 152px;
	width: auto;
}

#rightpanel ul.collection.horizontal > li {
	float: left;
	min-width: 156px;
	margin-right: 4px;
	width: auto;
}

/* container holds form buttons, centered under preceding contents */
#rightpanel ul.buttons {
	clear: both;
	display: table;
	margin: 0px auto;
	padding: 10px 0px 10px;
	overflow: auto;

}

/* display style for a form button container */
#rightpanel ul.buttons li { 
	display: inline;
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 0 2px;
}

/* add behavior to icon generated by coldfusion's <cfinput type="datefield" /> */
#rightpanel img[src="/CFIDE/scripts/ajax/resources/cf/images/DateChooser.png"]:hover {
	cursor: pointer;
}

/* modify selected cell font color <cfinput type="datefield" /> */
#rightpanel .yui-calendar td.calcell.selected a {
	color: #fff;
}

/* modify selected cell color <cfinput type="datefield" /> */
#rightpanel .yui-calendar td.calcell.selected {
	background-color: #eb6b08;
	border-color: #eb6b08;
}

/* modify hover cell color <cfinput type="datefield" /> */
#rightpanel .yui-calendar td.calcell.calcellhover {
	cursor:pointer;
	color:#FFF;
	background-color:#EBA16A;
	border:1px solid #EBA16A;
}