<html>
<head>
<script>


$(document).ready(function(){  
        $(".button").click(function(){  
            $("#login-panel").slideToggle(200);  
        })  
    })  
    <!-- jQuery to apply actions to the ESC key -->  
    $(document).keydown(function(e) {  
        if (e.keyCode == 27) {  
            $("#login-panel").hide(0);  
        }  
    });  


</script>

  <style type="text/css">  
    #demo-header{  
        width: 980px;  
        margin: 0 auto;  
        position: relative;  
    }  
    #login-link{ 
       
        position: absolute;  
        top: 40px;  
        right: 0px;  
        display: block;  
        padding: 0px 15px 0px 15px;  
        color: #FFF;  
    }  
    #login-panel{  
        margin-top:100px;
        position: absolute;  
        top: 110px;  
        right: 0px;  
        width: 190px; 
        height: 250px; 
        -moz-box-shadow: 0 0 5px 5px #888;
        -webkit-box-shadow: 0 0 5px 5px#888;
         box-shadow: 0 0 5px 5px #888;
        padding: 5px  15px 5px 5px;  
        background-color: white;  
        font-size: 8pt;  
        font-weight: bold;  
        color: black;  
        display: none; 
        border:10px solid #C2DFFF; 

    }  



/*  code below for table *********************************************/



.CSSTableGenerator {
	margin:0px;padding:0px;
	width:100%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #ffffff;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.CSSTableGenerator table{
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{
	background-color:#e5e5e5;
		

}
.CSSTableGenerator td{
	vertical-align:middle;
		background:-o-linear-gradient(bottom, #ffffff 5%, #e5e5e5 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #e5e5e5) ); 
	background:-moz-linear-gradient( center top, #ffffff 5%, #e5e5e5 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e5e5e5");	background: -o-linear-gradient(top,#ffffff,e5e5e5);

	background-color:#ffffff;

	border:1px solid #ffffff;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:7px;
	font-size:10px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}.CSSTableGenerator tr:last-child td{
	border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
	border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
		background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
	background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");	background: -o-linear-gradient(top,#cccccc,b2b2b2);

	background-color:#cccccc;
	border:0px solid #ffffff;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:14px;
	font-family:Arial;
	font-weight:bold;
	color:#000000;
}
.CSSTableGenerator tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
	background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");	background: -o-linear-gradient(top,#cccccc,b2b2b2);

	background-color:#cccccc;
}
.CSSTableGenerator tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}



    
    </style>  


</head>

<body>
<table align='right' width='60'><tr><td align='left'><a href='#' class='button' style="text-decoration:none;" title='Hot keys'><img src='images/help.png' width='30px' height='30px'/></a></td></tr></table>


<div id="login-panel">

<div class="CSSTableGenerator" >
<br>
  <table width='180' height=100 ><tr>
 <td colspan='2' >Hotkeys</td></tr>
 <tr> <td>Table open:</td><td> 'Alt+N'</td></tr>

 <tr><td>Delete:</td><td>'delete button'</td></tr>
  <tr>
  <td>Save:</td><td>'Ctrl+S'</td></tr>

   <tr> <td>New page:</td><td> 'Alt+R'</td></tr>

   <tr>
 <td colspan='2' >Use <img src='images/arrows.gif'/> to move curser through cells of table. </td></tr>
</table></div>

</div><!-- /login-panel -->
</body>
</html>
