.main 
{
 background: #aaa url(../images/bg.jpg) no-repeat;
 width: 800px;
 height: 600px;
 margin: 50px auto;
}

.panel 
{
 background-color: #f44;
 height: 34px;
 padding: 10px;
}

.panel a.table_link
{
 border: 2px solid #aaa;
 color: #fff;
 display: block;
 float: right;
 margin-right: 10px;
 padding: 5px 10px;
 text-decoration: none;
 text-shadow: 1px 1px #000;

 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 -o-border-radius: 10px;
 border-radius: 10px;
}

a.table_link:hover, a#join_pop:hover 
{
 border-color: #eee;
}


.overlay 
{
 background-color: rgba(0, 100, 0, 0.6);
 bottom: 0;
 cursor: default;
 left: 0;
 opacity: 0;
 position: fixed;
 right: 0;
 top: 0;
 visibility: hidden;
 z-index: 1;

 -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: 3px solid #fff;
 /*display: inline-block;*/
 left: 50%;
 opacity: 0;
 padding: 15px;
 position: fixed;
 text-align: justify;
 top: 60%;
 visibility: hidden;
 z-index: 1000;
			overflow:scroll;
			width: 800px;
			height: 300px;

 -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-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 -o-border-radius: 10px;
 border-radius: 10px;

 -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
 -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
 -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
 -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
 box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

 -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;
	z-index:100;
}

.close 
{
 
	background-color: rgba(221,242,255, .6);
	border: 2px outset rgba(2,136,214, .6);

 height: 30px;
 line-height: 30px;
 position: absolute;
 right: 10px;
 text-align: center;
 text-decoration: none;
 top: 5px;
 width: 25px;

 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 -ms-border-radius: 15px;
 -o-border-radius: 15px;
 border-radius: 15px;
}

.close:before 
{
 color: rgba(255, 255, 255, 0.9);
 content: "X";
 font-size: 24px;
 text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}

.close:hover 
{
	background-color: #FBEAFF;
	border: 2px inset #B202D6;

}

.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: #999 #ccc #ccc;
 margin: 0;
 padding: 2px;

 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 -ms-border-radius: 2px;
 -o-border-radius: 2px;
 border-radius: 2px;
}

.popup input[type="text"]:hover, .popup input[type="password"]:hover 
{
 border-color: #555 #888 #888;
}