/*-------------Окно "Войти"--------------------------*/
#lkblack{ display:none; position: fixed; width:100%; height:100%; background-color: rgba(0, 0, 0, 0.5); top:0; left:0; cursor: pointer; z-index:10001; text-align:left;}
#lkformbox {display:none; position: absolute;  background-color: rgba(0, 0, 0, 0.25); border-radius:0px; padding:15px 3vw; max-width:280px; width:90%;  top:15%; margin:0 auto; z-index:10002; text-align:left;}
#lkformbox  p {color:black;  margin:13px 0 2px; padding:2px 5px; text-align:center; color:white;}
.infoleft, .infocenter, .inforight {display: block; text-align:center;}
#elser .socseti, .socseti {display: inline-block; vertical-align: middle; padding:0px; margin:0 10px 0 0; opacity: 0.8; filter: alpha (opacity: 80);}
#elser .socseti img, .socseti img {border-radius:3px; width:95px;}
#elser .socseti:hover, .socseti:hover {opacity: 1; filter: alpha (opacity: 100);}

.btnin {color:white; display:inline-block; width:25%; text-decoration:none; text-align:center; padding:15px 5px; box-sizing:border-box; font-size:18px; font-weight:bold;}
.btnin:hover {color:white;}
.vkin {background:rgba(77,113,152,0.9)} .vkin:hover {background:rgba(77,113,152,1)}
.fbin {background:rgba(59,89,152,0.9)} .fbin:hover {background:rgba(59,89,152,1)}
.yain {background:rgba(255,255,255,0.9); color:rgba(255,0,0,1);} .yain:hover {background:rgba(255,255,255,1); color:rgba(255,0,0,1);} 
.goin {background:rgba(221,75,57,0.9)} .goin:hover {background:rgba(221,75,57,1)}

#lkformbox input.lkinput{outline:none; padding:7px 6px; margin:0px 0 0; width:100%; border:none; box-sizing: border-box; box-shadow:inset 0 1px 0px silver;}
#lkformbox input[type="submit"] {width:100%; color:white; background:steelblue; margin:0px 0 10px; padding:6px 6px; border:none; cursor: pointer; text-align:center;}
#elser a.moremore, a.moremore {padding:2px 7px; color:gray; text-decoration:none; display: inline-block; vertical-align: middle; border-radius:8px; background:#eaeaea;  }
.policylogin {color:whitesmoke;}
@media screen and (max-width: 450px) {
#elser .socseti, .socseti {opacity: 1; filter: alpha (opacity: 100);}
#elser .socseti img, .socseti img {width:80px;}
}

#ui-datepicker-div {background:white; box-shadow:0 0 3px silver;}

/*------------Левое меню в личном кабинете--------------------------*/
.big-avatar {position:relative; min-height:30px;}
.big-avatar a {display:none;  background:rgba(0, 0, 0, 0.7); padding:10px 5px; position:absolute; width:210px; text-align:center; bottom:0; right:0; z-index:2; text-decoration:none; font-size:14px; color:white;}
.big-avatar:hover a {display:block;}
.big-avatar:hover a:hover {background:rgba(0, 0, 0, 0.9);  -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease; -ms-transition: All 0.3s ease; transition: All 0.3s ease;}

/*------------Левое меню в личном кабинете--------------------------*/
br.mobbr{display:none;}
.soca {display: inline-block; font-size:12px; margin:3px;}
@media screen and (max-width: 450px) {br.mobbr {display:inline;}}

