/* Martin Pegler Layout CSS */

* { margin: 0; padding: 0; }

body { font-size: 100%; }

.content { margin: 5px auto 5px auto; width: 800px; height: 590px; }

#header { width: 800px; height: 66px; margin: 0; background-color: #eeeeee; }
#header .title { float: left; padding: 21px 0 0 5px; text-align: left; font-family: verdana; font-style: italic; font-weight: 500; font-size: 1.1em; color: #444444;  }
#header .pagetitle { float: left; padding: 21px 0 0 355px; text-align: right; font-family: verdana; font-style: none; font-weight: 100; font-size: 1.1em; color: #444444;  }
#header img { float: right; position: relative; top: 0; left: 0; width: 100px; height: 66px; }

#left_nav {  float: left; width: 140px; margin: 40px 0 0 0; padding: 5px 0 5px 2px; font-family: verdana; font-size: 0.9em; }
#left_nav li {  margin: 0; padding: 0 0 3px 0; list-style-type: none;  }
#left_nav a { display: block; font-family: verdana; text-align: center; padding: 2px 2px; text-decoration: none; color: #494949; background-color: #dddddd; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
#left_nav a:hover { color: #ffffff; background-color: #bbbbbb; }

#main { float: right; width: 620px; padding: 0 5px; margin: 45px 0 0 10px; font-family: verdana; font-size: 1.0em; color: #444444; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; }
#main img.house { position: relative; top: 0px; left: 110px; padding: 10px 0 0 0; }
#main img { border: none; }
#main h1 { font-size: 1.0em; }
#main h2 { font-size: 0.8em; }
#main p.underlined { font-size: 0.8em; font-weight: normal; text-decoration: underline; }
#main p.large-underlined-center { text-align: center; font-size: 1.1em; font-weight: normal; text-decoration: underline; }
#main p.bold { font-size: 0.8em; font-weight: bold; }
#main p.center { text-align: center; font-size: 0.8em; font-weight: normal; }
#main p.right { text-align: right; font-size: 0.8em; font-weight: normal; }
#main p.center-bold { text-align: center; font-size: 0.8em; font-weight: bold; }
#main p.center-small { text-align: center; font-size: 0.7em; font-weight: normal; }
#main p { font-size: 0.8em; font-weight: normal; }
#main p.comment-left { text-align: left; font-size: 0.7em; font-weight: normal; font-style: italic; }
#main p.comment-center { text-align: center; font-size: 0.7em; font-weight: normal; font-style: italic; }
#main p.comment-right { text-align: right; font-size: 0.7em; font-weight: normal; font-style: italic; }
#main ul { list-style: square inside; }
#main ol { list-style: decimal inside; }
#main li { font-size: 0.8em; padding: 0 0 0 10px; }
#main a { color: #337733; border: none; }
#main a:hover { color: #ff0000; }

.underline { text-decoration: underline; }
.bold { font-family: verdana; font-size: 0.9em; font-weight: bold; }

#footer_nav { text-align: center; margin: 5px auto; width: 800px; font-family: verdana; font-size: 0.9em; }
#footer_nav li { display: inline; list-style-type: none;  }
#footer_nav a {  text-decoration: none; color: #337733; font-family: verdana; }
#footer_nav a:hover { color: #ff0000; }



/* THUMNAIL CSS */
.thumbnail{ position: relative; z-index: 0; }
.thumbnail:hover{ background-color: transparent; z-index: 50; text-decoration: none; }
.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: -420px; left: -150px; /*position where enlarged image should offset horizontally */ }

.thumbnail_top{ position: relative; z-index: 0; }
.thumbnail_top:hover{ background-color: transparent; z-index: 50; text-decoration: none; }
.thumbnail_top 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_top span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; }

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