@import 'https://fonts.googleapis.com/css?family=Roboto:300,400&subset=latin-ext';
*{margin:0}
html, body{height:100%}
body{font-family:'Roboto',sans-serif; font-size:12px; margin:0; padding:0; background-color:#ddd; color:#000} 
#bckg{position:absolute; width:100%; height:100%; background-color:#999; background-repeat:no-repeat; background-position:center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; opacity:0.3}
#loginbox{position:absolute; display:none; background-color:#fff; width:270px; height:200px; padding:60px 40px 40px 40px; top:50%; left:50%; margin-top:-160px; margin-left:-175px; -webkit-box-shadow:0 0 10px 0 rgba(0,0,0,.5); box-shadow:0 0 10px 0 rgba(0,0,0,.5); z-index:1}
#loginlogo{position:absolute; width:350px; height:109px; top:50%; left:50%; margin-top:-210px; margin-left:-175px; z-index:2}
#loginver{position:absolute; width:350px; height:20px; top:50%; left:50%; margin-top:145px; margin-left:-175px; color:rgba(255,255,255,.7); font-size:11px; text-align:right; font-weight:300; z-index:3}
::-webkit-input-placeholder{color:#aaa}
::-moz-placeholder{color:#aaa}
:-ms-input-placeholder{color:#aaa}
input:-moz-placeholder{color:#aaa}
#loginbox .inp{font-family:"Roboto",sans-serif; outline:0; background:#f2f2f2; width:100%; border:0; margin:0 0 15px; padding:15px; box-sizing:border-box; font-size:14px;}
#loginbox .btn{font-family:"Roboto",sans-serif; text-transform:uppercase; outline:0; background:#c2000b; width:100%; border:0; padding:15px; color:#fff; font-size:14px; -webkit-transition:all 0.3 ease; transition:all 0.3 ease; cursor:pointer; margin-top:15px}
input[type="checkbox"]{display:none}
input[type="checkbox"] + label{color:#555}
input[type="checkbox"] + label span{display:inline-block; width:19px; height:19px; margin:-1px 4px 0 0; vertical-align:middle; background:url("../img/checkbox_login.png") left top no-repeat; cursor:pointer}
input[type="checkbox"]:checked + label span{background:url("../img/checkbox_login.png") -19px top no-repeat}

#langbox{position:absolute; display:none; width:30px; height:280px; padding:0; top:50%; left:50%; margin-top:-140px; margin-left:175px; z-index:1}
ul#langul{list-style-type:none; margin:0; padding:0}
ul#langul li{width:24px; height:24px; line-height:24px; margin:5px 0; background:#fff; text-align:center; font-size:11px; -webkit-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; -webkit-box-shadow:inset 10px 0 10px -10px rgba(0,0,0,.5), 10px 0 10px -7px rgba(0, 0, 0, 0.5);	box-shadow:inset 10px 0 10px -10px rgba(0,0,0,.5), 10px 0 10px -7px rgba(0, 0, 0, 0.5)}
ul#langul li a{text-decoration:none; color:#999; cursor:pointer}
ul#langul li.act{-webkit-box-shadow:10px 0 10px -7px rgba(0, 0, 0, 0.5);  box-shadow:10px 0 10px -7px rgba(0, 0, 0, 0.5)}
ul#langul li.act a{color:#c40018; font-weight:bold}