/************************************************************************************************
*																								*
*	qbuilder/css/template_qbuilder.css															*
*	22/06/04 - CM																				*
*																								*
*	Stylesheet template for qbuilder to be used in different sites. Defaults are specified		*
*	in qbuilder.css so these are overriding styles.	Also see qbuilder/common/common_init.php	*
*	for qboptions which can also control layout.												*
*																								*
*************************************************************************************************/

/*********************** Page Layout ***********************/

/* qBuilder main table layout style - should contain font settings and border-collapse.
   width and alignment can also be defined in directives 'qb_overall_align' and 'qb_total_width' */
.qb_main_table {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8pt;
	border-collapse:collapse;	
}
/* Answer block (the grid/listing section below a question) style - should contain font settings and border-collapse */
.qb_answerblock{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8pt;
	border-collapse:collapse;
}
/* Cell containing answer block */
.qb_answerblock_holder {
	padding-left:20px;
}
/* Header style for page */
.qb_header {
	font-size:10pt;
	font-weight:bold;
	
}
/* Question number
   alignment can also be defined in directive 'qb_question_number_align' */
.qb_question_number {}
/* Cell holding the page number */
.qb_page_num_holder {}


/*********************** Progress Bar  ***********************/

/* The style for the progress bar text */
.qb_progress_text {
	color:#000000;
	font-weight:bold;
}
/* The style for the actual progress bar. This is a div block so can contain an image (specified as a background) or a block of color (also as a bg) */
.qb_progress_bar {
	background-color:#CEE9FF; 
}
/* The outer container cell for the progress bar */
.qb_progress_container {
	border:1px solid #5999E8;
}


/************************* Buttons ************************/
/* Styles for any image buttons in the form, for when the button is off, on or pressed */
.qb_form_button_off {
	margin:1px;
}
.qb_form_button_on {
	margin:0px;
	border:1px solid #000000;
}
.qb_form_button_press {
	margin:0px;
	border:1px solid #FF8C19;
}

/* Style for an HTML based button (only used if draw mode is QB_DRAW_PLAIN) */
.qb_form_button {
	font-family:Tahoma, Arial, Helvetica, sans-serif;
	background-color:#FF8C19;
	font-size:7pt;
	vertical-align:middle;
	text-align:left;
	color:#FFFFFF;
	border:1px solid #FFFFFF;
	padding-left:2px;
	padding-right:2px;	
}

/************************* Questions ************************/

/* --------- Layout  */

/* Question text. If more precise spacing between questions is required placing padding-top/bottom here.
   width and alignment can also be defined in directives 'qb_question_width' and 'qb_question_align' */
.qb_question_text {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8pt;
	font-weight:bold;
	border-bottom:1px solid #89C9F8;
	padding-top:15px;
}
/* Style for questions that were missed when server-side validation (QB_VALIDATE_SERVERONLY) is used
   width and alignment can also be defined in directives 'qb_question_width' and 'qb_question_align' */
.qb_question_text_missed {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8pt;
	font-weight:bold;
	border-bottom:1px solid #89C9F8;
	padding-top:15px;
	color:#FF0033;
}

/* --------- Text boxes (includes multiple choice other text) */
/* Style for HTML text boxes */
.qb_text {
	border:1px solid #89C9F8;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8pt;
	padding-left:2px;
}
/* Style for cell containing text boxes */
.qb_text_holder {}
/* Style for text box when its disabled */
.qb_text_disabled {
	border:1px solid #89C9F8;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8pt;
	padding-left:2px;
	background-color:#E9E9FE;
}
/* Style for a prefix that goes in front of a text box */
.qb_text_prefix {}

/* --------- Options (Radio) */

/* Style for the an HTML radio button (only used if draw mode is QB_DRAW_PLAIN) */
.qb_option {}
/* Style for the text for an option (radio button) */
.qb_option_text {
	padding:1px;
	border-bottom:1px solid #B7CFD2;
	font-size:7pt;
}
/* Style for the cell containing an option (radio button) */
.qb_option_holder {
	padding:1px;	
	border-bottom:1px solid #B7CFD2;
	font-size:7pt;
	text-align:center;
}
/* In grid questions, this is the style for text for options going down the page */
.qb_option_vert_text {
	padding:1px;	
	border-bottom:1px solid #B7CFD2;
	font-size:7pt;
}
/* In grid questions, this is the style for text for options going accross the page */
.qb_option_horiz_text {
	padding:1px;	
	border-bottom:1px solid #B7CFD2;
	font-size:7pt;
	text-align:center;
	padding-left:5px;
	padding-right:5px;
}
/* Row colours for alternating rows in a list of options (radio buttons) */
.qb_option_row_1 {
	color:#000000;
}
.qb_option_row_2 {
	color:#000000;
}
/* Style for missed rows */
.qb_option_missed_vert_text {
	color:#FF0033;
	border-bottom:1px solid #B7CFD2;
	font-size:7pt;	
}

.qb_option_section_head {
	padding:1px;
	border-bottom:1px solid #B7CFD2;
	font-size:7pt;
	font-weight:bold;
}

/* --------- Check boxes */

