/* CSS Document */


/*main layout*/	
#Content {
	width:800px;
	margin:0px auto;
	margin-top: 0px;
	}
	
body
    {
    background-image: url('http://backyardmarchingband.com/images/patt.gif');
    background-repeat: repeat; 
    text-align:center;
    font-family: arial;
    color: #edf7f2;
  	margin-top: 0px;
    }
    
#top
{
	background: url('http://backyardmarchingband.com/images/top.png');
	background-repeat: no-repeat;
	height: 205px;
	width: 100%;
	margin: 0 0;
}

#menu
{
width: 100%;
font-weight: 550;
background: url('http://backyardmarchingband.com/images/menu.png');
background-repeat: repeat-y;
font-size: 24px;
height: 26px;
margin: 0 0;
padding: 0 2 0 0;
}

#innermenu
{
position: relative;
z-index: 10;
width: 620px;
float: right;
margin-right: 35px;
height: 100%;
}

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	list-style-position: outside;
}

#nav a {
	display: block;
	width: 4em;
}

#nav li { /* all list items */
	float: left;
	width: 4em; /* width needed or else Opera goes nuts */
	list-style-position: outside
}



#nav li:hover ul, #nav li.sfhover ul
{ /* lists nested under hovered list items */
  left: auto;
  list-style-position: outside;
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: #7FC6BC;
	border: solid 3px #4BB5C1;
	width: 7em;
	padding: 4px 5px;
	font-size: 16px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	list-style-position: outside;
	text-align: left;
}
#nav li ul li
{
padding-top: 3px;
width: 7em;
text-align: center;
}


#nav li ul li A:link
    {
    font-family: arial;
    color: #edf7f2;
    text-decoration: none;
    padding: 2px 0;
    width: 100%;
    font-variant: small-caps;
    }

#nav li ul li A:visited
    {
    font-family: arial;
    color: #edf7f2;
    text-decoration: none;
    padding: 2px 0;
    width: 100%;
    font-variant: small-caps;
    }

#undermenu
{
width: 100%;
height: 41px;
background-image: url('http://backyardmarchingband.com/images/undermenu.png');
background-repeat: no-repeat;
clear: both;
padding: 0 0;
}

#main
{
width: 100%;
background-image: url('http://backyardmarchingband.com/images/body.png');
background-repeat: repeat-y;
padding: 0 80px;
overflow: auto;

}

#insidemain
{
font-size: 15px;
line-height: 1.1;
width: 620px;
text-align: left;
margin-bottom: 0;
font-family: arial;

}

#insidemain h1
{
font-size: 19px;
margin:0 0 8 0;
} 



#marchon
{
width: 100%;
height: 55px;
background-image: url('http://backyardmarchingband.com/images/marchon.png');
background-repeat: no-repeat;
padding: 0 80px;

}

#bottom
{
width: 100%;
overflow: auto;
background-image: url('http://backyardmarchingband.com/images/bottom.png');
background-repeat: repeat-y;
font-size: 10px;
padding-top: 5px;
}

#menu A:link
    {
    font-family: arial;
    color: #edf7f2;
    text-decoration: none;
    padding-bottom: 2px;
    }
        
 #menu A:visited
    {
    font-family: arial;
    color: #edf7f2;
    text-decoration: none;
        padding-bottom: 2px;
    }
        
  #menu A:hover
    {
    font-family: arial;
    color: #edf7f2;
    text-decoration: none;
    background: #4BB5C1;
    padding-bottom: 2px;
    }  


  
#lightbox{
	background-color: #eeeeee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
color: black;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left;
color: black; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; } 
#overlay img{ border: none; }

div.thumbnail {
float: left;
width: 122px;
margin: 0px 3px 6px 3px;
font-size: 10px;
padding: 2px 2px;
border: 3px solid #4BB5C1; 
text-align: center;
}

#overlay{ background-image: url(http://backyardmarchingband.com/overlay.png); }

* html #overlay{
	background-color: #000;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
	}

#show {
border: 3px solid #000063;
text-align: center;
}


div.thumbnail:hover {
text-align: center;
font-size: 10px;
float:left;
background: #DEE7EF;   
width: 122px;
color: #CE0000;
}
.clearboth 
{ clear: both; 
	float:none; 
}

div.thumbnail p{
width: 120px;
text-align: center;
font-size: 10px;
padding: 0px 0px;
float: left;

}


.insideright {
	text-align: left;
	float: right;
	width: 30%;
	padding-top: 10px;
	padding-left: 8 px;
font-size: 85%;
	padding-bottom: 20px;
}

.insideright ul
{
list-style-type: none;
margin: 0;
padding: 8px 10px 5px 25px;
}


.insideleft {
	float: left;
	width: 67%;
}


#insidemain a:link {
	text-decoration: none;
	font-weight: bold;
	color: #EDF7F2
}
#insidemain a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #EDF7F2
}
#insidemain a:hover {
	font-weight: bold;
	text-decoration: underline;
	color: #EDF7F2
}
#insidemain a:active {
	font-weight: bold;
	text-decoration: underline;
	color: #EDF7F2
}

span.body input, textarea
{
border: #4BB5C1 2px solid;
background: #7FC6BC;
color: #EDF7F2;
}