/************************************************************************************************
*																								*
*	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:Arial, Helvetica, sans-serif;
	font-size:9pt;
	border-collapse:collapse;	
}
/* Answer block (the grid/listing section below a question) style - should contain font settings and border-collapse */
.qb_answerblock{
	font-family:Arial, Helvetica, sans-serif;
	font-size:9pt;
	border-collapse:collapse;
}
/* Cell containing answer block */
.qb_answerblock_holder {
	padding-left:2px;
}
/* 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:#049B8A;
	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:#FF8C19; 
}
/* The outer container cell for the progress bar */
.qb_progress_container {
	border:1px solid #049B8A;
}


/************************* 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:Arial, Helvetica, sans-serif;
	font-size:9pt;
	font-weight:bold;
	border-bottom:1px solid #049B8A;
	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 {
	padding-top:10px;
	color:#FF0033;
}

/* --------- Text boxes (includes multiple choice other text) */
/* Style for HTML text boxes */
.qb_text {
	border:1px solid #049B8A;
	font-family:Arial, Helvetica, sans-serif;
	font-size:9pt;
	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 #049B8A;
	font-family:Arial, Helvetica, sans-serif;
	font-size:9pt;
	padding-left:2px;
	background-color:#F1E3D3;
}
/* 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, .qb_check_text {
	padding:1px;
	border-bottom:1px solid #B7D2CF;
	font-size:8pt;
}
/* Style for the cell containing an option (radio button) */
.qb_option_holder, .qb_check_holder {
	padding:1px;	
	border-bottom:1px solid #B7D2CF;
	font-size:8pt;
	text-align:center;
}
/* In grid questions, this is the style for text for options going down the page */
.qb_option_vert_text, .qb_check_vert_text {
	padding:2px;	
	border-bottom:1px solid #B7D2CF;
	font-size:8pt;
}
/* In grid questions, this is the style for text for options going accross the page */
.qb_option_horiz_text, .qb_check_horiz_text {
	padding:1px;	
	border-bottom:1px solid #B7D2CF;
	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:#2A705B;
}
.qb_option_row_2 {
	color:#2A705B;
}
/* Style for missed rows */
.qb_check_vert_text_missed{
	color:#FF0033;
}

/* Option image (for when the options are images rather than text). Can be defined as a contextual selector. */
.qb_option_image_off {
	margin:2px;
}
/* Option Image Selected, same as above but for selected items */
.qb_option_image_on {
	margin:0px;
	border:2px solid #aa1111;
}

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

/* Style for the an HTML checkbox (only used if draw mode is QB_DRAW_PLAIN) */
.qb_check {}

/* Row colours for alternating rows in a list of options (checkboxes) */
.qb_check_row_1 {
	color:#2A705B;
}
.qb_check_row_2 {
	color:#2A705B;
}
/* Style for missed rows */
.qb_check_vert_text_missed{
	color:#FF0033;
}

/*  ---------  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:#379377;
}
.qb_date_month_text {
	font-size:7pt;
	color:#379377;
}
.qb_date_year_text {
	font-size:7pt;
	color:#379377;
}

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

/* 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:Arial, Helvetica, sans-serif;
	font-size:9pt;
}
/* Style for the cell containing a dropdown */
.qb_dropdown_holder {}

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

/* Style used for horizontal lines */
.qb_hr {
	color:#593E20;
}
/* Style for text defined as an instruction */
.qb_instruction {
	color:#593E20;
	font-size:10pt;
}
/* Style for text defined as a note */
.qb_note {
	color:#593E20;
	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 #593E20;
	font-size:9pt;	
	scrollbar-shadow-color: #F3E0D1;
	scrollbar-face-color: #F3E0D1; 
	scrollbar-highlight-color: #F3E0D1; 
	scrollbar-3dlight-color: #754B1E; 
	scrollbar-arrow-color: #754B1E; 
	scrollbar-track-color: #754B1E; 
	scrollbar-darkshadow-color: #754B1E;
	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:#003300;
	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:#593E20;
	text-decoration:none;
}