#main_stage {
  position: absolute;
  width: 100%;
  /*height: 100%;*/
  min-height:600px;
  min-width: 1024px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  /*overflow:auto;*/
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

html, body {  
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  cursor: default;
}

#bodyId {
  background-image:url(img/grid_black.png);
  background-repeat:repeat;
  background-position: center;  
}

#skeletonImage {
  float: left;
  display: block;
  /*margin: 20 0 20 400;*/
  padding: 1px 0px 1px 400px;  
}

/*-------------------------------------ITEMS-------------------------------------------------------*/
#i1 { position: absolute; top: 50px; }
#i2 { position: absolute; top: 80px; }
#i3 { position: absolute; top: 110px; }
#i4 { position: absolute; top: 140px; }
#i5 { position: absolute; top: 170px; }
#i6 { position: absolute; top: 200px; }
#i7 { position: absolute; top: 230px; }
#i8 { position: absolute; top: 260px; }
#i9 { position: absolute; top: 290px; }
#i10 { position: absolute; top: 320px; }
#i11 { position: absolute; top: 350px; }
#i12 { position: absolute; top: 380px; }
#i13 { position: absolute; top: 410px; }
#i14 { position: absolute; top: 440px; }
#i15 { position: absolute; top: 470px; }
#i16 { position: absolute; top: 500px; }
#i17 { position: absolute; top: 530px; }
#i18 { position: absolute; top: 560px; }
#i19 { position: absolute; top: 590px; }
#i20 { position: absolute; top: 620px; }

.itemCommon {
  left: 10px;
  width: 15px;
  height: 15px;
  border: 2px solid #000000;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  background-color: #808080;
}

.itemCommon.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .7);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .7);
  box-shadow: 0 0 .5em rgba(0, 0, 0, 0.7);
}

#i1text { position: relative; }
#i2text { position: relative; }
#i3text { position: relative; }
#i4text { position: relative; }
#i5text { position: relative; }
#i6text { position: relative; }
#i7text { position: relative; }
#i8text { position: relative; }
#i9text { position: relative; }
#i10text { position: relative; }
#i11text { position: relative; }
#i12text { position: relative; }
#i13text { position: relative; }
#i14text { position: relative; }
#i15text { position: relative; }
#i16text { position: relative; }
#i17text { position: relative; }
#i18text { position: relative; }
#i19text { position: relative; }
#i20text { position: relative; }

.itemTextCommon {  
  top: -5px;
  left: 50px;
  width: 150px;
  height: 4px;
  padding: 0.5em;
  border: solid;
  line-height: 4px;
  background-color: #ff8000;
  opacity: .9;
  display:block;
}

#i1line { position: absolute; }
#i2line { position: absolute; }
#i3line { position: absolute; }
#i4line { position: absolute; }
#i5line { position: absolute; }
#i6line { position: absolute; }
#i7line { position: absolute; }
#i8line { position: absolute; }
#i9line { position: absolute; }
#i10line { position: absolute; }
#i11line { position: absolute; }
#i12line { position: absolute; }
#i13line { position: absolute; }
#i14line { position: absolute; }
#i15line { position: absolute; }
#i16line { position: absolute; }
#i17line { position: absolute; }
#i18line { position: absolute; }
#i19line { position: absolute; }
#i20line { position: absolute; }

.conLine {  
  left: 17px;
  top: 6px;
  height: 3px;
  width: 36px;
  background-color: black;
}
/*-------------------------------------TARGETS-------------------------------------------------------*/
#t1 { position: absolute; left: 630px; top: 54px; } 
#t2 { position: absolute; left: 630px; top: 126px; }
#t3 { position: absolute; left: 543px; top: 240px; }
#t4 { position: absolute; left: 724px; top: 284px; }
#t5 { position: absolute; left: 693px; top: 335px; }
#t6 { position: absolute; left: 780px; top: 375px; }
#t7 { position: absolute; left: 805px; top: 522px; }
#t8 { position: absolute; left: 800px; top: 644px; }
#t9 { position: absolute; left: 684px; top: 984px; }
#t10 { position: absolute; left: 663px; top: 1017px; }
#t11 { position: absolute; left: 654px; top: 108px; }
#t12 { position: absolute; left: 628px; top: 216px; }
#t13 { position: absolute; left: 628px; top: 262px; }
#t14 { position: absolute; left: 628px; top: 303px; }
#t15 { position: absolute; left: 628px; top: 471px; }
#t16 { position: absolute; left: 567px; top: 536px; }
#t17 { position: absolute; left: 628px; top: 572px; }
#t18 { position: absolute; left: 623px; top: 616px; }
#t19 { position: absolute; left: 571px; top: 753px; }
#t20 { position: absolute; left: 583px; top: 853px; }

