html { 
        background: url(p/bkgTile1.png);
}

/* ВСЕ ДЛЯ ВАРИАНТА С АБС.ПОЗИЦИОНИРОВАНИЕМ 
  Образец - 2
*/

#rightcolDEL {
   position: absolute; /* Абсолютное позиционирование */
   left: 350px; /* Положение левого края */
   top: 50px; /* Положение верхнего края */
   width: 120px; /* Ширина слоя */
   background: #e0e0e0; /* Цвет фона */
   border: solid 3px #000; /* Параметры рамки */
  color: white; /* Цвет текста */
  z-index: 10;
  }

#instr {
   position: absolute; /* Абсолютное позиционирование. */
   left: 50px;
   top: 50px;
   background: white;

   width: 450px; /* Ширина слоя */
   border: dotted 1px green; /* Параметры ОТЛАДОЧНОЙ рамки */
   border-radius: 30px;
   opacity: 0.7;
   z-index: 11;

   color: black;
   padding: 20px;
  }

#restart {
  position: absolute; /* Абсолютное позиционирование */
    left: 1000px; /* Положение левого края */
    top: 50px;
  
  height: 40px;
  border: 0;
  background: #99c9de;
  font-size: 120%;
  color: #113545;
  opacity: 0.8;
  z-index: 10;
}

#infoGame {
   position: absolute; /* Абсолютное позиционирование */
   left: 1000px; /* Положение левого края */
   top: 100px; /* Положение верхнего края */
   width: 80px; /* Ширина слоя */
   background: #99c9de;

   padding: 10px;
   border: 0px;
   border-radius: 15px;
   color: #11354 /* Цвет текста */
   font-size: 120%;
   font-weight: bolder;
   opacity: .5; /* принимает значения в диапазоне от 0 (полностью прозрачный) до 1 (непрозрачный)*/
   z-index: 5;
  }

#bkgMain {
   position: absolute; /* Абсолютное позиционирование */
   left: 0px; /* Положение левого края */
   top: 0px; /* Положение верхнего края */
   z-index: 0;
  }

#swWSpace {
   position: absolute; /* Абсолютное позиционирование */
   left: 0px; /* Положение левого края */
   top: 0px; /* Положение верхнего края */
   z-index: 3;
  }
#volSpan {
  opacity: .3;
}
#imgScore {
  opacity: .3;
}

#nest {
   position: absolute; /* Абсолютное позиционирование */
   left: 325px; /* Положение левого края */
   top: 410px; /* Положение верхнего края */
   z-index: 10;
  }

/*  ВСЕ ДЛЯ ВАРИАНТА С ТАБЛИЦЕЙ + ее абс. позиционирования
Общий бесконечный фон - плиточный (для выхода за пределы рабочей зоны при избыточном масштабировании. */
#tbGame {
   position: absolute; /* Абсолютное позиционирование */
   left: 110px; /* Положение левого края */
   top: 150px; /* Положение верхнего края */
   width: 250px; /* Ширина слоя, если нет = весь экран */
   z-index: 10;
 }

.gameTd {
    vertical-align: bottom;
    line-height: 1px; /* Межстрочное расстояние - между картинками */
 }

#debugDiv {
  position: absolute; 
  left: 10px; /* Положение левого края */
  top: 950px; /* Положение верхнего края */
  z-index: 20;
 }

 .debugTab {
    vertical-align: top;
  }


#infoSound {
   position: absolute; /* Абсолютное позиционирование */
   left: 1000px; /* Положение левого края */
   top: 180px; /* Положение верхнего края */
   width: 120px; /* Ширина слоя */
   background: #99c9de;
   font-size: 70%;
   border: 10px;
   border-radius: 15px;
   z-index: 6;
  }

#nowS {
   position: relative; /* Абсолютное позиционирование */
   left: 10px; top: 5px; width: 100px; 
   background: #EDFD3F;

   border: 0px;
   border-radius: 5px;
   opacity: .5; /* принимает значения в диапазоне от 0 (полностью прозрачный) до 1 (непрозрачный)*/
  }
#longS {
   position: relative; /* Абсолютное позиционирование */
   left: 10px; top: 5px; width: 100px;
   background: #679B00;
   border: 0px;
   border-radius: 5px;
   opacity: .5;
  }
#shortS {
   position: relative; /* Абсолютное позиционирование */
   left: 10px; top: 5px; width: 100px;
   background: #B0BC2F;
   border: 0px;
   border-radius: 5px;
   opacity: .5;
  }
#resultS {
   position: relative; /* Абсолютное позиционирование */
   left: 10px; top: 5px; width: 10px;
   background: #9FEE00; /* = в  drawData*/
   border: 0px;
   border-radius: 5px;
   opacity: .5;
  }
#goalS {
   position: relative; /* Абсолютное позиционирование */
   left: 10px; top: 5px; width: 100px;
   background: #86B32D; 
   border: 0px;
   border-radius: 5px;
   opacity: .5;
  }





.shake {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}