.color-0 { color: #373276 }	/* Main Primary color */
.color-1 { color: #827FB2 }
.color-2 { color: #595494 }
.color-3 { color: #1E1959 }
.color-4 { color: #0C083B }
.color-1-0 { color: #226666 }	/* Main Secondary color (1) */
.color-1-1 { color: #669999 }
.color-1-2 { color: #407F7F }
.color-1-3 { color: #0D4D4D }
.color-1-4 { color: #003333 }
.color-2-0 { color: #622870 }	/* Main Secondary color (2) */
.color-2-1 { color: #9E72A8 }
.color-2-2 { color: #7F488C }
.color-2-3 { color: #471054 }
.color-2-4 { color: #2D0238 }
.bgcolor-0 { background: #373276 }	/* Main Primary color */
.bgcolor-1 { background: #827FB2 }
.bgcolor-2 { background: #595494 }
.bgcolor-3 { background: #1E1959 }
.bgcolor-4 { background: #0C083B }
.bgcolor-1-0 { background: #226666 }	/* Main Secondary color (1) */
.bgcolor-1-1 { background: #669999 }
.bgcolor-1-2 { background: #407F7F }
.bgcolor-1-3 { background: #0D4D4D }
.bgcolor-1-4 { background: #003333 }
.bgcolor-2-0 { background: #622870 }	/* Main Secondary color (2) */
.bgcolor-2-1 { background: #9E72A8 }
.bgcolor-2-2 { background: #7F488C }
.bgcolor-2-3 { background: #471054 }
.bgcolor-2-4 { background: #2D0238 }

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    font: 32px Helvetica;
    background: #eee;
    color: rgba(255,255,255,.9)
}

main {
    display: flex;
    flex: 1;
    margin: 0px;
    padding: 0px;
    font-size: .5em;
}

a:link { color: rgba(255,255,255,.8) }
a:visited { color: rgba(255,255,255,.5) }
a:hover { color: rgba(255,255,255,1) }

main > article {
    margin: 4px;
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 7pt;
    flex: 3 1 80%;
    order: 2;
}

main > nav {
    margin: 4px;
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 7pt;
    flex: 1 6 auto;
    order: 1;
}

header, footer {
    display: flex;
    justify-content: center;
    margin: 4px;
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 7pt;
    color: rgba(255,255,255,.9)
}

header { height: 4em; }

header > img {
    height: 4em;
    padding-right: 1em;
}

header > *, footer > * {
    display: flex;
    justify-content: space-between;
}

header h2 {
    margin: 0em;
    text-align: center;
}

.concise
{
    display: none;
}

footer { height: 1.1em; }

footer > div {
    font-size: .5em;
    width: 30%;
}

/* Too narrow to support three columns */
@media all and (max-width: 640px) {
    #main, #page {
        flex-direction: column;
    }

    #main > article, #main > nav {
        order: 0;
    }
    
    #main > nav, header, footer {
    }

    header, footer { height: 2em; }
    
    header > img {
	height: 2em;
    }
    header > div {
	display: flex;
	justify-content: center;
	font-size: .9em;
    }    

    .concise
    {
	display: flex;
    }
    .verbose
    {
	display: none;
    }

    footer > div {
	display: flex;
	justify-content: space-between;
    }
}

nav > ul
{
    list-style-type: none;
    padding: 0;
    min-width: 6em;
    max-width: 9em;
}

nav li
{
	font-weight: bold;
}

dt, dd { display:block; float:left; margin-top: 0em; margin-left:0em; }
dt { width: 15em; clear:both; }
dl { overflow:hidden; }

div.schedule { display: block; }

dl.showlist img { height: 1.5em; }

img[src*='/staff/'] { float: right; width: 10em; }