body 
{
	background-color:#323232;
	font-family:Arial;
	font-size:14px;
	width:826px;
	height:340px;
	margin:0px;
	padding:0px;
}
#frame
{
	box-sizing: border-box;
	width:826px;
	height:360px;
	margin:0px auto;
	padding:10px;
	background-color:White;
	
	position:relative;
	overflow: hidden;
	cursor:url("../images/cursors/default.cur"), url("../../../../../common/interactives/images/cursors/default.cur"), default;
}
#ui-elements
{
	border:solid 0px red;
	width:100%;	
	z-index: 99;
	position:absolute;
	left:0px; top:0px;
	padding:0px;
}
#instruction
{
	box-sizing: border-box;
	width:100%;			
	padding:5px 0px;
	background-color: white;
	-moz-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
	-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
	box-shadow:0px 0px 5px rgba(0,0,0,0.25);	
}

/*-- CLOSE BUTTON --*/
/********************
<div id="close01" class="close_btn" style="top:12.5%;"><div></div></div>
********************/
.close_btn
{
	width: 45px;
	height: 43px;	
	position:absolute;
	op:28px; right: 0px; z-index: 98;
	border-radius: 0px 0px 0px 25px;
	background-color: rgba(255,255,255,0.5);
}

.close_btn div
{	
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: #B83932;
	border:solid 1px white;
	margin:8px 0px 0px 10px;

	font-family: Arial, sans-serif;
	font-size: 23px;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	text-align: center;
	vertical-align: middle;	

	cursor:url("../images/cursors/hand.cur"), url("../../../../../common/interactives/images/cursors/hand.cur"), pointer;
}

@-moz-document url-prefix() { 
  .close_btn div {
     line-height:24px;
  }
}

.close_btn div:before
{
	content:"\00d7"; 

}
/*-- END CLOSE BUTTON --*/


#continue-btn
{
	position:absolute;
	bottom:-3px;
	right:10px;
	z-index:99;
	cursor:url("../images/cursors/hand.cur"), url("../../../../../common/interactives/images/cursors/hand.cur"), pointer;
	/*display:none;*/
}

/*-- CURSORS START --*/
.cursor_pointer{
	cursor:url("../images/cursors/hand.cur"), url("../../../../../common/interactives/images/cursors/hand.cur"), pointer;
}
.cursor_grab00{ 
	cursor:url("../images/cursors/handgrab_0.cur"), url("../../../../../common/interactives/images/cursors/handgrab_0.cur"), move;
}
.cursor_grab01{
	cursor:url("../images/cursors/handgrab_1.cur"), url("../../../../../common/interactives/images/cursors/handgrab_1.cur"), move;
}
.cursor_zoom{
	cursor:url("../images/cursors/mag_lense_target.cur"), url("../../../../../common/interactives/images/cursors/mag_lense_target.cur"), crosshair;
}
.cursor_move{
	cursor:url("../images/cursors/move2.cur"), url("../../../../../common/interactives/images/cursors/move2.cur"), move;
}
.cursor_moveFade{
	cursor:url("../images/cursors/move3.cur"), url("../../../../../common/interactives/images/cursors/move3.cur"), move;
}
.cursor_default{
	cursor:url("../images/cursors/default.cur"), url("../../../../../common/interactives/images/cursors/default.cur"), default;
}
/*-- CURSORS END --*/


.step
{
	width:100%;
	height:100%;
	
	background-color:red;
	position:absolute;
	bottom:10px;
	z-index:1;
}

.highlight
{
	filter: brightness(125%);
	-webkit-filter: brightness(125%);
	-moz-filter: brightness(125%);
	-o-filter: brightness(125%);
	-ms-filter: brightness(125%);
}
.highlight_dim
{
	opacity: .75;
}


/*-- TOOL BOX --*/
/********************
<div id="tools" style="top:50px;">
    <div id="toolsTitle"></div>
    <div id="itemList">
        <div class="item itemFocus">
            <img src="src.png" alt="name" id="id" />
            <div>Label</div>
        </div>     
    </div>
</div>
********************/
#tools
{
	width:100px;
	min-height:50px;
	border:solid 0px black;
	background-color:#E8EDF2;
	
	position:absolute;
	top:35px;
	font-size:12px;
	z-index:99;

	-moz-box-shadow:	1px 1px 5px rgba(0,0,0,0.2);
	-webkit-box-shadow:	1px 1px 5px rgba(0,0,0,0.2);
	box-shadow:			1px 1px 5px rgba(0,0,0,0.2);

	border-radius: 10px;
}
#toolsTitle
{
	width:100%;	
	background-color:#ADADAD;
	height:27px;
	color:white;
	font-size:14px;
	text-align:center;
	line-height:27px;

	border-radius: 3px 3px 0px 0px;
}
#toolsTitle:before
{
	content:"Tools";
}

#itemList
{
	width:100%;
	margin:6px auto 0px auto;

}

.item
{
	width:85%; 
	min-height: 65px;
	text-align:center;
	margin:0px auto 6px auto;
	/*padding:5px;*/
	box-sizing: border-box;
	background-color:#fff;
	position: relative;
	border-radius: 8px;
	border-bottom: thin solid #CCC;
}

.item:hover
{	
	background-color:#D0E8EE;
	-moz-box-shadow:	0px 1px 2px rgba(0,0,0,0.1);
	-webkit-box-shadow:	0px 1px 2px rgba(0,0,0,0.1);
	box-shadow:			0px 1px 2px rgba(0,0,0,0.1);
}
.itemFocus
{
	background-color:#AED5D3;

}
.itemFocus:hover
{
	cursor:url("../images/cursors/default.cur"), url("../../../../../common/interactives/images/cursors/default.cur"), default;
}

.item DIV:nth-child(1)
{
	height: 45px;
	padding:5px;
	box-sizing: border-box;
}
.item SPAN
{
	display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.item IMG
{	
	max-width: 65%; 
	max-height: 100%;
    vertical-align: middle;
	margin:0px auto;
}
.item DIV:nth-child(2)
{	
	height:30px;	
	width:90px;
	box-sizing: border-box;

  	display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding:0px 3px 5px 3px;
}


/*-- END TOOL BOX --*/