.ava1 {background: url(/img/avatar.png) -12px -6px;} .ava2 {background: url(/img/avatar.png) -70px -6px;} .ava3 {background: url(/img/avatar.png) -128px -6px;} .ava4 {background: url(/img/avatar.png) -186px -6px;} .ava5 {background: url(/img/avatar.png) -12px -64px;} .ava6 {background: url(/img/avatar.png) -70px -64px;} .ava7 {background: url(/img/avatar.png) -128px -64px;} .ava8 {background: url(/img/avatar.png) -186px -64px;} .ava9 {background: url(/img/avatar.png) -12px -122px;} .ava10 {background: url(/img/avatar.png) -70px -122px;} .ava11 {background: url(/img/avatar.png) -128px -122px;} .ava12 {background: url(/img/avatar.png) -186px -122px;} .ava13 {background: url(/img/avatar.png) -12px -180px;} .ava14 {background: url(/img/avatar.png) -70px -180px;} .ava15 {background: url(/img/avatar.png) -128px -180px;} .ava16 {background: url(/img/avatar.png) -186px -180px;} .ava17 {background: url(/img/avatar.png) -12px -238px;} .ava18 {background: url(/img/avatar.png) -70px -238px;} .ava19 {background: url(/img/avatar.png) -128px -238px;} .ava20 {background: url(/img/avatar.png) -187px -239px;} .avatar { width: 50px; height: 50px; display:flex; cursor: pointer; border-radius:30px; margin:10px; } .card { width:91px; height:137px; position:absolute; } .revers { background: url(/img/card.png) -7px -6px; } .diamonds { background: url(/img/card.png) 0px -151px; } .hearts { background: url(/img/card.png) 0px -295px; } .spades { background: url(/img/card.png) 0px -438px } .clubs { background: url(/img/card.png) 0px -581px; } .ace {background-position-x: -7px; } .king {background-position-x: -1182px;} .queen {background-position-x: -1084px;} .jack {background-position-x: -986px; } .m10 {background-position-x: -888px;} .m9 {background-position-x: -790px;} .m8 {background-position-x: -692px;} .m7 {background-position-x: -594px;} .m6 {background-position-x: -496px;} .m5 {background-position-x: -398px;} .m4 {background-position-x: -300px;} .m3 {background-position-x: -202px;} .m2 {background-position-x: -104px;} .rotate90 { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .rotate10 { transform: rotate(10deg); } .rotate20 { transform: rotate(20deg); } .rotate30 { transform: rotate(30deg); } .rotate-10 { transform: rotate(-10deg); } .rotate-20 { transform: rotate(-20deg); } #login { position:absolute; display:none; background-color:#7C643C; color: #FFA; top:84px; bottom:4px; right:4px; left:4px; overflow:auto; border: 6px solid; border-radius: 10px; opacity: 0.7; } #ulogin { width: 500px; background-color:#FFA; color: #7C643C; font-size: 30px; text-align:center; } #upwd { margin-top:30px; width: 500px; background-color:#FFA; color: #7C643C; font-size: 30px; text-align:center; } #ubtn, #ubtn-vn, #ubtn-ya, #ubtn-vk { margin-top:30px; width: 500px; background-color:#5E4624; color: #FFA; font-size: 26px; text-align:center; }body { margin : 0px; padding : 0px; } td { padding:5px; border-bottom:1px solid; } h1 { margin-top: 5px; } #top { position:fixed; background: url(/img/bgtop.png); top:0px; left:0px; right:0px; height:80px; z-index:9999; } #logo { display:block; position:absolute; background: url(/img/logo.png); top:0px; left:0px; height:80px; width:150px; } #head { display:block; position:absolute; top:0px; left:150px; right:300px; height:80px; overflow: hidden; font-size:20px; color:#FFA; text-align: center; } #topinfo { display:block; position:absolute; top:0px; width:300px; right:0px; height:80px; overflow: hidden; font-size:20px; color:#FFA; text-align:right; } #online { display:block; margin-top: 10px; margin-right: 15px; text-align:right; } #left { position:fixed; background-color:#5E4624; width:150px; top:80px; bottom:20px; left:0px; z-index:9999; overflow:auto; color:#FFF; } #right { position:fixed; background-color:#5E4624; width:150px; top:80px; bottom:20px; right:0px; z-index:9999; overflow:auto; color:#FFF; } #bottom { position:fixed; background-color:#5E4624; left:0px; right:0px; height:20px; bottom:0px; z-index:9999; text-align:center; color:#FFA; font-size:10px; } #main { position:fixed; background-color:#7C643C; color: #FFA; top:80px; bottom:0px; right:0px; left:0px; --bottom:20px; --right:150px; --left:150px; } #exit { display:none; cursor:pointer; margin-right:20px; margin-top:10px; } #mute { display:inline; cursor:pointer; margin-right:20px; margin-top:10px; } li{ margin-bottom:6px; } #mess-score { position:absolute; display: none; background:#7C643C; color: #FFA; top:250px; left:350px; width:400px; height:300px; overflow:hidden; border: 8px solid; border-radius: 10px; } #mess-modal { position:absolute; display: none; background:#7C643C; color: #FFA; top:250px; left:350px; width:400px; border: 8px solid; border-radius: 10px; text-align:center; padding:10px; } #mess-game { position:absolute; display: none; background:#7C643C; color: #FFA; top:250px; left:350px; width:400px; border: 8px solid; border-radius: 10px; text-align:center; } #game-exit { margin: 20px; border: 1px solid; cursor: pointer; font-size: 28px; } #game-message { margin: 20px; font-size: 22px; height: 150px; } #game-img { float:left; margin-right:10px; height:150px; } #game-tm { margin-left: 20px; margin-right: 20px; font-size: 24px; } #score-me-1, #score-me-2 { position:absolute; top:20px; left:20px; } #score-opp-1, #score-opp-2 { position:absolute; top:20px; right:20px; } #score-message { position:absolute; top:80px; left:120px; right:120px; text-align:center; font-weight: bold; font-size: 22px; }#myinfo, #userinfo { position:absolute; display: none; background:#7C643C; color: #FFA; top:84px; bottom:4px; right:4px; left:4px; overflow:auto; border: 6px solid; border-radius: 10px; } #avasel { width: 50px; height: 50px; top: 10px; left:10px; position: absolute; cursor:pointer; } #userava { width: 50px; height: 50px; top: 10px; left:10px; position: absolute; } #myNameBlock, #userNameBlock{ background:#7C643C; height: 50px; top: 15px; left:70px; right:100px; position: absolute; font-size:30px; } #myStatistics, #userStatistics{ background:#7C643C; margin-top:70px; margin-left:100px; margin-right:100px; font-size:26px; border:3px solid; margin-bottom:20px; } #myNameEditor { font-size:26px; background: #6D542E; color:#FFA; } #myPwdEditor { margin-left:30px; font-size:26px; background: #6D542E; color:#FFA; } #hidemyinfo, #hideuserinfo { background:#7C643C; position : absolute; display: block; top : 5px; right : 5px; border: 4px solid; border-radius: 28px; width:50px; height:50px; cursor:pointer; text-align: center; overflow: hidden; } .cross1 { position : absolute; display: block; top: 22px; left :-3px; transform: rotate(45deg); height:6px; width:56px; background: #FFA; } .cross2 { position : absolute; display: block; top: 22px; left :-3px; transform: rotate(-45deg); height:6px; width:56px; background: #FFA; } #menu { position:absolute; top:8px; left:8px; right:8px; font-size:26px; border:4px solid; height:60px; background-color:#5E4624; color:#FFA; display:none; border-radius:10px; overflow:hidden; } .menuitem { display: inline-flex; cursor:pointer; margin-left:20px; margin-right:20px; margin-top:12px; } #search-table{display:none;} #wait-table{display:none;} #rating{display:none;} #rule{display:none;} .menuact { position:absolute; top:80px; left:8px; right:8px; bottom:8px; font-size:20px; border:4px solid; background-color:#5E4624; color:#FFA; border-radius:10px; overflow:auto; } .gametable { margin:10px; border:2px solid; border-radius:10px; display:inline-flex; width:290px; height:80px; }#uleft { background: #6D542E; width: 170px; position: absolute; left: 0px; top: 100px; bottom: 100px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; overflow:hidden; } #avaleft { width: 50px; height: 50px; top: 45px; left: 5px; position: absolute; } #nameleft { width: 135px; height: 50px; top: 45px; left: 65px; position: absolute; overflow: hidden; font-size:20px; } #uright { background: #6D542E; width:170px; position:absolute; right:0px; top:100px; bottom:100px; border-top-left-radius : 10px; border-bottom-left-radius : 10px; overflow:hidden; } #avaright { width: 50px; height: 50px; bottom:40px; right:10px; position: absolute; } #nameright { width: 145px; height: 50px; bottom:35px; right:70px; position: absolute; overflow: hidden; text-align: right; font-size:20px; } #utop { background: #6D542E; height:170px; position:absolute; right:300px; top:0px; left:300px; border-bottom-left-radius : 10px; border-bottom-right-radius : 10px; overflow:hidden; text-align:center; align-content: center; } #avatop { width: 50px; height: 50px; top: 10px; right:240px; position: absolute; } #nametop { width: 215px; height: 50px; top: 15px; right: 15px; position: absolute; overflow: hidden; font-size:20px; } #ubottom { background: #6D542E; height:170px; position:absolute; right:300px; bottom:0px; left:300px; border-top-left-radius : 10px; border-top-right-radius : 10px; overflow:hidden; text-align:center; align-content: center; } #ava { width: 51px; height: 50px; bottom: 120px; left: 240px; position: absolute; cursor: pointer; } .kozelchiken { color: #FCA; } #lamp,#lampleft,#lamptop,#lampright { display:none; } .movelamp { border-radius: 10px; background: #0F0; display: block; position:absolute; width:20px; height:20px; top:-5px; right:-5px; } #tablo { width: 284px; height: 86px; bottom: 4px; left: 5px; position: absolute; border: 2px solid; border-radius: 10px; display: none; } #tablo-left { width: 86px; height: 86px; top: 0px; left: 0px; position: absolute; border-right: 2px solid; } #tablo-message { text-align:center; width: 190px; height: 70px; top: 5px; left: 92px; position: absolute; } #tablo-timer { text-align:center; width: 190px; height: 10px; bottom: 10px; left: 92px; position: absolute; border-top:1px solid; } #tablo-score{ text-align:center; margin-top:6px; font-size:28px; border-bottom: 2px solid; } #tablo-points { text-align:center; margin-top:6px; font-size:28px; }