/* 
 * Все игровое поле 
 */
#HextrisBody
{
   margin:0;
   padding:0;
   border:0;
   height:96%;
   width:100%;
   color:#ecf0f1;
   font-family:'Exo', sans-serif;
   overflow:hidden;
   -webkit-touch-callout:none;
   -webkit-user-select:none;
   -khtml-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none;
   -webkit-tap-highlight-color:rgba(0,0,0,0);
   background:transparent;
}
/* 
 * Переключатель "инструкция-игра" #openSideBar,
 * кнопка "пауза" #pauseBtn,
 * кнопка "рестарт" #restartBtn
 */
#openSideBar,#pauseBtn,#restartBtn 
{
   position:absolute;
   width:60px;
   height:60px;
   background:transparent;
   z-index:30000;
   cursor:pointer;
}
#openSideBar 
{
   top:10%;
   left:5%;
   color:#232323;
}
#pauseBtn 
{
   right:5%;
   bottom:4%;
   display:none;
   color:#232323;
}
#restartBtn 
{
   left:5%;
   bottom:4%;
   display:none;
   color:#232323;
}
.helpText 
{
   z-index:3001;
}
/* 
 * Поле, на котором строится шестиугольник и падают блоки 
 */
#canvas 
{
   transition:all 0.5s ease;
   margin-left:.6%;
   margin-top:.6%;
   background-color:#ecf0f1;
   z-index:0;
}
/* 
 * Стартовая кнопка 
 */
#startBtn 
{
   position:absolute;
   left:38%;
   top:38%;
   height:25%;
   width:25%;
   z-index:99999999;
   cursor:pointer;
   background:transparent;
}
/* 
 * Контейнер с отчетом, который появляется после завершения игры: #container,
 * внутри контейнера:
 * две строки - ИГРА ЗАКОНЧЕНА, ЛУЧШИЕ РЕЗУЛЬТАТЫ (#highScoresTitle) со стилем .GOTitle,
 * строка с текущим результатом #cScore,
 * три строки с лучшими результатами .score,.scoreNum
 */
#container 
{
   color:#232323;
   position:absolute;
   left:50%;
   top:calc(50%);
   text-align:center;
   transform:translate(-50%, -50%);
   font-family:Exo;
   -webkit-transform:translate(-50%, -50%);
   -moz-transform:translate(-50%, -50%);
   -ms-transform:translate(-50%, -50%);
   display:none;
   background:transparent;
}
#highScoresTitle 
{
   margin-bottom:2px;
}

.GOTitle 
{
   font-weight:bold;
   font-size:24.2000px;
}
#cScore 
{
   font-size:60.5000px;
   font-weight:light;
   margin-bottom:5px;
   margin-top:-10px;
   background:transparent;
}
.score 
{
   font-weight:light;
   line-height:18px;
}
.scoreNum 
{
   font-weight:normal ! important;
}
/* Позиционируем элементы для разных экранов */
/*
@media only screen and (max-device-width:480px) 
{
  #helpScreen {
	position:fixed;
	top:2px;
	padding-top:20px;
	margin:0;
	width:100%;
	height:100%;
	font-size:13px;
	text-align:center;
  }
  #inst_main_body {
	width:calc(100% - 70px);
	transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%);
	-moz-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
  }
  #instructions_head {
	padding-left:0%;
  }
}
*/
/* 
 * Панель инструкций #helpScreen,
 * текст в панели #inst_main_body,
 * заголовок инструкции #instructions_head
 */
#helpScreen 
{
   position:absolute;
   z-index:3001;
   top:15%;
   left:10%;
   bottom:10%;
   right:10%;
   margin-top:5%;
   font-size:15px;
   text-align:center;
   display:none;
   color:#232323;
   background-color:rgba(236,240,241,1);
}
#instructions_head 
{
   text-align:center;
   font-size:1.5em;
   padding-bottom:4px;
   padding-left:0%;
}
/* 
 * Контейнер для заголовка с общим рекордом в текущем браузере, позиционируемый 
 * в функции set_score_pos() #highScoreInGameText.
 * Внутри контейнера два элемента:
 *    заголовок - #highScoreInGameTextHeader,
 *    значение - #currentHighScore
 */
#highScoreInGameText 
{
	position: absolute;
    top:6%;
	text-align: center;
	width:200px;
	left:50%;
	margin-left:-100px;
}
#highScoreInGameTextHeader 
{
	color: #bdc3c7;
	width:100%;
}
#currentHighScore 
{
	color: #2c3e50;
	width:100%;
	margin-top: -5px;
	font-size:2em;
}
.overlay 
{
   position:absolute;
   height:20%;
   width:100%;
   left:50%;
   top:50%;
   margin-left:-50%;
   margin-top:-10%;
   z-index:3000;
   color:#232323;
   text-align:center;
   background:LightCyan;
}
.centeredHeader {
	font-size:5vw; 
	text-align:center;
	line-height:4rem;
}
.centeredSubHeader {
	font-size:2.2rem; 
	line-height:1em;
	text-align:center;
}
.centeredSubSubHeader {
	font-size:1.4rem; 
	text-align:center;
}
#buttonCont {
	position:absolute; 
	left:50%;
	width:310px;
	margin-left:-8px;
	transform:translate(-50%, 0%);
	-webkit-transform:translate(-50%, 0%);
	-moz-transform:translate(-50%, 0%);
	-ms-transform:translate(-50%, 0%);
}
.blur {
	opacity:0.1;
}
#clickToExit {
	cursor:pointer;
}
#title {
	z-index:99;
	margin-top:20px;
	color:#2c3e50;
}
#restart{
	display:none;
	cursor:pointer !important;
	margin:0;
	padding:0;
	bottom:15px;
	position:absolute;
	left:calc(50% - 124px);
	transform:translate(-50%, 0%);
	-webkit-transform:translate(-50%, 0%);
	-moz-transform:translate(-50%, 0%);
	-ms-transform:translate(-50%, 0%);
	margin-bottom:-3.5px;
}
.unselectable {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
#afterhr {
	margin:0;
	padding:0;
	margin-bottom:-10px;
	padding-bottom:-10px;
}
#gameoverscreen {
	padding:8px;
}
@font-face {
	font-family:Exo;
	font-weight:light;
	src:url("./fonts/Exo2-ExtraLight.otf") format("opentype");
}
@font-face {
	font-family:Exo;
	src:url("./fonts/Exo2-Regular.otf") format("opentype");
}
@font-face {
	font-family:Exo;
	font-weight:bold;
	src:url("./fonts/Exo2-SemiBold.otf") format("opentype");
}
#bottomContainer {
	position:absolute;
	width:100%;
	bottom:0px;
}