.zaphod_question
{

}

/* Override any user-agent-stylesheet that have absolute size in properties */
.zaphod_question ul
{
	padding-inline-start: 3%;
}

.zaphod_question ol
{
	padding-inline-start: 3%;
}

/* Fixed elements */

.zaphod_question .zaphod_question_title
{
	padding:0.1em;
	color: #4444FF;
    text-shadow: 0.1em 0.1em 0.1em grey;
    text-align:center;
    width:100%;
    height:1em;
    position:absolute;
}

.zaphod_question .zaphod_question_flag
{
	margin:0.2em;
	width:3em;
	height:1.5em;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center center;
	float:right;
}

/* Element styles */

.element
{
	position:absolute;
	top:0px;
	left:0px;
	width:100px;
	height:100px;	
	padding:0px;
	margin:0px;
}

.element img
{
	vertical-align:middle;
}

/*
.elements_label_default
{
	text-align:left;
	color:black;
}

.elements_label_label_default
{
	font-size:inherit;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align:left;
}

.elements_label_title
{	
}

.elements_label_label_title
{
	font-size:inherit;
	
	color:Red;
	
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align:center;
}
*/

.elements_label_text
{
	font-size:inherit;
	position: absolute;
	width:100%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align:left;
}

.elements_label_style_title
{
	color:#4444FF;	
	text-shadow: 0.1em 0.1em 0.1em gray;
}

.elements_label_style_box
{
	background:#f8f8ff;
	box-shadow:0px 0px 0.2em gray;	
}

.elements_label_style_monospace
{
	font-family:monospace;
	font-weight:bold;
	white-space: pre;	
	text-shadow:0.06em 0.06em 0.04em #aaaaaa;
}

.elements_label_style_monospace_nobold
{
	font-family:monospace;	
	white-space: pre;	
	text-shadow:0.06em 0.06em 0.04em #aaaaaa;
}

.elements_label_style_monobox
{
	font-family:monospace;
	background:#f8f8ff;
	box-shadow:0px 0px 0.2em gray;
	padding:0.5em;
	white-space: pre;
}

.elements_label_style_low
{
	background-color:#f6f6f6;
}

.elements_label_style_shadow
{
	background-color:#f6f6f6;
	box-shadow:0px 0px 1em black;
}

.elements_image_image
{
	background-size: contain;
	background-repeat:no-repeat;
	background-position: center; 
}

.elements_image_style_low
{
	background-color:#f6f6f6;
}

.elements_image_style_stretch
{
	background-size: 100% 100%;
}

.elements_state
{
	text-align:center;
	cursor:pointer;
	background-size: contain;
	background-repeat:no-repeat;
	background-position: center; 	
}

/*
.elements_state_image
{
	
}
*/

.elements_state_content_text
{
	display:inline-block;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.elements_state_style_low
{
	background-color:#f6f6f6;
}

.elements_state_style_hovershadow
{	
	opacity:0.8;
	transition: opacity 0.5s, background-color 0.5s;
	box-shadow:0px 0px 0.5em black;
	background-color:#f8f8f8;
}
.elements_state_style_hovershadow:hover
{
	opacity:1;
	background-color:white;
}

.elements_state_style_inset
{
	opacity:0.7;
	transition: opacity 0.5s, background-color 0.5s;
	box-shadow: inset 0.02em 0.02em 0.2em gray; 
	background-color:#f8f8f8;
}

.elements_state_style_inset:hover
{
	opacity:1;
	background-color:white;
}

.elements_state_style_stretch
{
	background-size: 100% 100%;
}

.elements_input
{
}

.elements_input_input
{
	border:0px;	
	width:100%;
	height:100%;
	text-align:center;
	box-shadow: inset 0.1em 0.1em 0.1em gray;
	border:1px solid #cccccc;
}

textarea.elements_input_input
{
	text-align:left;
	padding:0.3em;
}

.elements_input_style_monospace
{
	font-family:monospace;
}

.elements_input_style_monospace_left input
{
	font-family:monospace;
	text-align:left;
}

.elements_combo_select
{
	width:100%;
	height:100%;
	
	border:0px;
	text-align:center;
	/*box-shadow: inset 0.1em 0.1em 0.1em gray, 0px 0px 0.1em gray;*/
	box-shadow: inset 0.1em 0.1em 0.1em gray;
	border:1px solid #cccccc;
	
}

.elements_combo_select_option
{
	
}

.elements_drag_source
{
	cursor:pointer;
	/*
	opacity: 0.7;
	transition: opacity 0.5s;
	*/
}

.elements_drag_source:hover
{
	opacity: 1;
}

.elements_drag_source_parking
{
	box-shadow: inset 0px 0px 0.5em gray;
}

.elements_drag_destination
{
	
}

/*
.elements_drag_destination_available
{
	box-shadow: 0px 0px 5em green;
}

.elements_drag_destination_used
{
	box-shadow: 0px 0px 5em red;
}
*/

.elements_drag_image
{
	background-size: contain;
	background-repeat:no-repeat;
	background-position: center; 	
}

.elements_drag_indrag
{
	opacity: 1;	
}

.elements_order_items
{
	width:100%;
	height:100%;
}

.elements_order_item
{
	margin:0px;
	padding:0px;
	list-style-type: none;
	
	cursor:pointer;
	
	text-align:center;
	background-size: contain;
	background-repeat:no-repeat;
	background-position: center; 
	
	background-color:#f8f8f8;
	box-shadow: inset -0.1em -0.1em 0.1em rgba(0,0,0,0.5), /*bottom internal shadow*/
	inset 0.1em 0.1em 0.1em rgba(255,255,255,1); /*top internal highlight*/
	border-radius:0.4em;
	
	transition:background-color 0.5s;
}

.elements_order_item_text
{
	display:inline-block;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);		
}

