body {

background-color: lightgreen;
/* 
background-image: url('background.jpg');
background-attachment: fixed;
background-position: center top;
background-repeat: no-repeat;
 */
font-family: "mr-eaves-modern", sans-serif; }



h1 {
font-size: 20pt;
color: black;
font-weight: 800;
margin-bottom: 6pt; }

h2 {
font-size: 17pt;
color: black;
font-weight: 800;
margin-top: 12pt;
margin-bottom: 4pt; }

h3 {
font-size: 14pt;
color: black;
font-weight: 700;
font-style: italic;
margin-top: 8pt;
margin-bottom: 4pt; }


p {
color: black;
font-size: 12pt;
margin: 4pt 0pt; }

p.copyright {
font-size: 8pt;
text-align: center;
margin: 6pt; }

p.date {
font-weight: bold; }

p.note {
font-size: 10pt;
font-style: italic; }

p.lyric {
font-size: 11pt; }

img.mainpic	{float:left; margin:0px 10px 0px 0px; width:100%; max-width:400px;}

img.subpic	{margin:0px 10px 0px 0px; width:100%; max-width:500px;}

div.c0	 {
background-color: black
z-index: 1; }

div.c1	 {
background-color: white
z-index: 1; }

.songlist p	{font-size: 11pt !important; font-style: italic;}

.top_right
{
	float: right;
	text-align: center;
}

/* 
div.main {
position: absolute;
left: 10em;
top: 9em;
margin-right: 5em;
background-color: rgb(182,182,182);
background-color: rgba(153,153,153,0.8);
-webkit-border-radius: 1em 1em;
-moz-border-radius: 1em 1em;
border-radius: 1em 1em;
padding-right: 2em;
padding-left: 2em;
padding-top: 1em;
padding-bottom: 1em;
z-index: 2; }

div.homenews {
position: absolute;
left: 10em;
top: 11em;
margin-right: 5em;
background-color: rgb(182,182,182);
background-color: rgba(153,153,153,0.8);
-webkit-border-radius: 1em 1em;
-moz-border-radius: 1em 1em;
border-radius: 1em 1em;
padding-right: 2em;
padding-left: 2em;
padding-top: 1em;
padding-bottom: 1em;
width: 35%;
z-index: 2; }

div.hometunes {
position: absolute;
top: 11em;
margin-right: 5em;
background-color: rgb(182,182,182);
background-color: rgba(153,153,153,0.8);
-webkit-border-radius: 1em 1em;
-moz-border-radius: 1em 1em;
border-radius: 1em 1em;
padding-right: 2em;
padding-left: 2em;
padding-top: 1em;
padding-bottom: 1em;
width: 35%;
z-index: 2;
right: 0em; }
 */


div.navblock p {
text-indent: 10px;
margin: 0px;
}

span.nav {
color: black;
font-size: 14pt;
padding 10px;
}

a.nav:link {
font-size: 14pt;
font-weight: bold;
color: darkgreen;
text-decoration: none; } 

a.nav:visited {
color: darkolivegreen;
font-size: 14pt;
font-weight: bold;
text-decoration: none; }

a.nav:hover {
color: orange;
font-size: 14pt;
font-weight: bold;
text-decoration: underline; }

a.nav:active {
color: orange;
font-size: 14pt;
font-weight: bold;
text-decoration: none; }

a:link {
font-weight: bold;
text-decoration: none;
color: inherit; } 

a:visited {
font-weight: bold;
text-decoration: none;
color: inherit; }

a:hover {
font-weight: bold;
text-decoration: underline;
color: orange; }

a:active {
font-weight: bold;
text-decoration: none;
color: orange; }

/* Responsive layout */
   .container {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
      }

      .c0, .c1, .c2, .c3, .c4, .c5 {
        width: 100%;
        padding: 5px;
      }

      @media (min-width: 600px) {
        .c1, .c2, .c3, .c4, .c5 {
          width: 47%;
        }
      }

      @media (min-width: 800px) {
        .c1 {
          width: 58%;
        }
        .c2 {
          width: 38%;
        }
        .c3, .c4, .c5 {
          width: 32%;
        }
      }

      @media (min-width: 1000px) {
        .container {
          width: 1000px;
          margin-left: auto;
          margin-right: auto;
        }
      }
      
/* Video resizing */
    

.video-box {
  position: relative;
  height: 0;
  overflow: hidden;
  }
 
.R16x9 {
  padding-bottom: 56.25%;
}

.R4x3 {
  padding-bottom: 75%;
}
 
.video-box iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}