/* 
Here some explanation about using the custom classes for each field / item.
The custom class is alwasy assigned to the input.
When the input has more "children" like label or other (when checked), you can use this
also with your custom class...

Example:

.mycustomclassname { // This is the inputfield	
}

.mycustomclassname_label { // This is the label for the inputfield (available for radio, checkbox, select)
}

.mycustomclassname_other { // This is the label for the "other" inputfield, when check (available for radio, checkbox, select) 
}

.mycustomclassname_tooltip { // This is the tooltip for the inputfield
}


Some predefined class in the form

.formBlockSurveyTable 		// Represents the complete form
.formBlockSurveyRow			// Each row within the form.
.formBlockSurveyCell 		// Each cell within the form. Title and inputfield are each in different cells but have the same class.

.question					// Assigned to the cell that holds the question or name of the input field
.answer						// Assigned to the cell that holds the inputfield

.checkboxList				// A div around the checkboxes
.checkboxPair				// A div around the checkbox and its label

.radiobuttonsList			// A div around the radios
.radiobuttonsPair			// A div around the radios and its label

.otherDiv					// A div around the "other" inputfield (available for radio, checkbox, select) 
.tooltip_holder				// This holds the text in the tooltip.

.space						// Assigned to the cell that holds the space item
.text						// Assigned to the cell that holds the text item
.hr							// Assigned to the cell that holds the hr item
.line						// Assigned to the cell that holds the line item
.fieldset					// Assigned to the cell that holds the fieldset item
.legend						// Assigned to the cell that holds the legend item
.required					// Astrix and "required"-text in the form



The default stylesheet....
*/
.formBlockSurveyTable {
}

.formBlockSurveyRow {
	/*display: block;
	width: 100%;
	padding-top: 5px;
	overflow: auto;*/
	margin-bottom: 15px;
}
/*.formBlockSurveyCell {
	float: left;
	 padding:5px 0px;
}
.formBlockSurveyCell.question {
	width: 120px;
	padding-right: 12px
}*/
.formBlockSurveyCell.answer {

}
.extendedFormSurveyView #msg { background:#FFFF99; color: #000; padding:2px; border:1px solid #999; margin:8px 0px 8px 0px }
.extendedFormSurveyView #msg .error{padding-left:16px; color:#cc0000}

.extendedFormSurveyView .formError {
	color:#cc0000;
	padding: 2px;	
}

.extendedFormSurveyQuestion {
	float: left;
	width: 70%;
	line-height: 29px;
	display: block;
}
.extendedFormSurveyOptions {
	text-align: right;	
}

.formBlockSurveyCell img.ccm-captcha-image{float:none}
.formBlockSurveyCell .required, .preview .required { color:#cc0000 }

.formBlockSurveyCell textarea,
.formBlockSurveyCell input[type=text],
.formBlockSurveyCell select {
	/*font-size: 12px;
	font-family:inherit;*/
	width: 360px;
	/*float: left;
	padding: 0;
	margin: 0;*/
	max-width: 100%;
	min-height: 27px;
}
#extendedFormSurveyPreviewWrap textarea,
#extendedFormSurveyPreviewWrap input[type=text],
#extendedFormSurveyPreviewWrap select {
	float: left;
}
.preview {
	font-size: 13px;
}
.formBlockSurveyRow label {
	margin-bottom: 2px;
}
.SubmitButton {
	margin-bottom: 30px;
	margin-top: -30px;
}

/*.formBlockSurveyCell input[type=text] {
	height: 18px;
	line-height: 18px;
}
.formBlockSurveyCell select {
	height: 22px;
	line-height: 22px;
	width: 304px;
}
.formBlockSurveyCell .otherDiv {
	margin-top: 4px;	
}*/

<!-- CSS styles for the contentitems of the form -->
.formBlockSurveyCell.space {
	display: block;
	height: 20px;
}
.formBlockSurveyCell.line {
	padding-top: 5px;
	padding-bottom: 5px;
}
.formBlockSurveyCell.line h4 {
	font-size: 15px;
	font-family:inherit;
}
.formBlockSurveyCell.text {
	font-size: inherit;
	font-family:inherit;
	padding-top: 5px;
	padding-bottom: 5px;
}
.formBlockSurveyCell.hr {
	padding-top: 5px;
	padding-bottom: 5px;
	width: 100%;
}

.formBlockSurveyCell .checkboxList,
.formBlockSurveyCell .radiobuttonsList,
.formBlockSurveyCell .ratinglist,
#extendedFormSurveyPreviewWrap .checkboxList,
#extendedFormSurveyPreviewWrap .radiobuttonsList,
#extendedFormSurveyPreviewWrap .ratinglist  {
	float: left;
}


.formBlockSurveyCell .ccm-input-captcha {
	float:none !important;
	display: block !important;
	width: 175px !important;
}
.formBlockSurveyCell .ccm-input-date-wrapper,
.formBlockSurveyCell .ccm-input-time-wrapper,
#extendedFormSurveyPreviewWrap .ccm-input-date-wrapper,
#extendedFormSurveyPreviewWrap .ccm-input-time-wrapper {
	float: left;
}
.formBlockSurveyCell .ccm-input-date-wrapper,
#extendedFormSurveyPreviewWrap .ccm-input-date-wrapper {
	padding-right: 5px;
}
.formBlockSurveyCell .ccm-input-date-wrapper input ,
#extendedFormSurveyPreviewWrap .ccm-input-date-wrapper input{
	float: none;
	width: 100px;
}
.formBlockSurveyCell .ccm-input-time-wrapper select,
#extendedFormSurveyPreviewWrap .ccm-input-time-wrapper select {
	float: none;
	width: auto !important;
}
.formBlockSurveyTable .clearfloat,
#extendedFormSurveyPreviewWrap .clearfloat {
	clear: both;
	font-size:0;
	height:0;
	line-height:0;
	padding:0;
	margin:0;
}

.formBlockSurveyTable .fieldset,
#extendedFormSurveyPreviewWrap .fieldset {
	margin-bottom: 10px;
	display:block;
	width:97%;	
	padding: 3px 10px 10px 10px;
	border:1px solid #CCCCCC;
}

.formBlockSurveyTable .legend,
#extendedFormSurveyPreviewWrap .legend {
	margin: 0px;
	padding: 0px;
	margin-left: 10px;
	margin-bottom: 10px;
	display: block;
	border:1px solid #CCCCCC;
	padding: 4px 5px;
}