<style>
#logOff {
position: fixed;
z-index: 2;
width: 300px;
height: 220px;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
padding: 0;
}
 
#logOff h3 {
  margin: 0 0 20px 0;
  padding: 0;
}
 
#logOff ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
 
#logOff ul li {
  margin: 0 0 20px 0;
}
</style>
 

<script type="text/JavaScript">
<!--
//Graphical Confirm Logout
//Written by Dranew
 
//Coninue Image
var cnt = "URL OF CONTINUE IMAGE";
cntHeight = "52px";
cntWidth = "194px";
 
//Cancel Image
var can = "URL OF CANCEL IMAGE";
canHeight = "52px";
canWidth = "194px";
 
var gLog = {
  sLog:function() {
    var log = get('menu_buttons','id').getElementsByTagName('a')
         log = log[get('menu_buttons','id').getElementsByTagName('a').length-1] 
 
    if(vf_username != 'guest'){
      log.href = 'javascript:gLog.showLog()';
    }
  },
 
  bLog:function() {
    var tbl = '<div id="logOff" style="display:none;">';
         tbl += '<table class="border" align="center" cellpadding="3" cellspacing="1" width="100%">';
         tbl += '<tr><td class="title1" width="100%"><span class="title">Log off</span></td></tr>';
         tbl += '<tr><td class="window1" align="center"><h3>You are now logging off</h3>';
         tbl += '<ul><li><a href="/action/logout"><img src="'+cnt+'" height = "'+cntHeight+'" width="'+cntWidth+'" border="0" /></a></li>';
         tbl += '<li><a href=javascript:gLog.showLog()><img src="'+can+'" height = "'+canHeight+'" width="'+canWidth+'" border="0" /></a></li></ul>';
         tbl += '</tr></table></div>';
         document.write(tbl);
  },
 
  showLog:function() {
    var eLog = get('logOff','id')
    eLog.style.display = (eLog.style.display == "none")? '':'none';
  }
}
 
gLog.bLog();
gLog.sLog();
 
//-->
</script>