/*
Structure of Page
 div#container - wraps the whole page
   div#intro - wraps the title
   div#nav - navigation elements
   div#content - content of the page
     div#purpose - the purpose of the page
		 the main content of the page (can use class msg to get a bottom border)
   div#closing - the ending content (usually a footer)
*/
* {
 margin: 0;
 padding: 0;
 }
body {
 background: url("images/frame/bg.gif");  /* stone wall background */
 }
#container {
 /* make the page centered */
 position: absolute;
 left: 50%;
 width: 744px;
 margin-left: -372px;  /* half the width of the continer */
 margin-top: 10px;  /* move the page down a little */
 background: url("images/frame/middle.jpg") repeat-y top center;  /* rose and sides */
 }
#intro {
 background: url("images/frame/top.jpg") no-repeat center top; /* top of frame */
 padding: 20px 28px 0;  /* move the content away from frame */
 text-align: center;
 }
#intro h1, #intro h2 {
 color: #633;
 font-family: "Comic Sans", Tahoma, Arial, Geneva, Lucida, sans-serif;
 }
#intro h1 {
/* font-size: 125%; */
/* text-transform: uppercase; */
 }
#intro h2 {
 font-size: 100%;
 font-style: oblique;
 }
#nav {
 float: left;
 width: 704px;  /* width of frame - 20px for each side */
 background: url("images/frame/nav_line.gif") repeat-x bottom;
 position: relative; 
 margin-left: 20px; /* actual margin */
 /* hack for IE */
 voice-family: "\"}\"";
 voice-family: inherit;
 margin-left: 10px;
 } 
html>body #nav {
 margin-left: 20px;  /* be nice to Opera */
 }
#nav ul {
 margin: 0;
 padding: 10px 10px 0;  /* top right&left bottom */
 list-style: none;  /* no bullets */
 }
#nav li {
 display: inline;  /* horizontal */
 margin: 0;
 padding: 0;
 }
#nav a {
 float: left;  /* abut the items */
 background: url("images/frame/button_left.gif") no-repeat left top;  /* left side of button */
 margin: 0;
 padding: 0 0 0 10px;  /* width of left side of button */
 border-bottom: 2px solid #47161C;  /* matches line */
 text-decoration: none;  /* no underline */
 color: black;
 font-weight: bold;
 }
#nav a span {
 float: left;
 display: block;
 background: url("images/frame/button_right.gif") no-repeat right top;  /* right side of button */
 padding: 5px 15px 3px 5px;  /* center text, top & bottom differ by line width,
                                left=right-width of button */
 }
/* hide rule from IE5-Mac with a backslash \*/
#nav a span {float: none;}
/* end hack */
#nav .current a {
 background-position: 0 -175px;  /* shift left to lower image */
 border-width: 0;
 }
#nav .current a span {
 background-position: 100% -175px;  /* shift right to lower image */
 padding-bottom: 5px;  /* cover line */
 color: white;  /* text color */
 }
#nav a:hover {
 background-position: 0 -175px;  /* shift left to lwoer image */
 }
#nav a:hover span {
 background-position: 100% -175px;  /* shift right to lower image */
 color: white;  /* color of text when hovered over */
 }
#content {
 clear: both;
 padding: 0 28px;  /* move the contect away from the frame */
 margin: 1em;  /* give some additional spacing of the div */
 font-family: Arial;
 }
#purpose {
 /* make a punch out in the content */
 float: left;
 width: 35%;
 margin: 0 .5em 0 0;
 padding: 0 .5em .5em 0; /* padding on right and bottom only */
 font-size: .8em;
 border: 1px dashed #47161C;  /* color line for navigation */
 border-width: 0 1px 1px 0;  /* only put the border on the sides touching text */
 }
/* #purpose ul { */
#subnav ul {
 margin: 0;
 padding: 10px 10px 0;  /* top right&left bottom */
 list-style: none;  /* no bullets */
 }
/* #purpose li { */
#subnav li {
 display: inline;  /* horizontal */
 margin: 0 5px 0 0;
 padding: 0;
 } 
#subnav .current {
 font-weight: bold;
 }
#subnav .current a {
 text-decoration: none;
 }
#closing {
 padding: 1px 28px 25px 28px;  /* move the content away from the frame */
 background: url("images/frame/bottom.jpg") no-repeat bottom left;  /* bottom of frame */
 font-size: 80%;
 text-align: center;
 color: #47161C;
 }
.msg {
 padding: .5em 0 1.1em 0;  /* add some spacing */
 background: transparent url("images/frame/row.jpg") no-repeat bottom center;
 }
/* Stuff for thumbnail images */
/* Within the page that has thumbnails, specify the width and margins */ 
.thumbnail {
 float: left; 
/* width: 133px; */
 text-align: center;
/* margin: 10px 11px 10px 11px; */
 }
img {
 border-style: none;
 }
.clearboth {
 clear: both;  /* apply to a br tag after the thumbnails are done */
 }
.emphasis {
 font-weight: bold;
 color: #47161C;
 }