/* ----- BOMB ICONS ON MAP ----- */
/* Container holding bomb and bar */
.bombplacer {
  position: absolute;
  width: 106px;
  height: 48px;
}

/* Bomb image */
.bombWait {
  position: absolute;
  left: 29px;
  width: 48px;
  height: 48px;
  user-select: none;
  transition: all .1s ease-in;
}
.bombWait:hover { transform: rotate(5deg) scale(1.5); }

/* Timer bar */
.bombTimer {
  width: 100px;
  height: 3px;
  background-color: #CE2E45;
  margin: 48px auto 0;
  border-radius: 4px;
  border: 3px solid #F4BDCB;
}

/* Individual bomb locations */
#bomb1 { top: 330px;
         left: 480px; } /* Ming Yuen St. */
#bomb2 { top: 130px;
         left: 500px; } /* North Point Estate */
#bomb3 { top: 370px;
         left: 175px; } /* Power station */
#bomb4 { top: 50px;
         left: 705px; } /* Ferry pier */
#bomb5 { top: 445px;
         left: 670px; } /* Reservoir. */



/* ----- DEFUSAL MODAL: WINDOW ----- */
#modal {
  z-index: 07;
  position: absolute;
  width: 60%;
  left: 20%;
  height: 86%;
  top: 7%;
  border-radius: 15px;
  background-color: #FEE1AF;
  box-shadow: 0px 5px #D8B684;
  text-align: center;
  font-family: monospace;
}

#modalhider {
  z-index: 06;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #322e45;
  user-select: none;
  pointer-events: none;              /* this is backwards but somehow seems to work */
  opacity: 0;
  transition: all .3s ease-out;
}

.mhvisible {
  pointer-events: all !important;    /* this is backwards but somehow seems to work */
  opacity: 0.9 !important;
}



/* ----- DEFUSAL MODAL: TITLE AREA ----- */
.modalTitle  {
  width: 50px;
  font-weight: normal;
  color: #D8B684;
}

#modalClose {
  position: absolute;
  top: 0;
  right: 0;
  margin: 5px;
  padding: 20px;
}
#modalClose:hover {
  background-color: #D8B684;
}

/* ----- DEFUSAL MODAL: COUNTDOWN BAR ----- */
/* Countdown bar: wrapper */
#defusalProgress {
  visibility: hidden;
  position: absolute;
  top: 200px;
  left: -5px;
  width: 100%;
  height: 33px;
  background-color: #CE2E45;
  box-shadow: 0px 3px #9d2334;
  padding: 0 5px;
  border-radius: 5px;
  user-select: none;
}

/* Countdown bar: moving bar */
#defusalBarCurr {
  width: 100%;
  height: 5px;
  margin-top: -5px;
  background-color: #F4F2ED;
  border-radius: 5px;
}

/* Countdown bar: background */
#defusalBarCurrBkg {
  width: 100%;
  height: 5px;
  background-color: rgba(0,0,0,.2);
  border-radius: 5px;
}

/* Countdown bar: flavour text */
.ZHtiny, #defusalTimeCurr { color: #FFCECA; }

.succ {                           /* modify flavour text to be larger when countdown bar is removed */
  margin-top: 8px;
  font-size: 16px;
  font-weight: bold;
  color: #F4F2ED !important;
}


/* ----- DEFUSAL MODAL: IMAGE GALLERY ----- */
/* Images */
#imageHolder {                    /* this is a <div> with an <img> inside */
  position: absolute;
  left: 105px;
  top: 50px;
}
#imageList {                      /* this is a <ul> with <li>s each containing an <img> */
  display: none;
}

/* Image swapping arrows */
#arrowHolder { margin-top: 270px;}

.btnArrow {
  position: absolute;
  background-color: transparent;
  box-shadow: none;
  margin: 0;
}
.btnArrow:hover { background-color: transparent; }

#btnArrowLeft   { left: 37px; }
#btnArrowMiddle { left: 188px; }
#btnArrowRight  { left: 339px; }

/* Decision buttons */
#btnBombReal, #btnBombFake {
  top: 410px;
  width: 150px;
  padding-top: 7px;
  padding-bottom: 7px;
  text-align: center;
  font-size: 24px;
  letter-spacing: 2px;
}

#btnBombFake { left: 262px; } /* space-around: 36.3, btn: 190 */
#btnBombReal { left: 36px;
               background-color: #CE2E45;
               box-shadow: 0px 5px #9d2334;
               border: 2px solid #F49589;
               border-left: none;
               border-bottom: none;
}