@charset "utf-8";
body  {
	font: 85% Trebuchet MS, Arial, Helvetica, sans-serif;
	background-image:url(../../images/backgroundtop.png);
	background-repeat: repeat-x;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	}


h1 { font-size: 2.0em; margin-bottom: 0.8em; color: #1C7777 ; }
h1.lighter {font-size: 1.8em; margin-bottom: .06em; color:#1C7777;}
h2	{ font-size: 1.5em ; text-transform: uppercase; color:#1C7777;}
h2.color {font-size: 1.5em; margin-bottom: .06em; color:#1C7777; text-transform: none; }
h2.right-column {padding: 0 10px 0 15px;				 
				 margin-top: 0;}
				 
h3	{ 
	font-size: 1.5em ;
	text-transform: uppercase;
	font-style:italic;
	letter-spacing: 2px;
	background: #C4EFF4;
	color: #1C7777;
	padding: 5px;
	margin-bottom: 0.5em;
	text-align: center;
	}
  h3.quickjump	{
	  background: none;
	padding: 0px;
	background-image:url(../../images/quick-bg-middle.png);
	letter-spacing: .12em;
	margin-top: 0;
		}
	
h4.italic {font-size: 1.1em; margin-bottom: .05em; color:#1C7777; text-transform: none;	font-style:italic
	}

img { /*gives no border around images and pads images so text doesn't run into the side of the image. */
	border: none;
	padding: 10px 10px 10px 10px
	}
img.quick-bg {
	padding: 0 ;
	margin: 0 ;
}
img.quick-bg-bottom {
	padding: 0;
	margin: 0 ;
	
	}
p, li {
	font-size: 1.1em;
	line-height: 1.3em;
	margin-bottom: 0.8em;
	list-style-type: none;
	}
	
p.copyright{   /*to place special font for copyright images*/
	font-size: 0.6em;
	font-style:italic;
	}
.heavy {
	font-weight: bolder;
	}	
.right-column-text {
	padding-left:10px;
	padding-right:15px;
	text-align: justify;
	}	
.sidebar-headline {
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.8em;
	padding-left: 8px;
	}	
.sidebar-text {
	display: block;
	padding-left: 8px;
	text-align: justify;
}
.italic {
	font-style:italic;
   	}	
	
span.question { /*sets the color and style of the FAQ page questions*/
	font-style:italic;
	line-height: 1.6em;
	color:#033;
	font-weight: bold;
	}	
strong.blue {
	color: #006699;
	font-weight: bolder;
	}	
.center {text-align:center;}
.clear { clear: both; } /* clears any floating division <div> tags so it will display properly after that */
.clear-left {clear: left}
.space { /* gives a 10 pixel space around anything */
	padding: 10px 10px 10px 10px;
	}
div.image-right {	float: right;} /*floats image right*/
div.image-left {
	float: left;
	font-size: small;
} /*floats image left*/

div.link-border{   /*places the padding and the borders between the entries on the LINK page.*/
	border-bottom: double;
	border-color:#B5E3ED;
	border-width: 3px;
	padding: 10px 0 10px 0;
		}

div#page-wrap	{
	width: 800px; /* resets the page width to 800 pixels */
	margin: 0 auto; /* automatically centers content  */
	}
/*
-------------------------------------------------------------------------------------
sets the sitemap properties
-------------------------------------------------------------------------------------
*/	
ul.sitemap-main li {
	list-style: square;
	line-height: .6em;
	font-size: 1.3em;
	}	
	ul.sitemap-main li a {
	text-decoration: none;
	color: #265679;
	font-weight: bold;
	}
		ul.sitemap-second-level li{
		list-style:disc;
		font-size: 1.2em;
		}
			ul.sitemap-second-level li a {
			font-weight: normal;
			}
				ul.sitemap-third-level li {
					list-style:circle;
					font-size: 1.15em;
					}						
ul.sitemap-main li a.not-active {
	background: #C4EFF4;
	}					
					
/*
==================================================================================
ul#nav is for the navigation bar also sets the header picture 
==================================================================================
*/
 
ul#nav {
	height: 166px; 
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	list-style: none;
	margin-top: 0px;
	background: url(../../images/bannerbackground1.jpg) no-repeat;
	background-position:center;
	padding-left: 116px; /* sets the distance from the left edge of the banner image */
	
	}	
	ul#nav li {
	display:inline/*keeps the unordered list from scrolling down the page and forces onto the same line*/
	}	
		ul#nav li a {
			display: block; /* makes the area around the word links work as a link or block of text */
			width: 75px; /* sets the size of blocks - the distance between menu items*/
			float: left; /*Sets list horizontal*/
			margin-top: 130px;
			color: #009;
			font-weight: bold;
			text-decoration: none; /* removes underline from under links*/
			padding-bottom: 7px;
			padding-top: 10px;
			}
			
			ul#nav li a.home {
				
				}
				ul#nav li a:hover, li a:active { 
				/* hover is for mouseover, active is for if someone uses the tab key to get to option*/
					color:#C00; padding-top: 7px; padding-bottom: 10px; /* sets the color for the hover attribute to red*/
									
					}
					/* below allows the navigation menu to know which page it is on. the body#? is more specific than the ul link above and so changes only that link to its class such as a.home gives a background color and larger font size and new font color. */
					body#home ul#nav li a.home { border-style: solid; border-width: 2px 3px 0 2px; border-color: #D2E3F4; color:#00994D; font-size: 1.3em;background-color:#FFF; margin-top: 128px;}
					body#calendar ul#nav li a.calendar { border-style: solid; border-width: 2px 3px 0 2px; border-color: #D2E3F4;color:#00994D; width: 80px; font-size: 1.20em;background-color:#FFF; margin-top: 128px;}
					body#info ul#nav li a.info { border-style: solid; border-width: 2px 3px 0 2px; border-color: #D2E3F4;color:#00994D; font-size: 1.3em;  background-color:#FFF; margin-top: 128px;}
					body#practice ul#nav li a.practice { border-style: solid; border-width: 2px 3px 0 2px; border-color: #D2E3F4;color:#00994D; width: 80px; font-size: 1.3em; background-color:#FFF; margin-top: 128px;}
					body#media ul#nav li a.media { border-style: solid; border-width: 2px 3px 0 2px; border-color: #D2E3F4;color:#00994D; font-size: 1.3em; background-color:#FFF; margin-top: 128px;}
					body#humor ul#nav li a.humor { border-style: solid; border-width: 2px 3px 0 2px; border-color: #D2E3F4;color:#00994D; font-size: 1.3em; background-color:#FFF; margin-top: 128px;}
					body#contact ul#nav li a.contact { border-style: solid; border-width: 2px 3px 0 2px; border-color: #D2E3F4;color:#00994D; font-size: 1.3em; background-color:#FFF; margin-top: 128px;}
					
