<!-- DROPDOWN NAVBAR -->

<!-- stylesheet for FF2, Op9, IE7 (strict mode) -->

<style type="text/css">

#navbar {

display:inline;

width:100%;

position:absolute;

background-color:transparent;

top:-30px;

left:0px;

height:60px;

z-index:999999;

}

#navbar:hover{

top:0px;

height:30px;

}

</style>

<!-- stylesheet for IE6 and lower -->

<!-- (not supporting element:hover) -->

<!-- first, unhide the navbar through css -->

<!-- second, hide the navbar and mimic -->

<!-- the effect with javascript, if available -->

<!--[if lt IE 7]>

<style type="text/css">

#navbar {

height:30px;

top:0px;

}

</style>

<script type="text/javascript">

var navbar = document.getElementById('navbar');

if(navbar){

navbar.onmouseover = function(){

navbar.style.top = '0px';

navbar.style.height = '30px';

}

navbar.onmouseout = function(){

navbar.style.top = '-30px';

navbar.style.height = '60px';

}

if (navbar.captureEvents){

navbar.captureEvents(Event.MOUSEOVER);

navbar.captureEvents(Event.MOUSEOUT);

}

navbar.onmouseout();

}

</script>

<![endif]-->

<!-- end dropdown navbar -->