body {
  color: black; background: #99CCCC;
  font-family: Arial, sans-serif;
  font-size:100%;
}
h1,h2,h3,h4,h5,p,ul { font-family: Arial, sans-serif; }

#Wrapper{
position:absolute;
top:2%;
left:10%;
width:80%;
height:500%;
background:white;
}

#ShiftDown {
position:relative;
top:+0.5em ;
}

#ShiftUp {
position:relative;
top:-1em ;
}

#TopMenu {
 width:100%;
 height: 25px;
 color: white; 
background: grey ;
font-family: Arial, sans-serif;
 font-weight:bold;
 text-align:center; 
  background-image: url('MenuBar.jpg');
}

#TopMenu a:link { color: white; text-decoration:none; }
#TopMenu a:hover { color: teal; text-decoration:none; }
#TopMenu a:visited { color: white;  text-decoration:none;}
#TopMenu a:hover { color: teal; text-decoration:none; }
#TopMenu a:active { color: teal; text-decoration:none; }

#TealBox{
background:teal;
color:white;
padding:0.5em;
align:left;
font-size:0.9em;
}

#TealBox a:link { color: white; text-decoration:none; }
#TealBox a:hover { color: #99CCCC; text-decoration:none; }
#TealBox a:visited { color: white;  text-decoration:none;}
#TealBox a:hover { color: #99CCCC; text-decoration:none; }
#TealBox a:active { color: #99CCCC; text-decoration:none; }

#LeftMenu {
 padding:0.5em;
 margin:1%;
 float:left;
 width:25%;
 height:18%;
 line-height:2em;
 font-weight:bold;
color: white; background: teal;
}

#LeftMenu a:link { color: white; font-weight:bold;text-decoration:none; }
#LeftMenu a:hover { color: #99CCCC; font-weight:bold;text-decoration:none; }
#LeftMenu a:visited { color: white; font-weight:bold; text-decoration:none;}
#LeftMenu a:hover { color: #99CCCC; font-weight:bold;text-decoration:none; }
#LeftMenu a:active { color: #99CCCC; font-weight:bold;text-decoration:none; }

#MainContent {
margin:1%;
width:68% ;
height: 500%;
float:left;
text-align:left;
}

#ContentTitle {Color:Maroon;font-weight:bold;font-size:1.5em}

#ContentSubTitle {Color:Maroon;font-weight:bold;}

#LeftColumn {
margin:1% ;
width:29% ;
height: 500%;
float:left;
} 

#RightColumn {
margin 1%;
width:67% ;
height: 500%;
float:left;
} 


Table.HPDiaryTable {
	align:center;
	width:100%;
    color:white;
border-collapse:collapse ;
 }

Table.HPDiaryTable td {
  padding=0.2em ;
    vertical-align:top; 
	text-align:left;
   border-spacing:0pt ;
 }


Table.DiaryTable {
	position:relative;
	align:center;
	width:95%;
    color:black;
border-collapse:collapse ;
 }

Table.DiaryTable td {
  padding=0.3em ;
font-size=0.9em ;
    vertical-align:top; 
	text-align:left;
    border:4px white solid;
    background:#E6F2F2;
   border-spacing:0pt ;
 }



Table.SubDiaryTable {
	position:relative;
	align:center;
	width:100%;
    color:black;
border-collapse:collapse ;
 }

Table.SubDiaryTable td {
  padding=0.3em ;
font-size=0.9em ;
    vertical-align:top; 
	text-align:left;
    border:0px white solid;
    background:white;
   border-spacing:0pt ;
 }




Table.SermonTable {
	position:relative;
	top:0px;
	align:center;
	width:95%;
     font-size:inherit;
    color:black;
border-collapse:collapse ;
 }

Table.SermonTable td {
  padding=0.3em ;
font-size=0.7em ;
    vertical-align:top; 
	text-align:left;
    border:4px white solid;
    background:#E6F2F2;
   border-spacing:0pt ;
 }

Table.SermonTable a:link { color: black; text-decoration:none; }
Table.SermonTable a:hover { color: #99CCCC; text-decoration:none; }
Table.SermonTable a:visited { color: black;  text-decoration:none;}
Table.SermonTable a:hover { color: #99CCCC; text-decoration:none; }
Table.SermonTable a:active { color: #99CCCC; text-decoration:none; }

ul {
  list-style-type: none;
  width: 300px;
}
 
h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
 
li img {
  float: left;
  margin: 0 15px 0 0;
}
 
li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
 
li {
  padding: 10px;
  overflow: auto;
}
 
li:hover {
  background: #eee;
  cursor: pointer;
}