html {
	font-family: Arial, Helvetica, san serif;
	/* WC3's CSS validator warning: should surround w/ quotes
	   but that change the font to Roman! */
}
body {
	/* Dan Cederholm's "Faux Columns" technique
	   http://www.alistapart.com/articles/fauxcolumns/
	*/
	background-image: url('gifs/nav-faux-column-180plus1820x1black-tan.gif');
	background-repeat: repeat-y;
}
div#nav {
	margin-left: 0;
	width: 180px;
	position: absolute;
	top: 0px;
	left: 0px;
}
div#content {
	position: absolute;
	top: 0px;  left: 180px;
}

/* Attempting the technique described in 
   http://www.positioniseverything.net/articles/onetruelayout/equalheight */
/* I can't get it to work!! */
/*div#navstack_wrapper { overflow: hidden; } */

/* A stack of navigation buttons containing links to pages on the site */
div#navstack {
	width: 180px;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: black;
}
div#nav { /* within navstack .. a logo above a stack of navigation buttons */
	background-color: black; /* only affects background behind logo */
}

/* A SLS logo GIF which appears above the nav-button stack */
div#logo {
	height: 196px;
	width: 180px; /* actually 179 */
}

/* A button with room for one line of text */
div.button, div.button2 {
	background-color: black;
	padding-left: 15px;
	width: 165px; /* 15 + 165 = 180 */
}
div.button {
	height: 25px;
}
/* A button with room for two lines of text */
div.button2 {
	height: 40px;
}
div.button a {
	color: #D3D3D3; /*lightgray*/
	text-decoration: none;
	display: inline;
}
div.button a:hover {
	color: white;
	text-decoration: none;
}
div.button td {
	color: #CC9967;
	/* W3C's CSS validator warning: #CC9966 color == content background */
}

div.button2 a {
	color: #D3D3D3; /*lightgray*/
	text-decoration: none;
}
div.button2 a:hover {
	color: white;
	text-decoration: none;
}
div.button2 td {
	line-height: 1.1em;
	color: #CC9967;
	/* W3C's CSS validator warning: #CC9966 color == content background */
}

/* A bullet-like box which appears to the left of each button */
div.bittyBox {
	background-color: #9C6331;
	width: 8px;
	height: 8px;
	margin-top: 6px;
}

/* Contents panel, to the right of the menu button nav stack */
div#content {
  	background-color: #CC9966;
	position: absolute;
	top: 0px;
	left: 180px;
	padding-left: 8px;
	padding-right: 8px;
}


/* Fonts, headers, underlines, footers, fine print, ... */
div#content p,li {
	font-size: 90%; /* Do I really want this? */
}
div#content td {
	vertical-align: top;
	font-size: 100%;
}
div#content a {
	font-size: 105%; /* Do I really want this? */
}
div#nav td {
	vertical-align: top;
	font-size: 110%; /* Do I really want this? */
}
/* The usual header, with red-brown underline */
div#content h3 {
	border-bottom: 3px solid #9A3401;
	width: auto;
}
/* Smaller header for guest artists */
div#content h4 {
	border-bottom: 2px solid #9A3401;
	width: 250px;
	font-size: 95%;
}
/* Header of same font size as paragraph text; no underbar */
div#content h5 {
	font-size: 100%;
}
/* class="underline": used for a separator line which matches the color */
/*                    and width of the h3 underline */
.underline {
  	border-bottom: 3px solid #9A3401;
	width: auto;
}
.short_ctr_underline {
  	border-bottom: 3px solid #9A3401;
	width: auto;
	margin-left: 10%;
	margin-right: 10%;
}
.fineprint { /* Copyright, disclaimers, etc. in fine print */
	font-size: 75%;
}
.footer { /* anything spanning all columns above it */
	clear: left;
}
/* <a class="plain"> : A link with red-brown color and no underlining */
.plain {
	text-decoration: none;
	color: #9A3401;
}
.center {
	text-align: center;
}

div.column_half {
	float: left;
	width: 48%;
	margin-right: 2%;
}
div.column_third {
	float: left;
	width: 31%;
	margin-right: 2%;
}