.title-data {  
  background-color: rgba(84, 10, 10, 1);
  color: #fff;
  font-size: 0.7em;
  padding: .49% 0 0 2%;
  box-sizing: border-box;
  position: absolute;
}

/******* Main Menu*/

.magazine-button {
  position: absolute;
  background-image: url('../cg/ui/prarieDogClosed.png');
  background-size: 100%;
  top: 80.5% !important;
  left: -22.234375% !important;
  cursor: pointer;
}
.magazine-button:hover {
  top: 67.5% !important;
  left: -20.234375% !important;
}
.passport-button {
  position: absolute;
  background-image: url('../cg/ui/passport.png');
  background-size: 100%;
  top: 82.5% !important;
  left: 73.765625% !important;
  cursor: pointer;
}
.passport-button:hover {
  top: 74.5% !important;
  left: 73.765625% !important;
}
.file-button-no-warrant,
.file-button-warrant {
  position: absolute;
  background-image: url('../cg/ui/file.png');
  background-size: 100%;
  top: 82.5% !important;
  left: 22.765625% !important;
  cursor: pointer;
  font-size: .6em;
  padding: 5% 8%;
  box-sizing: border-box;
}
.file-button-no-warrant:hover,
.file-button-warrant:hover {
  top: 72.5% !important;
  left: 22.765625% !important;
}

.file-label-start {
  position: absolute;
  background-image: url('../cg/ui/file.png');
  background-size: 100%;
  font-size: 0.6em;
  padding: 6% 8%;
  box-sizing: border-box;
  white-space: pre-wrap;
}
.invisible-button {
  position: absolute;
  cursor: pointer;
  /*background-color: rgba(255,0,0,.2);*/
}

/********** Suspects Menu*/

.laptop-overlay {
  position: absolute;
  background-image: url('../cg/ui/laptopBorder.png');
  background-size: 100%;
}

.search-description {
  position: absolute;
  font-size: 0.67em;
}
.search-title {
  position: absolute;
  color: #fff;
  font-size: 0.67em;
}

.screen-selector {
  position: absolute;
  font-size: .65em;
  cursor: pointer;
  color: #000;
}
.screen-selector:hover {
  color: #22c;
}

.database-list {
  position: absolute;
  top: 29%;
  left: 14%;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: .5em;
  overflow-y: auto;
  height: 48%;
  width: 16%;
}
.database-list li {
    background-color: rgb(80,180,255);
    color: #fff;
    padding: 3%;
    box-sizing: border-box;
    margin: .2em 0;
    width: 98%;
    text-align: center;
    cursor: pointer;
}
.database-list li:hover {
    background-color: rgb(120,210,255);
}

.database-bio-container {
  position: absolute;
  top: 29%;
  left: 31%;
  width: 27%;
  height: 57%;
  overflow-y: auto;
  font-size: .53em;
  box-sizing: border-box;
}
.database-bio-container .title {
  padding-bottom: .3em;
}
.database-bio-container .stat {
display: inline-block;
    font-size: 0.7em;
    width: 50%;
    padding: .3em 0;
}
.database-bio-container .stat.long {
    display: block;
    width: 100%;
}
.database-bio-container .long .label {
    display: inline-block;
    width: 25%;
    vertical-align: top;
}
.database-bio-container .long .text {
    display: inline-block;
    width: 72%;
}
.database-bio-container .bio {
    font-size: .7em;
    margin-top: 1em;
    white-space: pre-wrap;
}
.database-mugshot {
  position: absolute;
  height: 37.546%;
  width: 22%;
  left: 60%;
  top: 30%;
  background-color: rgba(255,255,255,.7);
}
.database-mugshot div {
    height: 90%;
    width: 90%;
    margin: 5%;
    background-size: 100%;
}
/********** City Map */

.city-overlay {
  position: absolute;
  background-image: url('../cg/ui/citymap.png');
  background-size: 100%;
}

.city-map-bar {
  position: absolute;
  background-image: url('../cg/ui/bar.png');
  background-size: 100%;
  cursor: pointer;
}
.city-map-sauna {
  position: absolute;
  background-image: url('../cg/ui/bathhouse.png');
  background-size: 100%;
  cursor: pointer;
}
.city-map-ymca {
  position: absolute;
  background-image: url('../cg/ui/gymlocker.png');
  background-size: 100%;
  cursor: pointer;
}
.city-map-masseur {
  position: absolute;
  background-image: url('../cg/ui/massage.png');
  background-size: 100%;
  cursor: pointer;
}
.city-map-park {
  position: absolute;
  background-image: url('../cg/ui/park.png');
  background-size: 100%;
  cursor: pointer;
}
.city-map-strip {
  position: absolute;
  background-image: url('../cg/ui/strip.png');
  background-size: 100%;
  cursor: pointer;
}
.city-map-train {
  position: absolute;
  background-image: url('../cg/ui/traingloryholes.png');
  background-size: 100%;
  cursor: pointer;
}

