/* Style Sheet for klahhaneclub.org */

a:link {
  color: #8F650F;
}

a:visited {
  color: #5e1f00;
}

a:active {
  color: #ff0000;
}

a:hover {
  color: #EBA819;
}

body {
	background: #E5E5CC;
}

div.Everything {
	margin: 0 auto auto auto;
	padding: 0;
	max-width: 888px;  /* background image width + 4px */
}

div.HeaderOuter {
	padding: 0;
	margin: 0 auto 0 auto;  /* right and left are auto, to center in "Everything" */
	border: 2px solid black;
}

div.Header {
	height: 104px;   /* the background image height */

	/* We use a background-image rather than placing an image inside the header.
		This is so the image can float inside its border */
	background-image: url(images/logo5.jpg);  /* 884 x 104 */
	background-repeat: no-repeat;  /* unnecessary since div is sized to fit the image */
}

div.NonHeader {
	position: relative;  /* needs a position apparently, so the "absolute" positions below will work */
	width: 100%;
}

div.SidebarOuter {
	position: absolute;  /* relative to NonHeader */
	left: 0;
	top: 5px;
	padding: 0;
	margin: 0;
}

div.Sidebar {
	width: 205px;
	margin: 0 auto auto 0;
	border: 2px solid black;
}

div.SidebarImg {
	margin: 0;
	padding: 0;
}

div.SidebarImg img {
	padding: 0;
	margin: 0;
	display: block;    /* eliminates space between image and menu */
}

/* The ContentOuter div blocks the menu text from spilling past its border.
   For this to work, the left margin must be zero. */
div.ContentOuter {
	width: auto;
	position: absolute; /* relative to NonHeader */
	left: 207px;  /* SideBar width + 2px for SideBar left border (ContentOuter left border overlaps SideBar right border)*/
	top: 5px;
	margin: 0;
	padding: 0;
	z-index: 2;  /* keeps menu text from spilling over the content */
	background: #E5E5CC;     /* necessary to block visibility of menu text */
	border-left: 2px solid black;  /* This border overlaps SideBar right border. */
											/* This allows the border to extend downward when the content is taller than the sidebar. */
}

div.Content {
	width: auto;
	margin: 10px 0 20px 0;
	padding: 0 0 0 0.8em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
}

div.SectionHeading {
	color: black;
	font-weight: bold;
	margin: 1em 0 0 0.5em;
	font-size: 120%;
}

div.SectionText {
	color: black;
	font-size: 100%;
	margin: 0 0 0 1.5em;
}

div.SectionTextLeft { /* left-justified with SectionHeading */
	color: black;
	font-size: 100%;
	margin: 0 0 0 0.5em;
}

span.PDF {             /* for the "(PDF)" text that follows PDF document links */
	color: black;
	font-weight: bold;
	font-size: 80%;
}

div.PageTitleHeading {
	color:  #7B5200;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin-bottom: 1em;
	margin-top: 0.5em;
	font-size: 140%;
}

div.PageTitleHeading span.PageTitleAncestor {
}

div.PageTitleHeading span.PageTitleCur {
	color: #7B5200;
}

div.LinksList span {
	color: #660000;
	font-weight: bold;
	font-size: 110%;
	margin-bottom: 0;
}

div.LinksList ul {
	margin-top: 0;
}

div.LinksList dl {
	margin-top: 0.1em;
}

div.LinksList dt {
	font-weight: bold;
	margin-left: 1em;
}

div.Menu {
	border-top: 2px solid black;
}

div.Menu ul {
	list-style-type: none;
	margin: 0 auto auto auto;
	padding: 0;  /* needed in FireFox but not IE */
	background: #CCCC99;  /* Shows on the left of indented menu items */
}

div.Menu a {
	display: block;
	border-top: 2px solid #EEEE99;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 85%;  /* allows the font to change size based on settings */
	font-weight: bold;
/*	letter-spacing: 1px;*/  /* this makes it a little more "blocky" */
	background: #CCCC99;
	color: #3E0D52;
	text-decoration: none;
	padding: 6px 5px 5px 5px;
}

div.Menu a:hover {
	background: #E5E5CC;
	color: #663300;
	text-decoration: underline;
}

div.Menu a.current,
div.Menu a:hover.current
{
	background: #E5E5CC;
	color: #663300;
	text-decoration: none;
	cursor: default;
}

li.FirstMenuItem a {  /* For some reason this doesn't work if I put the class name directly on the <a> */
	border-top: none;
}

li.ExpandedMenuItem a {
	border-bottom: 2px solid #EEEE99;
}

div.Menu2 {
	margin: 0 0 0 25px;  /* indent second-level menu */
	border-left: 2px solid #A52A2A;
	margin-bottom: 5px;
}

div.Menu2 a {
	border-top: none;
	border-bottom: 2px solid #A52A2A;
}