/* MSBOA District 8 Homepage */
/* This is the FIXED-WIDTH version of the page.
To see what the page would look like as a LIQUID layout, 
simply remove line #19 of this CSS code. */
* {
	margin:0; padding:0;
}
body {
	color: #fff;
	font: .8em calibri, verdana, arial, sans-serif;
	background-color: #000;
	/* This is the dark background color for the page. */
}
#main_wrapper {
	margin-left: auto;
	margin-right: auto;	
	text-align: left;
	background-color: #000;
	/* This is the same dark background color that was used for the body,
	and footer of the page - now used also for the main content of the page */
	overflow: hidden;
}
#header {
	height: 115px;
	text-align: center;
	vertical-align: middle;
	/* This is the color background for the header. (Same as navbar and dropmenu.) */
}
#header {
	background-image: url('../images/headerbgstretch.gif');
	background-repeat: no-repeat;
	background-position: top center;
}
#header_inner {
	padding: 20px;
}
#navbar {
	color: #fff;
	height: 45px;
	margin: 0px 0px 2px 0px;
	text-align: center;
	vertical-align: middle;
	background-color: #000F3D;
	/* This is the color background for the navigation bar. (Same as header and dropmenu.)  */
}
#navbar_inner {
	padding: 10px;
	border-top: 1px solid #767676;
}
#content {
	font-size: .9em;
	float: left;
	width: 70%;
	padding-bottom: 20000px;
	margin-bottom: -20000px;
	/* These padding and margin values allow the background color to extend to the
	bottom of the page in both the content area and sidebar	regardless of which one has more content. */
	background-image: url('../images/darkgreendrum.gif');
}
#content_inner {
	padding: 25px;
	border-top: 1px solid #767676;
	border-right: 1px solid #767676;
}
#sidebar {
	font-size: .9em;
	float: left;
	width: 30%;
	padding-bottom: 20000px;
	margin-bottom: -20000px;
	background-image: url('../images/brownviolin.gif');	
	border-top: 1px solid #767676;
}
#sidebar_inner {
	margin-left: 10px;
	padding: 25px;
}
.clear {
	clear: both;
}
#footer {
	color: #fff;
	text-align: center;
	padding: 10px;
	clear: both;
	background-color: #000;
	/* This is the same dark background color that was used for the body,
	and main content areas of the page, now used also for the footer */
	border-top: 1px solid #767676;
}
#footer_inner {
	padding: 10px;
}
.smallcaps span {
	font-size: 1.8em;
	font-style:normal; 
	font-variant: small-caps;
}
h1 {
	color: #D3D3D3;
	font-size: 2.5em;
	letter-spacing: .2em;
	font-variant: small-caps;
}
h2 {
	color: #D3D3D3;
	font-size: 2.4em;
	letter-spacing: .1em;
	font-variant: small-caps;
}
h3 {
	color: #fff;
	font-size: 2em;
}
h4 {
	color: #fff;
	font-size: 1.6em;
}
h5 {
	color: #EBE0D6;
	font-size: 1.2em;
}
h6 {
	font-variant: small-caps;	
	color: #fff;
	font-size: .8em;
}
a:link {
	color:#47C2FF;
}
a:visited {
	color:#aaaa88;
	}
a:hover {
	color: #FFE34D;	
}
a.speciallink { 	color: #D3D3D3; 	text-decoration: none;}a.speciallink:visited { color: #D3D3D3; }a.speciallink:hover { color: #D3D3D3; }a.speciallink:active { color: #D3D3D3; }
/* ALL CSS below is for the drop menus only. */
#drop_menu * {
	margin: 0;
	padding: 0;
}
#drop_menu  {
	font-family: verdana, trebuchet, sans-serif; 
	/* This is the same color background as was used for the header and navbar. */
	border: 0px;
}
#drop_menu li {
	width: 16%;
	list-style-type: none;
	float: left;
	position: relative;
	/* This is the same color background as was used for the header and navbar. */
}
#drop_menu a {
	display: block;
	color: #fff;
	padding: .3em 6px;
	text-decoration: none;
}
#drop_menu a:hover {
	color: #FFE34D;
}
#drop_menu li ul {
	position: absolute;
	width: 7em;
	display: none;
	left: -1px;
}
#drop_menu li:hover ul {
	display: block;
}
#drop_menu li ul li{
	width:150%;
	border-right: 1px solid #767676;
	border-bottom: 1px solid #767676;
	border-left: 1px solid #767676;
	background-color: #460000;
}
#drop_menu li ul li:first-child{
	border-left: 1px solid #767676;
	border-top: 1px solid #767676;
}