.city-map-bar:hover,
.city-map-sauna:hover,
.city-map-ymca:hover,
.city-map-masseur:hover,
.city-map-park:hover,
.city-map-strip:hover,
.city-map-train:hover {
    transform: scale(1.1);
}
/********** WORLD*/

.travel-overlay {
  position: absolute;
  background-image: url('../cg/ui/world-map.png');
  background-size: 100%;
}

.travel-destination {
  position: absolute;
  font-size: 0;
  background-color: red;
  cursor: pointer;
}

.travel-destination:hover {
  font-size: .5em;
  font-weight: bold;
  text-indent: .7em;
}

/******* UI Elements */
.button-computer {
  position: absolute;
  background-color: rgba(0, 40, 100, .5);
  font-size: .6em;
  color: white;
  box-sizing: border-box;
  padding: .5% 0;
  text-align: center;
  cursor: pointer;
}
.button-computer:hover {
  background-color: rgba(0, 60, 200, .5);
}

.id-mugshot-tonyIndiana,
.id-mugshot-maxStrokes,
.id-mugshot-richardHead,
.id-mugshot-zakJones,
.id-mugshot-donnyCummings {
  position: absolute;
  box-sizing: border-box;
  background-size: 100%;
}

.database-mugshot .tonyIndiana,
.id-mugshot-tonyIndiana { 
  background-image: url('../cg/mugshots/indiana-avatar.png');
}
.database-mugshot .maxStrokes,
.id-mugshot-maxStrokes { 
  background-image: url('../cg/mugshots/maxi-strokes-avatar.png');
}
.database-mugshot .richardHead,
.id-mugshot-richardHead { 
  background-image: url('../cg/mugshots/rich-head-avatars.png');
}
.database-mugshot .zakJones,
.id-mugshot-zakJones { 
  background-image: url('../cg/mugshots/zak-jon-avatar.png');
}
.database-mugshot .donnyCummings,
.id-mugshot-donnyCummings { 
  background-image: url('../cg/mugshots/donnyCummings-avatar.png');
}
.id-modal-no-match,
.id-modal-warrant,
.id-modal-matches,
.clue-given-modal {
  position: absolute;
  background-color: rgba(255, 130, 10, 0.9);
  box-sizing: border-box;
  padding: 2.2% 4%;
  color: #FFF;
  font-size: 0.7em;
}
.id-modal-warrant {
  background-color: rgba(40, 120, 30, 0.9);
}
.clue-given-modal {
  background-color: rgba(0, 50, 180, 0.7);
}

.tutorial-button {
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  color: rgb(84, 10, 10);
}

.tutorial-block {
  position: absolute;
  font-size: .6em;
  background-color: rgba(0,100,20,0.7);
  color: #fff;
  border: .2em #fff solid;
  box-sizing: border-box;
  padding: .7em;
}
.tutorial-background {
  position: absolute;
  background-color: rgba(0, 0, 0, .5);
}

.start-button {
  position: absolute;
  font-size: .7em;
  background-color: rgba(0,100,20,0.7);
  color: #fff;
  text-align: center;
  border: .2em #fff solid;
  border-radius: .7em;
  cursor: pointer;
  box-sizing: border-box;
  padding: .7em;
}
.start-button:hover {
  background-color: rgba(0,150,40,0.7);
}

.credits-text {
  position: absolute;
  color: #fff;
  font-size: .7em;
  white-space: pre-wrap;
}

.dialogue-box {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.dialogue-backdrop {
  position: absolute;
  top: 67%;
  left: 2%;
  width: 54%;
  height: 30%;
  background-color: rgba(0, 50, 180, 0.7);
  opacity: 1;
  border-radius: 0;
}
.dialogue-text-box {
  position: absolute;
  top: 67%;
  left: 2%;
  width: 54%;
  height: 30%;
  box-sizing: border-box;
  padding: 2% 4%;
}
.dialogue-next-button {
  font-size: 0em;
}