HTML.playfield { height: 100%; }
BODY.playfield { padding: 0; margin: 0; box-sizing: border-box; height: 100% }

#play-field { box-sizing: border-box; height: 100%; background: 50% 50% no-repeat; background-size: cover; padding: 4px; font-size: 0; line-height: 0; font-weight: normal }

/***************************************************************/
/*Фон игрового поля актуальный */
/***************************************************************/
/*#play-field.business { background-image: url('../business/images/play-field-ny.jpg') }*/
/*#play-field.nature { background-image: url('../nature/images/play-field-ny.jpg') }*/
#play-field.business { background-image: url('../business/images/play-field.jpg') }
#play-field.nature { background-image: url('../nature/images/play-field.jpg') }

/***************************************************************/
/*Прелоадер*/
/***************************************************************/
#play-field-preloader {
    display: none;
    width: 230px;
    height: 176px;
    /*background: #e5c69a;*/
    border-radius: 10px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

#play-field-preloader DIV {
    width: 100px;
    height: 90px;
    background: url('images/preloader1.gif') 0 0 no-repeat;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

/***************************************************************/
/*Смайлики для чата*/
/***************************************************************/
#play-chat .room_smiles {
    display: none;
    max-width: 455px;
    max-height: 455px;
    position: absolute;
    left: 10px;
    top: 35px;
    z-index: 1;
}

#play-chat .room_smiles > DIV {
    width: 25%;
    height: 25%;
    float: left;
    position: relative;
}

#play-chat .room_smiles > DIV A {
    width: 97%;
    height: 97%;
    background: url('images/smiles/smiles_bg_normal.png') 0 0 no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
}

#play-chat .room_smiles > DIV A:hover { background-image: url('images/smiles/smiles_bg_hover.png') }

#play-chat .room_smiles > DIV A DIV {
    width: 90%;
    height: 90%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

#play-chat .room_smiles .smile_switchers {
    display: block;
    max-width: 455px;
    max-height: 38px;
    position: absolute;
    left: 0;
    top: -38px;
}

#play-chat .room_smiles .smile_switchers .no_vip {
    display: block;
    max-width: 338px;
    max-height: 38px;
    background: url('images/smiles/no_vip.png') 0 0 no-repeat;
    background-size: cover;
    position: absolute;
    left: 1px;
    top: 0;
}

#play-chat .room_smiles .smile_switchers > DIV {
    width: 25%;
    height: 100%;
    float: left;
    position: relative;
}

#play-chat .room_smiles .smile_switchers A {
    width: 97%;
    height: 100%;
    background: 0 0 no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    margin: auto;
}

#play-chat .room_smiles .smile_switchers A DIV {
    width: 100%;
    height: 100%;
    background: 0 0 no-repeat;
    background-size: cover;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-in-out 0s;
    -moz-transition: opacity 0.3s ease-in-out 0s;
    -ms-transition: opacity 0.3s ease-in-out 0s;
    -o-transition: opacity 0.3s ease-in-out 0s;
    transition: opacity 0.3s ease-in-out 0s;
}
#play-chat .room_smiles .smile_switchers A:hover DIV { opacity: 1 }
#play-chat .room_smiles .smile_switchers A.selected DIV { display: none }

#play-chat .room_smiles .smile_switchers .list1 { background-image: url('images/smiles/list1_normal.png'); }
#play-chat .room_smiles .smile_switchers .list1 DIV { background-image: url('images/smiles/list1_hover.png') }
#play-chat .room_smiles .smile_switchers .list1.selected { background-image: url('images/smiles/list1_active.png') }
#play-chat .room_smiles .smile_switchers .list2 { background-image: url('images/smiles/list2_normal.png'); }
#play-chat .room_smiles .smile_switchers .list2 DIV { background-image: url('images/smiles/list2_hover.png') }
#play-chat .room_smiles .smile_switchers .list2.selected { background-image: url('images/smiles/list2_active.png') }
#play-chat .room_smiles .smile_switchers .list3 { background-image: url('images/smiles/list3_normal.png'); }
#play-chat .room_smiles .smile_switchers .list3 DIV { background-image: url('images/smiles/list3_hover.png') }
#play-chat .room_smiles .smile_switchers .list3.selected { background-image: url('images/smiles/list3_active.png') }
#play-chat .room_smiles .smile_switchers .list4 { background-image: url('images/smiles/list4_normal.png'); }
#play-chat .room_smiles .smile_switchers .list4 DIV { background-image: url('images/smiles/list4_hover.png') }
#play-chat .room_smiles .smile_switchers .list4.selected { background-image: url('images/smiles/list4_active.png') }