.targetCommon {
  width: 15px;
  height: 15px;
  line-height: 10px;
  border: 2px solid #000000;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  background-color: #ff0000;
  opacity: 0.6;
}

.targets p {
  color: #000000;
  text-align: center;
  margin-top: 5px;
  font-size: 20px;
}

.targetCommon.hovered {
  background: #aaa; 
}

/*-------------------------------------SUCCESS MESSAGE-------------------------------------------------*/
#successMessage {
  position: absolute;
  left: 18px;
  top: 44px;
  width: 400px;
  height: 100px;
  z-index: 100;
  background: #ff8000;
  border: 2px solid #000000;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  padding: 20px;
}

/*-------------------------------------BUTTONS-------------------------------------------------*/
.button {
  color: #e9e9e9;
  margin-left: 18px;
  border: solid 1px #555;
  background: #6e6e6e;
  background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
  background: -moz-linear-gradient(top,  #888,  #575757);
}
.button:hover {
  background: #616161;
  background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
  background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
}
.button:active {
  color: #afafaf;
  background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
  background: -moz-linear-gradient(top,  #575757,  #888);
}

#menuButton {
  position: absolute;
  left: 10px;
  top: 670px;
}

a.button2{
    outline:none;
    display:inline-block;
    padding:4px 10px;
    border:0.1em solid #606060;
    margin-top: 1px;
    margin-bottom: 1px;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    font-size: 16px;
    color:#000000;
    background-color:#FFFFFF;
    text-align:center;
    transition: all 0.2s;
}
a.button2:hover{
    color:#FFFFFF;
    background-color:#494949;
}
@media all and (max-width:30em){
    a.button2{
        display:block;
        margin:0.4em auto;
    }
}
/*-------------------------------------PROGRESS BAR-------------------------------------------------*/
#progressbar {
  position: absolute;
  margin-top: 10px;
  left: 10px;
  width: 300px;
  height: 8px;
  border: 4px solid #111;
  background-color: #292929;
}

#progressbar div {
  height: 100%;
  color: #fff;
  text-align: right;
  line-height: 8px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #0099ff;
}

.tiny-green {
  position: relative;
  padding: 3px;

  background-image:-moz-linear-gradient(53% 13% -90deg,rgb(58,64,80) 0%,rgb(58,64,80) 47%,rgb(46,50,62) 48%,rgb(46,50,62) 100%);
  background-image:-webkit-gradient(linear,53% 13%,53% 79%,color-stop(0, rgb(58,64,80)),color-stop(0.47, rgb(58,64,80)),color-stop(0.48, rgb(46,50,62)),color-stop(1, rgb(46,50,62)));
  background-image:-webkit-linear-gradient(-90deg,rgb(58,64,80) 0%,rgb(58,64,80) 47%,rgb(46,50,62) 48%,rgb(46,50,62) 100%);
  background-image:linear-gradient(-180deg,rgb(58,64,80) 0%,rgb(58,64,80) 47%,rgb(46,50,62) 48%,rgb(46,50,62) 100%);

  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Webkit */
  border-radius: 10px;
  opacity: 0.9;
}

.tiny-green div {
  font-family: arial;
  font-size: 3px;
  color: white;
  text-align: right;
  text-shadow: 0px 0px 2px #000;
  text-indent: 9999px;
  overflow: hidden;

  background-image:-webkit-gradient(linear,71% 25%,71% 69%,color-stop(0, rgb(118,177,1)),color-stop(0.47, rgb(118,177,1)),color-stop(0.48, rgb(102,153,0)),color-stop(1, rgb(102,153,0)));
  background-image:-webkit-linear-gradient(-90deg,rgb(118,177,1) 0%,rgb(118,177,1) 47%,rgb(102,153,0) 48%,rgb(102,153,0) 100%);
  background-image:-moz-linear-gradient(71% 25% -180deg,rgb(118,177,1) 0%,rgb(118,177,1) 47%,rgb(102,153,0) 48%,rgb(102,153,0) 100%);
  background-image:linear-gradient(-180deg,rgb(118,177,1) 0%,rgb(118,177,1) 47%,rgb(102,153,0) 48%,rgb(102,153,0) 100%);

  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Webkit */
  border-radius: 10px;
}