/* Generic FormBuilder Display Configuration */

form.formBuilderForm, div.formBuilderSuccess {

	text-align: left;

	padding: 10px;

 	clear: both;

}



div.formBuilderSuccess {

	color:#F77A2F;

	font-weight:600;

}



.formBuilderForm div{

	margin: 0;

	padding: 0;

}

div.formBuilderSuccess h4 {

	margin: 0;

	padding: 0;

}





/* The div class around each form field*/

.formBuilderForm .formBuilderField {

	padding-bottom: 4px;

	clear: both;

}



/* The div class around the error message, in the event that a required field is not filled in*/

.formBuilderForm .formBuilderError {

	font-weight: bold;

	color:#F00;

}



/* Generic Display Controls */

.formBuilderForm div.formBuilderComment {

	font-style: italic;

	padding: 4px;

	margin: 4px 0 4px 0;

	clear: both;

	float: left;

	width: 95%;

}

.formBuilderForm .formBuilderHidden {

	visibility: hidden;

	padding: 0;

	margin: 0;

	border: 0;

	position: absolute;

}

.formBuilderForm .formBuilderSubmit {

	clear: both;

	text-align: left;

}



.formBuilderSubmit { margin-left:50px; }



/* Generic Label Controls */

.formBuilderForm .formBuilderLabel, .formBuilderForm .formBuilderLabelRequired {

	clear: left;

	float: left;

	vertical-align: top;

	width: 200px;

	margin-right: 10px;

	margin-bottom: 10px;

	font-weight: bold;	

}

.formBuilderForm .formBuilderLabelRequired {

	font-weight: bold;

}









/**** Field Type Specific Display Controls ****/



.formBuilderForm .small_text_area .formBuilderLabel

{

	width: auto;

	clear: both;

}

.formBuilderForm .small_text_area textarea

{

	width: 98%;

}

.formBuilderForm .large_text_area .formBuilderLabel

{

	width: auto;

	clear: both;

}

.formBuilderForm .large_text_area textarea

{

	width: 98%;

}

.formBuilderForm .checkbox

{

	float: left;

	width: 100%;

}



.formBuilderForm .radio_buttons

{

	position: relative;

}

.formBuilderForm .radio_buttons .formBuilderRadio

{

	display: block;

	position: relative;

	margin-left: 170px;

	padding-left: 0;

}

div.formBuilderFailure {

	border: 1px solid red;

	background-color: #FFEBEB;

	margin: 2px;

	padding: 4px;

}

div.formBuilderFailure h4, div.formBuilderFailure p {

	margin: 0 0 4px 0;

	padding: 0;

}



div.formBuilderCaptcha {

	display: block;

	width: 120px;

	float: left;

}

div.formBuilderCaptcha input {

	width: 120px;

}



div.formBuilderPageBreak {

	text-align: right;

}







table.jCalendar {

	border: 1px solid #000;

	background: #aaa;

    border-collapse: separate;

    border-spacing: 2px;

}

table.jCalendar th {

	background: #333;

	color: #fff;

	font-weight: bold;

	padding: 3px 5px;

}



table.jCalendar td {

	background: #ccc;

	color: #000;

	padding: 3px 5px;

	text-align: center;

}

table.jCalendar td.other-month {

	background: #ddd;

	color: #aaa;

}

table.jCalendar td.today {

	background: #666;

	color: #fff;

}

table.jCalendar td.selected {

	background: #f66;

	color: #fff;

}

table.jCalendar td.selected.dp-hover {

	background: #f33;

	color: #fff;

}

table.jCalendar td.dp-hover,

table.jCalendar tr.activeWeekHover td {

	background: #fff;

	color: #000;

}

table.jCalendar tr.selectedWeek td {

	background: #f66;

	color: #fff;

}

table.jCalendar td.disabled, table.jCalendar td.disabled.dp-hover {

	background: #bbb;

	color: #888;

}

table.jCalendar td.unselectable,

table.jCalendar td.unselectable:hover,

table.jCalendar td.unselectable.dp-hover {

	background: #bbb;

	color: #888;

}



/* For the popup */



/* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */



div.dp-popup {

	position: relative;

	background: #ccc;

	font-size: 10px;

	font-family: arial, sans-serif;

	padding: 2px;

	width: 171px;

	line-height: 1.2em;

}

div#dp-popup {

	position: absolute;

	z-index: 199;

}

div.dp-popup h2 {

	font-size: 12px;

	text-align: center;

	margin: 2px 0;

	padding: 0;

}

a#dp-close {

	font-size: 11px;

	padding: 4px 0;

	text-align: center;

	display: block;

}

a#dp-close:hover {

	text-decoration: underline;

}

div.dp-popup a {

	color: #000;

	text-decoration: none;

	padding: 3px 2px 0;

}

div.dp-popup div.dp-nav-prev {

	position: absolute;

	top: 2px;

	left: 4px;

	width: 100px;

}

div.dp-popup div.dp-nav-prev a {

	float: left;

}

/* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */

div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a {

	cursor: pointer;

}

div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled {

	cursor: default;

}

div.dp-popup div.dp-nav-next {

	position: absolute;

	top: 2px;

	right: 4px;

	width: 100px;

}

div.dp-popup div.dp-nav-next a {

	float: right;

}

div.dp-popup a.disabled {

	cursor: default;

	color: #aaa;

}

div.dp-popup td {

	cursor: pointer;

}

div.dp-popup td.disabled {

	cursor: default;

}



a.dp-choose-date {

	float: left;

	width: 16px;

	height: 16px;

	padding: 0;

	margin: 5px 3px 0;

	display: block;

	text-indent: -2000px;

	overflow: hidden;

	background: url(images/calendar.png) no-repeat; 

}

a.dp-choose-date.dp-disabled {

	background-position: 0 -20px;

	cursor: default;

}

/* makes the input field shorter once the date picker code

 * has run (to allow space for the calendar icon

 */

input.dp-applied {

	width: 140px;

	float: left;

}