/*1 вкладка*/
#play-chat .chat_screen .sm_sm01 {max-width:110px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_sm02 {max-width:93px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_sm03 {max-width:109px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_sm04 {max-width:66px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_sm05 {max-width:79px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_sm06 {max-width:93px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_sm07 {max-width:101px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_sm08 {max-width:65px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_sm09 {max-width:78px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_sm10 {max-width:71px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_sm11 {max-width:71px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_sm12 {max-width:90px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_sm13 {max-width:108px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_sm14 {max-width:97px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_sm15 {max-width:96px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_sm16 {max-width:108px; max-height:100px; vertical-align: bottom}
/*2 вкладка*/
#play-chat .chat_screen .sm_mini_hello {max-width:94px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_mini_ok {max-width:95px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_mini_ha {max-width:95px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_mini_love {max-width:91px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_np_privet {max-width:98px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_np_da {max-width:100px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_np_shock {max-width:81px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_np_neserezno {max-width:138px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_np_buket {max-width:148px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_np_haha {max-width:145px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_np_no {max-width:100px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_np_gde {max-width:150px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_np_nu {max-width:100px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_np_nanule {max-width:100px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_np_umnik {max-width:150px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_np_chao {max-width:99px; max-height:100px; vertical-align: bottom}
/*3 вкладка*/
#play-chat .chat_screen .sm_k_luck {max-width:130px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_k_spsb {max-width:127px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_k_star {max-width:87px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_k_kiss {max-width:90px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_k_money {max-width:101px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_k_yes {max-width:146px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_k_shock {max-width:101px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_k_vopros {max-width:108px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_k_vse {max-width:98px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_k_ploho {max-width:110px; max-height:99px; vertical-align: bottom}
#play-chat .chat_screen .sm_k_fp {max-width:124px; max-height:98px; vertical-align: bottom}
#play-chat .chat_screen .sm_k_grust {max-width:124px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_k_pofig {max-width:134px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_k_time {max-width:100px; max-height:100px; vertical-align: bottom}
#play-chat .chat_screen .sm_k_prosti {max-width:129px; max-height:99px; vertical-align: bottom}
#play-chat .chat_screen .sm_k_uydi {max-width:150px; max-height:100px; vertical-align: bottom}
/*4 вкладка*/
#play-chat .chat_screen .sm_privet {max-width:100px; max-height:66px; vertical-align: bottom}
#play-chat .chat_screen .sm_salut {max-width:98px; max-height:62px; vertical-align: bottom}
#play-chat .chat_screen .sm_go {max-width:90px; max-height:89px; vertical-align: bottom}
#play-chat .chat_screen .sm_norm {max-width:90px; max-height:89px; vertical-align: bottom}
#play-chat .chat_screen .sm_obmen {max-width:98px; max-height:87px; vertical-align: bottom}
#play-chat .chat_screen .sm_ok {max-width:95px; max-height:81px; vertical-align: bottom}
#play-chat .chat_screen .sm_otlichno {max-width:98px; max-height:95px; vertical-align: bottom}
#play-chat .chat_screen .sm_krasota {max-width:92px; max-height:94px; vertical-align: bottom}
#play-chat .chat_screen .sm_nu_vot {max-width:100px; max-height:80px; vertical-align: bottom}
#play-chat .chat_screen .sm_AhAha {max-width:97px; max-height:65px; vertical-align: bottom}
#play-chat .chat_screen .sm_spasibo {max-width:100px; max-height:71px; vertical-align: bottom}
#play-chat .chat_screen .sm_poka {max-width:95px; max-height:78px; vertical-align: bottom}
#play-chat .chat_screen .sm_nichose {max-width:81px; max-height:90px; vertical-align: bottom}
#play-chat .chat_screen .sm_grust {max-width:97px; max-height:84px; vertical-align: bottom}
#play-chat .chat_screen .sm_love {max-width:101px; max-height:92px; vertical-align: bottom}
#play-chat .chat_screen .sm_zloy {max-width:94px; max-height:98px; vertical-align: bottom}

