@charset "UTF-8";

/* =========================================================================== */
/* GLOBAL */
/* =========================================================================== */

a:link,
a:visited,
a:active,
a:hover
{
	outline:				none;
	text-decoration:		none;
}

body
{
	background: 			#FFF;
	color: 					#484647;
	font-size: 				100%;
	font-family: 			'Source Sans Pro', Arial, Helvetica, sans-serif;
	line-height:			1;
	background: 			#FAFAFA;
}

sup
{
	vertical-align: 		super;
	font-size: 				60%;
	line-height: 			0;
}

sub
{
	vertical-align: 		sub;
	font-size: 				60%;
	line-height: 			0;
}






/* =========================================================================== */
/* CONTAINER */
/* =========================================================================== */

#container
{
	position: 				relative;
	width: 					976px;
	height: 				600px;
	margin: 				0 auto;
}





/* =========================================================================== */
/* LOADING */
/* =========================================================================== */

#loading
{
	position:				absolute;
	top:					0;
	left:					0;
	z-index:				1000;
	width: 					976px;
	height: 				600px;
	background: 			url(img/loading.gif) no-repeat center center white;
	border-radius:			0px 0px 6px 6px;
	-moz-border-radius:		0px 0px 6px 6px;
	-webkit-border-radius:	0px 0px 6px 6px;
	box-shadow: 			1px 1px 4px rgba(0,0,0,0.15);
	-moz-box-shadow: 		1px 1px 4px rgba(0,0,0,0.15);
	-webkit-box-shadow: 	1px 1px 4px rgba(0,0,0,0.15);
}






/* =========================================================================== */
/* CONTENT */
/* =========================================================================== */

#content
{
	position:				relative;
	width: 					976px;
	height: 				600px;
	overflow: 				hidden;
	background-color: 		#D4EB7A;
	border-radius:			0px 0px 6px 6px;
	-moz-border-radius:		0px 0px 6px 6px;
	-webkit-border-radius:	0px 0px 6px 6px;
	box-shadow: 			1px 1px 4px rgba(0,0,0,0.15);
	-moz-box-shadow: 		1px 1px 4px rgba(0,0,0,0.15);
	-webkit-box-shadow: 	1px 1px 4px rgba(0,0,0,0.15);
}





/* =========================================================================== */
/* ITEMS */
/* =========================================================================== */

/* --------------------------------------------------------------------------- */
/* ITEMS - GENERAL */
/* --------------------------------------------------------------------------- */

#items,
#labels
{
	display: 				none;
}

#items_bg
{
	border:					1px solid #999;
	box-shadow: 			3px 3px 6px rgba(31,31,31,0.25);
	-moz-box-shadow: 		3px 3px 6px rgba(31,31,31,0.25);
	-webkit-box-shadow: 	3px 3px 6px rgba(31,31,31,0.25);
}

div.item_next_prev
{
	border:					1px solid #DDD;
	box-shadow: 			1px 1px 3px rgba(31,31,31,0.25);
	-moz-box-shadow: 		1px 1px 3px rgba(31,31,31,0.25);
	-webkit-box-shadow: 	1px 1px 3px rgba(31,31,31,0.25);
}

/* --------------------------------------------------------------------------- */
/* ITEMS - FEEDBACK */
/* --------------------------------------------------------------------------- */

div.item_correct
{
	position:				absolute;
	top:					7px;
	right:					-40px;
	width:					32px;
	height:					32px;
	background: 			url(img/icon_result_tick.svg) no-repeat center center;
}

div.item_incorrect
{
	position:				absolute;
	top:					7px;
	right:					-40px;
	width:					32px;
	height:					32px;
	background: 			url(img/icon_result_cross.svg) no-repeat center center;
}

/* --------------------------------------------------------------------------- */
/* ITEMS - PANEL */
/* --------------------------------------------------------------------------- */

#panel
{
	position:				absolute;
	top:					127px;
	left:					188px;
	width:					600px;
	height:					400px;
	border:					1px solid #DDD;
	background-color: 		white;
	box-shadow: 			5px 5px 10px rgba(31,31,31,0.15);
	-moz-box-shadow: 		5px 5px 10px rgba(31,31,31,0.15);
	-webkit-box-shadow: 	5px 5px 10px rgba(31,31,31,0.15);
}

#panel_content
{
	position: 				relative;
	top: 					50%;
	-webkit-transform: 		translateY(-50%);
	-ms-transform: 			translateY(-50%);
	transform: 				translateY(-50%);
	font-size: 				28px;
	font-weight: 			300;
	width: 					560px;
	padding: 				20px;
	text-align: 			center;
}

#panel_content p
{
	line-height: 			1.4;
}

/* --------------------------------------------------------------------------- */
/* ITEMS - COUNTER */
/* --------------------------------------------------------------------------- */

#item_counter
{
	position:				absolute;
	top:					90px;
	left:					188px;
	width:					200px;
	height:					20px;
	font-size: 				18px;
	font-weight: 			300;
}

