@charset "UTF-8";

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

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

body
{
	background-color: 		#333333;
	color: 					#FFFFFF;
	font: 					100% Arial, Helvetica, sans-serif;
	line-height:			1;
}

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

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






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

#container
{
	width: 					1000px;
	height: 				700px;
	margin: 				13px;
}






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

#loading
{
	position:				absolute;
	top:					0;
	left:					0;
	z-index:				1000;
	width: 					1000px;
	height: 				700px;
	background: 			url(img/loading.gif) no-repeat center center #333333;
}






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

#content
{
	position:				relative;
	width: 					954px;
	height: 				547px;
	background-color:		#FFFFFF;
	border-radius:			10px;
	-moz-border-radius:		10px;
	-webkit-border-radius:	10px;
	overflow:				hidden;
}






/* =========================================================================== */
/* DRAGS */
/* =========================================================================== */

/* --------------------------------------------------------------------------- */
/* DRAGS - GENERAL */
/* --------------------------------------------------------------------------- */

div.drag
{
	border:					1px solid #19B3FF;
	background-color:		#FFFFFF;
	box-shadow: 			1px 1px 3px rgba(31,31,31,0.15);
	-moz-box-shadow: 		1px 1px 3px rgba(31,31,31,0.15);
	-webkit-box-shadow: 	1px 1px 3px rgba(31,31,31,0.15);
	cursor: 				pointer;
}

div.column_header_bg
{
	background-color:		#333333;
	border-radius:			10px 10px 0 0;
	-moz-border-radius:		10px 10px 0 0;
	-webkit-border-radius:	10px 10px 0 0;
}

div.column_drag_up_btn
{
	border:					1px solid #CCCCCC;
	background:				url(img/drag_arrow_up.gif) no-repeat center center #FFFFFF;
	border-radius:			4px;
	-moz-border-radius:		4px;
	-webkit-border-radius:	4px;
	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);
}

div.column_drag_down_btn
{
	border:					1px solid #CCCCCC;
	background:				url(img/drag_arrow_down.gif) no-repeat center center #FFFFFF;
	border-radius:			4px;
	-moz-border-radius:		4px;
	-webkit-border-radius:	4px;
	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);
}

div.column_up_btn,
div.column_up_btn_inactive
{
	background:				url(img/column_arrow_up.gif) no-repeat center center #333333;
}

div.column_down_btn,
div.column_down_btn_inactive
{
	background:				url(img/column_arrow_down.gif) no-repeat center center #333333;
}

/* --------------------------------------------------------------------------- */
/* DRAGS - FEEDBACK */
/* --------------------------------------------------------------------------- */

div.drag_correct
{
	position:				absolute;
	top:					0;
	right:					0;
	width:					22px;
	height:					22px;
	border-left:			1px solid white;
	border-bottom:			1px solid white;
	background: 			url(img/correct.gif) no-repeat center center #669900;
}

div.drag_incorrect
{
	position:				absolute;
	top:					0;
	right:					0;
	width:					22px;
	height:					22px;
	border-left:			1px solid white;
	border-bottom:			1px solid white;
	background: 			url(img/incorrect.gif) no-repeat center center #E62C00;
}

/* --------------------------------------------------------------------------- */
/* DRAGS - SUP, SUB */
/* --------------------------------------------------------------------------- */

div.drag_txt_holder sup
{
	vertical-align: 		super;
	font-size: 				12px;
	line-height: 			0;
}

div.drag_txt_holder sub
{
	vertical-align: 		sub;
	font-size: 				12px;
	line-height: 			0;
}






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

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

#header
{
	height:					38px;
	width:					974px;
}

#header img
{
	float:					left;
}

#header_title
{
	position:				absolute;
	display:				block;
	color:					#FFFFFF;
	font-weight:			bold;
	font-size:				20px;
	margin-top:				10px;
}

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

#header_nav
{
	display:				block;
	float:					right;
	margin-right:			20px;
}

#header_nav div
{
	color: 					#FFFFFF;
	float:					right;
	margin-left: 			1px;
	width:					30px;
	height:					26px;
	cursor: 				pointer;
	border-radius:			4px 4px 4px 4px;
	-moz-border-radius:		4px 4px 4px 4px;
	-webkit-border-radius:	4px 4px 4px 4px;
}

#header_nav div.header_btn_up
{
	border:					1px solid #595959;
	box-shadow: 			1px 1px 3px rgba(31,31,31,0.5);
	-moz-box-shadow: 		1px 1px 3px rgba(31,31,31,0.5);
	-webkit-box-shadow: 	1px 1px 3px rgba(31,31,31,0.5);
}

#header_nav div.header_btn_down
{
	border:					1px solid #4A4A4A;
	box-shadow: 			1px 1px 3px rgba(31,31,31,0.5);
	-moz-box-shadow: 		1px 1px 3px rgba(31,31,31,0.5);
	-webkit-box-shadow: 	1px 1px 3px rgba(31,31,31,0.5);
}

#header_nav div.header_btn_disabled
{
	cursor: 				default;
	border:					1px solid #4A4A4A;
	box-shadow: 			0px 0px 0px rgba(31,31,31,0.5);
	-moz-box-shadow: 		0px 0px 0px rgba(31,31,31,0.5);
	-webkit-box-shadow: 	0px 0px 0px rgba(31,31,31,0.5);
}

