/*reset*/

* { margin: 0; padding: 0; }

img, fieldset { border: 0; }

ul { list-style-type: none; }

/* basic elements */

body { font-family: "Georgia","Times New Roman","Times",serif; background: url(../img/bg.jpg) repeat #e1cfb3; font-size: 14px; color: #222222; }

h1 { font-size: 1.8em; margin: 0 0 20px; position: relative; z-index: 1;}
h2 {font-size: 1.4em; margin: 20px 0; }
h1, h2 { color: #000055; font-weight: bold; }
h3 { font-size: 1.2em; font-weight: bold;  }
h4 { font-size: 1em; font-weight: bold; } 
h3, h4 { margin: 10px 0;  }

h5 { font-size: 1em; font-weight: bold; }

p { margin: 0 0 20px; line-height: 1.5em; }

li { margin: 0 0 10px 0; }

a { color: #0000aa; text-decoration: none; }

a:hover { color: #4444ff; text-decoration: underline; }

.clear { clear: both; display: block; height: 0px; visibility: hidden; }

/*Form elements*/

label, input, textarea {display: block; margin: 10px 0;  }
input {width: 200px;}
textarea {width: 400px; }
input#Submit {width: auto;}

.errors {
	border: 1px solid #ffcc66;
	padding: 10px 10px 0px 40px;
	background: url(../img/error.png) #ffffcc no-repeat 5px 5px; 
	margin-bottom: 10px; 
	color: #ff0000;
	display: none;
	width: 50%;
}
.errors li {
	background: url(../img/error2.png) no-repeat left center;
	padding-left: 20px;
}

.error { background: url(../img/error.png) no-repeat right #ffffcc; border-color: #ffcc66; }

.expand { font-family: "Courier New", monospaced; }

/* Global Page Sections */

#Container { width: 1000px; margin: 0 auto; }

#Content { clear: both; background-color: #ffffff; padding: 20px; min-height: 400px;}

#Masthead { width: 100%; background: url(../img/masthead.png) no-repeat #0000aa top left; height: 100px; }

#Masthead h2 { color: #ffffff; font-size: 2em; margin: 0 20px; display: none;}

#Navigation li { float: left; width: 20%; margin: 0; } 

#Navigation a {
	background: url(../img/nav_bg.png) repeat-x top left;
	display: block;
	color: #ffcc00;
	text-align: center;
	padding: 5px;
	text-decoration: none;
	letter-spacing: 2px;
}

#Navigation a:hover, #Navigation a.active { background-position: bottom left; }

#PrimaryContent, #SecondaryContent { padding: 0; background-color: #ffffff; }
#Home #PrimaryContent { float: left; width: 580px; padding-right: 20px; }

#Home #SecondaryContent { margin-left: 600px; width: 320px; padding-left: 20px; border-left: 1px solid #aaaacc; }
#Home #SecondaryContent:after { content: "."; clear: left; height: 0px; display: block; visibility: hidden; }

#FeatureOne { background-color: #8888ff; padding: 50px 0; text-align: center; }
#FeatureTwo { background-color: #8888ff; padding: 50px 0; text-align: center; }

#PrimaryContent img {
	float: left;
	margin: 0 20px 20px 0;
}

#SiteInfo { clear: both; font-size: 10px; padding-top: 100px; text-align: center; }

/* Composition Pages */

#SectionNav { float: left; position: relative; }
#SectionNav ul { position: relative; background-color: #aaaaff; z-index: 1; }
#SectionNav ul.primary { border-right: 1px solid #666666; }
#SectionNav li { margin: 0; border-left: 1px solid #666666; margin-right: -1px; width: 180px; }
#SectionNav li a { display: block; width: 160px; padding: 0 10px; line-height: 2.25em; height: 2.25em; font-size: 1.15em; color: #0000aa; border-top: 1px solid transparent; border-bottom: 1px solid transparent; }
#SectionNav li a.first { border-top: 1px solid #666666; }
#SectionNav li a.last { border-bottom: 1px solid #666666; }
#SectionNav li a:hover { background-color: #bbbbdd; text-decoration: none; width: 159px; }
#SectionNav li a.active { background-color: #eeeeee; color: #222222; font-weight: bold; border-top: 1px solid #666666; border-bottom: 1px solid #666666; width: 160px; }
#SectionNav li a.active:hover { cursor: default; background-color: #eeeeee; width: 160px; }

#SectionContent { margin-left: 180px; border: 1px solid #666666; background-color: #eeeeee; padding-bottom: 10px; min-height: 300px; }
#SectionContent h4 { margin: 20px; }
#Compositions #PrimaryContent { max-width: 780px; margin-left: 201px; border: none; }
#Compositions #PrimaryContent img { float: right; margin: 0 0 20px 20px; }

.comp_container { /*border-bottom: 1px solid #666666;*/ padding: 20px; }
.comp_container h3 { margin: 0; float: left; }
#SectionContent .comp_container h4 { margin-right: 300px; }
.comp_nav { height: 27px; float: right; position: relative; top: 2px; z-index: 1; }
.comp_nav li { float: left; background-color: #ffcc00; margin: 0 0 0 2px;  }
.comp_nav li a { float: left; height: 25px; line-height: 25px; padding: 0 10px; border: 2px solid #ffcc00; border-bottom: none; text-decoration: none; }
.comp_nav li a:hover, .comp_nav li a.active { background-color: #ffffcc; border-color: #ffcc00; }
.comp_container .info { clear: right; border: 2px solid #ffcc00; background-color: #ffffcc; padding: 20px;  }
.comp_container #Loading { margin: 50px auto; display: block; }
.comp_container #ListenHeader { text-align: center; margin: 20px auto;}
.comp_container .info object { display: block; margin: 20px; }
#SectionContent .comp_container div h4 { display: block; margin: 10px 0 !important; }


/* Recordings Page */

#Recordings .comp_container div { background-color: #ccccff; }
#Recordings .comp_nav li a:hover, #Recordings .comp_nav li a.active { background-color: #ccccff; }