/* CSS for SUPA */


body {
/*	background: white;
	color: black; */
	font-family: Georgia, serif;
    margin-left: 60px;
    margin-right: 5%; 
    background-image: url(images/ukeborder.gif);
    background-repeat: repeat-y;
    background-position: 2px 0px;
	}

.body-container {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.body-info {
	order: 1;
	flex: 1;
	padding: 5px;
	}
	
.body-sidebar {
	order: 2;
	width: 205px;
	text-align: center;
	padding: 5px;
}


img {
	border: none;
	}
	
h1 {
	font-family: 'Cherry Cream Soda', fantasy;
	color: #660099;
	font-size: xx-large;
	font-display: swap;
	}

h3, h5 {
	color: #660099;
	font-family: 'PT Sans', sans-serif;
	padding: 0;
	font-weight: 700;
	font-display: swap;
	}

h2, h4 {
	color: #cc0000;
	font-family: 'PT Sans', sans-serif;
	padding: 0;
	font-weight: 700;
	font-display; swap;
	}
	
p {
	color: black;
	background-color: white;
	font-family: Georgia, serif;
	}
	
div.header {
	font-family: 'Cherry Cream Soda', cursive;
	text-align: center;
/*	font-size: xx-large; */
	color: purple;
	text-shadow: 1px 1px #CCCCCC;
	font-size: calc(16px + (36 - 16) * ((100vw - 300px) / (1600 - 300)));
	line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
	}

li {
	padding-bottom: 10px;
	}
	
table.navigation {
	font-family: 'PT Sans', sans-serif;
	text-align: center;
	font-size: small;
	font-weight: 400;
	color: black;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	}
	

td.navigation-selected {
	font-family: 'PT Sans', sans-serif;
	vertical-align: middle;
	text-align: center;
	font-size: small;
	color: #cc0000;
	font-weight: 700;
	}
table.navigation a {text-decoration: none;}
table.navigation a:hover {color: gray;}


dt {
	color: #660099;
	font-family: 'PT Sans', sans-serif;
	font-weight: bold;
	background-color: white;
	line-height: 130%;
	}
dd {
	color: black;
	background-color: white;
	font-family: Georgia, serif;
	padding-bottom: 3px;
	padding-top: 3px;
	}
	
.purpleborder {
	border: thin #660099 solid;
	}
.goldborder {
	border: thin #ffcc00 solid;
	}

	
.brag {
	border: thin #660099 solid;
	width: 250px;
	margin-left: 10px;
	}
	
.frontpage {
	width: 205px;
	text-align: center;
	margin-left: 10px;
	}
	
.date {
	font-weight: bolder;
	color: #c00;
	}
	
.events {
	color: #660099;
	font-family: 'PT Sans', sans-serif;
	background-color: white;
	font-weight: bold;
	font-size: 130%;
	}

/* General definitions */

.clearboth {
	clear: both;
	}

.headerimage {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	}
	
.mission {
	font-family: 'PT Sans', sans-serif;
	font-size: small;
	color: black;
	text-align: left;
	}
	
table.music {
	border-collapse: collapse;
	border: thin black outset;
	font-family: sans-serif;
	font-size: small;
	text-align: center;
		}
.music th {
	text-align: center;
	border: thin solid black;
	padding: 0.1em;
	}
.music td.first {
	text-align: left;
	border: thin solid black;
	padding: 0.2em;
	}
.music td {
	border: thin solid black;
	padding: 0.1em;
	}
	
/*  Making Google's Calendar responsive  */
.responsiveCal {
 	position: relative; 
 	padding-bottom: 75%; 
 	height: 0; 
 	overflow: hidden;
 }
 
.responsiveCal iframe {
 	position: absolute; 
 	top:0; 
 	left: 0; 
 	width: 75%; 
 	height: 75%;
 
}