/*** The All So Important RESET! ***/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li, aside, footer,header, hgroup, menu, nav, section, summary {
   margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
aside, footer, header, hgroup, menu, nav, section {display: block}

/************************ Basics ************************/
html {
	width: 100%;
	height: 100%;
	background-color: #DFD4BE;
	text-align: center;
}

body {
		height: 100%;
		overflow:hidden; 
		padding: 10px 20px 0px 20px;
		background-color:	#FFD700;
			text-align: center;
}
#wrapper {
display: grid;
grid-template-columns: 10% 28% 47% 15% ;
grid-template-rows: 2% 2% 30% 33% 10% 19%;
grid-gap: 0px;
border: 10px solid	#1E90FF;
height: 95%;
margin: 0px auto;
padding: 5px 5px 5px 5px;
overflow: hidden;
}
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color:	#1E90FF;
  color: white;
  text-align: center;
}

nav{		width: 100%;
} 
nav ul {
	list-style: none;
	display: block;
	clear: right;
	background-color: #725D3F;
	padding-left: 4px;
	height: 20px;
	padding-top: 4px;
	padding-right: 0px;
	padding-bottom: 0px;
}

nav ul li {
    display: inline; padding: 0px 20px 5px 10px;
    height: 30px; border-right: 1px solid #ccc;
}

nav ul li a {
    color: #E2DFD1; text-decoration: none;
    font-size: 20px; font-weight: bold;
}
/************************ display ************************/
iframe {width: 100%;height: 100%;background-image:url(../images/chant6.jpg);
 	background-repeat: no-repeat;
	background-size: contain;}

#audio {
	width: 400px;
	background-color:#1E90FF;
	height: 30px;
	
}
#playlist,audio{background:#F0E5C6;width:auto;padding:2px;list-style: none;}
.active a{color:#5DB0E6;text-decoration:none;}
li b{color:#eeeedd;background:#725D3F;padding:3px;display:block;}
li b:hover{text-decoration:none;
}

/************************ font ************************/
h1 {
	font-size: 2.0em;
	line-height: 0.9;
	color: #FFF;
	text-align: center;
	margin-bottom: 2px;
	padding-bottom: 2px;
}
h2 {
	font-size: 1.5em;
	line-height: 1.0;
	color: #191919;
	text-transform: none;
	font-style: bold;
	text-align: center;
	margin-top: 2px;
	padding-bottom: 2px;
}
h3 {
	font-size: 1.2em;
	line-height: 1.0;
	color: #191919;
	text-transform: none;
	font-style: bold;
	text-align: center;
	margin-top: 2px;
	padding-bottom: 2px;
}

/************************ grid ************************/
	 
.box {
  color: #fff;
  border-radius: 5px;
  padding: 5px;
  font-size: 100%;
  }
 .a {
		grid-area: 1 / 2 / 3 / 5;
		 color: red;
         border-radius: 5px;
		 	text-align: center;
  padding: 2px;
		 background-color:#FFFFFF;
        }
.b {
		grid-area: 1 / 1 / 7 / 2;
		  color: black;
        border-radius: 5px;
        padding: 5px; 
		background-color:#FFFFFF;
		overflow: auto;
        }
.c {
		grid-area: 3/ 2 / 7 / 3;
		  color: #5C4612;
        border-radius: 5px;
        padding: 10px;
		border-style: solid;
        border-width: 5px;
		border-color: #5C4612;
		  font-size: 80%;
		background-color:#FFFFFF;
		overflow: auto;
        }
.d {
		grid-area: 3 / 3 / 7 / 4;
		  color: black;
        border-radius: 5px;
        padding: 5px;
		border-style: solid;
        border-width: 5px;
		border-color: #5C4612;
		background-color:#FFFFFF;
		overflow: auto;
        }		
.e {
		grid-area: 3 / 4 / 7 / 5;
		  color: #5C4612;
		  background-color:#FFFFFF;
        border-radius: 5px;
        padding: 10px;

				  font-size: 75%;
		overflow: auto;
        }
.f {
		grid-area: 1 / 5 / 7 / 6;
		  color: black;
        border-radius: 5px;
        padding: 5px;
		background-color: #725D3F;
		overflow: auto;
    }		
/************************ links ************************/	
a:link {color: #52420C;}
a:visited {color: #52420C;}
a:focus {}
a:hover {color: #B56F2A;}
a:active {color: #F5AC01;} 
a.class1 {color:#F0FAFF;}
a.class1:link  {text-decoration: none; color: #F0FAFF;}
a.class1:visited {text-decoration: none; color: #F0FAFF;}
a.class1:hover {text-decoration: underline; color: #B56F2A;}
a.class1:active {text-decoration: none; color: #B56F2A;}