BODY {
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : small;
}
#container
{
width: 100%;
margin: 10px auto;
color: #333;
border: 1px solid gray;
line-height: 130%;
min-width:700px;
width:expression(document.body.clientWidth < 700 ? "680px" : "100%" );
}

#top
{
padding: 1em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 165px;
margin: 0;
padding: 1em;
background-color: #fff;
display: inline;
}

#rightnav
{
float: right;
width: 165px;
margin: 0;
padding: 1em;
background-color: #fff;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
min-width:250px;
background-color: #fff;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    filter:alpha(opacity=90);
    moz-opacity:.90;
	opacity:.90;
    top:2em; left:2em; width:18em;
    border:1px solid #0cf;
    padding: 5px;
    background-color:#cff; color:#000;
    text-align: center}
A:link {
  color: #0000ff; 
  text-decoration: underline;
  }
A:visited {
  color: #0000ff; 
  text-decoration: underline; 
}
A:hover{ 
  color: #ff0000; 
  text-decoration: underline; 
}