body {
	background-color: #000;
	background-image: url("img/denissimachev-khokhloma-darker.jpg");
}
img {
	display: block;
}

/* For all pages */

#main {
	position: absolute;
	top: 0px;
	left: 250px;
	background-image: url("img/left_border.gif");
	background-repeat: repeat-y;
	width: 708px;
}
#sidenav_frame_top {
	position: absolute;
	top: 100px;
	left: -136px;
}
#sidenav_frame_bottom {
	position: absolute;
	top: 106px;
	left: -136px;
	width: 136px;
	padding: 10px 0px;
	background-image: url("img/sidenav/frame_bottom.png");
	background-repeat: no-repeat;
	background-position: bottom;
}
#banner {
	margin-left: 38px;  /* 38px is the width of the repeated left-hand element */
	height: 286px;
}
#hidden_menu_bar {
	display: none;
}
#menu_bar {
	margin-left: 38px;
	height: 50px;
	width: 667px;
}
/* Styles for individual menu link divs to eliminate need for javascript in rollovers.

   There are many different internet articles about the best way to do this. The hippest
   nowadays is to make a single image that contains both the on and off images, then to
   slide the one you want into place using knowledge of the image's dimensions and the
   background-position property.  But personally I don't like having hard-coded numbers
   in my style sheets that depend on things like the dimensions of an image, so I made 
   separate images for the on and off states.

   The off-state images are invoked in html <img> tags, while the on-state images are in
   the background of the surrounding <a> tags.  Because the images are .png files with
   transparent and semi-transparent pixels, however, the off-state image can't just sit
   on top of the on-state image - the on-state image will show through - so I use styles
   to switch the visibility attributes of both the <a> tags and the <img> tags depending
   on whether the mouse is hovering over the image or not (see the definitions for class
   "menu_link" below).

   I am very happy with this solution. The background-sliding trick described above puts
   hard numbers in the code, as I mentioned, and also can produce a flickering effect in
   Internet Explorer.  Apparently this is because IE does not cache background images.
   Whatever the reason, it happens, and it's annoying.

   A lot of inspiration for this technique came from http://www.redmelon.net/tstme/roll/,
   although I came up with the tweak for transparent .pngs myself :)
*/
#home a {background-image: url("img/sidenav/home_underline.png");}
#events a {background-image: url("img/sidenav/events_underline.png");}
#history a {background-image: url("img/sidenav/history_underline.png");}
#music a {background-image: url("img/sidenav/music_underline.png");}
#links a {background-image: url("img/sidenav/links_underline.png");}
#store a {background-image: url("img/sidenav/store_underline.png");}
#contact a {background-image: url("img/sidenav/contact_underline.png");}

#parchment_top {            /* "parchment_top" fades into transparency btwn y=20 and y=40 */
	position: relative;
	margin-bottom: -20px;
/*	top: 336px; old value from when menu was horizontal and between banner and content */
/*	top: 290px; */
	left: 38px;         /* to clear left-hand stripe */
	width: 667px;
	height: 40px;
	background-image: url("img/parchment_top.png");
	z-index: 1;
}
#parchment_middle {
	position: relative;
	left: 38px;  /* to clear left-hand stripe */
	width: 667px;
	background-image: url("img/parchment_middle.png");
	z-index: 0;
}
#parchment_bottom {         /* "parchment_bottom" fades into transparency between y=20 and y=0 */
	position: relative;
	margin-top: -20px;  /* pulls fade onto bottom 20 px of "parchment_middle" */
	left: 38px;         /* to clear left-hand stripe */
	width: 667px;
	height: 40px;
	background-image: url("img/parchment_bottom.png");"")
	z-index: 1;
}
#content { 
	padding: 20px 30px;  /* top/bottom padding of 20px avoids top & bottom fades */
	font-family: "times new roman", serif;
	font-size: 13pt;
}
#content h1 { 
	margin: 0px 0px 20px 0px;
	font-family: georgia, "times new roman", serif;
	font-size: 12pt;
	font-weight: bold;
}

/* For main page */

#front_page_summary {
	height: 194px;  /* define height to keep floating "G" image away from bottom fade */
	padding: 10px 20px 0px 15px;
	clear: both;
}
#G {
	float: left;
}
#summary_text {
	text-indent: -15px;
	margin-left: 55px;
	font-family: georgia, "times new roman", serif;
	font-size: 12pt;
	font-weight: bold;
	text-align: justify;
}

/* Classes for all pages */

.menu_link {
	float: right;
	margin: 0px 15px;
}
/* Controls on and off states when user's mouse hovers over a link */
.menu_link a {
	outline: none;  /* removes dotted line around link when clicking */
	display: block;
	visibility: hidden;
	background-repeat: no-repeat;
}
.menu_link a img {
	border-style: none;
	visibility: visible;
}
.menu_link a:hover {
	visibility: visible;
}
.menu_link a:hover img {
	visibility: hidden;
}

/* Classes for main page and store */

.picture_frame {
	float: left;
}
.picture_frame img {
	border: 1px solid black;
}
.caption {
	margin-top: 8px;
	font-style: italic;
	text-align: center;
}
.floattext {
	margin-left: 30px;
	width: 310px;
	float: left;
}
.floattext a {
	text-decoration: none;
}

.clearblock { 
	line-height: 0px;
	clear: both;
}
.hr {
	height: 1px;
	width: 600px;
	margin: 15px auto;
	background-color: #000;
}

/* For music page */
table tr th {
	text-align: center;
	padding-bottom: 10px;
	border-bottom: 1px solid black;
}
table tr td { 
	padding: 3px 10px;
}