body {
    background-color: black;
    font: 14px/21px Arial,Helvetica,sans-serif;
    cursor: text;
}
 
canvas {
	cursor: none;
}

p {
  font-family: Arial;
  font-size: 20px;
  color: white;
  position:absolute;
  top: 600px;
}

/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: white;
}
/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Tooltip container for hover over rooms */
.tooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black;  -If you want dots under the hoverable text */
}
.searchable {
  cursor: pointer;
}

img {
  position:absolute;
}
#layer1 {
   z-index: 10;
}
#layer2 {
  z-index: 20;
  left: 50px;
  top: 270px;
}
#layer3 {
  z-index: 30;
  left: 90px; /*must be offset +10,+20*/
  top: 345px;
}
#layer4 {
  z-index: 40;
  left: 90px; /*must be offset +10,+20*/
  top: 395px;
}
#layer5 {
  z-index: 50;
  left: 90px; /*must be offset +10,+20*/
  top: 445px;
}
#layer6 {
  z-index: 60;
  left: 90px; /*must be offset +10,+20*/
  top: 495px;
}
#layer7 {
  z-index: 70;
  left: 90px; /*must be offset +10,+20*/
  top: 545px;
}
#layer8 {
  z-index: 80;
  left: -150px; /*Erase button left side*/
  top: 8px;
}
#layer9 {
  z-index: 85;
  left: -150px; /*Erase button Bottom*/
  top: 42px;
}

/*Now the images wont load properly.
#ptsTen { 
  z-index: 20;
  left: 546px; 
  top: 224px; 
  width: 11px;
  height: 22px; 
  background: url("../img/items/numbers.jpg") 0 0; -css DRAWS LINES through the images
}
#ptsOne { 
  z-index: 20;
  left: 557px; 
  top: 224px; 
  width: 11px;
  height: 22px;
  background: url("../img/items/numbers.png") -11px 0;
}
*/
#ptsTen { 
  z-index: 20;
  left: 546px; 
  top: 224px; 
}
#ptsOne { 
  z-index: 20;
  left: 557px; 
  top: 224px; 
}
/*wasted ANOTHER 3 hours trying to get spriteSheets working with js...*/
#m1, #m2, #m3, #m4, #m5, #m6 {
  z-index: 100;
  top: 383px;
}
#m7, #m8, #m9, #m10, #m11, #m12{
  z-index: 100;
  top: 433px;
}
#m13, #m14, #m15, #m16, #m17, #m18 {
  z-index: 100;
  top: 483px;
}
/* background: url("../img/items/medalCover.png") 0 0;*/
#m1 { left: 458px; }
#m2 { left: 508px; }
#m3 { left: 558px; }
#m4 { left: 608px; }
#m5 { left: 658px; }
#m6 { left: 708px; }
#m7 { left: 458px; }
#m8 { left: 508px; }
#m9 { left: 558px; }
#m10 { left: 608px; }
#m11 { left: 658px; }
#m12 { left: 708px; }
#m13 { left: 458px; }
#m14 { left: 508px; }
#m15 { left: 558px; }
#m16 { left: 608px; }
#m17 { left: 658px; }
#m18 { left: 708px; }


/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text*/
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}