@charset "utf-8";
/* layoutstyles.css */
/* Universal style rule */
*{
/* Block all browser default margins and padding */
margin:0;
padding:0;
/* Temporary borders */
/*border:dashed 1px #f00;*/
}
body{
	background-color:#000000;
	font-family: Arial, Helvetica, sans-serif;
}
#wrapper{
width: 960px;
background-color:#b49a66;
/* Put 20px margin above the wrapper */
/* Set right and left to auto for centering */
margin: 20px auto;
border:#394891 solid;
border-width:5px;
}
/* Make branding a positioned element, but don't move it */
#branding{
position:relative;
height:250px;
background-image:url('../zimages/master-chorale-branding-gradation.png');
background-repeat:repeat-y;
border-bottom:#666666 solid;
border-width:5px; 
}
/* Fixes the mysterious image gap */
#branding img{
	position:absolute;
	display:block;
}
/* Absolutely position links in the branding division */
#branding a{
position:absolute;
text-decoration:none;
color:#FFFFFF;
font-size:0.8em;
}
/* Unvisited and visited links in branding bar */
#branding a:link, #branding a:visited {
color:#bfc5db; 
}
/* Hover links in branding bar */
#branding a:hover{
color:#FAF4E2;
}
/* Active link in branding bar */
#branding a:active{
color:#1bb498;
}
#player{
position:absolute;
margin-top:190px;
margin-left:575px;

}
/* Music Note in Branding Bar */
#musicnotes{
float:left;
margin-top:193px;
margin-left:511px;
}
#main{
height:700px;
}
#leftcolumn{
/* Remember, content left margin must match this width */
width:15em;
float:left;
/* Center images and text inside this div */
text-align:center;
position:relative;
z-index:1000;

}
/* Applies to images in the leftcolumn div */
#leftcolumn img{
/*margin-top:5em;
width:50%;*/
}
/* Applies to paragraphs in the leftcolumn division */
#leftcolumn p{
border:solid 2px #000000;
padding:0.5em;
width:80%;
font-size:0.8em;
/*color: #EFDDA5;*/
color: #e4e6f2;
font-weight:700;
margin: 1em auto;
text-align:left;
background-color:#87734C;
}
#leftcolumn .date{color: #FAF4E2; line-height:2em; }
#leftcolumn .title{color: #F2F3F9;font-weight:900; font-size:.8em; font-style:italic; letter-spacing:.1em; line-height:1.8em;}
#leftcolumn .other{font-size:.8em;}
#leftcolumn .other a:link { color: #FFFFFF; text-decoration:underline; } 
#leftcolumn .other a:visited { color: #FFFFFF; font-style:italic; text-decoration: underline; } 
#leftcolumn .other a:hover { color: #FFFF99; text-decoration: none; } 
#leftcolumn .other a:active { text-decoration: none; } 
/* Navbar division */
#navbar{
/*background-color:#aaa;*/
/* Left margin must match leftcolumn width 12em */
margin-left:14.9em;
margin-right:4em;
margin-top:1em;
background:#aaa url(../zimages/navbak.jpg) repeat-x center;
height:1.6em;
position:relative;
z-index:1001;
}
/* Remove bullets from ul in the navbar */
#navbar ul{
list-style-type:none;
}
/* List items in the navbar */
#navbar li{
float:left;
/* Required for drop-down menus */
position:relative;
}
/* Applies to drop-down menus in navbar */
#navbar li ul{
position:absolute;
z-index:1001;
visibility:hidden;
}
/* Make drop-down visible on navbar hover */
#navbar li:hover ul,
#navbar li a:hover ul{ /* IE6 hack */
visibility:visible;
top:1.6em;
left:0;
}
/* Applies to links on the drop-down menu */
#navbar li:hover ul li a,
#navbar li a:hover ul li a{ /* IE6 hack */
background:#bfc5db; /* Removes background image */
color:#000;
text-align:left;
display:block;
width:14em;
padding:0 0 0 1em;
height:auto;
}
/* Hover on drop-down menu links */
#navbar li:hover ul li a:hover,
#navbar li a:hover ul li a:hover{ /* IE6 hack */
background: #aaa;
color:#000;
}
/* Applies to navbar links, visited and unvisited */
#navbar a,#navbar a:link,#navbar a:visited{
text-decoration:none;
font-family:Verdana, Geneva, Arial, Sans-Serif;
font-size:80%;
font-weight:bold;
color:#000;
background:#aaa url(../zimages/navbak.jpg) repeat-x center;
/*background-color:#aaa;*/
display:block;
height:2em;
width:8em;
border-right:solid 1px #ddd;
text-align:center;
line-height:2em;
outline-style: none;
z-index:1001;
}
/* Navbar hover and active links */
#navbar a:hover,
#navbar a:active{
background:#ddd url(../zimages/navhover.jpg) repeat-x center;
color:#000;
/*background-color:#000;
color:#fff;*/
}
/* IE6 hack applies to its table drop-down */
#navbar table {
margin:-1px;
border-collapse:collapse;
position:absolute;
top:0.5em;
left:0;
z-index:1001;
}
#content{
	/* Left margin must match leftcolumn width 12em  But I actually want it to appear like a piece of paper, thus I moved margin in to left 15em right 4em */
	margin-left:15em;
	margin-right:4em;
	margin-top:2em;
	background-color: #FAF4E2;
	border:#000000 groove;
	color:#000;
	padding:20px 20px;
	position:relative;
	z-index:1000;
}
/* Styles h1, h2, and h3 style rules in the content division */
#content h1, #content h2, #content h3{
font-family: Charcoal, Impact, sans-serif;
color:#000;
font-weight:normal;
font-style:italic;
font-variant:small-caps;
letter-spacing:0.08em;
}
/* Size h1 headings in the content division */
#content h1{
font-size:2em;
}
/* Size h2 headings in the content division */
#content h2{
font-size:1.5em;
}
/* Size h3 headings in the content division */
#content h3{
font-size:1.25em;
font-style:normal;
}
/* Applies to unordered lists in the content division */
#content ul, #content ol{
padding-left:10px 0 10px 40px;
list-style-type:circle;
list-style-position:inside;
list-style-color:green;
}
/* content p{
line-height:1.6em;
font-size:1.1em; 
}   Irene Change to keep text the same*/
/********** Footer division styles **********/
#footer{
background-color:#b49a66;
border-top: solid 1px #e4e6f2;
padding:0.5em;
text-align:center;
font-size:.7em;
color:#394891;
font-style:normal;
}
#footer a:link,
#footer a:visited{
/* No underline on links */
text-decoration:none;
}
#footer a:hover,
#footer a:active{
color:#FAF4E2;
border:dotted 1px #333;
}