#header_nav div.header_btn_selected
{
	border:					1px solid #4A4A4A;
	box-shadow: 			0px 0px 0px rgba(31,31,31,0.5);
	-moz-box-shadow: 		0px 0px 0px rgba(31,31,31,0.5);
	-webkit-box-shadow: 	0px 0px 0px rgba(31,31,31,0.5);
}

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

#help_btn.header_btn_up
{
	background:				#515151 url(img/help_up.gif) repeat-x center;
}

#help_btn.header_btn_down
{
	background:				#464646 url(img/help_down.gif) repeat-x center;
}

#help_btn.header_btn_disabled
{
	background:				#464646 url(img/help_down.gif) repeat-x center;
}

#help_btn.header_btn_selected
{
	background:				#333333 url(img/help_sel.gif) repeat-x center;
}





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

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

#footer
{
	height:					54px;
	padding-top: 			12px;
	width:					954px;
}

#footer img
{
	float:					left;
}

/* --------------------------------------------------------------------------- */
/* FOOTER - NAV */
/* --------------------------------------------------------------------------- */

#footer_nav
{
	position:				absolute;
	display:				block;
}

#footer_nav div
{
	font-size:				16px;
	font-weight:			bold;
	color: 					#FFFFFF;
	float:					left;
	margin-right: 			1px;
	padding:				12px 16px;
	cursor: 				pointer;
}

#footer_nav div.footer_btn_up
{
	background:				#515151 url(img/footer_nav_grad_up.gif) repeat-x center;
	border:					1px solid #595959;
	box-shadow: 			1px 1px 3px rgba(31,31,31,0.5);
	-moz-box-shadow: 		1px 1px 3px rgba(31,31,31,0.5);
	-webkit-box-shadow: 	1px 1px 3px rgba(31,31,31,0.5);
}

#footer_nav div.footer_btn_down
{
	background:				#464646 url(img/footer_nav_grad_down.gif) repeat-x center;
	border:					1px solid #4A4A4A;
	box-shadow: 			1px 1px 3px rgba(31,31,31,0.5);
	-moz-box-shadow: 		1px 1px 3px rgba(31,31,31,0.5);
	-webkit-box-shadow: 	1px 1px 3px rgba(31,31,31,0.5);
}

#footer_nav div.footer_btn_disabled
{
	cursor: 				default;
	color: 					#666;
	background:				#464646 url(img/footer_nav_grad_down.gif) repeat-x center;
	border:					1px solid #4A4A4A;
	box-shadow: 			0px 0px 0px rgba(31,31,31,0.5);
	-moz-box-shadow: 		0px 0px 0px rgba(31,31,31,0.5);
	-webkit-box-shadow: 	0px 0px 0px rgba(31,31,31,0.5);
}

#footer_nav div.footer_btn_selected
{
	color: 					#5099E7;
	background:				#333333 url(img/footer_nav_grad_sel.gif) repeat-x top;
	border:					1px solid #4A4A4A;
	box-shadow: 			0px 0px 0px rgba(31,31,31,0.5);
	-moz-box-shadow: 		0px 0px 0px rgba(31,31,31,0.5);
	-webkit-box-shadow: 	0px 0px 0px rgba(31,31,31,0.5);
}

#footer_nav div.footer_btn_left
{
	border-radius:			6px 0px 0px 6px;
	-moz-border-radius:		6px 0px 0px 6px;
	-webkit-border-radius:	6px 0px 0px 6px;
}

#footer_nav div.footer_btn_right
{
	margin-right: 			0;
	border-radius:			0px 6px 6px 0px;
	-moz-border-radius:		0px 6px 6px 0px;
	-webkit-border-radius:	0px 6px 6px 0px;
}






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

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

#help
{
	position:				absolute;
	top:					0;
	left:					0;
	z-index:				2000;
	width: 					380px;
	height: 				560px;
	color:					#333333;
	background-color: 		#FFFFFF;
	border:					1px solid #CCCCCC;
	border-radius:			10px;
	-moz-border-radius:		10px;
	-webkit-border-radius:	10px;
	box-shadow: 			7px 7px 7px rgba(31,31,31,0.5);
	-moz-box-shadow: 		7px 7px 7px rgba(31,31,31,0.5);
	-webkit-box-shadow: 	7px 7px 7px rgba(31,31,31,0.5);
	display:				none;
}

#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:			bold;
	font-size:				20px;
	margin-top:				18px;
}

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

#help_border
{
	border-top: 			1px solid #333333;
	margin-bottom:			16px;
}

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

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

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

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

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

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

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

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

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


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

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

#help_content_holder .icon
{
	padding: 				6px 12px;
	font-weight:			bold;
	font-size:				13px;
	color:					#FFFFFF;
	background-color:		#3D3D3D;
	float:					left;
	-moz-border-radius: 	6px;
	-webkit-border-radius: 	6px;
	border-radius: 			6px;
}

#help_content_holder .image
{
	padding: 				6px 10px 1px 10px;
}

#help_content_holder .desc
{
	padding-top: 			6px;
	margin-left:			70px;
}








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

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

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

.jspTrack .jspActive,
.jspTrack .jspHover,
.jspDrag:hover
{
	background: 			url(img/scrolltrack_vert_hover.gif) 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;
}
