*{ margin:0; padding:0; } body{ font-family:Arial, sans-serif; font-size:14px; background:#f4f4f4 url(../images/bg.gif) repeat top left; color:#333; text-shadow:1px 1px 1px #fff; overflow-y:scroll; } h1{ font-size:56px; } h2{ font-size:24px; padding:0px 0px 40px 0px; color:#333; text-align:center; } h2 span{ color:#ffa800; } a{ color:#777; } a:hover{ color:#222; } p{ padding:5px 0px; } .wrapper{ width:960px; margin:20px auto; min-height:550px; } .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; border:1px solid #ddd; margin:0 auto; width:350px; font-size:16px; -moz-box-shadow:1px 1px 7px #ccc; -webkit-box-shadow:1px 1px 7px #ccc; box-shadow:1px 1px 7px #ccc; } .form_wrapper h3{ padding:20px 30px 20px 30px; background-color:#444; color:#fff; font-size:25px; border-bottom:1px solid #ddd; } .form_wrapper form{ display:none; background:#fff; } .form_wrapper .column{ width:47%; float:left; } 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; padding:10px 30px 0px 30px; margin:10px 0px 0px 0px; } .form_wrapper input[type="text"], .form_wrapper input[type="password"]{ border: solid 1px #E5E5E5; background: #FFFFFF; margin: 5px 30px 0px 30px; padding: 9px; display:block; font-size:16px; width:76%; 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; } .form_wrapper input[type="text"]:focus, .form_wrapper input[type="password"]:focus{ background:#feffef; } .form_wrapper .bottom{ background-color:#444; 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: #e3e3e3; border: 1px solid #ccc; color: #333; font-family: "Trebuchet MS", "Myriad Pro", sans-serif; font-size: 14px; font-weight: bold; padding: 8px 0 9px; text-align: center; width: 150px; 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: #d9d9d9; -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; }