/*------------Баннер со слайдером в левом меню РЕГИСТРАЦИЯ И PRO--------------------------*/
#left .activateprobanner, #sidebars .activateprobanner{ border:5px solid steelblue; owerflow:hidden; padding:0; text-align:center; margin:60px 0 20px;}
#left .activateprobanner h4 {padding:8px 3px; margin:0px; background:whitesmoke;}
#slider1_container {position: relative; top: 0px; left: 0px; width: 210px; height: 210px;}
#slider1_container div {cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 210px; height: 210px;}
#slider1_container div div {position: relative;}
#slider1_container div div img {width:210px;}
#slider1_container div div b { position: absolute;  bottom:10px; left:0; background:rgba(0, 0, 0, 0.5); color:white; font-size:12px; padding:5px; margin:5px; width:190px; border-radius:2px; z-index:10; cursor: text;}
#slider1_container:hover div div b {background:rgba(0, 0, 0, 0.55);  -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease;}
#left .activateforbanner, .activateprobanner {color:white; background:steelblue; padding:9px 14px; border-radius:4px; text-decoration:none; display:inline-block; margin:17px 0; line-height:100%; font-size:17px;}
#left .activateforbanner:hover {color:white; background:darkred;}
@media screen and (max-width: 800px) {#left .activateprobanner {display:none;}}

/*-------------ТАБЛИЦА В ДИВАХ--------------------------*/
.table{display:table;   width:80%; border-collapse: collapse;}
.row{display:table-row;}
.col{ display:table-cell; border: 1px solid black; padding: 3px;}
.c50{width:50%;}
.c25{ width:25%;}

/*------Блок платного доступа--------*/
#payme {position:relative; display:none;}
#payfon { background:rgba(0, 0, 0, 0.85); position:fixed; width:100%; height:100%; z-index:1000; top:0; left:0;}
#closepay {position:fixed; top:0; right:0; font-size:50px; padding:2px 8px; color:white; cursor:pointer; z-index:1002; opacity: 0.8; filter: alpha (opacity: 80);}
#closepay:hover {opacity: 1; filter: alpha (opacity: 100);}
#paywrapper {position:fixed; top:4vh; left:8%; background:rgba(255, 255, 255, 0.99); padding:4vh 4%; width:77%; min-height:300px; z-index:1001; overflow-y: auto; text-align:center; max-height:84vh;}

.evaluationpaymenttype {display: inline-block; vertical-align: middle; background:whitesmoke; padding:4px 12px; border-radius:5px; font-size:13px; margin:5px 10px; cursor:pointer;}
.evaluationpaymenttype.active {color:white; background:steelblue;}

.openpaypro.payingame {display:inline-block; color: black; padding: 6px 35px; text-decoration:none; border-radius: 5px; border:1px solid Gainsboro; margin:20px auto 0; background: whitesmoke linear-gradient(to bottom, whitesmoke, Gainsboro); cursor:pointer; font-size:17px;}
.openpaypro.payingame:hover {background: whitesmoke; border:1px solid steelblue; box-shadow:0 0 5px steelblue;}

@media screen and (max-width: 600px) {#paywrapper {top:10%; left:3%; padding:10px 3%; width:88%; min-height:370px; }}

/*------------ДОСТУП ТОЛЬКО ПРО--------------------------*/

.proexample {display:block; font-family: 'Arial', 'Helvetica', sans-serif; margin:0; padding:0;  width:100%; background-size: contain; border:none; text-decoration:none;}
.proexampleblack {padding:20vh 3% 50vh; background:rgba(255, 255, 255, 0.1); font-size: 20px; text-align:center;  -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease; color:transparent; font-size:25px; box-shadow:0 0 4px silver;}
.proexampleblack:hover {background:rgba(255, 255, 255, 0.94);  -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease; color:black; box-shadow:0 0 10px black;}
.proexampleblack b { display:inline-block; color:transparent; padding:8px 20px; margin:20px 7px; border-radius:7px; -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease; font-size:17px; font-weight:normal;}

.proexampleblack:hover b { color:white; background:steelblue; -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease; box-shadow:0 0 3px lightsteelblue; opacity: 0.75; filter: alpha (opacity: 75);}
.proexampleblack:hover b.openpaypro{background:darkred;}

.proexampleblack:hover b:hover {box-shadow:0 0 10px white;  -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease; opacity: 1; filter: alpha (opacity: 1);}

#left .nopro {color:gray; opacity: 0.6; filter: alpha (opacity: 60);}
@media screen and (max-width: 850px) {.proexampleblack {padding:25vh 3% 25vh;} .proexampleblack b {padding:8px 12px; margin: 10px; font-size:17px;} }


/*-------------ПРОГРЕС БАРЫ--------------------------*/

.meter { height: 20px;  position: relative;  margin: 5px 0; background: #555;border-radius: 5px; padding: 5px;}
.meter > span { display: block; height: 100%;
 -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: rgb(43,194,83);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(43,194,83)),
        color-stop(1, rgb(84,240,84))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(43,194,83) 37%,
        rgb(84,240,84) 69%
    );
    -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
    -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
    box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}
.meter > span:after, .animate > span > span {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
    background-image:
        -moz-linear-gradient(
            -45deg,
            rgba(255, 255, 255, .2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, .2) 50%,
            rgba(255, 255, 255, .2) 75%,
            transparent 75%,
            transparent
        );
    z-index: 1;
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    -webkit-animation: move 2s linear infinite;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
}

.animate > span:after { display: none;}
@-webkit-keyframes move {  0% {  background-position: 0 0; } 100% {  background-position: 50px 50px; }}
.orange > span {   background-color: #f1a165;    background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));   background-image: -webkit-linear-gradient(#f1a165, #f36d0a);}
.red > span {   background-color: #f0a3a3;   background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);   background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));   background-image: -webkit-linear-gradient(#f0a3a3, #f42323);}
.nostripes > span > span, .nostripes > span:after {  -webkit-animation: none;  background-image: none;}





fieldset {
    padding: 4px 8px;
    margin-bottom: 1em;
}

fieldset legend {
    font-weight: bold;
    color: #036;
}

label, input {
    vertical-align: middle;
}

.hint {
    font-size: 90%;
    color: #369;
}

.goog-debug-panel {
    border: 1px solid #369;
}

.goog-debug-panel .logdiv {
    position: relative;
    width: 100%;
    height: 8em;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: scroll;
}

.goog-debug-panel .logdiv .logmsg {
    font: normal 10px "Lucida Sans Typewriter", "Courier New", Courier, fixed;
}

.perf {
    margin: 0;
    border: 0;
    padding: 4px;
    font: italic 95% Arial, sans-serif;
    color: #999;
}

#perf {
    position: absolute;
    right: 0;
    bottom: 0;
    text-align: right;
    margin: 0;
    border: 0;
    padding: 4px;
    font: italic 95% Arial, sans-serif;
    color: #999;
}