/* --------------------------------------------------------------------------- */
/* CORRECT - COUNTER */
/* --------------------------------------------------------------------------- */

#correct_counter
{
	position:				absolute;
	top:					90px;
	left:					510px;
	width:					280px;
	height:					20px;
	font-size: 				18px;
	font-weight: 			300;
	text-align: 			right;
}

#correct_counter strong
{
	font-weight: 			600;
}

/* --------------------------------------------------------------------------- */
/* ITEMS - NEXT BTN */
/* --------------------------------------------------------------------------- */

#prev_btn
{
	position:				absolute;
	top:					300px;
	left:					63px;
	width:					60px;
	height:					60px;
	background: 			url(img/icon_arrow_prev.svg) no-repeat center center;
	cursor: 				pointer;
}

/* --------------------------------------------------------------------------- */
/* ITEMS - PREV BTN */
/* --------------------------------------------------------------------------- */

#next_btn
{
	position:				absolute;
	top:					300px;
	right:					63px;
	width:					60px;
	height:					60px;
	background: 			url(img/icon_arrow_next.svg) no-repeat center center;
	cursor: 				pointer;
}

/* --------------------------------------------------------------------------- */
/* ITEMS - RESET BTN */
/* --------------------------------------------------------------------------- */

#reset_btn
{
	position:				absolute;
	top:					538px;
	left:					678px;
	width: 					84px;
	height: 				24px;
	color: 					#1DAFEC;
	cursor: 				pointer;
	font-size: 				16px;
	font-weight: 			700;
	padding-top: 			8px;
	padding-right: 			28px;
	font-family: 			'Source Sans Pro', Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: 			right;
	background: 			url(img/icon_reset.svg) no-repeat 100% 50%;
}








/* =========================================================================== */
/* HEADER */
/* =========================================================================== */

/* --------------------------------------------------------------------------- */
/* HEADER - GENERAL */
/* --------------------------------------------------------------------------- */

#header
{
	position:				absolute;
	top:					0;
	left: 					0;
	z-index:				450;
	width:					100%;
	height: 				68px;
}

#header_content
{
	position:				relative;
	width:					976px;
	height: 				56px;
	margin: 				0 auto;
}


/* --------------------------------------------------------------------------- */
/* HEADER - LOGO */
/* --------------------------------------------------------------------------- */

#obook_logo
{
	float: 					left;
	margin-top: 			14px;
	width: 					103px;
}

/* --------------------------------------------------------------------------- */
/* HEADER - TITLE */
/* --------------------------------------------------------------------------- */

#header_title
{
	position:				absolute;
	display:				block;
	margin-top: 			18px;
	font-family: 			'Source Sans Pro', Arial, Helvetica, sans-serif;
	font-size: 				20px;
	height: 				20px;
	font-weight: 			600;
}

/* --------------------------------------------------------------------------- */
/* HEADER - NAV - GENERAL */
/* --------------------------------------------------------------------------- */

#header_nav
{
	position: 				relative;
	display:				block;
	float:					right;
	margin-top: 			6px;
	padding: 				6px 0px 5px 2px;
	cursor: 				default;
}

#header_nav div
{
	float:					right;
}

/* --------------------------------------------------------------------------- */
/* HEADER - NAV - HEADER BTN */
/* --------------------------------------------------------------------------- */

