.main{background:#000;width:800px;height:600px;margin:50px auto}.panel{background-color:#fff;height:34px;padding:10px;color:#fff}.panel a#login_pop,.panel a#join_pop{border:2px solid #fff;color:#fff;display:block;float:right;margin-right:10px;padding:5px 10px;text-decoration:none;z-index:99999999}a#login_pop:hover,a#join_pop:hover{border-color:#fff}.overlay{background-color:rgba(0,0,0,0.6);bottom:0;cursor:default;left:0;opacity:0;position:fixed;right:0;top:0;visibility:hidden;z-index:999999;-webkit-transition:opacity .5s;-moz-transition:opacity .5s;-ms-transition:opacity .5s;-o-transition:opacity .5s;transition:opacity .5s}.overlay:target{visibility:visible;opacity:1}.popup{background-color:#fff;border:10px solid #fff;display:inline-block;left:50%;opacity:0;padding:15px;position:fixed;text-align:justify;top:40%;visibility:hidden;z-index:99999999;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:opacity .5s,top .5s;-moz-transition:opacity .5s,top .5s;-ms-transition:opacity .5s,top .5s;-o-transition:opacity .5s,top .5s;transition:opacity .5s,top .5s}.overlay:target+.popup{top:50%;opacity:1;visibility:visible}.close{background-color:transparent;width:30px;height:30px;position:absolute;right:0;top:0;text-align:center;text-decoration:none;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0;display:block;z-index:5}.close:before{color:#f60;content:"X";font-size:18px;font-weight:bolder;margin-top:0;margin-left:0}.popup p,.popup div{margin-bottom:10px}.popup label{display:inline-block;text-align:left;width:120px}.popup input[type="text"],.popup input[type="password"]{border:1px solid;border-color:#306482;margin:0;padding:4px}.popup input[type="text"]:hover,.popup input[type="password"]:hover{border-color:#306482}