/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body.kinder {
	background: #c3b0f4 url(images/img011kinder.jpg) repeat-x top left;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
	margin: 0px;
	padding: 0px;
}

body.theory {
	background: #f6ebac url(images/img011lesson.jpg) repeat-x top left;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
	margin: 0px;
	padding: 0px;
}

body.lesson {
	background: #acf6d8 url(images/img011theory.jpg) repeat-x top left;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
	margin: 0px;
	padding: 0px;
}

body.other {
	background: #ffffff	url(images/img011other.jpg) repeat-x top left;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
	margin: 0px;
	padding: 0px;
}


input, textarea {
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
	font: normal 1em/normal "Trebuchet MS", Arial, Helvetica, sans-serif;
}



h1, h2, h3 {
}

h1, h1 a, h2, h2 a {
	text-decoration: none;
}

h1 a:hover, h2 a:hover {
	text-decoration: underline;
}

h1 {
	font-size: 38px;
}

h2 {
	font-size: 28px;
	font-weight: normal;
}

h3 {
	font-size: 16px;
}

p, ul, ol, {
	margin-top: 1.5em;
	line-height: 190%;
}

li {
	margin-top: 0.8em;
	line-height: 110%;
	margin-left: 3em;
}

ul, ol {
	margin-left: 3em;
}

blockquote {
	margin-left: 3em;
	margin-right: 3em;
}

a {
	color: #000000;
}

a:hover {
	text-decoration: none;
	color: #000000;
}

a img {
	border: none;
}

img.left {
	float: left;
	margin-right: 20px;
}

img.right {
	float: right;
	margin-right: 20px;
}

hr {
	display: none;
}

#header {
	width: 960px;
	height: 206px;
	margin: 0 auto;
	
}

#musicnote {
	width: 960px;
	height: 300px;
	margin: 0 auto;
	background: url(images/logo.png) no-repeat top left;
}

/* Logo */

#logo {
	width: 600px;
	height: 152px;
	margin: 0 auto;

}

#logo h1, #logo h2 {
	margin: 0;
}

#logo h1 {
	float: left;
	padding-top: 65px;
	padding-left: 80px;
	font-weight: normal;
	color: #FFFFFF;
}

#logo h2 {
	float: left;
	padding-top: 85px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
}

#logo h2, #logo h2 a {
	color: #FFFFFF;
}

#logo a {
	text-decoration: none;
	color: #FFFFFF;
}

/* Menu */

#menuo {
	width: 670px;
	margin: 0 auto;
	padding-bottom: 30px;
}

#menuo ul {
	margin: 0;
	padding: 24px 0 0 200px;
	list-style: none;
	line-height: normal;
}

#menuo li {
	float: left;
	padding: 0 2px 0 2px;
}

#menuo li.viskinder a{
	float: left;
	background: #5d3482;
	padding: 9px 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	color: #ffffff;
}

#menuo li.kinder a{
	float: left;
	background: #c3b0f4;
	padding: 9px 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	color: #000000;
}

#menuo li.vistheory a{
	float: left;
	background: #edbd52;
	padding: 9px 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	color: #ffffff;
}
#menuo li.theory a{
	float: left;
	background: #f3dd62;
	padding: 9px 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	color: #000000;
}

#menuo li.vislessons a{
	float: left;
	background: #02c7b3;
	padding: 9px 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	color: #ffffff;
}
#menuo li.lessons a{
	float: left;
	background: #acf6d8;
	padding: 9px 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	color: #000000;
}

#menuo li.visother a{
	float: left;
	background: #c7c7d4;
	padding: 9px 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	color: #ffffff;
}
#menuo li.visCother a{
	float: left;
	background: #c7c7d4;
	padding: 9px 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	color: #ffffff;
}
#menuo li.other a{
	float: left;
	background: #ffffff;
	padding: 9px 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	color: #000000;
}

#menuo a {
	float: left;
	background: #feaeae;
	padding: 10px 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	color: #000000;
}

#menuo a:hover {
	text-decoration: none;
	background: #dafbca;
	padding: 9px 20px;
}

/* Search */

#search {
	float: right;
	width: 200px;
}

#search form {
	margin: 0;
	padding: 0;
	margin-top: -10px;
}

#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#search input {
}

#search #s {
	width: 150px;
}

