<html>
<head>
<style type='text/css'>
.header{
font-size:24px;
text-align:center;
}
.container{
background-color:#993300;
width: 100%
}
</style>
<script src='/opacity.js' type='text/javascript'></script>
<script type='text/javascript'>
var count = 100
var m_in
var id_in
var id_out
function movein(){
if(count > 2){
document.getElementById('header').width = (parseInt(document.getElementById('header').width) - 2) + '%'
count -=2
if(m_in = 0){
clearInterval(id_in)
}
}
else{
clearInterval(id_in)
}
}
function moveout(){
if(count < 100){
document.getElementById('header').width = (parseInt(document.getElementById('header').width) + 2) + '%'
count +=2
if(m_in = 1){
clearInterval(id_out)
}
}
else{
clearInterval(id_out)
}
}
function movei(){
//alert('IN')
m_in=1
id_in = setInterval(movein, 5)
}
function moveo(){
//alert('OUT')
m_in=0
id_out = setInterval(moveout, 5)
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<div align="center" class='container' onMouseOver='movei()' onMouseOut='moveo()'>
<table id='header' class='header' width="100%" height="10%" bgcolor='#993300'>
<tr>
<td>A</td>
<td>L</td>
<td>A</td>
<td>N</td>
<td>D</td>
</tr>
</table>
</div>
</div>
</body>
</html>