#empty { background: url(imgs/empty.png) no-repeat -9999px -9999px; }
#empty_green { background: url(imgs/empty-green.png) no-repeat -9999px -9999px; }
#arrow { background: url(imgs/arrow.png) no-repeat -9999px -9999px; }
#breadleft { background: url(imgs/bread-1.png) no-repeat -9999px -9999px; }
#breadright { background: url(imgs/bread-2.png) no-repeat -9999px -9999px; }
#salad { background: url(imgs/salad.png) no-repeat -9999px -9999px; }
#tomatoes { background: url(imgs/tomatoes.png) no-repeat -9999px -9999px; }
#ham { background: url(imgs/ham.png) no-repeat -9999px -9999px; }
#saladleaf { background: url(imgs/salad-leaf.png) no-repeat -9999px -9999px; }
#tomatoslice { background: url(imgs/tomato-slice.png) no-repeat -9999px -9999px; }
#hamslice { background: url(imgs/ham-slice.png) no-repeat -9999px -9999px; }
#wall { background: url(imgs/wall.png) no-repeat -9999px -9999px; }

#robotbluen { background: url(imgs/robot-blue-n.png) no-repeat -9999px -9999px; }
#robotbluee { background: url(imgs/robot-blue-e.png) no-repeat -9999px -9999px; }
#robotblues { background: url(imgs/robot-blue-s.png) no-repeat -9999px -9999px; }
#robotbluew { background: url(imgs/robot-blue-w.png) no-repeat -9999px -9999px; }
#robotorangen { background: url(imgs/robot-orange-n.png) no-repeat -9999px -9999px; }
#robotorangee { background: url(imgs/robot-orange-e.png) no-repeat -9999px -9999px; }
#robotoranges { background: url(imgs/robot-orange-s.png) no-repeat -9999px -9999px; }
#robotorangew { background: url(imgs/robot-orange-w.png) no-repeat -9999px -9999px; }


.levelButton {
   padding: .9em;
   background-color: #9E4F28;
   color: #DBD09C;
   height: 50px;
   width:  50px;
   cursor:pointer;
   text-decoration: none;   
}

.levelButtonLogout{
    color: white;
    background-color: red;
    height: 50px;
    width:  80px;
    cursor:pointer;
    text-decoration: none;
}

.levelButton:hover {
   background-color: #B8714D;
   color: #DBD09C;   
}

.title {
  font-size: 180%;
}

td {
    width: 20em;
    text-align: center;
}



div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

body {
  background-color: #DBD09C;
  font-family: sans-serif;
  color: #472412;
}
h1 {
  font-weight: normal;
  font-size: 140%;
}

.smartButton {
 padding: .5em;
 background-color: #9E4F28;
 color: #DBD09C;
 height:50px;
 width:50px;
 cursor:pointer;
 text-decoration: none;
}

.smartButton:hover {
 background-color: #B8714D;
 color: #DBD09C;
}

.guiButton {
border: none;
background-color: #9E4F28;
color: #DBD09C;
cursor:pointer;
/*
background-color: #e4e4e4;
color: darkblue;*/
height:30px;
}
.guiButton:disabled {
border: none;
background-color: darkgray;
color: #e4e4e4;
height:30px;
}
.guiButtonHighlighted {
margin-left: -2px;
border: 2px solid white;
background-color: red; //#DBD09C;
color: white; // #9E4F28;
height:30px;
}   

#loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 50px;
width: 50%;
text-align: center;
font-size: 5em;
color: white;
background-color: green;
z-index: 1000;
}


.confetti {
  width:   8px;
  height: 21px;
  position: absolute;
  background-color: gold;
  display: block;
}
.rotate {
 animation: rotate .75s linear infinite; 
}
@keyframes rotate{
 to{ transform: rotate(360deg); }
}





@-webkit-keyframes shaker {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shaker{ 
    -webkit-animation-name: shaker;
    -webkit-animation-duration: 0.2s;
    -webkit-transform-origin: 50% 100%;
    //-webkit-animation-iteration-count: infinite;
}


/* ************************* MODAL POPUP ************
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1500; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  font-size:  120%;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  /*border: 5px solid #9E4F28; */
  width: 60%; /* Could be more or less, depending on screen size */
}