/*
 *
 *=============================================================================
 *	Menu bar, usually under the page heading
 *=============================================================================
 *
 * #mbar is floated to make it contain the floats below.
 *
 */

#mbar {
	width: 100%;
	float: left;
	border: 1px solid #572C7D;
}
#mbleft {
	float: left;
}
#mbright {
	float: right;
}


/* style the outer div to give it width */
.menubar {font-size:small; background:#FDF701;}

/* remove all the bullets, borders and padding from the default list styling */
.menubar ul {padding:0;margin:0;list-style-type:none; height:2em; background:#FDF701;float:left}

/* style the sub-level lists */
.menubar ul ul {width:7em;float:left}

/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menubar ul li {float:left;height:2em;line-height:2em;}

/* style the sub level list items */
.menubar ul ul li {display:block;width:7em;height:auto;position:relative;line-height:1em;}

/* style the links for the top level */
.menubar a, .menubar a:visited {display:block;float:left;height:100%;font-size:small;text-decoration:none;color:#572C7D;background:#FDF701;padding:0 1em 0 1em;}

/* style the sub level links */
.menubar ul ul a, .menubar ul ul a:visited {
	display:block;background:#FDF701; color:#572C7D;width:7em;
	height:100%;line-height:1em; padding:0.5em 1em;
}

.menubar ul table ul a, .menubar ul table ul a:visited  {
	width:9em;w\idth:7em;}


/* style the table so that it takes no part in the layout - required for IE to work */
.menubar table {position:absolute; left:0; top:0; font-size:small;}
.menubar ul ul table {lef\t:-1px;}
.menubar ul ul table ul.left {margin-lef\t:2px;}

.menubar li:hover {position:relative;}
* html .menubar a:hover {position:relative;}

/* style the third level background */
.menubar ul ul ul a, .menubar ul ul ul a:visited {background:#FDF701;}
/* style the fourth level background */
.menubar ul ul ul ul a, .menubar ul ul ul ul a:visited {background:#FDF701;}
/* style the sub level 1 background */
.menubar ul :hover a.sub1 {background:#572C7D;color:#FDF701;}
/* style the sub level 2 background */
.menubar ul ul :hover a.sub2 {background:#572C7D;color:#FDF701;}

/* style the level hovers */
/* first */
.menubar a:hover {color:#FDF701;background:#572C7D;}
.menubar :hover > a {color:#FDF701;background:#572C7D;}
/* second */
.menubar ul ul a:hover{color:#FDF701;background:#572C7D;}
.menubar ul ul :hover > a {color:#FDF701;background:#572C7D;}
/* third */
.menubar ul ul ul a:hover {background:#572C7D;color:#FDF701;}
.menubar ul ul ul :hover > a {background:#572C7D;color:#FDF701;}
/* fourth */
.menubar ul ul ul ul a:hover {background:#572C7D;color:#FDF701;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menubar ul ul {visibility:hidden;position:absolute;height:0;top:2em;left:0;width:7em;}

/* position the third level flyout menu */
.menubar ul ul ul{left:10em;top:0;width:7em;}

/* position the third level flyout menu for a left flyout */
.menubar ul ul ul.left {left:-10em;}


/* make the second level visible when hover on first level list OR link */
.menubar ul li:hover ul, .menubar ul a:hover ul {visibility:visible; height:auto; padding-bottom:3em; background:transparent url('/images/trans.gif');}
/* keep the third level hidden when you hover on first level list OR link */
.menubar ul :hover ul ul{visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menubar ul :hover ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menubar ul :hover ul :hover ul{visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menubar ul :hover ul :hover ul :hover ul {visibility:visible;}

/*
 *=============================================================================
 *	General class, for buttons, etc
 *=============================================================================
 *
 */
INPUT.menu {
	border: 3px groove #572C7D;
	background-color: #FDF701;
	color: #572C7D;
}

.menu a, .menu a:visited {
	display:block;
	height:100%;
	font-size:small;
	text-decoration: none;
	color:#572C7D;
	background:#FDF701;
	padding:0 1em 0 1em;
}

.menu a:hover {color:#FDF701;background:#572C7D;}
.menu :hover > a {color:#FDF701;background:#572C7D;}


.nav {
	background-color: #C3CCE0;
	color: #223C81;
	border: 0;
	padding: 0;
	padding-left: 4px;
	padding-right: 8px;
	font-size: small;
	font-family: sans-serif;
	text-decoration: none;
}

DIV.nav {
	border: 1px solid #223C81;
	width: 160px
}

INPUT.nav {
	border: 3px groove #223C81;
	background-color: #FDF701;
	color: #572C7D;
}

INPUT.nav:hover {
	color: #C3CCE0;
	background-color: #223C81;
}

A.nav:hover {
	color: #C3CCE0;
	background-color: #223C81;
}

TABLE.nav {
	border-collapse: collapse;
	border: 1px solid #223C81;
}

/* Highlighted */

.nav_hi {
	background-color: #F1B610;
	color: #223C81;
	border: 0;
	padding: 0;
	padding-left: 2px;
	padding-right: 2px;
	font-size: small;
	font-family: sans-serif;
	font-weight: bold;
	text-decoration: underline;
}

INPUT.nav_hi {
	text-decoration: none;
}

INPUT.nav_hi[type='submit']:hover {
	color: #C3CCE0;
	background-color: #223C81;
}

A.nav_hi {	text-decoration: none }
A.nav_hi:hover {
	color: #C3CCE0;
	background-color: #223C81;
}

TABLE.nav_hi {
	border-collapse: collapse;
	border: 1px solid #223C81;
}


BODY, HTML {
	padding: 0;
	margin: 0;
	font-family: Verdana, sans-serif;
	background:white;
	color:#000000;
}

body {
    min-width:800px;
}

#page {
	margin:0 auto;
	width: 800px;
	color: #00773E;
	background-color: white;
	position: relative;
}


H1 {
	color: #00773E;
	padding-top: 4px;
	padding-bottom: 4px;
}

DIV, TABLE, TR, TD, UL, IMG {
	padding: 0;
	margin: 0;
	border: none;	
}

TABLE {
	border-collapse: collapse;
}

A {
	color: #00773E;
	text-decoration: none;
}


input {
	color: #572C7D;
	background-color: #FDF701;
	border: 3px groove #572C7D;
}


/*
 *=============================================================================
 *	Page header
 *=============================================================================
 */

#hdg {
	background-color: transparent;
	color: #00773E;
	vertical-align: bottom;
	height: 180px;
	width: 100%;
}

#hdgtbl {
	position: absolute;
	left: 100px;
}

#hdgtxt {
	position: absolute;
	left: 105px;
	top: 145px;
}

#hdgtxt H1 {
	margin: 0;
	padding: 0;
	font-size: 1em;
	font-weight: normal;
}

#subhdg {
	position: absolute;
	top: 145px;
	right: 0;
	width: 50%;
	text-align: right;
}


#copyright {
	font-style: italic;
	font-size: smaller;
	color: #00773E;
	float: right;
	margin: 0; padding: 0;
}
/*
 *=============================================================================
 *	content
 *=============================================================================
 */

#content {
	float: left;
	width: 100%;
	padding-top: 8px;
}

/*
 *-----------------------------------------------------------------------------
 *	content/title
 *-----------------------------------------------------------------------------
 */

#title {
	width: 100%;
	clear: both;
	padding: 16px 0 16px 0;
	text-align: center;
}

#title H1 {
	padding: 0; margin: 0;
	font-size: 1.5em;
}

/*
 *-----------------------------------------------------------------------------
 *	content/calendar
 *-----------------------------------------------------------------------------
 */

#calendar {
	width: 180px;
	float: right;
	border: 1px solid #572C7D;
	color: #572C7D;
	background-color: #8887B5;
	margin-bottom: 8px;
}
#calendar H3 {
	background-color: #FDF701;
	color: #E8821B;
	font-size: smaller;
	padding: 8px 0 8px 0;
}


table.cal {
	width: 100%;
	margin-bottom: 4px;
}
table.cal th {
	background-color: #E8821B;
	color: #FDF701;
	font-size: smaller;
}
table.cal td {
	font-size: smaller;
	color: #572C7D;
	background-color: #FDF701;
	padding: 4px 4px 4px 4px;
	border-bottom: 1px solid #FDF701;
}

/*
 *-----------------------------------------------------------------------------
 *	content/middle
 *-----------------------------------------------------------------------------
 */

#middle {
	width: 600px;
}

/*
 *-----------------------------------------------------------------------------
 *	content/tables of songs
 *-----------------------------------------------------------------------------
 */

table.songs {
	margin-left: 64px;
}
table.songs td {
		padding: 0 4px;
		border-right: 16px solid white;
		border-bottom: 4px solid white;
	}

/*
 *-----------------------------------------------------------------------------
 *	separator table row
 *-----------------------------------------------------------------------------
 */

.sep {
	background-color: #8887B5;
	color: white;
	font-size: x-small;
}

/*
 *-----------------------------------------------------------------------------
 *	Button stuff
 *-----------------------------------------------------------------------------
 */

a.button {
	border: 3px groove #572C7D;
	background-color: #FDF701;
	color: #572C7D;
	padding: 0 6px;
}
/*
 *=============================================================================
 *	Page footer
 *=============================================================================
 */

#footer {
	background-color: #FDF701;
	border: 1px solid #572C7D;
	color: #572C7D;
	float: left;
	width: 100%;
	font-size: xx-small;
	margin-top: 16px;
}

#footer A {
	color: #572C7D;
}

/*
 *=============================================================================
 *	Messages
 *=============================================================================
 */

.error {
	background-color: yellow;
	color: red;
	font-weight: bold;
	font-family: Verdana, sans-serif
}

DIV.error {
	width: 100%;
	border: 2px solid red;
	padding: 8px
}

.warning {
	background-color: yellow;
	color: green;
	font-weight: bold;
	font-family: Verdana, sans-serif
}

DIV.warning {
	width: 100%;
	border: 2px solid green;
	padding: 8px
}

.message {
	color: green;
	font-family: Verdana, sans-serif
}

DIV.message {
	padding: 8px
}

/*
 *=============================================================================
 *	Miscellaneous
 *=============================================================================
 */

td.uln, th.uln { 
	border-bottom: 1px solid #00773E;
	padding-left:8px; 
	font-size: small; 
}

/*
 *=============================================================================
 *	Security, anti-spam
 *=============================================================================
 */

.sec {
        visibility: hidden;
        display: none;
}