login form - light

css.css

* {
    margin: 0;
    padding: 0;
    font-family: arial;
}

html { height: 100% }

body {
    background: #6F7B8B; /* old browsers */
    background: -moz-linear-gradient(top, #6F7B8B 20%, #8D96A5 58%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#6F7B8B), color-stop(58%,#8D96A5)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6F7B8B', endColorstr='#8D96A5',GradientType=0 ); /* ie */
    text-align: center;
    padding: 100px;
    font-family: Helvetica, Arial, sans-serif;
    color: #fff;
    text-shadow: 0px 1px 0px RGBA(0,0,0,0.8);
    font-size: 16px;
    font-weight: bold;
}

#itunes {
    width: 600px;
    margin: 0px auto;
}

#bar {
    width: 470px;
    height: 30px;
    margin: 0px auto;
    border-top: solid 1px #232a32;
    border-left: solid 1px #515862;
    border-right: solid 1px #515862;
    border-bottom: solid 1px #6a7179;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0px 1px 0px #c2c5d6;
    -moz-box-shadow: 0px 1px 0px #c2c5d6;
    box-shadow: 0px 1px 0px #c2c5d6;
    background: #67707F; /* old browsers */
    background: -moz-linear-gradient(top, #67707F 0%, #888DA0 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#67707F), color-stop(100%,#888DA0)); /* webkit */
    position: relative;
    z-index: 3;
    overflow: hidden;
}

.inner {
    -webkit-box-shadow: inset 0px 2px 6px RGBA(0,0,0,0.5);
    -moz-box-shadow: inset 0px 2px 6px RGBA(0,0,0,0.5);
    display: block;
    width: 110%;
    height: 100%;
    z-index: 999999;
    position: absolute;
    left: -10px;
}

.blue {
    background: #68a1d6;
    display: inline-block;
    height: 100%;
    width: 30%;
    z-index: -3;
    position: relative;
    float: left;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}

.purp {
    background: #a266a6;
    display: inline-block;
    height: 100%;
    width: 20%;
    z-index: -3;
    position: relative;
    float: left;
}

.org {
    background: #fa905e;
    display: inline-block;
    height: 100%;
    width: 15%;
    z-index: -3;
    position: relative;
    float: left;
}

.green {
    background: #8bcd5f;
    display: inline-block;
    height: 100%;
    width: 10%;
    z-index: -3;
    position: relative;
    float: left;
}

.yell {
    background: #ebd430;
    display: inline-block;
    height: 100%;
    width: 10%;
    z-index: -3;
    position: relative;
    float: left;
}

.free {
    background: #67707F; /* old browsers */
    background: -moz-linear-gradient(top, #67707F 0%, #888DA0 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#67707F), color-stop(100%,#888DA0)); /* webkit */
}

#itunes span { font-size: 12px }

.info {
    float: left;
    display: block;
    text-align: left;
    line-height: 17px;
}

li {
    list-style: none;
    list-style-type: none;
    display: inline;
    float: left;
    text-align: left;
    margin-right: 12px;
}

ul#led { margin: 15px 0 0 96px }

ul#led li span {
    border-top: solid 1px #232a32;
    border-left: solid 1px #515862;
    border-right: solid 1px #515862;
    border-bottom: solid 1px #6a7179;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0px 1px 0px #c2c5d6,inset 0px 1px 2px RGBA(0,0,0,0.5);
    -moz-box-shadow: 0px 1px 0px #c2c5d6,inset 0px 1px 2px RGBA(0,0,0,0.5);
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-right: 5px;
}

html.html

<div id="wrapper">

	<form name="login-form" class="login-form" action="" method="post">
	
		<div class="header">
		<h1>Login Form</h1>
		<span>Fill out the form below to login to my super awesome imaginary control panel.</span>
		</div>
	
		<div class="content">
		<input name="username" type="text" class="input username" placeholder="Username" />
		<div class="user-icon"></div>
		<input name="password" type="password" class="input password" placeholder="Password" />
		<div class="pass-icon"></div>		
		</div>

		<div class="footer">
		<input type="submit" name="submit" value="Login" class="button" />
		<input type="submit" name="submit" value="Register" class="register" />
		</div>
	
	</form>

</div>
<div class="gradient"></div>