#search #x {
	margin: 0;
	padding: 0;
	width: 30px;
	background: #406800;
	color: #FFFFFF;
}

/* Banner */

#banner {
	width: 960px;
	margin: 0 auto;
	padding: 8px 0;
}

/* Page */

#page {
	width: 900px;
	margin: 0 auto;
	padding: 15px 35px 0 25px;
}

/* Content */

#content {
	float: right;
	width: 603px;
}

.post {
}

.post .title {
	margin: 0;
	padding: 20px 20px 0 20px;
	border-bottom: 1px solid #000000;
}

.post .title a:hover {
	text-decoration: none;
}

.post .entry {
	padding: 0 20px;
	font-size: 15px;
}

.post .metakinder {
	height: 25px;
	margin: 15px 0 20px 0;
	padding: 10px 0 0 20px;
	background: #5d3482;
	line-height: normal;
	color: #ffffff
}

.post .metatheory {
	height: 25px;
	margin: 15px 0 20px 0;
	padding: 10px 0 0 20px;
	background: #edbd52;
	line-height: normal;
	color: #ffffff
}

.post .metalessons{
	height: 25px;
	margin: 15px 0 20px 0;
	padding: 10px 0 0 20px;
	background: #02c7b3;
	line-height: normal;
	color: #FFFFFF;
}

.post .metaother{
	height: 25px;
	margin: 15px 0 20px 0;
	padding: 10px 0 0 20px;
	background: #c7c7d4;
	line-height: normal;
	color: #FFFFFF;
}

/* Sidebar */

#sidebar {
	float: left;
	width: 250px;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}

#sidebar li {
	margin-bottom: 40px;
}

#sidebar li ul {
}

#sidebar li li {
	margin: 0;
	padding: 5px 20px;
}

#sidebar.kinder li h2 {
	height: 30px;
	margin-bottom: 15px;
	padding: 5px 0px 0px 20px;
	background: #4E9FC8 url(images/img03kinder.jpg) no-repeat;
	font-size: 18px;
	color: #ffffff;
}

#sidebar.theory li h2 {
	height: 30px;
	margin-bottom: 15px;
	padding: 5px 0px 0px 20px;
	background: #4E9FC8 url(images/img03lesson.jpg) no-repeat;
	font-size: 18px;
	color: #ffffff;
}

#sidebar.lesson li h2 {
	height: 30px;
	margin-bottom: 15px;
	padding: 5px 0px 0px 20px;
	background: #4E9FC8 url(images/img03theory.jpg) no-repeat;
	font-size: 18px;
	color: #FFFFFF;
}

#sidebar.other li h2 {
	height: 30px;
	margin-bottom: 15px;
	padding: 5px 0px 0px 20px;
	background: #02d740 url(images/img03other.jpg) no-repeat;
	font-size: 18px;
	color: #FFFFFF;
}

#sidebar li p {
	padding: 0 20px;
}

/* Calendar */

#sidebar #calendar {
	padding: 0;
}

#calendar caption {
}

#calendar table {
	width: 100%;
	padding: 0 20px;
	text-align: center;
}

#calendar thead th {
	border-bottom: 2px solid #F2F2F2;
	border-top: 1px solid #F2F2F2;
}

#calendar tbody td {
	padding: 5px 0;
	border-bottom: 1px solid #F2F2F2;
}

#calendar tfoot td {
	border-top: 1px solid #F2F2F2;
}

#calendar #prev {
	text-align: left;
}

#calendar #next {
	text-align: right;
}

#calendar a {
	font-weight: bold;
}

/* Footer */

#footer {
	clear: both;
	width: 870px;
	height: 50px;
	margin: 0 auto;
	padding: 35px 45px;
	border-top: 5px solid #000000;
}

#footer p {
	margin: 0;
	line-height: normal;
	color: #FFFFFF;
}

#footer a {
	color: #406800;
}

#footer .legal {
	float: left;
	color: #000000;
}

#footer .credit {
	float: right;
}


/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */

/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%; filter:alpha(opacity=20); -moz-opacity:0.2; opacity: 0.2; z-index: 0; }
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}

#center {width:200px; height:100px; position:absolute; top:50%; left:50%; margin:-50px auto auto -100px; border:1px solid black; text-align:center; background-color: #ffffff; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5;}