/***************************************************************/
/*Анимация*/
/***************************************************************/

.coin {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
}

.invisible {
    visibility:hidden;
    pointer-events: none !important;
}

.spark-cloud.invisible {
    display: none !important;
    pointer-events: none !important;
}

#chips .player1-cloud.invisible {
    display: none !important;
    pointer-events: none !important;
}
#chips .player2-cloud.invisible {
    display: none !important;
    pointer-events: none !important;
}
#chips .player3-cloud.invisible {
    display: none !important;
    pointer-events: none !important;
}
#chips .player4-cloud.invisible {
    display: none !important;
    pointer-events: none !important;
}
#chips .player5-cloud.invisible {
    display: none !important;
    pointer-events: none !important;
}

.spark {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    max-width: 70px;
    max-height: 70px;
    display: block !important;
    pointer-events: none !important;
}

.spark-cloud {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    max-width: 70px;
    max-height: 70px;
    display: block !important;
    pointer-events: none !important;
}

#chips .cloud {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    max-width: 70px;
    max-height: 70px;
    width: 70px;
    height: 70px;
    display: block !important;
    pointer-events: none !important;
}

#chips .player1-cloud {
    background: radial-gradient(circle, rgba(200, 50, 50, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
    background: -webkit-radial-gradient(rgba(200, 50, 50, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
    background: -o-radial-gradient(rgba(200, 50, 50, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
    background: -moz-radial-gradient(rgba(200, 50, 50, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
}

#chips .player2-cloud {
    background: radial-gradient(circle, rgba(50, 200, 50, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
    background: -webkit-radial-gradient(rgba(50, 200, 50, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
    background: -o-radial-gradient(rgba(50, 200, 50, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
    background: -moz-radial-gradient(rgba(50, 200, 50, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
}

#chips .player3-cloud {
    background: radial-gradient(circle, rgba(148, 11, 202, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
    background: -webkit-radial-gradient(rgba(148, 11, 202, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
    background: -o-radial-gradient(rgba(148, 11, 202, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
    background: -moz-radial-gradient(rgba(148, 11, 202, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
}

#chips .player4-cloud {
    background: radial-gradient(circle, rgba(255, 243, 0, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
    background: -webkit-radial-gradient(rgba(255, 243, 0, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
    background: -o-radial-gradient(rgba(255, 243, 0, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
    background: -moz-radial-gradient(rgba(255, 243, 0, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
}

#chips .player5-cloud {
    background: radial-gradient(circle, rgba(53, 111, 229, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
    background: -webkit-radial-gradient(rgba(53, 111, 229, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
    background: -o-radial-gradient(rgba(53, 111, 229, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
    background: -moz-radial-gradient(rgba(53, 111, 229, 1), rgba(255, 255, 255, 0), rgba(0,0,0,0));
}


/*Для сервера. Для макета - закомментировать*/
#play-field { display: none }
#play-desc .mark { display: none }
#play-desc .holder { display: none }
#play-desc .lock { display: none }
#play-desc .upgrade { display: none }
#play-table .social { display: none }

/*Контекстное меню игрока - для макета*/
#pop-up { display: block }
#pop-up .user_clan { display: none }
#pop-up .user_gifts { display: none }
#pop-up .user_mail { display: none }

#pop-up_inside { display: block }
#pop-up_inside .user_pet { display: none }

#pop-up_inside .user_pet .icons .tip { display: none }
#pop-up_inside .user_pet .options .satiety .unfed { display: none }
#pop-up_inside .user_pet .options .satiety A.feed { display: none }

/*Контекстное меню игрока - для сервера*/
#pop-up { display: none }
#pop-up .user_profile { display: none }
#pop-up .user_clan { display: none }
#pop-up .user_gifts { display: none }
#pop-up .user_mail { display: none }
#pop-up .tabs_context .clan { display: none !important;}
#pop-up .tabs_context .mail { display: none !important;}

#pop-up_inside { display: none }
#pop-up_inside .user_effects { display: none }
#pop-up_inside .user_pet { display: none }