[Codes] Login user panel

<script type="text/javascript" src="http://teensg.webs.com/slidekiddy9.txt"></script>

<!-- END hitskin_preview -->

<!-- Panel -->
<div id="toppanel">
  <div id="slide2">
      <div class="content">
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="width:460px;">
        <div class="left">
<!-- BEGIN switch_user_logged_out --> 
<h1>Welcome to wWw.Kiddy9.cO.cC</h1>
<div style="padding-top:5px;">
If this is your first visit, be sure to check out the <a href="/faq.htm"><strong>FAQ</strong></a> by clicking the link above.
You may have to <a href="/profile.forum?mode=register" rel="nofollow"><strong>register</strong></a> before you can post: click the register link above to proceed.
To start viewing messages, select the forum that you want to visit from the selection below.
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td><img class="verticalAlign" src="http://hoiquantinhoc.com/forum/HQTH/hqthv5/HQTH_login/images/HQTH_logo.png" /></td>
<td>
<h2>User Control Panel</h2>
<div style="padding-bottom:10px;"></div>
<div class="smallfont"><strong>» <a href="/profile.forum?mode=editprofile&page_profil=avatars">Edit your avatar</a></strong></div>
<div style="padding-bottom:3px;"></div>
<div class="smallfont"><strong>» <a href="/profile.forum?mode=editprofile&page_profil=signature?do=editsignature"><strong>Edit your signature</a></strong></div>
<div style="padding-bottom:3px;"></div>
<div class="smallfont"><strong>» <a href="/profile.forum?mode=editprofile">Edit your email and password</a></strong></div>
<div style="padding-bottom:3px;"></div>
<div class="smallfont"><strong>» <a href="/profile.forum?mode=editprofile">Edit options</a></strong></div>
<div style="padding-bottom:3px;"></div>
</td>
</tr></table>
<!-- END switch_user_logged_in --> 
</div>
</div>
</td>
<td>
        <div class="right">
<!-- BEGIN switch_user_logged_out --> 
        <!-- login form -->
      <form action="{S_LOGIN_ACTION}" method="post"  name="form_login">
      <script type="text/javascript" src="clientscript/vbulletin_md5.js?v=384"></script>
      <table cellpadding="0" cellspacing="0" border="0" width="100%" align="left">
      <tr>
<td style="padding-left:40px;">
<h2>User Name</h2>
<div class="loginBoxInput">
<input class="logininput" style="font-size: 11px;" name="username" id="username" size="10" accesskey="u" tabindex="101" value="Tên truy cập" onfocus="if (this.value == 'Tên truy cập') this.value = '';" type="text">
</div>



<h2>Password</h2>
<div class="loginBoxInput">
<input class="logininput" style="font-size: 11px;" name="password" id="password" size="10" tabindex="102" type="password">
</div>
</td>
<td style="padding-left:30px;">
<div>
<input class="verticalAlign" type="image" value="{L_LOGIN}" tabindex="104" title="Enter your username and password in the boxes provided to login, or click the 'register' button to create a profile for yourself." type="submit" name="login" accesskey="s" src="http://i66.servimg.com/u/f66/15/76/69/63/login10.png" /></div>
<div class="remem"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" /> Ghi Nhớ?</label></div>
<div style="padding-bottom:10px;"></div>
<div class="smallfont"><strong>» <a href="#" target=_blank>Bạn Quên Mật Khẩu ư?</a></strong></div>
<div style="padding-bottom:3px;"></div>
<div class="smallfont"><strong>» <a href="/profile.forum?mode=register" target=_blank>Bạn Không Có Tài Khoản?</a></strong></div>
</td>     
      </tr>
      </table>
      <input name="s" value="" type="hidden">
      <input name="securitytoken" value="guest" type="hidden">
      <input name="do" value="login" type="hidden">
      <input name="vb_login_md5password" type="hidden">
      <input name="vb_login_md5password_utf" type="hidden">
      </form>
      <!-- / login form -->
<!-- END switch_user_logged_out -->
  <!-- BEGIN switch_user_logged_in -->
<h1>wWw.Kiddy9.cO.cC
<a href="/login.forum?logout=true" onclick="return log_out('Bạn thật sự muốn Thoát?')" title="Log Out"><img class="imgp" src="http://i66.servimg.com/u/f66/15/76/69/63/logout10.png" /></a>
 </h1>
      <table cellpadding="0" cellspacing="0" border="0" width="100%" align="left"><tr>
<td>
<div class="smallfont">
      <strong>Welcome, <span class="USERNAME">.</strong>

      </td>
</tr>
<!--TQN-->
<tr>
<td>
  <div class="smallfont">
      <span class="time2">{LAST_VISIT_DATE}</span>
        <div>{CURRENT_TIME}</div>
        </div>
  </td>
</tr>
<!--/TQN-->
<!-- END switch_user_logged_in --> 
        </div>
