/* Step 0 styles */
.step-0 {
  width: 854px;
  height: 360px;
  background: url('../img/step-0-bg.png');
}

.jessie {
  position: absolute;
  top: 0;
  left: 0;
  width: 193px;
  height: 361px;
  margin: 0;
  border: 0;
  padding: 0;
}
.jessie.angry {
  background: url('../img/jessie-angry.png');
}
.jessie.happy {
  background: url('../img/jessie-happy.png');
}

.cell {
  position: absolute;
  width: 45px;
  height: 45px;
  border-radius: 45px;
}

.cell.rest {
  cursor: default;
  background: none;
}

.cell-active-arrow {
  width: 21px;
  height: 37px;
  position: relative;
  top: -62px;
  left: 12px;
  background: url('../img/cell-arrow.svg');
}

.cell.active {
  background: url('../img/cell-indicator.svg');
  cursor: pointer;
}

.cell.complete {
  cursor: default;
  background: url('../img/cell-complete.svg');
}

.cell.number-0 {
  left: 198px;
  top: 134px;
}
.cell.number-1 {
  left: 311px;
  top: 135px;
}
.cell.number-2 {
  left: 536px;
  top: 103px;
}
.cell.number-3 {
  left: 612px;
  top: 109px;
}
.cell.number-4 {
  left: 672px;
  top: 164px;
}
.cell.number-5 {
  left: 756px;
  top: 180px;
}
.cell.number-6 {
  left: 731px;
  top: 246px;
}
.cell.number-7 {
  left: 608px;
  top: 249px;
}
.cell.number-8 {
  left: 482px;
  top: 282px;
}
.cell.number-9 {
  left: 399px;
  top: 298px;
}
.cell.number-10 {
  left: 313px;
  top: 294px;
}
.cell.number-11 {
  left: 229px;
  top: 292px;
}

/* Step 1 styles */
.step-1 {
  width: 854px;
  height: 360px;
  background: url('../img/step-1-bg.png');
}

.adj-list {
  position: absolute;
  left: 24px;
  top: 178px;
  width: 169px;
  height: 89px;
  background: url('../img/adj-list-0.png');
}
.adj-list.step-1 {
  background: url('../img/adj-list-1.png');
}
.adj-list.step-2 {
  background: url('../img/adj-list-2.png');
}
.adj-list.step-3 {
  background: url('../img/adj-list-3.png');
}
.adj-list.step-4 {
  background: url('../img/adj-list-4.png');
}

.adj-title {
  position: absolute;
  left: 34px;
  top: 110px;
  width: 171px;
  height: 61px;
}
.adj-title.cell-0 {
  background: url('../img/adj-cell-title-0.png');
}
.adj-title.cell-1 {
  background: url('../img/adj-cell-title-1.png');
}
.adj-title.cell-2 {
  background: url('../img/adj-cell-title-2.png');
}
.adj-title.cell-3 {
  background: url('../img/adj-cell-title-3.png');
}
.adj-title.cell-4 {
  background: url('../img/adj-cell-title-4.png');
}
.adj-title.cell-5 {
  background: url('../img/adj-cell-title-5.png');
}
.adj-title.cell-6 {
  background: url('../img/adj-cell-title-6.png');
}
.adj-title.cell-7 {
  background: url('../img/adj-cell-title-7.png');
}
.adj-title.cell-8 {
  background: url('../img/question-mark.png');
}
.adj-title.cell-9 {
  background: url('../img/question-mark.png');
}
.adj-title.cell-10 {
  background: url('../img/question-mark.png');
}
.adj-title.cell-11 {
  background: url('../img/question-mark.png');
}

.adj-mic-button {
  position: absolute;
  margin: 0;
  border: 0;
  padding: 0;
  width: 41px;
  height: 41px;
  border-radius: 41px;
}

