/*-------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------- Основные стили ------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------*/
*          {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
html       {height:100%; width:100%;}
@font-face {font-family:f1; src:url(../fonts/f1.TTF);}
body       {margin:0; font-family: 'Mountains of Christmas', cursive;; color:#FFF; background:#D48E52 url(../images/wrap.jpg) center center; background-size:cover; background-attachment: fixed;}
a          {text-decoration:none;}
h4         {margin:5px 0 5px 0; color:#ffea00; font-size:24px; text-shadow:0 0 1px #ffea00, 0 0 1px #ffea00, 1px 1px 2px #000, 2px 2px 4px #000; white-space:nowrap;}
h3         {margin:0; padding-top:17px; color:#ffea00; font-size:32px; text-shadow:0 0 1px #ffea00, 0 0 1px #ffea00, 1px 1px 2px #000, 2px 2px 4px #000;}

.page {position:absolute; top:0; left:0; height:100%; width:100%; min-width:1000px; min-height:600px;}
.logo {display:block; margin:30px auto 0; margin-bottom:20px;}

.logo h1, .logo h2 {text-align: center; margin: 0; font-size: 42px; color: #1C2C81}

.wrap          {width:1000px; margin:0 auto; overflow:hidden;}
.wrap .free    {float:left; width:340px; min-height:1px;}
.wrap #wrapper {float:left; position:relative; width:320px; height:480px; border-radius:5px; box-shadow:0 0 20px 3px #000; margin:20px 0 0 0;}

.wrap .rules       {float:left; width:300px; font-size:16px; font-weight:bold; color:#791D10; text-shadow:0 1px 1px rgba(255,255,255,.30); padding:20px 0 0 40px;}
.wrap .rules ul    {padding:0 0 0 20px;}
.wrap .rules ul li {margin:0 0 10px 0;}
.wrap .rules p     {margin:0 0 24px 0;}

.start     {background:url(../images/splash.jpg);}
.game      {background:url(../images/bg.jpg);}

/*-------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------- Основное игровое меню на титульной странице ---------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------*/
#menu        {text-align:center;}
#menu        {padding-top:115px; text-align:center; font-size:14px;}
#menu a      {display:inline-block; vertical-align:top; width:60px; margin:0 1px 0 1px; color:#FFF;}
#menu a img {-webkit-transition:-webkit-transform 0.2s ease; -moz-transition:-moz-transform 0.2s ease; -ms-transition:-ms-transform 0.2s ease; -o-transition:-o-transform 0.2s ease; transition:transform 0.2s ease;}
#menu a:hover img {-webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2);}
#menu a:hover {color:#FFAD00;}
#menu a span {display:block;}
#menu #play  {width:74px;}

/*-------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------- Кнопки "Отмина" и "Закрыть" -----------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------*/
#nav         {padding:2px 1px 0 4px; height:60px;}
#nav a       {display:block; height:60px; width:62px;}
#nav #cancel {float:left; background:url(../images/icons/cancel.png);}
#nav #exit   {float:right; background:url(../images/icons/exit.png);}

/*-------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------- Время, айтем, счет, множитель -----------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------*/
#info               {margin:32px 0 0 0; text-align:center; font-size:16px; text-shadow:0 0 1px #FFF, 0 0 1px #FFF, 1px 1px 2px #000, 2px 2px 4px #000; overflow:hidden; height:50px;}
#info img           {vertical-align:middle;}
#info #panel        {width:216px; margin:4px auto 0;}
#info #panel img    {height:20px;}
#info #panel span   {display:block; float:left; margin:0 1px 0 1px; width:48px; background:rgba(0,0,0,.20); padding:1px 0 2px 0; border-radius:4px; border:1px solid #993D0E;}
#info #panel #score {width:108px; color:#FFE901; text-shadow:0 0 1px #FFE901, 0 0 1px #FFE901, 1px 1px 2px #000, 2px 2px 4px #000; border:1px solid #FDBE01; background:rgba(0,0,0,.40);}

/*-------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------- Игровое поле -------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------*/
#game          {position:relative; margin:3px auto 0; height:270px; width:270px;}
#game span     {position:relative; display:block; float:left; height:45px; width:45px; z-index:1;}
#game .empty {z-index:2;}
#game span b   {position:absolute; height:49px; width:49px; background:#0F0; top:-2px; left:-2px; z-index:-1; background:url(../images/test.png);}
#game span img {margin:3px 0 0 3px; height:39px; width:39px; position:relative; z-index:1;}
#game #drag    {position:absolute; top:0; left:0; height:45px; width:45px; background:url(../images/frame.png); z-index:10;}
#game #drag img, #game .pocket img {margin:10px 0 0 10px; height:25px; width:25px;}
#game #drag img {-webkit-animation:drag 0.8s ease-in-out infinite; -moz-animation:drag 0.8s ease-in-out infinite; -ms-animation:drag 0.8s ease-in-out infinite; -o-animation:drag 0.8s ease-in-out infinite;  animation:drag 0.8s ease-in-out infinite;}
#game .item img {-webkit-animation:item 0.3s ease; -moz-animation:item 0.3s ease; -ms-animation:item 0.3s ease; -o-animation:item 0.3s ease; animation:item 0.3s ease;}
@-webkit-keyframes item {
	from {-webkit-transform:scale(0.7);}
	50%  {-webkit-transform:scale(1.2);}
	to   {-webkit-transform:scale(1);}
}
@-moz-keyframes item {
	from {-moz-transform:scale(0.7);}
	50%  {-moz-transform:scale(1.2);}
	to   {-moz-transform:scale(1);}
}
@-ms-keyframes item {
	from {-ms-transform:scale(0.7);}
	50%  {-ms-transform:scale(1.2);}
	to   {-ms-transform:scale(1);}
}
@-o-keyframes item {
	from {-o-transform:scale(0.7);}
	50%  {-o-transform:scale(1.2);}
	to   {-o-transform:scale(1);}
}
@keyframes item {
	from {transform:scale(0.7);}
	50%  {transform:scale(1.2);}
	to   {transform:scale(1);}
}
@-webkit-keyframes drag {
	from {-webkit-transform:scale(1);}
	50%  {-webkit-transform:scale(1.3);}
	to   {-webkit-transform:scale(1);}
}
@-moz-keyframes drag {
	from {-moz-transform:scale(1);}
	50%  {-moz-transform:scale(1.3);}
	to   {-moz-transform:scale(1);}
}
@-ms-keyframes drag {
	from {-ms-transform:scale(1);}
	50%  {-ms-transform:scale(1.3);}
	to   {-ms-transform:scale(1);}
}
@-o-keyframes drag {
	from {-o-transform:scale(1);}
	50%  {-o-transform:scale(1.3);}
	to   {-o-transform:scale(1);}
}
@keyframes drag {
	from {transform:scale(1);}
	50%  {transform:scale(1.3);}
	to   {transform:scale(1);}
}

/*-------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------- Рецепт ----------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------*/
#combi     {margin:5px auto 0; text-align:center; font-size:11px;}
#combi img {height:16px; vertical-align:middle; margin:0 3px 0 3px;}


/*-------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------- Конец игры --------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------*/
#gameover       {position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:rgba(0,0,0,.70); z-index:20; text-shadow:0 0 1px #FFF, 0 0 1px #FFF, 1px 1px 2px #000, 2px 2px 4px #000;}
#result         {position:relative; margin:16px auto 0;	width:288px; height:376px; background:url(../images/result.png) center center no-repeat; text-align:center;}
#result #text   {position:absolute; overflow:hidden; padding:0 10px 0 10px; bottom:13px; left:15px; width:238px; border-radius:25px; border:2px dashed #FFF; text-align:center; background:#24253c;}
#result #text p {margin:0 0 10px 0; font-size:16px;}

/*-------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------- Меню с подарками в выподающих окнах --------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------*/
#res_menu {display:table; width:302px; margin:7px auto 0; text-align:center;}
#res_menu a {display:table-cell; color:#FFF; vertical-align:middle; background-position:center center; background-repeat:no-repeat; font-size:14px; text-shadow:0 0 1px #FFF, 0 0 1px #FFF; width:110px; padding:0 0 0 6px; height:80px; cursor:pointer;}
#res_menu #submit {background-image:url(../images/icons/but_red.png);}
#res_menu #again {width:82px; background-image:url(../images/icons/but_blue.png);}
#res_menu #tomenu {background-image:url(../images/icons/but_purple.png);}

/*-------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------- Окно подтверждения ----------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------*/
#confirm                {position:absolute; top:0; left:0; height:100%; width:100%; background:rgba(0,0,0,.70); z-index:20; text-align:center; display:none;}
#confirm #massage       {position:relative; margin:110px auto 0; height:184px; width:292px; background:url(../images/confirm.png) center center no-repeat; margin-bottom:10px;}
#confirm #massage #text {padding:30px 10px 30px 10px; width:238px; margin:10px auto 0; border-radius:25px; border:2px dashed #FFF; background:#24253c;}
#no                     {background:url(../images/icons/but_red.png);}

/*-------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------- Анимация гремленов ----------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------*/
.gremlin {background:url(../images/items/g.png);}
.g1 {background-image:url(../images/items/gremlin/g1.png);}
.g2 {background-image:url(../images/items/gremlin/g2.png);}
.g3 {background-image:url(../images/items/gremlin/g3.png);}
.gm {}
.hm {background:url(../images/items/gremlin/hm.png);}
@-webkit-keyframes gm {
	from {margin-bottom:0;}
	25%  {margin-bottom:5px;}
	50%  {margin-bottom:0;}
	75%  {margin-bottom:5px;}
	to   {margin-bottom:0;}
}
@-moz-keyframes gm {
	from {margin-bottom:0;}
	25%  {margin-bottom:5px;}
	50%  {margin-bottom:0;}
	75%  {margin-bottom:5px;}
	to   {margin-bottom:0;}
}
@-ms-keyframes gm {
	from {margin-bottom:0;}
	25%  {margin-bottom:5px;}
	50%  {margin-bottom:0;}
	75%  {margin-bottom:5px;}
	to   {margin-bottom:0;}
}
@-o-keyframes gm {
	from {margin-bottom:0;}
	25%  {margin-bottom:5px;}
	50%  {margin-bottom:0;}
	75%  {margin-bottom:5px;}
	to   {margin-bottom:0;}
}
@keyframes gm {
	from {margin-bottom:0;}
	25%  {margin-bottom:5px;}
	50%  {margin-bottom:0;}
	75%  {margin-bottom:5px;}
	to   {margin-bottom:0;}
}
@-webkit-keyframes gmt {
	from {-webkit-transform:translate(0px, 45px);}
	to   {-webkit-transform:translate(0px, 0px);}
}
@-webkit-keyframes gmr {
	from {-webkit-transform:translate(-45px, 0px);}
	to   {-webkit-transform:translate(0px, 0px);}
}
@-webkit-keyframes gmb {
	from {-webkit-transform:translate(0px, -45px);}
	to   {-webkit-transform:translate(0px, 0px);}
}
@-webkit-keyframes gml {
	from {-webkit-transform:translate(45px, 0px);}
	to   {-webkit-transform:translate(0px, 0px);}
}


@-moz-keyframes gmt {
	from {-moz-transform:translate(0px, 45px);}
	to   {-moz-transform:translate(0px, 0px);}
}
@-moz-keyframes gmr {
	from {-moz-transform:translate(-45px, 0px);}
	to   {-moz-transform:translate(0px, 0px);}
}
@-moz-keyframes gmb {
	from {-moz-transform:translate(0px, -45px);}
	to   {-moz-transform:translate(0px, 0px);}
}
@-moz-keyframes gml {
	from {-moz-transform:translate(45px, 0px);}
	to   {-moz-transform:translate(0px, 0px);}
}


@-ms-keyframes gmt {
	from {-ms-transform:translate(0px, 45px);}
	to   {-ms-transform:translate(0px, 0px);}
}
@-ms-keyframes gmr {
	from {-ms-transform:translate(-45px, 0px);}
	to   {-ms-transform:translate(0px, 0px);}
}
@-ms-keyframes gmb {
	from {-ms-transform:translate(0px, -45px);}
	to   {-ms-transform:translate(0px, 0px);}
}
@-ms-keyframes gml {
	from {-ms-transform:translate(45px, 0px);}
	to   {-ms-transform:translate(0px, 0px);}
}


@-o-keyframes gmt {
	from {-o-transform:translate(0px, 45px);}
	to   {-o-transform:translate(0px, 0px);}
}
@-o-keyframes gmr {
	from {-o-transform:translate(-45px, 0px);}
	to   {-o-transform:translate(0px, 0px);}
}
@-o-keyframes gmb {
	from {-o-transform:translate(0px, -45px);}
	to   {-o-transform:translate(0px, 0px);}
}
@-o-keyframes gml {
	from {-o-transform:translate(45px, 0px);}
	to   {-o-transform:translate(0px, 0px);}
}


@keyframes gmt {
	from {transform:translate(0px, 45px);}
	to   {transform:translate(0px, 0px);}
}
@keyframes gmr {
	from {transform:translate(-45px, 0px);}
	to   {transform:translate(0px, 0px);}
}
@keyframes gmb {
	from {transform:translate(0px, -45px);}
	to   {transform:translate(0px, 0px);}
}
@keyframes gml {
	from {transform:translate(45px, 0px);}
	to   {transform:translate(0px, 0px);}
}

/*-------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------- Вспомагательные стили ---------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------*/
.yellow {/*background:#FF9;*/}
#help {position:absolute; color:#FFF; z-index:9999;}
#points {
	position:absolute;
	padding-top:12px;
	width:45px;
	text-align:center;
	display:none;
	z-index:30;
	color:#FFE901; text-shadow:0 0 1px #FFE901, 0 0 1px #FFE901, 1px 1px 2px #000, 2px 2px 4px #000;
	font-size:20px;
	-webkit-animation:points 0.5s linear;
	-moz-animation:points 0.5s linear;
	-ms-animation:points 0.5s linear;
	-o-animation:points 0.5s linear;
	animation:points 0.5s linear;
	z-index:-10;
}
@-webkit-keyframes points {
	from {opacity:1; -webkit-transform:scale(1); -webkit-transform:translateY(0px); z-index:30;}
	50%  {opacity:1; -webkit-transform:scale(1); -webkit-transform:translateY(-35px); z-index:30;}
	95%  {opacity:0; -webkit-transform:scale(1.5); -webkit-transform:translateY(-70px); z-index:30;}
	to   {opacity:0; -webkit-transform:scale(1.5); -webkit-transform:translateY(-70px); z-index:-10;}
}
@-moz-keyframes points {
	from {opacity:1; -moz-transform:scale(1); -moz-transform:translateY(0px); z-index:30;}
	50%  {opacity:1; -moz-transform:scale(1); -moz-transform:translateY(-35px); z-index:30;}
	95%  {opacity:0; -moz-transform:scale(1.5); -moz-transform:translateY(-70px); z-index:30;}
	to   {opacity:0; -moz-transform:scale(1.5); -moz-transform:translateY(-70px); z-index:-10;}
}
@-ms-keyframes points {
	from {opacity:1; -ms-transform:scale(1); -ms-transform:translateY(0px); z-index:30;}
	50%  {opacity:1; -ms-transform:scale(1); -ms-transform:translateY(-35px); z-index:30;}
	95%  {opacity:0; -ms-transform:scale(1.5); -ms-transform:translateY(-70px); z-index:30;}
	to   {opacity:0; -ms-transform:scale(1.5); -ms-transform:translateY(-70px); z-index:-10;}
}
@-o-keyframes points {
	from {opacity:1; -o-transform:scale(1); -o-transform:translateY(0px); z-index:30;}
	50%  {opacity:1; -o-transform:scale(1); -o-transform:translateY(-35px); z-index:30;}
	95%  {opacity:0; -o-transform:scale(1.5); -o-transform:translateY(-70px); z-index:30;}
	to   {opacity:0; -o-transform:scale(1.5); -o-transform:translateY(-70px); z-index:-10;}
}
@keyframes points {
	from {opacity:1; transform:scale(1); transform:translateY(0px); z-index:30;}
	50%  {opacity:1; transform:scale(1); transform:translateY(-35px); z-index:30;}
	95%  {opacity:0; transform:scale(1.5); transform:translateY(-70px); z-index:30;}
	to   {opacity:0; transform:scale(1.5); transform:translateY(-70px); z-index:-10;}
}
#t {
	position:absolute;
	padding-top:12px;
	width:45px;
	text-align:center;
	display:none;
	z-index:30;
	color:#FFF; text-shadow:0 0 1px #FFF, 0 0 1px #FFF, 1px 1px 2px #000, 2px 2px 4px #000;
	font-size:16px;
	-webkit-animation:points 0.5s linear;
	-moz-animation:points 0.5s linear;
	-ms-animation:points 0.5s linear;
	-o-animation:points 0.5s linear;
	animation:points 0.5s linear;
	z-index:-10;
	white-space:nowrap;
}
#t img {
	height:16px;
	width:16px;
}
#loader {
	position:absolute;
	bottom:0;
	left:0; right:0;
	height:30px;
	background:#000;
}
#loader span {
	position:absolute;
	left:0; top:0;
	height:100%;
	background:#FFF;
}