Beautiful Facebook inspired Login Form Panel using Mootools glass box technique

<div id=”Layer1″>
<a href=”javascript:;” onclick=”flashnotice_2()” ><img src=”../images/signin.png” width=”130″ height=”45″ border=”0″ /></a><br />
</div>
<div id=”myBox_2″ style=”display:none”>
<div class=”box”>
<h1>Sign in</h1>
<p>Do you have an account? Sign in!</p>
<form action=”” method=”post”>
<label><span>E-mail</span>
<input type=”text”name=”email” id=”email” class=”input-text”/>
</label>
<label><span>Password</span>
<input type=”password”name=”psw” id=”psw” class=”input-text”/>
</label>
</form>
<div class=”spacer”><a href=”#” onClick=”” class=”green”>Sign in</a></div>
<div class=”spacer”>
Lost your data? <a href=”#”>Get your password</a><br/>
New User? <a href=”#”>Sign up</a>
</div>
</div>

</div>
<div id=”Layer2″>
<h1>Beautiful Facebook inspired Form Panel using Mootools glassbox technique.</h1>
</div>

body {
font-family:Arial, Helvetica, sans-serif;
background:#CCCCCC;
}
#myBox_contentBoxBg {
filter: alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
#myBox_content,
#myBox_2_content {
padding: 20px;
}
#myBox h3,
#myBox_2 h3 {
font-size: 17px;
margin: 0px;
text-align: center
}
#Layer1 {
position:absolute;
left:445px;
top:422px;
width:60px;
height:40px;
z-index:1;
}
a{color:#0033CC;}
h1, h2, p, form{
border:0px;
margin:0px;
padding:0px;
}

input{ font-family:”Lucida Sans Unicode”, “Lucida Grande”, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
h2{ color:#666666;
margin-bottom:20px;
font-size:16px;
}

div.main{
margin:30px auto;
width:340px;
}

div.box{
border:solid 1px #c6cfe1;
background:#dfe4ee;
padding:10px;
color:#333333;
margin-bottom:20px;
}
div.box h1 {
font-size:14px;
color:#000000;
padding-bottom:4px;
}
div.box p{padding-bottom:14px;}

div.box input .input-text{
border:1px solid #3b6e22;
color:#666666;
width:180px;
}

div.box label{
display:block;
margin-bottom:10px;
color:#555555;
}

div.box label span{
display:block;
float:left;
padding-right:6px;
width:70px;
text-align:right;
font-weight:bold;
}
.spacer{margin-left:80px;
margin-bottom:10px;
font-size:11px;
color:#555555;
}
.green{
background:url(../images/green.gif);
padding:0px 6px;
border:1px solid #3b6e22;
height:24px;
line-height:24px;
color:#FFFFFF;
font-size:12px;
margin-right:10px;
display:inline-block;
text-decoration:none;
}
#Layer2 {
position:absolute;
left:277px;
top:75px;
width:441px;
height:30px;
z-index:2;
}

<script type=”text/javascript”>
function flashnotice_2() {
var myBox_2 = new GlassBox();
myBox_2.init( ‘myBox_2’, ‘500px’, ‘300px’, ‘hidden’, ”, true, true );
myBox_2.lbo( true, 0.0 );
myBox_2.appear();
}
</script>