.adj-mic-button.button-1 {
  top: 234px;
  left: 383px;
  cursor: pointer;
}
.adj-mic-button.button-1:before {
  content: url( '../img/adj-mic-button-1.png' );
  position: absolute;
  left: -10px;
  top: 0;
}
.adj-mic-button.button-1.disabled {
  cursor: default;
}
.adj-mic-button.button-1.disabled:before {
  content: url( '../img/adj-mic-button-1-dis.png' );
}
.adj-mic-button-arrow {
  background: url('../img/cell-arrow.svg');
  -webkit-transform: rotate(-130deg);
  -ms-transform: rotate(-130deg);
  transform: rotate(-130deg);
  position: relative;
  top: 30px;
  left: -30px;
  display: block;
  width: 21px;
  height: 37px;
}

.adj-mic-button.button-2 {
  top: 168px;
  left: 342px;
  cursor: pointer;
}
.adj-mic-button.button-2:before {
  content: url( '../img/adj-mic-button-2.png' );
}
.adj-mic-button.button-2.disabled {
  cursor: default;
}
.adj-mic-button.button-2.disabled:before {
  content: url( '../img/adj-mic-button-2-dis.png' );
}

.adj-mic-button.button-3 {
  top: 224px;
  left: 421px;
  cursor: pointer;
}
.adj-mic-button.button-3:before {
  content: url( '../img/adj-mic-button-3.png' );
}
.adj-mic-button.button-3.disabled {
  cursor: default;
}
.adj-mic-button.button-3.disabled:before {
  content: url( '../img/adj-mic-button-3-dis.png' );
}

.adj-mic-button.button-4 {
  top: 274px;
  left: 398px;
  cursor: pointer;
}
.adj-mic-button.button-4:before {
  content: url( '../img/adj-mic-button-4.png' );
}
.adj-mic-button.button-4.disabled {
  cursor: default;
}
.adj-mic-button.button-4.disabled:before {
  content: url( '../img/adj-mic-button-4-dis.png' );
}

.microscope {
  position: absolute;
  width: 264px;
  height: 264px;
  top: 62px;
  left: 550px;
  border-radius: 264px;
}

.microscope:before {
  width: 264px;
  height: 264px;
  position: absolute;
  top: -8px;
  left: -8px;
}
.microscope:after {
  width: 264px;
  height: 264px;
  position: absolute;
  top: -8px;
  left: -8px;
  opacity: 1;
}

.microscope.cell-0:before {
  content: url( '../img/mic-cell-0-view-1.png' );
}
.microscope.cell-0:after {
  content: url( '../img/mic-cell-0-view-0.png' );
}
.microscope.cell-1:before {
  content: url( '../img/mic-cell-1-view-1.png' );
}
.microscope.cell-1:after {
  content: url( '../img/mic-cell-1-view-0.png' );
}
.microscope.cell-2:before {
  content: url( '../img/mic-cell-2-view-1.png' );
}
.microscope.cell-2:after {
  content: url( '../img/mic-cell-2-view-0.png' );
}
.microscope.cell-3:before {
  content: url( '../img/mic-cell-3-view-1.png' );
}
.microscope.cell-3:after {
  content: url( '../img/mic-cell-3-view-0.png' );
}
.microscope.cell-4:before {
  content: url( '../img/mic-cell-4-view-1.png' );
}
.microscope.cell-4:after {
  content: url( '../img/mic-cell-4-view-0.png' );
}
.microscope.cell-5:before {
  content: url( '../img/mic-cell-5-view-1.png' );
}
.microscope.cell-5:after {
  content: url( '../img/mic-cell-5-view-0.png' );
}
.microscope.cell-6:before {
  content: url( '../img/mic-cell-6-view-1.png' );
}
.microscope.cell-6:after {
  content: url( '../img/mic-cell-6-view-0.png' );
}
.microscope.cell-7:before {
  content: url( '../img/mic-cell-7-view-1.png' );
}
.microscope.cell-7:after {
  content: url( '../img/mic-cell-7-view-0.png' );
}
.microscope.cell-8:before {
  content: url( '../img/mic-cell-8-view-1.png' );
}
.microscope.cell-8:after {
  content: url( '../img/mic-cell-8-view-0.png' );
}
.microscope.cell-9:before {
  content: url( '../img/mic-cell-9-view-1.png' );
}
.microscope.cell-9:after {
  content: url( '../img/mic-cell-9-view-0.png' );
}
.microscope.cell-10:before {
  content: url( '../img/mic-cell-10-view-1.png' );
}
.microscope.cell-10:after {
  content: url( '../img/mic-cell-10-view-0.png' );
}
.microscope.cell-11:before {
  content: url( '../img/mic-cell-11-view-1.png' );
}
.microscope.cell-11:after {
  content: url( '../img/mic-cell-11-view-0.png' );
}

