h1{
font-size:56px;
}
h2{
font-size:20px;
padding:0px 0px 40px 0px;
color:#aaa;
}
h2 span{
color:#ffa800;
}
a{
color:#777;
}
a:hover{
color:#222;
}
p{
padding:5px 0px;
}
.box{
width:49%;
}
.left{
float:left;
}
.right{
float:right;
}
.clear{
clear:both;
}
a.back{
color:#777;
position:fixed;
top:5px;
right:10px;
text-decoration:none;
}
/* Form Style */
.form_wrapper{
background:#fff;
margin:0 auto;
width:350px;
font-size:16px;
}
.form_wrapper h3{
padding:20px 30px 20px 30px;
background-color:#FFF;
color:#000;
font-size:20px;
border-bottom:1px solid #ddd;
}
.form_wrapper form{
display:none;
background:#fff;
}
.form_wrapper .column{
width:100%;
float:left;
font-family: Arial, Helvetica, sans-serif;
color: #000;
}
form.active{
display:block;
}
form.login{
width:350px;
}
form.register{
width:550px;
}
form.forgot_password{
width:300px;
}
.form_wrapper a{
text-decoration:none;
color:#777;
font-size:12px;
}
.form_wrapper a:hover{
color:#000;
}
.form_wrapper label{
display:block;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 10px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 5px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
}
.form_wrapper input[type="text"],
.form_wrapper input[type="password"]
.form_wrapper input[type="textarea"]
.form_wrapper input[type="select"]{
border: solid 1px #E5E5E5;
background: #FFFFFF;
margin: 5px 5px 0px 5px;
padding: 9px;
display:block;
font-size:16px;
width:95%;
background: 
-webkit-gradient(
linear,
left top,
left 25,
from(#FFFFFF),
color-stop(4%, #EEEEEE),
to(#FFFFFF)
);
background: 
-moz-linear-gradient(
top,
#FFFFFF,
#EEEEEE 1px,
#FFFFFF 25px
);
-moz-box-shadow: 0px 0px 8px #f0f0f0;
-webkit-box-shadow: 0px 0px 8px #f0f0f0;
box-shadow: 0px 0px 8px #f0f0f0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
}
.form_12{
border: solid 1px #E5E5E5;
background: #FFFFFF;
margin: 5px 5px 0px 5px;
padding: 8px;
display:block;
font-size:16px;
width:95%;
background: 
-webkit-gradient(
linear,
left top,
left 25,
from(#FFFFFF),
color-stop(4%, #EEEEEE),
to(#FFFFFF)
);
background: 
-moz-linear-gradient(
top,
#FFFFFF,
#EEEEEE 1px,
#FFFFFF 25px
);
-moz-box-shadow: 0px 0px 8px #f0f0f0;
-webkit-box-shadow: 0px 0px 8px #f0f0f0;
box-shadow: 0px 0px 8px #f0f0f0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
}
.form_wrapper input[type="text"]:focus,
.form_wrapper input[type="password"]:focus
.form_wrapper input[type="textarea"]:focus
.form_wrapper input[type="select"]:focus{
background:#feffef;
}
.form_wrapper .bottom{
background-color:#FFF;
border-top:1px solid #ddd;
margin-top:20px;
clear:both;
color:#fff;
text-shadow:1px 1px 1px #000;
}
#bottom2{
background-color:#0C0;
border-top:1px solid #ddd;
margin-top:20px;
clear:both;
color:#fff;
text-shadow:1px 1px 1px #000;
}
.form_wrapper .bottom a{
display:block;
clear:both;
padding:10px 30px;
text-align:right;
color:#ffa800;
text-shadow:1px 1px 1px #000;
}
.form_wrapper a.forgot{
float:right;
font-style:italic;
line-height:24px;
color:#ffa800;
text-shadow:1px 1px 1px #fff;
}
.form_wrapper a.forgot:hover{
color:#000;
}
.form_wrapper div.remember{
float:left;
width:140px;
margin:20px 0px 20px 30px;
font-size:11px;
}
.form_wrapper div.remember input{
float:left;
margin:2px 5px 0px 0px;
}
.form_wrapper span.error{
visibility:hidden;
color:red;
font-size:11px;
font-style:italic;
display:block;
margin:4px 30px;
}
.form_wrapper input[type="submit"] {
background: #5bb75b;
border: 1px solid #ccc;
color: #333;
font-family: "Trebuchet MS", "Myriad Pro", sans-serif;
font-size: 16px;
font-weight: bold;
padding: 8px 0 9px;
text-align: center;
width: 95%;
cursor:pointer;
float:right;
margin:15px 20px 10px 10px;
text-shadow: 0px 1px 0px #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0px 0px 2px #fff inset;
-webkit-box-shadow: 0px 0px 2px #fff inset;
box-shadow: 0px 0px 2px #fff inset;
}
.form_wrapper input[type="submit"]:hover {
background: #51a351;
-moz-box-shadow: 0px 0px 2px #eaeaea inset;
-webkit-box-shadow: 0px 0px 2px #eaeaea inset;
box-shadow: 0px 0px 2px #eaeaea inset;
color: #222;
}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
color: #000;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
}
.modalDialog1 {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.2);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog1:target {
opacity:1;
pointer-events: auto;
}
.modalDialog1 > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
}
.modalDialog2 {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog2:target {
opacity:1;
pointer-events: auto;
}
.modalDialog2 > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
#login-form {
margin: 50px auto;
width: 350px;
}#login-form1 {
margin: 50px auto;
width:550px;

}