﻿
#top_container {
    margin: 0 auto;
    overflow: hidden;  
    margin-bottom: 20px;	
}

#right {
display: none;
}

#statistic {
    max-height: 80px; margin-bottom: 10px; overflow-y: visible;display: block;overflow-x: hidden;
}

#statistic a {
background: #ccc;
font-size: 14px;
line-height: 18px;
display: inline-block;
font-weight: normal;
padding: 2px 5px;
margin: 2px;
border-radius: 5px;
text-decoration: none;
}

#statistic a:hover {
color: #fff;
background: #e34449;
}

@media only screen and (min-width: 570px) and (max-width: 700px) {
	#right {
	    display: block;
	    float: right;
	    position: absolute;
	    right: 0;
	    width: 120px;
	    height: 800px;
	}
}

@media only screen and (min-width: 800px) {
	#right {
	    display: block;
	    float: right;
	    position: absolute;
	    right: 0;
	    width: 120px;
	    height: 800px;
	}
}

  #left {
      left: 0px;
  }
  #container {
width: 813px;
margin: 0 auto;
  }

#regis{
margin-left:-200px !important; top: 50% !important; margin-top: -200px !important;
}

.lightfaceContent {
    width: 600px !important;
}

.wind {
    margin-left: -300px !important;
left: 50% !important;
}

.pole{width:753px;}


@media only screen and (max-width: 980px) {

#left {
display:none;
}
}

@media only screen and (max-width: 1100px) {

	#left {
	display:none;
	}

	.top-menu {
	box-sizing: border-box;
	}

	html, body, #container {
	    width: 680px !important;
		overflow-x:hidden;
	}

	.pole {
	width: 670px !important;
	}

	  #container {
	    margin: 0;
	  }

	.pole {
	    padding: 0 !important;
	}

	#main td{width:40px !important;height:40px !important;}
}

@media only screen and (max-width: 700px) {

html, body, #container {
    width: 440px !important;
	overflow-x:hidden;
}


.pole {
width: 430px !important;
}

#main td{width:40px !important;height:40px !important;}
	
.lightfaceContent {
    width: 300px !important;
}

#regis{
margin-left:0px !important; top: 10px !important; margin-top: 0px !important;
}

#regis .lightfaceContent {
   width: 200px;
}

.wind {
margin-left: 0 !important;
    left: 10px !important;
}

  #container {
    margin: 0;
  }

.social-likes {
    display: none !important;
}

.left, .right {
    position: absolute;
    z-index: 0;
}

.left:hover, .right:hover {
     z-index: 2;
}

#main {
    position: relative;
    z-index: 1;
}

.right {
    left: 340px;
}

.pole {
 position:relative;   padding: 0 !important;
}


#left {
display:none;
}

#top_banner {
	display: none;
}

}

@media only screen and (max-width: 440px) {
    #container {
        width: 100% !important;
        overflow-x:hidden;
        float: left;
        padding: 5px;
        position: relative;
        max-width: 380px;
        box-sizing: border-box;
    }
.lightfaceMessageBox {
    max-height: 400px;
}
.pole {
width: 340px !important;
height: 500px !important;
}


.left, .right {
    position: absolute;
    z-index: 0;
}

.left:hover, .right:hover {
     z-index: 2;
}


.left {
    left: 5px;
    top: 0;
}

.right {
    top:0;
    right: 5px;
    left: auto;
}
body, html {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
}
.buttons {
    width: 160px;
    float: left;
    margin: 5px !important;
}
.points-left, .points-right {
    width: 80px !important;
}
    #next {
        width: 120px !important;
    }

    #main {
        width: 298px;
        margin: 0 auto !important;
        float: none !important;
        position: relative;
        z-index: 1;
    }

    #main td{width:30px !important;height:30px !important;}
}

#area td, #area img, #next td, #next img, button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
}

#next img {
    position: relative;
}

