body {
 
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: normal;
 margin: 0px;
 padding: 0px;
 background-color: #000000
}

#container {
	width: 98%; 
	color: #ffffff;
	line-height: 130%;
	margin: 2px auto;
}

#top {
	max-width: 100%;
	
	
}


#nav {
	padding: 0; 
	margin: 0; 
	text-align: center;
	list-style: inline;
}
  
  #nav li {
  display: inline;
  padding: 0 .6em;
  text-align: center;
  color: #f6e9dc;
  font-size: 1.2em;
  line-height: 150%
  
}
  #listenlink {
	padding: 0; 
	margin: 0; 
	text-align: center;
	list-style: inline;
 	background-color: #ffffff;
}
  
  #listenlink li {
  display: inline;
  padding: 0 .6em;
  text-align: center;
  font-size: 1.2em;
  line-height: 150%
  
}
   .content {
   background: url(images/paper.gif) top repeat; 
   width: 100%;
   border-top: 5px solid #344270;
   border-bottom: 5px solid #344270;
   overflow: auto
 }
   
  
    .narrowcontent {
   max-width: 700px;
   display: block;
   margin-left: auto;
   margin-right: auto;
   overflow: auto
}

  @media screen and (max-width: 800px) {
  .narrowcontent {
    width: 90%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

  .mediumcontent {
   background: url(images/paper.gif) top repeat; 
   max-width: 800px;
   display: block;
   margin-left: auto;
   margin-right: auto;
   overflow: auto

}

  @media screen and (max-width: 600px) {
  .medicumcontent {
    width: 90%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
 .text {
	background-color: #181d21
}

.image {
 max-width: 100%
 }
 
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.panel  {
	background: url(images/paper.gif) top repeat; border-radius: 20px; border: 5px solid #344270; padding: 10px 30px  
}
	
.audiofile {
	background-color: #ffffff;
	max-width: 400px; 
	padding: 4px; 
	margin: 12px;
	text-align: center;
	border: 1px solid gray;
	border-radius: 15px
	
}

	
.lyrics {
	font-size: 90%
	}
	
	
 h1	{
 	color: #344270;
	background-color: transparent;
 line-height: 150%
}

h2
{
	color: #344270;
	background-color: transparent
}


h3
{
	
}

h4 {
	font-size: 18px;
	color: #344270;
	background-color: transparent;
 line-height: 150%
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	line-height: 1.5em;
 font-size: 16px;
	color: #000000;
	background-color: transparent
 }
 
ul {	
		font-size: 16px
}

 .squashed
 {
 	padding: 2px 0;
	margin: 2px 0
 }
 
 .smalltext {
	font-size: 8px;
	color: #1b2a62;
	background-color: transparent;
	margin: 0;
	padding: 0
}

  .legend
  {
	color: #344270;
	font-size: 16px
}

a {
 text-decoration: none;

 }

 a:hover {
 text-decoration: underline;
 
 }
 
a:active {

 text-decoration: underline
 }
 
 a.navlink {
 display: inline;
 padding-left: 1.3em;
 padding-right: 1.3em;
 text-decoration: none;
 color: #f6e9dc
  }
  
 a.navlink active{
 display: inline;
 padding-left: 1.3em;
 padding-right: 1.3em;
 text-decoration: none;
 color: #f5cdb8
  }
  
  a.navlink hover{
 display: inline;
 padding-left: 1.3em;
 padding-right: 1.3em;
 text-decoration: none;
 color: #f1f5b8
  }

a.navlink visited {
 display: inline;
 padding-left: 1.3em;
 padding-right: 1.3em;
 text-decoration: none;
 color: #c8b7ad
  }
#spacer {
clear: both; height="3px"
}

 a.navlink:hover {
 font-weight: bold;
 text-decoration: none;
 }
 
 a.navlink:active {
 
 text-decoration: none;
 }
 
 a.navlink:visited {
 text-decoration: none;
 }
 

.dropdown {
  position: relative;
  display: inline-block;
  color: #000000
}

.dropdown-content {
  display: none; 
  background-color: #ffffff;
  padding: 20px;
  margin: 10px;
  width: 300px;
}


.dropdown:hover .dropdown-content {display: block;}


 #footer
{
 clear: both;
 padding: .3em;
 margin: 0;
 color: #ffffff;
 text-align: center;
 
  }

  a.footer {
 padding-left: 1.3em;
 padding-right: 1.3em;
 font-weight: bold;
 text-decoration: none;
 color: #f6e9dc;
 line-height: 170%
  }

 a.footer:hover {

 text-decoration: none;
 }
 
 a.footer:active {
 padding-left: 1em;
 padding-right: 1em;
 text-decoration: none;
 }
 
 a.footer:visited {
 padding-left: 1em;
 padding-right: 1em;
 text-decoration: none;
  }
 
.copyright {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 1em;
 font-weight: normal;
 color: #f6e9dc;;
 padding: 4px 40px;
 }
