/* CSS for SLRO website */

/* Richard Rutter's flexible text trick */
body {
  font-size: 62.5%;
  }

/* Positioning of each component of the site */
#header, #bodycontent, #navigation, #maincopy, #contactus, .logo, #mini_nav, #w3c, #footer {
  position: absolute;
}

#header {
  left: 10.0em;
  top: 1.5em;
  width: 90.0em;
}

#bodycontent {
  top: 27.0em;
  width: 89.7em;
  height: 65.5em;
  left: 10.0em;
}

#navigation	{
  top: 10.5em;
  left:  5.5em;
  width: 19.0em;
}
#contactus {
  left:  5.5em;
  top: 1.0em;
  width:19.0em;
}
#maincopy {
  left: 27.2em;
  width: 48.9em;
  height: 60.5em;
}

#mini_nav {
  top: 78.0em;
 }
#w3c {
  top: 55.0em;
  }
#footer {
  top: 59.0em;
  width: 49.0em;
  font-size: 1.0em;
}

.logo	{
  left: 5.5em;
  top: 1.5em;
  border-top: 1.8em solid navy;
  border-bottom: 1.8em solid navy;
}

/* formats */
body		{
  font-family: Helvetica, Verdana, sans-serif;
  color: navy;
  padding: 0;
  margin: 0;
  background: white url(bground.jpg) repeat-x;
}

#branding {
  font-family: "Times New Roman", serif;
  background-color: #87CEFA;
  color: white;
  margin: 0;
  padding: 0;
  background-image: url(music_notes3c.jpg);
  background-position: 27.3em 1.5em;
  background-repeat: no-repeat;
}
#branding h1 {
  font-size: 3.8em;
  font-weight: bold;
  padding: 0.5em 0 0.1em 8.3em;
  margin: 0;
}
#branding p {
  font-size: 1.2em;
  font-weight: bold;
  padding: 0 0 0.5em 26.5em;
  margin: 0;
}
#tagline p {
  font-family: Verdana, sans-serif;
  font-size: 1.2em;
  padding: 0.4em 0 0.5em 26.5em;
  border-top: 0.3em solid #000080;
  border-bottom: 0.3em solid #000080;
  border-right: 0.1em ridge #A9A9A9;
  border-left: 0.1em ridge #A9A9A9;
  background-color: #E0FFFF;
  color: #6A5ACD;
  margin: 0;
}
#bodycontent {
  background-color: white;
  border-right: 0.1em ridge #A9A9A9;
  border-left: 0.1em ridge #A9A9A9;
  border-bottom: 0.1em ridge #A9A9A9;
}
#maincopy {
  padding: 1.5em 4.0em 1.5em 4.0em;
  background-color: #FFEFD5;
}
#maincopy h2 {
  font-size: 2.0em;
  margin: 0;
  padding: 1.2em 0 0.4em 0; 
}
#maincopy h3 {
  font-size: 1.4em;
  margin: 0;
  padding: 0.6em 0 0.4em 0;
}
#maincopy p  	{
  text-align: justify;
  font-size: 1.3em;
  margin: 0;
  padding: 0 0 0.4em 0;
}
#maincopy ul, #maincopy li {
  margin: 0 0 0 2.0em;
  font-size: 1.1em;
  padding: 0 0 0.2em 0;
  list-style: none;
}
#footer p {
  font-size: 1.0em;
  padding: 0;
  margin: 0;
}
#mini_nav {
  font-size: 0.75em;
  padding: 2.0em 0 0 0;
  margin: 0;
}

#contactus  p {
  padding: 0.5em 1.0em 0.5em 1.0em;
  font-size: 1.5em;
  text-align: right;
  background-color: #000080;
  color: #EEE;
  font-family: Helvetica,sans-serif;	
  margin: 0;
}

#maincopy a:link, #maincopy a:visited  {
	color: navy;
      font-weight: bold;
}
#maincopy a:hover  {
	color: white;
	background-color: navy;      
      font-weight: bold;
}
#contactus a:link, #contactus a:visited  {
	color: white;
      font-weight: bold;
}
#contactus a:hover  {
	color: blue;
	background-color: white;
      font-weight: bold;
}

/*Navigation*/
#navigation ul  {
  margin-left: 0;
  padding-left: 0;
  font-size: 1.7em;
  list-style-type: none;
  font-family: Helvetica, Verdana, sans-serif;
}
#navigation li {
  border-bottom: 0.15em solid #EEE;
}
#navigation a	{
	text-align: right;
	background-color:  #4169E1;
}
#navigation li a:link, #navigation li a:visited  {
	color: #EEE;
	display: block;
	padding: 0.7em;
	text-decoration: none;
}
#navigation li a:hover  {
	background-color: #000080;
	color: #FFF;
}

#navigation #active a {
	background-color: #87CEFA;
	color: #4B0082;
}
#navigation ul ul {
  padding-left: 3.0em;
  font-size: 1.0em;
  padding-bottom: 0.5em;
}
#navigation ul ul li {
  border-bottom: 0.1em solid navy;
  margin: 0;
}
#navigation ul ul a:link, #navigation ul ul a:visited  {
  background-color:  #4169E1;
  color: #EEE;
}
#navigation ul ul a:hover {
  background-color: #000080;
  color: #FFF;
}
#mini_nav a {
 font-size: 120%;
}
#mini_nav ul {
list-style: none;
padding: 0.5em 0 0.5em 0;
margin-left: -2.0em;
}
#mini_nav li {
display: inline;
}
#w3c ul {
list-style: none;
margin: 0;
padding: 0;
}
#w3c li {
display: inline;
margin: 0;
padding: 0;
}
#w3c ul a:link, ul a:visited, ul a:hover, ul a:active{
text-decoration: none;
}