div#spacer-bar {  /* sets the banner section away from content section also set rules for spacer bar menu*/
	height: 45px
	}					
	ul#spacer-bar-menu {
		height: 40px; 
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size: .85em;
	list-style: none;
	margin-top: 0px;
	padding-left: 14px; /* sets the distance from the left edge of the banner image */
	}	
	
	  ul#spacer-bar-menu li {
		  
	  display:inline/*keeps the unordered list from scrolling down the page and forces onto the same line*/
	  }	
		
		ul#spacer-bar-menu li a {
			display: block; /* makes the area around the word links work as a link or block of text */
			border-right: 2px  solid #FFF ; /* sets in between a 1 pixel white line between choices*/
			width: 110px; /* sets the size of blocks - the distance between menu items*/
			float: left; /*Sets list horizontal*/
			margin-top: 1px;
			color: #265679;
			font-weight: bold;
			text-decoration: none; /* removes underline from under links*/
			padding-bottom: 3px;
			padding-top: 3px;
			background-color: #E6F9F9;
			
					}
			ul#spacer-bar-menu li a.last {
			display: block; /* makes the area around the word links work as a link or block of text */
			border-right: 0; /* keeps last item in spacer-bar menu from having a white line after it */
			width: 100px; /* sets the size of blocks - the distance between menu items*/
			float: left; /*Sets list horizontal*/
			margin-top: 1px;
			color: #265679;
			font-weight: bold;
			text-decoration: none; /* removes underline from under links*/
			padding-bottom: 3px;
			padding-top: 3px;
			background-color: #E6F9F9;
				}		
			ul#spacer-bar-menu li a:hover, li a:active { 
						/* hover is for mouseover, active is for if someone uses the tab key to get to option*/
							color:#C00; padding-bottom: 8px; padding-top: 5px; }/* sets the color for the hover attribute to red*/
							
					/*---------------------------------------------------------------------------------------------------------	
				  sets the spacer-bar-menu to show the chosen menu the sub menu will change to highlight the page you are on if the class is activated ONLY ON THE Page. IF more than one class is on the page, then more than one class will show as "chosen"
					-----------------------------------------------------------------------------------------------------------*/		
					ul#spacer-bar-menu li a.band {color:#00994D;  font-size: 1.1em; background-color:#E6F0F9; padding-bottom: 8px; padding-top: 5px;  }
					ul#spacer-bar-menu li a.blog {color:#00994D;  font-size: 1.1em; background-color:#E6F0F9; padding-bottom: 8px; padding-top: 5px;  }
					ul#spacer-bar-menu li a.faq {color:#00994D; font-size: 1.2em; background-color:#E6F0F9; padding-bottom: 8px; padding-top: 5px;   }
					ul#spacer-bar-menu li a.instruments {color:#00994D; font-size: 1.2em; background-color:#E6F0F9; padding-bottom: 8px; padding-top: 5px;  }
					ul#spacer-bar-menu li a.learn-drums {color:#00994D;font-size: 1.2em; background-color:#E6F0F9; padding-bottom: 8px; padding-top: 5px;  }
					ul#spacer-bar-menu li a.learn-pipes {color:#00994D;font-size: 1.2em; background-color:#E6F0F9; padding-bottom: 8px; padding-top: 5px;  }
					ul#spacer-bar-menu li a.links {color:#00994D;font-size: 1.2em; background-color:#E6F0F9; padding-bottom: 8px; padding-top: 5px;  }
					ul#spacer-bar-menu li a.members {color:#00994D; font-size: 1.2em; background-color:#E6F0F9; padding-bottom: 8px; padding-top: 5px;  }
					ul#spacer-bar-menu li a.news {color:#00994D; font-size: 1.2em; background-color:#E6F0F9; padding-bottom: 8px; padding-top: 5px;  }
					ul#spacer-bar-menu li a.sitemap {color:#00994D; font-size: 1.2em; background-color:#E6F0F9; padding-bottom: 8px; padding-top: 5px;  }
					ul#spacer-bar-menu li a.uniform {color:#00994D;font-size: 1.2em; background-color:#E6F0F9; padding-bottom: 8px; padding-top: 5px;  }	
					ul#spacer-bar-menu li a.unique {color:#00994D; font-size: 1.2em; background-color:#E6F0F9; padding-bottom: 8px; padding-top: 5px;  }
					ul#spacer-bar-menu li a.video-lessons {color:#00994D;font-size: 1.2em; background-color:#E6F0F9; padding-bottom: 8px; padding-top: 5px;  }
					
					
					
										
												