/* Style for the an HTML checkbox (only used if draw mode is QB_DRAW_PLAIN) */
.qb_check {}
/* Style for the text for a checkbox */
.qb_check_text {
	padding:1px;
	border-bottom:1px solid #B7CFD2;
	font-size:7pt;
}
/* Style for the cell containing a checkbox */
.qb_check_holder {
	padding:1px;
	border-bottom:1px solid #B7CFD2;
	font-size:7pt;
	text-align:center;
}
/* In grid questions, this is the style for text for checkboxes going down the page */
.qb_check_vert_text {
	padding:1px;
	border-bottom:1px solid #B7CFD2;
	font-size:7pt;
}
/* In grid questions, this is the style for text for checkboxes going accross the page */
.qb_check_horiz_text {
	padding:1px;	
	border-bottom:1px solid #B7CFD2;
	font-size:7pt;
	text-align:center;
	padding-left:5px;
	padding-right:5px;
}
/* Row colours for alternating rows in a list of options (checkboxes) */
.qb_check_row_1 {
	color:#000000;
}
.qb_check_row_2 {
	color:#000000;
}
/* Style for missed rows */
.qb_check_missed_vert_text {
	color:#FF0033;
	border-bottom:1px solid #B7CFD2;
	font-size:7pt;	
}

.qb_check_section_head {
	padding:1px;
	border-bottom:1px solid #B7CFD2;
	font-size:7pt;
	font-weight:bold;
}

/*  ---------  Date Controls */

/* The style for the actual row that holds the date controls */
.qb_date {
}

/* The style for the day/month/year text above the controls */
.qb_date_day_text {
	font-size:7pt;
	color:#377793;
}
.qb_date_month_text {
	font-size:7pt;
	color:#377793;
}
.qb_date_year_text {
	font-size:7pt;
	color:#377793;
}

/* The style for the actual day/month/year controls (day & month are drop-downs and year is textual) */
.qb_date_day {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8pt;
}
.qb_date_month {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8pt;
}
.qb_date_year {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8pt;
	border:1px solid #89C9F8;	
}

/* Style to indicate when the year box is disabled */
.qb_date_year_disabled {}

/*  ---------  Dropdown Controls */
/* Style for an HTML drop down box */
.qb_dropdown {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8pt;
}
/* Style for the cell containing a dropdown */
.qb_dropdown_holder {}

/*  ---------  Misc */

/* Style used for horizontal lines */
.qb_hr {
	color:#203E59;
}
/* Style for text defined as an instruction */
.qb_instruction {
	color:#203E59;
	font-size:10pt;
}
/* Style for text defined as a note */
.qb_note {
	color:#203E59;
	font-weight:bold;
}

/*  ---------  Image */
/* Style for an Image */
.qb_image {
	border:1px solid #DED5CF;
}
/* Style for an Image Caption */
.qb_image_caption {}
/* Style for the cell holding the image */
.qb_image_holder {
	text-align:center;
	padding:3px;
}


.qb_rnk_holder {

}
.qb_rnk_unranked_list, .qb_rnk_ranked_list {
	border:1px solid #203E59;
	font-size:8pt;	
	padding:3px;
	background-color:#FFFFFF;
}

.qb_rnk_button_holder {
	padding:2px;
	text-align:center;
}
.qb_rnk_button {
	background-color:#FF8C19;
	color:#FFFFFF;
	border:1px solid #FFFFFF;
	padding:0px;
	padding-left:3px;
	padding-right:3px;
	font-size:7pt;
}

.qb_rnk_item_sel, .qb_rnk_item_sel:hover, .qb_rnk_item_sel:visited, .qb_rnk_item_sel:active {
	text-decoration:none;
	background-color:#7777AA;
	color:#CCCCCC;
	padding-left:3px;	
	padding-right:3px;	
}

.qb_rnk_item_sel:hover {
	background-color:#0066CC;
	color:#CCCCCC;
}

.qb_rnk_item, .qb_rnk_item:hover, .qb_rnk_item:visited, .qb_rnk_item:active {
	text-decoration:none;
	color:#000033;
	padding-left:3px;	
	padding-right:3px;	
}

.qb_rnk_item:hover {
	background-color:#0066CC;
	color:#CCCCCC;
}

.qb_video_holder {
	text-align:center;
	padding:3px;
}

.qb_video_link, .qb_video_link:hover, .qb_video_link:visited, .qb_video_link:active {
	color:#FF8C19;
	font-weight:bold;
}

.qb_video_link:hover {
	color:#203E59;
	text-decoration:none;
}

.qb_option_image_off {
	border:2px solid #ffffff;
}

.qb_option_image_on {
	border:2px solid #cc0066;
}

.qb_check_image_off {
	border:2px solid #ffffff;
}

.qb_check_image_on {
	border:2px solid #cc0066;
}

.qb_collage_holder {
	margin-left:auto;
	margin-right:auto;
	width:602px;
}

.qb_collage_image_highlight {
	border:2px solid #FFaaaa;
	margin:0px;
}

.qb_collage_image_highlight .qb_image {
	border:1px solid #aa2222;
	margin:0px;
}

.qb_collage_image .qb_image {
	border:2px solid #FFFFFF;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	opacity: 0.5;	
	margin:0px;
}

.qb_thankyou_header {
	font-size:10pt;
	font-weight:bold;
}