h1{
font-family: Trebuchet MS;
font-size: 150%;
}

h2{
font-family: Trebuchet MS;
font-size: 130%;
}

h3{
font-family: Trebuchet MS;
font-size: 120%;
}

h4{
font-family: Trebuchet MS;
font-size: 100%;
margin-left: 2em;
font-weight: normal;
}


div.bread { 
font-family: Trebuchet MS;
background:#ffffdd;
border: solid 1px gray;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 1em;
margin: 1em;
}

p{
font-family: Trebuchet MS;
font-size:100%;
}

div.gallery{
margin-top:-0.8em;
}


div.onepic{
margin-left: 4em;
}


div.nav{
margin-top:-0.1em;
background:#e4e538;
}

ul.nav {
padding: 5px;
}

ul.nav li {
font-family: Trebuchet MS;
font-weight:bold;
font-size:90%;
display:inline;
padding-left:3em;
padding-right:1em;

}

ul.nav li.sel a {
	color:#000;
}
ul.down {
  list-style-type: none;
}
ul.down li {
font-family: Trebuchet MS;
font-size:100%;
background:#cccccc;
border:solid 1px gray;
margin: 0.5em;
padding: 0.5em;
width: 7em;
}

a:visited,a:link { text-decoration: none; color: #844a58; }
a:active {text-decoration: none; font-size:124% color: #844a58;}
a:hover {color: #d42745; }


/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }
/* begin gallery styling */
#jgal { list-style: none; width: 200px; }
#jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position: absolute; top: 320px; left: 220px; display: none; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }


/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }

<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->