*
{
	font-family: Sans-serif;
}

p
{
	line-height: 140%;
	margin-top:6px;
	margin-bottom:3px;
}

h1 {

}

h2, h3
{
	color: MediumVioletRed;
	margin-top:16px;
	margin-bottom:6px;
}
.italic
{
	font-style: italic;
}

.b1
{
	font-weight: bold;
	color: MediumVioletRed;
	line-height: 300%;
	font-size: 12pt;
}

.pic-l
{
	float: left;
	margin-right: 10px;
	margin-top: 10px;
	width: 40%;
}

.pic-l-text
{
	float: left;
	margin-right: 10px;
	margin-top: 10px;
	width: 40%;
}

.pic-l-small
{
	float: left;
	margin-right: 10px;
	margin-top: 10px;
	width: 25%;
}

.pic-centre
{
	display:block;
	margin-left:auto;
	margin-right:auto;
	width:40%;
}

.pic-r
{
	float:right;
	margin-left:10px;
	margin-top:10px;
	width:40%;
}

.pic-for-container {
	width:22%;
	margin:10px;
}

.pic-l-for-container {
	width:300px;
	margin:10px;
}

.pic-loose {
	transform:rotate(12deg);
	/*box-shadow: 10px 10px 5px #aaaaaa; */
	margin-left:40px;
}

.clearfix::after
{
	content: "";
	clear: both;
	display: table;
}

br.clear_both {clear:both;}

/* keep link stuff in this order: link, visited, hover, active  */
a:link
{
	text-decoration: none;
	color: MediumVioletRed;
	border-bottom: 1px dashed MediumVioletRed;
}

a:visited
{
	text-decoration:none;
	color: Crimson;
	border-bottom: 1px dashed Crimson;
}

a:hover
{
	text-decoration: none;
	color: OrangeRed;
	border-bottom: 1px dashed OrangeRed;
}

a:active
{
	text-decoration:none;
}

a:link.prog-download-l
{
	text-decoration: none;
	color: white;
	border-bottom: 1px dashed #2B802E;
}

a:visited.prog-download-l
{
	text-decoration: none;
	color: white;
	border-bottom: 1px dashed #2B802E;
}

ul
{
	line-height: 130%;
	list-style-type: disc;
	margin-top: 0.3em;
	margin-bottom: 0em;
	list-style-image: url(images/square_5px.png);
}

li {
	margin-top:6px;
}

.pic-container  {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
}

.pic-c {    /* pic with caption, tag for img */
	width:100%;
}

figure.pic-1r-c {      /* with caption */
	border:1px silver solid;
	float:right;
	margin-left:10px;
	margin-top:10px;
	width:40%;
}

figure.pic-1l-c {      /* with caption */
	border:1px silver solid;
	float:left;
	margin-left:10px;
	margin-top:10px;
	width:40%;
}

figcaption.pic1
{
	text-align: center;
	font-weight: normal;
	font-style: italic;
}

.bar-jingle-inner
{
	height: 10px;
	border: 2pt solid lime;
	background-color: lime;
	width:1%;
}

.bar-jingle-outer
{
	display: block;
	background-color: darkorange;
	width: 30%;
	color: white;
	font-weight: bold;
	margin:10px;
}

.bar-sound-outer
{
	display: inline-block;
	background-color: darkorchid;
	width: 80%;
	color: white;
	font-weight: bold;
	margin: 10px;
}
hr {
	width:30%;
	color:MediumVioletRed;
}

.prog-download
{
	display: inline-block;
	background-color: darkorchid;
	width: 90px;
	height: 33px;
	color: white;
	font-weight: bold;
	margin: 10px 10px 10px 0px;
	/* top right bottom left */
	font-size: 16px;
	text-align: center;
}

.menu {
	background-color:mediumvioletred;
	overflow:hidden;
}

.menu a
{
	float: left;
	color: white;
	text-align: center;
	padding: 14px 8px;
	text-decoration: none;
	font-size: 16px;
	border-bottom: none;
}

.menu a:hover {
	background-color:darkmagenta;
	color:white;
}

.menu a.active
{
	background-color:tomato;
	color: white;
}

/* collapsible info from W3Schools  */

.collapsible
{
	background-color: white;
	color: MediumVioletRed;
	cursor: pointer;
	padding: 3px;
	border: 2px solid black;
	border-radius: 10px;
	text-align: left;
	outline: none;
	font-size: inherit;
	margin: 5px;
}

.active, .collapsible:hover {
  background-color: MediumVioletRed;
  color: white;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow-x: hidden;
  overflow-y:auto;
  transition: max-height 0.4s ease-out;
  background-color: #F3FFF9;
}