.elements_order_item[draggable="true"]
{
	background-color:#A4CDF4;
}

.elements_assoc_items_left
{
	position:absolute;
	top:0%;
	left:0%;
	width:30%;
	height:100%;
}

.elements_assoc_items_left_highlight
{
	outline:5px solid red;
}

.elements_assoc_draw
{
	position:absolute;
	top:0%;
	left:30%;
	width:40%;
	height:100%;
	
	background-color:white;
}

.elements_assoc_items_right
{
	position:absolute;
	top:0%;
	left:70%;
	width:30%;
	height:100%;
}

.elements_assoc_item
{
	margin:0px;
	padding:0px;
	list-style-type: none;
	
	cursor:pointer;
	
	text-align:center;
	background-size: contain;
	background-repeat:no-repeat;
	background-position: center; 
	
	background-color:#f8f8f8;
	box-shadow: inset -0.1em -0.1em 0.1em rgba(0,0,0,0.5), /*bottom internal shadow*/
	inset 0.1em 0.1em 0.1em rgba(255,255,255,1); /*top internal highlight*/
	border-radius:0.4em;
	
	opacity:0.7;
	
	-webkit-transition: opacity 0.5s, background-color 0.5s;
	transition: opacity 0.5s, background-color 0.5s;
}

.elements_assoc_item:hover
{
	opacity:1;
}

.elements_assoc_item_text
{	
	display:inline-block;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);		
}



.elements_assoc_item_selected
{
	background-color:yellow;
}

.elements_mc_table
{
	width:100%;
	height:100%;
}

.elements_mc_item
{
	text-align:center;
	opacity:0.7;
	
	background-color:#f8f8f8;
	box-shadow: inset -0.1em -0.1em 0.1em rgba(0,0,0,0.5), /*bottom internal shadow*/
	inset 0.1em 0.1em 0.1em rgba(255,255,255,1); /*top internal highlight*/
	border-radius:0.4em;
	
	-webkit-transition: opacity 0.5s, background-color 0.5s;
	transition: opacity 0.5s, background-color 0.5s;
}

.elements_mc_table td
{
	padding:0.2em;	
}

.elements_mc_item:hover
{
	opacity:1;
}

.elements_mc_item_buttons
{
	display:inline-block;	
}

.elements_mc_item_buttons_single
{
	/*display:inline-block;*/
	display:absolute;
	width:100%;
	height:100%;
	
	cursor:pointer;
	
	background-image:url('../images/mc_single_unchecked.png');
	background-size: contain;
	background-repeat:no-repeat;
	background-position: center; 
}

.elements_mc_item_buttons_true, .elements_mc_item_buttons_false
{
	opacity: 0.3;
	
	background-size: contain;
	background-repeat:no-repeat;
	background-position: center; 
	
	-webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.elements_mc_item_buttons_true
{
	display:inline-block;	
	width:50%;
	height:100%;
	
	cursor:pointer;
	
	background-image:url('../images/mc_multi_true.png');
}

.elements_mc_item_buttons_true:hover
{
	opacity:1;
}

.elements_mc_item_buttons_false
{
	display:inline-block;	
	width:50%;
	height:100%;
	
	cursor:pointer;
	
	background-image:url('../images/mc_multi_false.png');
}

.elements_mc_item_buttons_false:hover
{
	opacity:1;
}

.elements_mc_item_selected
{
	background-color:#A4CDF4;
}

.elements_mc_item_selected .elements_mc_item_buttons_single
{	
	background-image:url('../images/mc_single_checked.png');
}

.elements_mc_item_selected_true .elements_mc_item_buttons_true
{
	opacity: 1;
	background-color:#ccffcc;
}

.elements_mc_item_selected_false .elements_mc_item_buttons_false
{
	opacity: 1;
	background-color:#ffcccc;
}

.elements_mc_item_content
{
	position:relative;
	text-align:center;
	display:inline-block;
	
  background-size: contain;
	background-repeat:no-repeat;
	background-position: center; 
}

.elements_mc_item_content_text
{	
	position: absolute;
	width:100%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);			  	
}

.elements_mc_style_monospace .elements_mc_item_content_text
{
	font-family:monospace;
	font-weight:bold;
}

.elements_flash_flash
{
}

.elements_flash_noplayback
{
	font-size: 150%;
	color:white;
	text-align:center;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);			  
}

.bb_underline
{
	text-decoration:underline;
}

.bb_mono
{
	font-family:monospace;

	font-weight:bold;
	white-space: pre;
//	text-shadow:0.06em 0.06em 0.04em #aaaaaa;
}

.bb_highlight
{
	background-color:yellow;
	border:1px solid gray;
}

.bb_left
{
	text-align:left;
}

.bb_right
{
	text-align:right;
}

.bb_center
{
	text-align:center;
}

.bb_center > .bb_table
{
	margin-left: auto;
    margin-right: auto;
}

.bb_img
{
	display:inline-block;
	background-size: contain;
	background-repeat:no-repeat;
	background-position: center; 
	outline:4px solid blue;	
}

.bb_table
{
	width:100%;
	border-collapse: collapse;
	box-shadow:0.1em 0.1em 0.3em gray;	
}

.bb_table th
{
	padding:0.1em;
	background-color:#499bea;
	color:white;
	border:1px solid #1566B7;
	text-align:center;
}

.bb_table td
{
	padding:0.1em;
	border:1px solid gray;
	text-align:center;
}

.bb_score
{
	color: red;	
}

.bb_tr_highlight td
{
	background-color: #CCE2F9;
	padding:1em;
}

.bb_tr_highlight td
{
}

.bb_header_explain
{
	color: #499bea;	
	font-size:1.2em;
}