*
{
font-family: arial, helvetica, sans-serif;

}



.titlebar
{
width:900px;
font-size: 20pt;
color: purple;
text-align: center;

border-top: 1px solid purple;
border-bottom: 1px solid purple;
border-left:1px solid purple;
border-right: 1px solid purple;
background: #FFF41B url(tint.jpg) repeat-y 100% 0;
}


.navbar
{
padding: 3px;
margin: 3px;
background: #FFF41B url(tint.jpg) repeat-y 100% 0;
width:890px;
}



.navbar a
{
width:890px;
background: #FFF41B url(tint.jpg) repeat-y 100% 0;
font-size: 8pt;
text-align: center;
text-decoration: none;
color: purple;
padding:3px;
margin: 1px;

}

td
{
font-size: 10pt;
color: purple;
line-height: 120%;

}



#leftpane
{
font-size: 10pt;
color: green;
padding:3px;
margin: 10px;

}

#rightpane
{
font-size: 10pt;
color: red;
padding:3px;
margin: 10px;
line-height: 120%;

}


body
{
background-color:#FFF986;

}

.contentBox {
	display:block;
	border-width: 0px;
	border-style: solid;
	/*border-color: 000; - apparently invalid according to w3.0rg*/
	padding:5px;
	margin-top:5px;
	width:400px;
	height:400px;
	overflow:scroll;
	}

/* Thumbnail pics with magnified details here*/

#pic {
        background-color: #FFFFCC;
        left: 50px;
        position: relative;
        top: 50px;
        width: 135px;
}

#pic a .large {
        border: 0px;
        display: block;
        height: 1px;
        left: -1px;
        position: absolute;
        top: -1px;
        width: 1px;
}

#pic a img {
        border: 0;
}

#pic a.p1, #pic a.p1:visited {
        background: #FFF41B;
        border: 1px solid #000;
        display: block;
        height: 194px;
        left: 0;
        text-decoration: none;
        top: 0;
        width: 125px;
}

#pic a.p1:hover {
        background-color: #FFF41B;
        color: #000000;
        text-decoration: none;
}

#pic a.p1:hover .large {
        border: 1px solid #000;
        display: block;
        height: 300px;
        left: 150px;
        position: absolute;
        top: -60px;
        width: 300px;
}
/*Pop up for internet explorer*/

.thumbnail{ 
position: relative; 
z-index: 0; 
} 

.thumbnail:hover{ 
background-color: transparent; 
z-index: 50; 
} 

.thumbnail span{ /*CSS for enlarged image*/ 
position: absolute; 
background-color: lightyellow; 
padding: 5px; 
left: -1000px; 
border: 1px dashed gray; 
visibility: hidden; 
color: black; 
text-decoration: none; 
} 

.thumbnail span img{ /*CSS for enlarged image*/ 
border-width: 0; 
padding: 2px; 
} 

.thumbnail:hover span{ /*CSS for enlarged image on hover*/ 
visibility: visible; 
top: 0; 
left: -60px; /*position where enlarged image should offset horizontally */ 

} 

</style>