#header_nav div.header_btn
{
	color: 					#1DAFEC;
	margin-left: 			0;
	cursor: 				pointer;
	font-size: 				16px;
	font-weight: 			700;
	padding-top: 			8px;
	padding-right: 			28px;
	height: 				24px;
	font-family: 			'Source Sans Pro', Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#header_nav div.header_btn.up
{
	color: 					#1DAFEC;
	background: 			url(img/icon_help.svg) no-repeat 100% 50%;
}

#header_nav div.header_btn.down,
#header_nav div.header_btn.selected
{
	color: 					#484647;
	background: 			url(img/icon_help_sel.svg) no-repeat 100% 50%;
}







/* =========================================================================== */
/* FOOTER */
/* =========================================================================== */

/* --------------------------------------------------------------------------- */
/* FOOTER - GENERAL */
/* --------------------------------------------------------------------------- */

#footer
{
	position: 				relative;
	width: 					976px;
	height:					54px;
	margin: 				0 auto;
	margin-top: 			10px;
}

#footer img
{
	float:					left;
}






/* =========================================================================== */
/* HELP */
/* =========================================================================== */

/* --------------------------------------------------------------------------- */
/* HELP - GENERAL */
/* --------------------------------------------------------------------------- */

#help
{
	position:				absolute;
	top:					0;
	left:					0;
	z-index:				2000;
	width: 					380px;
	height: 				530px;
	background-color: 		#FFFFFF;
	border:					1px solid #D2D2D2;
	border-radius:			6px;
	-moz-border-radius:		6px;
	-webkit-border-radius:	6px;
	box-shadow: 			5px 5px 5px rgba(0,0,0,0.25);
	-moz-box-shadow: 		5px 5px 5px rgba(0,0,0,0.25);
	-webkit-box-shadow: 	5px 5px 5px rgba(0,0,0,0.25);
	display:				none;
	font-family: 			'Source Sans Pro', Arial, Helvetica, sans-serif;
}

/* --------------------------------------------------------------------------- */
/* HELP - HEADER */
/* --------------------------------------------------------------------------- */

#help_header
{
	position:				absolute;
	top:					0;
	left:					0;
	width: 					380px;
	height: 				55px;
}

#help_drag
{
	position:				absolute;
	top:					0;
	left:					0;
	z-index:				100;
	width: 					325px;
	height: 				55px;
}

#help_title
{
	text-align:				center;
	width: 					380px;
	display:				block;
	font-weight:			600;
	font-size:				20px;
	margin-top:				18px;
}

#help_close_btn
{
	cursor: 				pointer;
	position:				absolute;
	top:					0;
	right:					0;
	width: 					55px;
	height: 				55px;
	background: 			url(img/icon_close.svg) no-repeat center center;
}

#help_border
{
	border-top: 			1px dashed #B9B9B9;
	margin-bottom:			16px;
}

/* --------------------------------------------------------------------------- */
/* HELP - CONTENT */
/* --------------------------------------------------------------------------- */

#help_content
{
	position:				absolute;
	top:					55px;
	left:					0;
	padding:				16px;
	padding-top:			0;
	font-weight: 			300;
}

#help_content_holder
{
	width:					346px;
	height:					440px;
	overflow: 				auto;
}

#help_content_holder h1
{
	font-size:				18px;
	font-weight: 			600;
	margin-bottom:			13px;
}

#help_content_holder h2
{
	font-size:				18px;
	font-weight: 			600;
	margin:					13px 0;
}

#help_content_holder p, 
#help_content_holder ol li
{
	font-size:				16px;
}

#help_content_holder ol
{
	list-style:				decimal outside;
	margin:					20px;
	font-weight:			600;
}

#help_content_holder ol li p
{
	margin-bottom:			10px;
	line-height:			1.4;
	font-weight:			300;
}

#help_content_holder strong
{
	font-weight:			600;
}

/* --------------------------------------------------------------------------- */
/* HELP - CONTENT HOLDER - INSTRUCTIONS */
/* --------------------------------------------------------------------------- */

#help_content_holder .instructions
{
	margin-bottom:			13px;
}

#help_content_holder .instructions p
{
	line-height:			1.4;
}

/* --------------------------------------------------------------------------- */
/* HELP - CONTENT HOLDER - BUTTONS */
/* --------------------------------------------------------------------------- */

#help_content_holder .buttons p
{
	line-height:			1.4;
}

#help_content_holder .button
{
	margin-bottom:			10px;
}

#help_content_holder .button .text
{
	float:					left;
	padding: 				6px 10px;
	font-weight:			700;
	font-size:				12px;
	font-family: 			'Source Sans Pro', Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	 -moz-osx-font-smoothing: grayscale;
	text-transform: 		uppercase;
	color: 					#1DAFEC;
	background-color: 		#FFF;
	border: 				1px solid #EDEDED;
	-moz-border-radius: 	4px;
	-webkit-border-radius: 	4px;
	border-radius: 			4px;
	box-shadow: 			1px 1px 3px #F2F1F2;
	-moz-box-shadow: 		1px 1px 3px #F2F1F2;
	-webkit-box-shadow: 	1px 1px 3px #F2F1F2;
}

#help_content_holder .button .icon
{
	float:					left;
	padding-top: 			2px;
}

#help_content_holder .desc
{
	padding-top: 			4px;
	margin-left:			30px;
}






/* =========================================================================== */
/* JSCROLLPANE */
/* =========================================================================== */

.jspVerticalBar,
.jspTrack
{
	background: 			url(img/scrollbar_vert.svg) repeat-y center;
}

.jspDrag
{
	background: 			url(img/scrolltrack_vert.svg) repeat-y center;
}

.jspTrack .jspActive,
.jspTrack .jspHover,
.jspDrag:hover
{
	background: 			url(img/scrolltrack_vert_hover.svg) repeat-y center;
}






/* =========================================================================== */
/* JQUERY UI */
/* =========================================================================== */

.ui-state-disabled
{
	opacity: 				1;
	filter:					Alpha(Opacity=100);
}






/* =========================================================================== */
/* DIV CLEAR */
/* =========================================================================== */

.group:after
{
	clear: 					both;
	content: 				' ';
	display: 				block;
	font-size: 				0;
	line-height: 			0;
	visibility: 			hidden;
	width: 					0;
	height: 				0;

}

* html .group
{
	height: 				1%;
}

*:first-child+html .group
{
	min-height: 			1px;
}






/* =========================================================================== */
/* PNG FIX */
/* =========================================================================== */

* html #selector
{
	filter: 				progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/image.png');
	background-image: 		none;
	background-repeat: 		no-repeat;
	background-color: 		transparent;
}