.microscope.opacity-1:after {
  opacity: 0.86;
}
.microscope.opacity-2:after {
  opacity: 0.71;
}
.microscope.opacity-3:after {
  opacity: 0.57;
}
.microscope.opacity-4:after {
  opacity: 0.43;
}
.microscope.opacity-5:after {
  opacity: 0.29;
}
.microscope.opacity-6:after {
  opacity: 0.14;
}
.microscope.opacity-7:after {
  opacity: 0;
}

/* Step 2 styles */

.step2-container {
  background: url(../img/background.png) no-repeat;
  width: 854px;
  height: 360px;
}

.step2-container img {
  position: absolute;
  top: 0;
  right: 0;
}

.step2-container .cell-structure {
  position: absolute;
  top: 95px;
  left: 25px;
  color: white;
  text-transform: uppercase;
  font-size: 16px;
}

.step2-container .cell-name {
  position: absolute;
  top: 62px;
  left: 25px;
  font-weight: bold;
  font-size: 22px;
}

.step2-container .dropdown-container {
  position: absolute;
  top: 125px;
  left: 25px;
  color: #333333;
}

.step2-container .drop-down {
  height: 45px;
}

.step2-container .drop-down-bttn {
  width: 182px;
  height: 36px;
  border-radius: 6px;
  border: none;
  background: white url(../img/default-arrow.png) no-repeat 195px 9px;
  outline: none;
  font: bold 14px Arial, sans-serif;
  color: #333333;
  position: absolute;
  left: 30px;
  line-height: 36px;
  padding: 0 0 0 50px;
  margin: 3px;
  cursor: pointer;
}

.step2-container .drop-down-menu {
  width: 232px;
  text-align: center;
  background: #D6D6D6;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  position: relative;
  top: 34px;
  left: 33px;
  padding: 10px 0 4px 0;
  display: none;
}

.open .drop-down-bttn {
  z-index: 2;
  background: white url(../img/drop-down-arrow.png) no-repeat 195px 11px;
}

.open .drop-down-menu {
  display: block;
  z-index: 1;
}

.step2-container .drop-down-item {
  font: bold 14px Arial, sans-serif;
  padding: 4px 0 4px 50px;
  text-align: left;
  cursor: pointer;
}

.step2-container .drop-down-item:hover {
  background: #E3D1F1;
}

.step2-container .drop-down-icon {
  width: 24px;
  height: 24px;
  position: absolute;
  border-radius: 50%;
  margin-top: 9px;
  background: transparent;
}

.correct .drop-down-icon {
  background: #7fb14d;
}

.correct .drop-down-icon:before {
  content: '';
  background: url(../../../../../common/styles/uikit/img/glyphicons-halflings-white.png);
  background-position: 182px 1px;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 4px;
}

.incorrect .drop-down-icon {
  background: #f4473c;
}

.incorrect .drop-down-icon:before {
  content: '';
  background: url(../../../../../common/styles/uikit/img/glyphicons-halflings-white.png);
  background-position: 158px 1px;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 4px;
}

.correct .drop-down-bttn {
  cursor: default;
  margin: 0;
  border: 3px solid #7fb14d;
}

.incorrect .drop-down-bttn {
  margin: 0;
  border: 3px solid #f4473c;
}