html { 
	/* Force the scrollbar, so that the page doesn't jump when it's short. */
	height: 101%;
}

body {
	width: 100%;
	height: 101%;
	margin: 0;
	padding: 20px 0;
	font-family: calibri, helvetica, lucida, verdana, arial;
}

a {
	font-weight: bold;
	color: darkred;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1, h2, h3, th {
	font-family: trebuchet, "trebuchet ms", geneva;	
}

h1 {
	margin-top: 0;
	font-size: x-large;
	color: #444;
	border-bottom: 1px solid black;
}
h2 {
	font-size: 130%;
	color: #222;
}

h3 {
	font-style: italic;
	color: #222;
}

table.committee{
	background-color: white;
	width: 608px;
	border-collapse: collapse;
	border: 2px solid gray;
}

table.committee td, table.committee th {
	border: 2px solid gray;
	padding: 5px;
	padding-bottom: 1em;
}

td.committeebulletin, th.committeebulletin {
	width: 7em;
	text-align: center;
}

td.committeename {
	text-align: center;
}

.ebulletin {
	display: block;
	margin-bottom: 2em;
	text-decoration: none;
	font-weight: bold;
	color: blue;
}

.contact {
	width: 350px;
	padding: 10px;
	background-color: white;
	border: 2px gray solid;
}

.contactname {
	font-weight: bold;
}


/* Style for Membership pages */

	.membershipform {
		width: 600px;
	}
	
	.membershipform>tbody>tr>th {
		text-align: right;
		vertical-align: top;
		padding-right: 10px;
		width: 250px;
	}
	
	.membershipform td>h2 {
		text-align: center;
		margin-top: 10px;
		border-top: 2px solid maroon;
		padding-top: 10px;
	}
	
	.tablesectionhead {
		text-align: center;
		font-style: italic;
		font-weight: bold;
		padding-top: 10px;
	}

/* ALL LAYOUT GOES BELOW THIS LINE */

#container {
	width: 800px;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	padding-bottom: 20px;
}

	#topbanner {
		width: 800px;
		height: 90px;
		position: relative;
		border-bottom: 2px solid #400;
	}
	
	#topbanner img {
		float: left;
	}
	
	#memberlogin {
		position: absolute;
		right: 0;
		top: 0;
		background: black;
		color: white;
		padding: 5px;
	}
	
	#memberlogin a {
		color: white;
		font-weight: bold;
	}
	
	#pagetitle { /* display hidden.  But you can show it using display:block instead of display:none */
		display: none;
		font: x-large "arial black";
		position: absolute;
		left: 500px;
		bottom: 0px;
		color: white;
	}

	/* SIDE NAVIGATION BAR */
	
		#sidenavbar {
			display: block;
			float: left;
			width: 150px;
			background: maroon;
		}
		
		#sidenavbar ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		
		#sidenavbar li {
			display: block;
			float: left;
		}
		
		#sidenavbar a {
			float: left;
			display: block;
			width: 130px; /* = 150 px - 10px - 10px padding */
			padding: 5px;
			padding-left: 10px;
			padding-right: 10px;
			text-decoration: none;
			font-weight: normal;
			color: white;
		}
		
		/* LEVEL 1 */
		
			#sidenavbar a {
				background: #800;
				border-bottom: 2px solid #600;
			}
			
			#sidenavbar a:hover {
				background: #A00;
			}
			
			#sidenavbar a.navhere{
				background: #A00;
				font-weight: bold;
			}
		
		/* LEVEL 2 */
		
			#sidenavbar a.navlevel2 {  /* interpreted differently in IE and FF */
				background: #600;
				padding-top: 2px;
				padding-bottom: 2px;
				padding-left: 20px;
				padding-right: 0px;
				border-bottom: 2px solid #600;
			}
			
			#sidenavbar a.navlevel2:hover {
				background: #A00;
			}
		
	#pagecontent {
		width: 608px; /* = 650 px - 2 * 20px padding - 2* 1px border */
		display: block;
		float: left;
		position: relative;
		padding: 20px;
		padding-bottom: 0;
		border-left: 1px solid gray;
		border-right: 1px solid gray;
		border-bottom: 1px solid gray;
		background-color: lightyellow;
	}

#bottomnavbar {
	display: block;
	float: left;
	width: 608px;
	text-align: center;
	font-size: smaller;
	margin-top: 20px;
	padding-top: 10px;
	margin-bottom: 0;
	border-top: 2px solid gray;
}