body {
	font: .91rem/1.4 Arial, Helvetica, sans-serif;
	color: #581E85;
	background-color: #ffffff;
	max-width: 960px;
}

a:link, a:visited {
	color: #0000cc;
	text-decoration: none;
}
a:hover, a:active {
	color: #C30780;
	text-decoration: none;
}

h1, h2, h3, h4, h5 {
	color: #C21291;
}
h1 {
	font-size: 1.5em;
}
h2 {
	font-size: 1.17em;
}
h3 {
	font-size: 1.12em;
}
a img {
	border: none;
}

table {
	border: none;
}

.head {
	font-size: 150%;
	font-weight: bold;
	color: #C21291;
}

.photo {
	float: right;
	width: 200px;
	margin-left: 10px;
}

.akey {
	text-decoration: underline;
}

.hilite {
	color: #C21291;
}

.small {
	font-size: 90%;
}
.smaller {
	font-size: 82%;
}
.larger {
	font-size: larger;
}

.centre {
	text-align: center;
}

.right-pic {
	float: right;
	margin-left: 1em;
}

.alt-menu {
	font-size: 90%;
}

#floatLayer {
	float: left;
}
#floatLayer ul, 
#floatLayer li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}
#floatLayer ul { 
	border: solid 1px #ccc;
}
#floatLayer ul li {
	width: 12em;
	border-bottom: solid 1px #ccc;
}
#floatLayer ul li:last-child {
	border-bottom: none;
}
#floatLayer a {
	display: block;
	padding: 6px 6px;
	text-decoration: none;
	font-weight: bold;
	background-color: #581E85;
	color: #fff;
}
#floatLayer a:hover,
#floatLayer a.selected {
	text-decoration: none;
	background-color: #C2148D;
}
.toggle,
#drop {
	display: none;
	cursor: pointer;
}

.main {
	margin-left: 13.5em;
}

.header {
	margin-left: 13.5em;
	border-bottom: 1px solid silver;
}
.logo {
	text-align: right;
}
.logo img {
	max-width: 360px;
	width: 100%;
	height: auto;
}
h1 span {
	font-weight: normal;
	font-size: .91rem;
	color: #581E85;
}
.htable {
	display: table;
	width: 100%;
}
.hleft {
	display: table-cell;
}
.hright {
	display: table-cell;
	text-align: right;
}

.footer {
	clear: both;
	border-top: 1px solid silver;
}

.play-video {
  position: relative;
  padding-top: 63%;
  height: 0;
  overflow: hidden;
}
.play-video iframe {
  border: none;
  margin: 0 auto;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media print {
}

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 480px) {
	#floatLayer {
		float: none;
	}
	#floatLayer ul li {
		width: 100%;
	}
	#floatLayer ul li:hover ul {
		display: none;
	}
	#floatLayer a {
		padding: 8px 6px;
	}
	.toggle {
		display: block;
		padding: 8px 6px;
		font-weight: bold;
		text-decoration: none;
	}
	.toggle + a,
	.menu {
		display: none;
	}
	#drop:checked + ul {
		display: block;
	}
	.header,
	.main {
		margin-left: 0;
	}
	.htable {
		display: block;
	}
	.hleft {
		display: block;
	}
	.hright {
		display: block;
	}
}