p {
    font-family: Verdana, Geneva, sans-serif; 
}

/* Style the body */
body {
    font-family:  Verdana, Geneva, sans-serif;
	background-color: rgb(255,255,204);
	color: rgb(0,51,102);
    margin: 0;
	overflow: visible;
}

/* configure smallest mp3 player controls for Hear Us Play page */
#player {
  width: 50px;
  height: 60px;
}

/* Grid container definition for full page */
.fullscreengrid {
	display: grid;
	grid-template-columns: 180px 1fr auto;
	grid-template-rows: 80px 50px auto auto auto;
}
 
/* Header for all pages */
.header1 {
	grid-column: 1 / 4;
	grid-row: 1 / 2;
    text-align: center;
    background: rgb(94,85,113);
    color: rgb(255,255,204);
	position: sticky;
	top: 0px;	
}

/* Div wrapper for .nav1 because sticky will not work in nav1 alone */
.sidenav {
	background-color: rgb(94,85,113);
	position: sticky;
	top: 80px;
}

/* The navigation - menu system for all pages */
.nav1 {
	grid-column: 1 / 2;
	grid-row: 2 / 4;
	padding-left: 10px;
	padding-top: 20px;
	padding-bottom: 20px;
	color: rgb(255,255,204);
    background-color: rgb(94,85,113);
}

/* Fill leftmost column with colour because nav1 & sticky will not behave if nav1-Grid set to go to Row4 or Row5 */
.leftfiller {
	grid-column: 1 / 2;
	grid-row: 3 / 5;
    background-color: rgb(94,85,113);
	}

/* The individual page title */	
.pagetitle {
	grid-column: 2 / 4;
	grid-row: 2 / 3;
	padding-left: 10px;
}
	
/* The Grid definition for the image on all pages */
.image1 {
	grid-column: 3 / 4;
	grid-row: 3 / 4;
	padding-left: 5px;
	padding-right: 5px;
}

/* for correct spacing of normal (non-table-like) text when required in some divs */
.normaltext {
	line-height: 20px;
}

/* The text area to the left of the Image area */
.narrowtextbox {
	grid-column: 2 / 3;
	grid-row: 3 / 4;
	padding: 10px;
}

/* The text area to the right of purple side-bar and under Image */
.widetextbox {
	grid-column: 2 / 4;
	grid-row: 4 / 5;
	padding: 10px;	
}

/* The footer for all pages */
.footer1 {
	grid-column: 1 / 4;
	grid-row: 5 / 6;
    background-color: rgb(255,255,204);
	color: rgb(0,51,102);
    padding: 4px;
	font-size:60%;
    text-align: center;
}


/* Fonts*/

p.darkblue {
	text-align:left;
	font-size:100%;
	color:rgb(0,51,102);
}

p.tabdarkblue {
	text-align:left;
	font-size:90%;
	padding: 0 0 0 0;
	margin: 0px 0px 0px 40px;
	color:rgb(0,51,102);
}

p.darkblue80 {
	text-align:left;
	font-size:80%;
	color:rgb(0,51,102);
}

p.lightblue {
	text-align:left;
	font-size:110%;
	color:rgb(0,102,255);
}

p.cream {
	text-align:left;
	font-size:100%;
	color:rgb(255,255,204);
}

p.tiny {
	text-align:left;
	font-size: 60%;
	color:rgb(0,51,102);
}


/* Headings */
h1 {
	font-size: 31px;
}
h2 {
	font-size: 24px;
}
h3 {
	font-size: 18px;
}
h4 {
	font-size: 16px;
}
h5 {
	font-size: 13px;
	line-height: 5px;
	
}
h6 {
	font-size: 10px;
}

/* Table for the prices page */

.pricetable, .pricetable th, .pricetable td {
    border: 1px solid Grey;
}

.pricetable {
	border-collapse: collapse;
	padding: 0;
	margin: 0;
	width: 100%;
	color: rgb(0,51,102);
}
.pricetable th {
	font-size: 100%;
	color: rgb(0,51,102);
	padding: 5px
}
.pricetable td {
	border-width: 1px;
	padding: 5px;
	height: 15px;
	font-size: 100%;
	color: rgb(0,51,102);
}

/* For the Hear Us Play page */

.mp3table, .mp3table th, .mp3table td {
    border: none;
}

.mp3table {
	border-collapse: collapse;
	font-size: 100%;
	padding: 0;
	margin: 20;
	width: 100%;
	color: rgb(0,51,204);
}

.mp3table th {
	font-size: 100%;
	margin: 40px;
	padding-left: 15px;
	padding-top: 12px;
    padding-bottom: 12px;
	color: rgb(0,51,102);
	text-align: left;
}

.mp3table td {
	border-width: 1px;
	padding-left: 25px;
	padding-top: 7px;
    padding-bottom: 7px;
	margin: 40px;
	height: 25px;
	font-size: 100%;
	color: rgb(0,51,204);

}
/* Tables for narrow and wide areas of repertoire pages */

.narrowqreptable, .narrowqreptable th, .narrowqreptable td {

}

.narrowqreptable {
	border-collapse: collapse;
	padding: 0;
	margin-left: 0;
	width: 100%;
	color: rgb(0,51,102);	
}

table.narrowqreptable tr td:nth-child(1){
	width: 150px;
	text-align: right;
}
table.narrowqreptable tr td:nth-child(2){
	word-wrap: break-word;
}

.narrowqreptable t h {
	padding-left: 5px;
	font-size: 80%;
	color: rgb(0,51,102);
}

.narrowqreptable td {
	padding: 5px;
	font-size: 80%;
	line-height: 15px;
	color: rgb(0,51,102);
    vertical-align: top;	
}

.wideqreptable, .wideqreptable th, .wideqreptable td {
  border: none;
}

.wideqreptable {
	border-collapse: collapse;
	padding: 0;
	margin: 60;
	color: rgb(0,51,102);
}

table.wideqreptable tr td:nth-child(1){
	width: 150px;
	text-align: right;
}

.wideqreptable t h {
	padding: 5px;
	font-size: 80%;
	color: rgb(0,51,102);
}

.wideqreptable td {
	margin-left: 20px;
	padding: 5px;
	font-size: 80%;
	line-height: 15px;
	color: rgb(0,51,102);
    vertical-align: top;	
}


/* Common colour assignments for status of "clickable links" */

a:link {
    color: rgb(255,255,204);
    background-color: transparent;
    text-decoration: none;
	font-size: 150%
	line-height: 2.0	
}

a:visited {
    color: rgb(255,255,204);
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: orange;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}