@font-face {
    font-family: 'Fortuna Gothic FlorishC';
    src: url('fortuna_gothic_florishc.eot');
    src: url('fortuna_gothic_florishc.eot?#iefix') format('embedded-opentype'),
         url('fortuna_gothic_florishc.woff') format('woff'),
         url('fortuna_gothic_florishc.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

    body{background:#f5f5f5;color:#303030;margin:0px;padding:10px;font-family:Verdana,sans-serif;font-size:14px;line-height:20px}h1{font:24px Arial;width:100%;margin:0px;padding:0px;color:#6d84b4; font-weight:700; margin-bottom: 10px; line-height: 32px;}p{margin:0px}.opac{visibility:visible;opacity:0.4}a{color:#777}table a{color:#777}#main table{border-collapse:collapse;display:block;position:relative;background:#777}#main td{border:3px solid #777;text-align:center}#points{color:blue}

.pole{position:relative;overflow:hidden;background:#000;color:#FFF;height:585px;padding:0px 25px;border:5px #6d84b4 solid; border-radius: 10px;}
#main td img{ position: relative; width: 80% !important; height: 80% !important; top: 5px;}
#main td{background:#EEE;border:1px solid #777;width:50px;height:50px;background:url(bg.gif) no-repeat}#next{width:160px;}#next td{background:#ccc; border-top:2px #eee solid; border-right:2px #eee solid; border-left:2px #aaa solid; border-bottom:2px #aaa solid;height:30px !important;width:30px !important}#main{float:left;margin:10px 20px}.left,.right{float:left}.korol{background:url(korol3.png) no-repeat left bottom;width:112px;height:189px}.voin{background:url(voin3.png) no-repeat left bottom;width:108px;height:448px}.bgg1,.bgg2{width:108px}.bgg1{background:url(bgg.png) repeat-y 10px 0px;height:260px}.bgg2{background:url(bgg.png) repeat-y 25px 0px;height:1px}.bottom1,.bottom2{background:url(down.png);width:93px;height:25px;margin-top:-1px;margin-left:1px}.bottom2{margin-left:16px}.results{margin:0px;padding:0px}.results tr th{background:#437AC4;color:#FFF;font:14px Arial}.results tr:nth-child(1) td{font-weight:700}.results td{font:14px Arial;text-align:center}.wind{z-index:9001 !important;visibility:visible !important;opacity:1 !important;top:10px !important;display:none;color:#000 !important}

.korol.gameover {
	background-image: url('gameover5.png');
	position:relative;
	left: -6px;
}
    .points-left,.points-right{
        width:100px;
        height:25px;
        font: 12pt bold;
        font-family: 'Lucida Console', Impact;
        color:#32cd32;
        background: #000;
        border:2px #aaa solid;
        line-height:160%;
        text-align:right;
        padding-right:5px;
    }

    .name-left,.name-right{
        width:130px;
        height:25px;
        text-align:center;
    }


.top-menu {
    margin: 0 -10px;
    margin-bottom: 10px;
background-color: #6d84b4;
color: #fff;
padding: 10px 20px; font-weight: bold;
}

.top-menu .item {
color: #ccc;
margin-right: 20px;
}

.top-menu .active {
 color: #FFF;
 text-shadow: 1px 1px 20px
}

        .points-right {
            float:right;
        }
        .name-left,.name-right{
            position:absolute;
        color: #ffff99;
        background: -webkit-gradient(linear, left top, left bottom, from(#ffff99), to(#D17000));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
            margin-top:475px;height:45px;overflow:hidden;font-size:16px !important;font-family:'Fortuna Gothic FlorishC';}
        .name-left{margin-left:-15px}

        .lightface{margin:0;padding:0;border-collapse:collapse;position:fixed;top:-9000px;left:-9000px}#results .centerCenter td{padding:5px !important;}.lightface td{padding:0;margin:0;background-color:transparent;vertical-align:top;font-family:'Verdana';font-size:14px}.lightface .centerLeft,.lightface .centerRight{width:10px;height:auto;background-image:url(b.png);background-repeat:repeat-y}.lightface .topLeft,.lightface .topRight,.lightface .bottomLeft,.lightface .bottomRight{width:10px;height:10px;background-repeat:no-repeat}.lightface .topLeft{background-image:url(tl.png);background-position:top left}.lightface .topRight{background-image:url(tr.png);background-position:top right}.lightface .bottomLeft{background-image:url(bl.png);background-position:bottom left}.lightface .bottomRight{background-image:url(br.png);background-position:bottom right}.lightface .topCenter,.lightface .bottomCenter{width:auto;height:10px;background-image:url(b.png);background-repeat:repeat-x}.lightface .lightfaceContent{background-color:#fff;border:1px solid #555;position:relative}.lightface .loading{display:block;margin:10px auto}.lightface .lightfaceContent .lightfaceTitle{font-size:14px;color:#fff;background-color:#6d84b4;border:1px solid #3b5998;font-weight:bold;margin:-1px;margin-bottom:0;padding:5px 10px}.lightface .lightfaceContent .lightfaceDraggable{cursor:move}.lightface .lightfaceContent .lightfaceMessage{overflow:auto;margin:0;position:relative;padding:5px 10px;border:1px solid #fff}.lightface .lightfaceContent .lightfaceMessage h3,.lightface .lightfaceContent .lightfaceMessage h4,.lightface .lightfaceContent .lightfaceMessage h5,.lightface .lightfaceContent .lightfaceMessage h6{margin-top:6px}.lightface .lightfaceContent .lightfaceFooter{background-color:#f2f2f2;border-top:1px solid #ccc;padding:6px 10px;text-align:right}.lightface .lightfaceFooter label{font-size:13px;border-style:solid;background-image:url(button.png);cursor:pointer;font-weight:bold;padding:2px 6px 2px 6px;text-align:center;vertical-align:top;white-space:nowrap;border-width:1px;margin-left:3px;background-position:0 0;border-color:#999;line-height:normal !important;display:inline-block}.lightface .lightfaceFooter label input{background:none;border:0 !important;cursor:pointer;font-family:'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;font-weight:bold;margin:0;padding:1px 0 2px;white-space:nowrap;text-align:center;color:#fff;font-size:13px;border:2px outset buttonface;text-indent:0;text-shadow:none;display:inline-block;color:#444;font-size:13px}* html .lightface .lightfaceFooter label input{border:0}.lightface .lightfaceFooter label.lightfaceblue{border-color:#29447E #29447E #1A356E;background-position:0 -48px}.lightface .lightfaceFooter label.lightfaceblue.lightfacefocusblue{background-color:#5b74a8;background-image:none}.lightface .lightfaceFooter label.lightfacegreen{border-color:#3B6E22 #3B6E22 #2C5115;background-position:0 -96px}.lightface .lightfaceFooter label.lightfacegreen.lightfacefocusgreen{background-color:#69A74E;background-image:none}.lightface .lightfaceFooter label.lightfaceblue input,.lightface .lightfaceFooter label.lightfacegreen input{color:#fff}.lightface .hiddenButton{visibility:hidden}.lightface .lightfaceOverlay{position:absolute;left:0;top:0;bottom:0;right:0;background:url(fbloader.gif) center center no-repeat #fff}.lightface .lightfaceMessageBox{overflow:auto;padding:10px 10px;min-height:20px;position:relative}.lightface .lightFaceMessageBoxImage{overflow:hidden;padding:0;background:url(fbloader.gif) center center no-repeat #fff}.lightface .lightFaceMessageBoxImage img{display:block}.buttons{margin:20px}button{cursor:pointer;margin:10px;text-decoration:none;font:bold 25px 'Trebuchet MS',Arial, Helvetica;display:inline-block;text-align:center;color:#fff;border:1px solid #9c9c9c;border:1px solid rgba(0, 0, 0, 0.3);text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 1px rgba(0,0,0,0.4);-moz-box-shadow:0 0 1px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 1px rgba(0,0,0,0.4)}button,.button span{-moz-border-radius:6px;border-radius:6px}button span{border-top:1px solid #fff;border-top:1px solid rgba(255, 255, 255, 0.5);display:block;padding:12px 50px;background-image:-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));background-image:-moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%), -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);-moz-background-size:3px 3px;-webkit-background-size:3px 3px}button:hover{box-shadow:0 0 1px rgba(0,0,0,0.4);-moz-box-shadow:0 0 1px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 1px rgba(0,0,0,0.4)}button:active{position:relative;top:1px}.button-brown{background:#8f3714;background:-webkit-gradient(linear, left top, left bottom, from(#bf6f50), to(#8f3714) );background:-moz-linear-gradient(-90deg, #bf6f50, #8f3714);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#bf6f50', EndColorStr='#8f3714')}.button-brown:hover{background:#bf6f50;background:-webkit-gradient(linear, left top, left bottom, from(#8f3714), to(#bf6f50) );background:-moz-linear-gradient(-90deg, #8f3714, #bf6f50);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#8f3714', EndColorStr='#bf6f50')}.button-brown:active{background:#8f3714}.button-orange{background:#f09c15;background:-webkit-gradient(linear, left top, left bottom, from(#f8c939), to(#f09c15) );background:-moz-linear-gradient(-90deg, #f8c939, #f09c15);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f8c939', EndColorStr='#f09c15')}.button-orange:hover{background:#f8c939;background:-webkit-gradient(linear, left top, left bottom, from(#f09c15), to(#f8c939) );background:-moz-linear-gradient(-90deg, #f09c15, #f8c939);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f09c15', EndColorStr='#f8c939')}.button-orange:active{background:#f09c15}.button-purple{background:#6F50E7;background:-webkit-gradient(linear, left top, left bottom, from(#B8A9F3), to(#6F50E7) );background:-moz-linear-gradient(-90deg, #B8A9F3, #6F50E7);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B8A9F3', EndColorStr='#6F50E7')}.button-purple:hover{background:#B8A9F3;background:-webkit-gradient(linear, left top, left bottom, from(#6F50E7), to(#B8A9F3) );background:-moz-linear-gradient(-90deg, #6F50E7, #B8A9F3);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#6F50E7', EndColorStr='#B8A9F3')}.button-purple:active{background:#6F50E7}.button-green{background:#428739;background:-webkit-gradient(linear, left top, left bottom, from(#c8dd95), to(#428739) );background:-moz-linear-gradient(-90deg, #c8dd95, #428739);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c8dd95', EndColorStr='#428739')}.button-green:hover{background:#c8dd95;background:-webkit-gradient(linear, left top, left bottom, from(#428739), to(#c8dd95) );background:-moz-linear-gradient(-90deg, #428739, #c8dd95);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#428739', EndColorStr='#c8dd95')}.button-green:active{background:#428739}.button-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')}.button-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb')}.button-blue:active{background:#4477a1}.button-red{background:#D82741;background:-webkit-gradient(linear, left top, left bottom, from(#E84B6E), to(#D82741) );background:-moz-linear-gradient(-90deg, #E84B6E, #D82741);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E84B6E', EndColorStr='#D82741')}.button-red:hover{background:#E84B6E;background:-webkit-gradient(linear, left top, left bottom, from(#D82741), to(#E84B6E) );background:-moz-linear-gradient(-90deg, #D82741, #E84B6E);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D82741', EndColorStr='#E84B6E')}
        
        
@keyframes jump {
  0% {
    transform: scale(1);
    top: 5px;
  }
  10% {
    transform: scale(1);
    top: 6px;
  }
  30% {
    transform: scaleY(1.05) scaleX(0.95);
    top: 9px;
  }
  40% {
    transform: scaleY(0.85) scaleX(1.15);
    top: 11px;
  }
  50% {
    transform: scaleY(0.9) scaleX(1.1);
    top: 9px;
  }
  60% {
    transform: scaleY(1.05) scaleX(0.95);
    top: 7px;
  }
  70% {
    transform: scale(1);
    top: 5px;
  }
  80% {
    transform: scale(1);
    top: 3px;
  }
  90% {
    transform: scale(1);
    top: 2px;
  }
  100% {
    transform: scale(1);
    top: 3px;
  }
}

.jump {
    animation: jump 1s ease-out infinite;
}
        
   