/* 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;cursor: move!important;}
* {-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;background-color:#fff;cursor:default;}
#activityArea {width:854px;height: 290px;}

/* 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;}
.tool2, .tool3, .tool4 {display:none;}
#tool1 {top:10px;left:23px;background-image:url('../images/toolScooper.png');background-repeat:no-repeat;width:46px;height:46px;margin-bottom: 16px;cursor:move;}
#tool1.ui-draggable-dragging {height: 62px;width:62px;margin:0px;}
#tool2 {top:10px;left:23px;background-image:url('../images/toolStrip.png');background-repeat:no-repeat;width:47px;height:48px;margin-bottom:16px;}
#tool2.ui-draggable-dragging {width:65px;height:64px;margin-bottom:0;}
#tool3 {top:10px;left:23px;background-image:url('../images/toolThermometer.png');background-repeat:no-repeat;width:48px;height:48px;margin-bottom:16px;}
#tool3.ui-draggable-dragging {width:65px;height:64px;margin-bottom:0;}

/* 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;*/ pointer-events: none}
.continue {position:absolute;right:10px;top:246px;background-image:url('../images/continue_btn.png');width:130px;height:35px;cursor:pointer;display:none;pointer-events:auto;}

/* 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_Anim4 {width:854px;height:290px;background-image:url('../images/step_01_04.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep1_Anim5 {width:854px;height:290px;background-image:url('../images/step_01_05.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep1_Anim6 {width:854px;height:290px;background-image:url('../images/step_01_06.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep1_Anim7 {width:854px;height:290px;background-image:url('../images/step_01_07.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep1_Drop {width:336px;height:108px;position:absolute;top:128px;left:88px;}

/* Step 2 */
#step2 {text-align:center;position:absolute;top:0px;left: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:143px;height:139px;position:absolute;top:114px;left:350px;}
.ui-draggable {cursor:move;}
#divStep2_Drag {width:114px;height:213px;background-image:url('../images/step_02_distilled.png');background-repeat:no-repeat;position:absolute;top:40px;left:660px;cursor:move;pointer-events: auto;display:none;}
#divStep2_Drag.ui-draggable-dragging {width:131px;height:230px;}

/* Step 3 */
#step3 {text-align:center;position:absolute;top:0px;left: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 {height: 189px;left: 225px;position: absolute;top: 65px;width: 220px;}
#divStep3_Drag {width:142px;height:139px;background-image:url('../images/step_03_beaker.png');background-repeat:no-repeat;position:absolute;top:114px;left:525px;pointer-events:auto;}
#divStep3_Drag.ui-draggable-dragging {width:158px;height:155px;}

/* Step 4 */
#step4 {text-align:center;position:absolute;top:0px;left: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_Drop {height: 140px;left: 297px;position: absolute;top: 25px;width: 261px;}
#divStep4_Drag {width:142px;height:141px;background-image:url('../images/step_04_beaker.png');background-repeat:no-repeat;position:absolute;top:140px;left:60px;pointer-events:auto;}
#divStep4_Drag.ui-draggable-dragging {width:159px;height:155px;}

/* Step 5 */
#step5 {text-align:center;position:absolute;top:0px;left:0px;}
#divStep5_Anim1 {width:854px;height:290px;background-image:url('../images/step_05_01.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep5_Anim2 {width:854px;height:290px;background-image:url('../images/step_05_02.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep5_Anim3 {width:854px;height:290px;background-image:url('../images/step_05_03.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep5_Drop {width:145px;height:142px;position:absolute;top:0px;left:350px;}

/* Step 6 */
#step6 {text-align:center;position:absolute;top:0px;left:0px;}
#divStep6_Anim1 {width:854px;height:290px;background-image:url('../images/step_06_01.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep6_Anim2 {width:854px;height:290px;background-image:url('../images/step_06_02.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep6_Anim3 {width:854px;height:290px;background-image:url('../images/step_06_03.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep6_Drop {width:145px;height:142px;position:absolute;top:0px;left:350px;}

/* Step 7 */
#step7 {text-align:center;position:absolute;top:0px;left:0px;}
#divStep7_Anim1 {width:854px;height:290px;background-image:url('../images/step_07_01.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
#divStep7_Anim2 {width:854px;height:290px;background-image:url('../images/step_07_02.png');background-repeat:no-repeat;position:absolute;top:0px;left:0px;}

/**/
.tool4 #tool4{background-image: url("../images/oven-mitt.png");background-position: 0 -2px;background-repeat: no-repeat;display: block;height: 58px;margin: 0 auto;width: 59px; cursor:move;}
.tool4 #tool4.ui-draggable-dragging{ background-position: -66px -2px; width: 59px;cursor:move; }
.dropArea {height: 170px;left: 350px;position: absolute;top: 0;width: 170px;}

#whitePatch{width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-color: #fff; z-index: 51;}

#steam1{background-image: url("../images/steam.png");height: 276px;left: 410px;position: absolute;top: -132px;width: 58px;z-index:1; opacity:0.6;}
#steam2{background-image: url("../images/steam.png");height: 276px;left: 410px;position: absolute;top: -132px;width: 58px;z-index:1; opacity:0.6;}