</td>
</tr>
</table>
</td>
<td align="right">
<img class="imgp" src="http://i66.servimg.com/u/f66/15/76/69/63/imgpor10.png" /></td>
</tr></table>
      </div>
  </div>
    <!-- The tab on top --> 
  <div class="tab">
      <ul class="login">
          <li class="left"> </li>
        <li id="toggle">
<a id="open" class="open" href="#"><strong><!-- BEGIN switch_user_logged_out -->Log In - Đăng Nhập<!-- END switch_user_logged_out --><!-- BEGIN switch_user_logged_in --> Manage  - Quản lí<!-- END switch_user_logged_in --></strong></a>
            <a id="close" style="display: none;" class="close" href="#"><strong>Close - Đóng Lại</strong></a>       
        </li>
          <li class="right"> </li>
      </ul>
  </div> <!-- / top -->
</div> <!--panel -->

/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */
.tab {
     background: url(http://i66.servimg.com/u/f66/15/76/69/63/tab_b10.png) repeat-x 0 0;
   height: 42px;
   position: relative;
    top: 0;
    z-index: 999;
}

.tab ul.login {
   display: block;
   position: relative;
     float: right;
     clear: right;
     height: 42px;
   width: auto;
     font-weight: bold;
   line-height: 42px;
   margin: 0;
   right: 150px;
     color: white;
     font-size: 80%;
   text-align: center;
}

.tab ul.login li.left {
     background: url(http://i66.servimg.com/u/f66/15/76/69/63/tab_l10.png) no-repeat left 0;
     height: 42px;
   width: 30px;
   padding: 0;
   margin: 0;
     display: block;
   float: left;
}

.tab ul.login li.right {
     background: url(http://i66.servimg.com/u/f66/15/76/69/63/tab_r10.png) no-repeat left 0;
     height: 42px;
   width: 30px;
   padding: 0;
   margin: 0;
     display: block;
   float: left;
}

.tab ul.login li {
    text-align: left;
     padding: 0 6px;
   display: block;
   float: left;
   height: 42px;
     background: url(http://i66.servimg.com/u/f66/15/76/69/63/tab_m10.png) repeat-x 0 0;
}

.tab ul.login li a {
   color: #eef489;
}

.tab ul.login li a:hover {
   color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
   height: 20px;
   line-height: 20px !important;
   padding-left: 30px !important;
   cursor: pointer;
   display: block;
   width: 150px;
   position: relative;
   top: 11px;
}

.tab a.open {background: url(http://i66.servimg.com/u/f66/15/76/69/63/bt_ope10.png) no-repeat left 0;}
.tab a.close {background: url(http://i66.servimg.com/u/f66/15/76/69/63/bt_clo10.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://i66.servimg.com/u/f66/15/76/69/63/bt_ope10.png) no-repeat left -20px;}
.tab a:hover.close {background: url(http://i66.servimg.com/u/f66/15/76/69/63/bt_clo10.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
    position: absolute;  /*Panel will overlap  content */
    /*position: relative;*/  /*Panel will "push" the content down */
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#slide2 {
   width: 100%;
   height: 150px;
   color: #e2e2e2;
   background: url(http://i66.servimg.com/u/f66/15/76/69/63/bg10.png) repeat;
   overflow: hidden;
   position: relative;
   z-index: 3;
   display: none;
}

#slide2 h1 {
   font-size: 1.6em;
   padding: 5px 0 10px;
   margin: 0;
   color: white;
}

#slide2 h2{
   font-size: 1.1em;
   padding: 0 0 3px 0;
   margin: 0;
   color: white;
}

#slide2 p {
   margin: 5px 0;
   padding: 0;
}

#slide2 a {
   text-decoration: none;
   color: #bfe1f7;
}

#slide2 a:hover {
   text-decoration: none;
   color: #eca174;
}

#slide2 .content {
   width: 1000px;
   margin: 0 auto;
   padding-top: 15px;
   text-align: left;
   font-size: 0.85em;
}

#slide2 .content .left {
   width: 460px;
   float: left;
   padding: 0 35px;
        border-right: 1px dashed #f5f5f5;
}

#slide2 .content .right {
        width: 300px;
   padding: 0px;
}

#slide2 .content form {
   margin: 0 0 10px 0;
}

#slide2 .content label {
   float: left;
   padding-top: 15px;
   clear: both;
   width: 200px;
   display: block;
}


.loginBoxInput {
   background:url(http://i66.servimg.com/u/f66/15/76/69/63/input10.png) no-repeat;
   width:150px;
   height:25px;
        float:left;
}
.logininput {
   border:0;
   background:transparent;
   font:8pt arial, helvetica, sans-serif;
   color: #444444;
   padding:5px 0 2px 0;
   width:140px;
   margin:1px 7px 0 7px;
}


.verticalAlign {
vertical-align:middle;
}

.remem{
font:10pt verdana;
color:#e2e2e2;}