/* CSS Document */

/*! normalize - making reset / default for all browsers */html {font-family:Arial, Helvetica, sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body {margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display:block;}audio,canvas,progress,video {display:inline-block;vertical-align:baseline;}audio:not([controls]) {display:none;height:0;}[hidden],template {display:none;}a {background:transparent;}a:active,a:hover {outline:0;}abbr[title] {border-bottom:1px dotted;}dfn {font-style:italic;}h1 {font-size:2em;margin:.67em 0;}mark {background:#ff0;color:#000;}small {font-size:80%;}sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup {top:-.5em;}sub {bottom:-.25em;}img {border:0;}svg:not(:root) {overflow:hidden;}figure {margin:1em 40px;} hr {-moz-box-sizing:content-box;box-sizing:content-box;height:0;}code,kbd,pre,samp {font-family:monospace, monospace;font-size:1em;}button,input,optgroup,select,textarea {color:inherit;font:inherit;margin:0;}button {overflow:visible;}button, select {text-transform:none;}button,html input[type=button],input[type=reset],input[type=submit] {-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled] {cursor:default;}input {line-height:normal;}input[type=checkbox],input[type=radio] {box-sizing:border-box;padding:0;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {height:auto;}input[type=search] {-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {-webkit-appearance:none;}fieldset {border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}table {border-collapse:collapse;border-spacing:0;}td,th {padding:0;}b,strong,optgroup {font-weight:700;}pre,textarea {overflow:auto;}button::-moz-focus-inner,input::-moz-focus-inner,legend {border:0;padding:0;}

.ui-draggable-dragging {z-index: 10000;}
* {-webkit-tap-highlight-color: rgba(0,0,0,0);}


/* Preloader */
#loaderContainer {width:854px;height:360px;position:relative;}
#progressBar {position:absolute;width:200px;height:15px;left:50%;top:50%;margin:-25px 0 0 -100px;border-radius:10px;background-color:#ddd;}
#progressBar > div {background-color:#444;height:15px;border-radius:10px;}
#progressText {font-size:15px;left:50%;margin-left:-100px;position:absolute;text-align:center;top:49%;width:200px;font-weight:bold;color:#444;}

/* mainContainer */
#mainContainer {width:854px;height:360px;position:relative;display:none;background-color:#fff;cursor:default;}

/* descrption (on top) */
#desc {padding:5px 10px;text-align:left;font:normal 16px/120% Arial, Helvetica, sans-serif;color:#000;height:60px;overflow:auto;}

/* Tools (on Left) */
#tools {float:left;width:96px;border:1px solid #999;margin:5px 10px;min-height:50px;font:normal 14px/120% Arial, Helvetica, sans-serif;color:#000;}
#tools .heading {background-color:#f3f2f2;text-align:center;padding:5px 0;border-bottom:1px solid #999;}
#tools div + div {text-align:center;padding:5px;}
#tools img {display:block;margin:0 auto 3px;cursor:pointer;position:relative;}

/* Disable State */
#tools div.disable,#tools div.disable img,#tools img.disable {cursor:default;opacity:0.5;}
.hidden {visibility:hidden;}
#tools img.defaultCursor {cursor:default;}

/* Stage (on Right - Main animation / activity area)*/
#stage {width:854px;height:290px;overflow:hidden;position:absolute;top:70px;left:0px;}
#stage > div {width:854px;height:290px;/*position:relative;*/}
.continue {position:absolute;right:10px; top:246px;background-image:url('../images/continue_btn.png');width:130px;height:35px;cursor:pointer;display:none;}

/* Step 1 */
#step1 {text-align:center;}
#divStep1_Anim1 {width:854px;height:290px;background-image:url('../images/step_01_01.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep1_Anim2 {width:854px;height:290px;background-image:url('../images/step_01_02.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep1_Anim3 {width:854px;height:290px;background-image:url('../images/step_01_03.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep1_Click {width:515px;height:92px;position:absolute;top:149px;left:169px;cursor:pointer;}

/* Step 2 */
#step2 {text-align:center;position:absolute;top:0px;}
#divStep2_Anim1 {width:854px;height:290px;background-image:url('../images/step_02_01.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep2_Drop {width:186px;height:215px;position:absolute;top:64px;left:334px;}
#divStep2_Drag {width:179px;height:166px;background-image:url('../images/step_02_filter.png');background-repeat:no-repeat;position:absolute;top:90px;left:120px;cursor:pointer;}

/* Step 3 */
#step3 {text-align:center;position:absolute;top:0px;}
#divStep3_Anim1 {width:854px;height:290px;background-image:url('../images/step_03_01.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep3_Drop {width:186px;height:215px;position:absolute;top:64px;left:334px;}
#divStep3_Drag {width:119px;height:154px;background-image:url('../images/step_03_funnel.png');background-repeat:no-repeat;position:absolute;top:90px;left:120px;cursor:pointer;}

/* Step 4 */
#step4 {text-align:center;position:absolute;top:0px;}
#divStep4_Anim1 {width:854px;height:290px;background-image:url('../images/step_04_01.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep4_Anim2 {width:854px;height:290px;background-image:url('../images/step_04_02.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep4_Drop {height: 280px;left: 357px;position: absolute;top: 0;width: 149px;}
#divStep4_Drag {width:118px;height:117px;background-image:url('../images/step_04_beaker.png');background-repeat:no-repeat;position:absolute;top:180px;left:520px;cursor:pointer;}