#container {
   position: absolute;
   top: 300px; 
   width:960px;
   left:50%;
   margin:auto auto auto -480px;
   display:block;
   height:auto;
}

#translucentbkg {
   width: 960px;   /* to match DIVs size          */
   background-color: #ffffff;       /* the background              */
   filter:alpha(opacity=50);
   -moz-opacity:0.5;
   opacity: 0.5;
   border:1px solid black;
   z-index: 1; 

}

#opaquetext {
   width: 960px; height:auto;    /* to match DIVs size          */
   background-color: #ffffff;
   border:1px solid black;
   position: absolute;              /* absolute positioning        */
   z-index: 2; 

}

#opaquemusicnote {
   width: 960px; height:292px;    /* to match DIVs size          */
   background-color: transparent;   /* transparent background      */
   position: absolute;              /* absolute positioning        */
   z-index: 2; 

}

#logoimg {
	position:absolute;
	top: 20px;
	width:700px;
	left:50%;
	margin:auto auto auto -435px;

	
}


			/* The CSS Code for the menu starts here */
			#menu {
				font-family: Arial, sans-serif;
				font-weight: bold;
				text-transform: uppercase;
				margin: 50px 0;
				padding: 0;
				list-style-type: none;
				background-color: #eee;
				font-size: 13px;
				height: 40px;
				border-top: 2px solid #eee;
				border-bottom: 2px solid #ccc;
			}
			#menu li {
				float: left;
				margin: 0;				
			}
			#menu li a {
				text-decoration: none;
				display: block;
				padding: 0 20px;
				line-height: 40px;
				color: #666;
			}
			#menu li a:hover, #menu li.active a {
				background-color: #f5f5f5;
				border-bottom: 2px solid #DDD;
				color: #999;
			}
			#menu_wrapper ul {margin-left: 12px;}
			#menu_wrapper {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right; width: 500px;}
			#menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}
			
			/* Black Menu */
			#menu_wrapper.black ul {
				border-top: 2px solid #333;
				border-bottom: 2px solid #000;
				background: #333;}
			#menu_wrapper.black a {color: #CCC;}
			#menu_wrapper.black li a:hover, #menu_wrapper.black li.active a {color: #999; background: #555; border-bottom: 2px solid #444;}
			#menu_wrapper.black {background: url(images/black.png) no-repeat right;}
			#menu_wrapper.black div {background: url(images/black.png) no-repeat left;}
			
			/* Blue Menu */
			#menu_wrapper.blue ul {
				border-top: 2px solid #356AA0;
				border-bottom: 2px solid #204061;
				background: #356AA0;}
			#menu_wrapper.blue a {color: #fff;}
			#menu_wrapper.blue li a:hover, #menu_wrapper.blue li.active a {color: #90CDFF; background: #3D7BBB; border-bottom: 2px solid #356AA0;}
			#menu_wrapper.blue {background: url(images/blue.png) no-repeat right;}
			#menu_wrapper.blue div {background: url(images/blue.png) no-repeat left;}
			
			/* Red Menu */
			#menu_wrapper.red ul {
				border-top: 2px solid #660000;
				border-bottom: 2px solid #450000;
				background: #660000;}
			#menu_wrapper.red a {color: #fff;}
			#menu_wrapper.red li a:hover, #menu_wrapper.red li.active a {color: #F27F84; background: #990000; border-bottom: 2px solid #660000;}
			#menu_wrapper.red {background: url(images/red.png) no-repeat right;}
			#menu_wrapper.red div {background: url(images/red.png) no-repeat left;}
			
			/* Orange Menu */
			#menu_wrapper.orange ul {
				border-top: 2px solid #d15600;
				border-bottom: 2px solid #B44500;
				background: #d15600;}
			#menu_wrapper.orange a {color: #fff;}
			#menu_wrapper.orange li a:hover, #menu_wrapper.orange li.active a {color: #FA9B5B; background: #B44500; border-bottom: 2px solid #d15600;}
			#menu_wrapper.orange {background: url(images/orange.png) no-repeat right;}
			#menu_wrapper.orange div {background: url(images/orange.png) no-repeat left;}
			
			#menumover {
				position:absolute;
				top:125px; 
				left:400px;
				width:735px;
				left:50%;
				margin:auto auto auto -250px;
			}