body {
	color: black;
	font-family: arial,helvetica,sans-serif;
	background-color: #ccffff;
}

.row {
	display: flex;
	flex-flow: row;
}

.nav {
	width: 230px;
}

.main {
	width: 100%;
}

.menu {
	vertical-align: top;
	min-width: 200px;
	margin:30px 10px 20px 20px;
}

.contents {
	vertical-align: top;
	padding: 20px;
	min-width: 200px;
	text-align: justify;
}

.sitehead {
  padding-top: 40px;
  padding-bottom: 30px;
	color: #018bff;
	font-size: 400%;
	font-weight: bold;
	text-align: center;
}

.pagehead {
	color: #0000cd;
	font-size: 200%;
	font-weight: bold;
}

.subhead {
	color: #0000cd;
	font-size: 150%;
	font-weight: bold;
	padding-top: 20px;
}

.subsubhead {
	font-weight: bold;
}

.menuitem {
	min-width: 200px;
	font-size: 150%;
}

@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

@keyframes cf4FadeInOut {
	0% {opacity:1;}
	13% {opacity:1;}
	20% {opacity:0;}
	93% {opacity:0;}
	100% {opacity:1;}
}
		
#cf4a {
	position:relative;
	height:150px;
	width:200px;
	margin:20px 10px 30px 20px;
}
		
#cf4a img {
	position:absolute;
	left:0;
	animation-name: cf4FadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 30s;
}
#cf4a img:nth-of-type(1) {
	animation-delay: 24s;
}
#cf4a img:nth-of-type(2) {
	animation-delay: 18s;
}
#cf4a img:nth-of-type(3) {
	animation-delay: 12s;
}
#cf4a img:nth-of-type(4) {
	animation-delay: 6s;
}
#cf4a img:nth-of-type(5) {
	animation-delay: 0s;
}