Sliding Login Panel (HQTH) hot...hot.....

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

<!-- END hitskin_preview -->

/***** 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;}