/*
=============================================================================================================================
formats the main content section, then divides the quick jumps section out of it
==============================================================================================================================
*/
div#main-content {
	padding-bottom: 20px;
	text-align: left;
	
	}
	
	
	div#main-content div#left-column{
		float: left; /* floats to left side of screen */
		width: 530px;
		}
		a#align-left { /*hopefully floats map so text will wrap image*/
			float:left 
			}
		div#main-content div#left-column div#quick-jumps{
			width:200px;
			float: left;
			margin-top: 20px;
			margin-right: 15px;
			background: url(../../images/quick-bg-middle.png)  center repeat-y  ;
			 
			}
			div#main-content div#left-column div#quick-jumps p{
				text-transform: uppercase;
				font-weight: bold;
				letter-spacing: .75px;
				color:#006699;
				padding: 0 8px 0 8px;
				}
				div#main-content div#left-column div#quick-jumps p span{
					color:#006699;
					}
					div#main-content div#left-column div#quick-jumps a{
						text-decoration:none;
						}
					
						
	  div#main-content div#right-column{

		background: url(../../images/sidebar-bg-middle.png) center repeat-y;
		float: right; /* floats to right side of screen */
		font-size: 0.80em;
		width: 260px;		
		padding-left: 0px;
		padding-bottom: 0px;
		}	
		
		
/*Footer division and formating*/		
div#footer{
		height: 100px;
		background-image:url(../../images/footerimage.png);
		background-repeat: repeat-x;
		border-top: 2px solid #33F;
		color:#006;
		padding: 10px 0 10px 0;
		margin-left: 0;
		}
		div#footer-main-content {
			width: 800px;
			height: 100px;
			margin: 0 auto; /* automatically centers content  */
			}
			div#footer-main-content div#footer-left-column {
				width: 400px;
				float: left;
				padding: 10px 10px 10px 10px;
				text-align: left;
				} 
			div#footer-main-content div#footer-right-column {
				width: 300px;
				height: 60px;
				float: right;
				padding: 10px 10px 10px 10px;
				} 	
				  ul#footer-nav {
					height: 60px; 
					font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
					font-size: 1.0em;
					list-style: none;
					margin-top: 0px;
					padding-left: 10px; /* sets the distance from the left edge of the banner image */
					}
								  
					  ul#footer-nav li {
						  display: inline; /*keeps the unordered list from scrolling down the page and forces onto the same line*/
							 }
						  ul#footer-nav li a {
							  display: block; /* makes the area around the word links work as a link or block of text */
							  border-right: 3px #39C solid ; /* places a divider between menu items */
							  width: 85px; /* sets the size of blocks - the distance between menu items*/
							  float: left;
							  margin-top: 10px;
							  color: #009;
							  font-weight: bold;
							  text-decoration: none; /* removes underline from under links*/
							  padding-bottom: 1px; 
							    }
							 
							  ul#footer-nav li a.footer-last { /* removes the divider after the last menu choice */
								  border-right: 0 ;
									}
									
						  ul#footer-nav li a:hover, li a:active { /* hover is for mouseover, active is for if someone uses the tab key to get to option*/
							color:#C00; /* sets the color for the hover attribute to red*/
						  }