:root {
	--rocket-blue: #1b449c;
	}

html, body {
     height: 98%;
	}

body {
	background-color: white;
	margin: 20px;
	font: normal 12px verdana,sans-serif;
	color: #111;
	}
.dark {
	background: #02012c;
	/*background: radial-gradient(ellipse, rgba(12,12,163,1) 0%, rgba(9,9,121,1) 40%, rgba(2,0,36,1) 100%);*/
	color: #eee;
	}

a                {color: #1b449c; background: transparent; text-decoration: underline; padding: 0 2px;}
a:visited:hover  {color: #ffffff; background: #551a8b; text-decoration: none;}
a:visited        {color: #551a8b; text-decoration: underline;}
a:hover          {color: #ffffff; background: #1b449c; text-decoration: none;}
a:active         {color: #ffffff; background: #ee0000; text-decoration: none;}
a:active:visited {color: #ffffff; background: #ee0000; text-decoration: none;}

.dark a                {color: #ccffff;}
.dark a:visited:hover  {color: #551a8b; background: #ffffff;}
.dark a:visited        {color: #eeeeff;}
.dark a:hover          {color: #1b449c; background: #bbeeee;}
.dark a:active         {color: #ffffff; background: #ee1111;}
.dark a:active:visited {color: #ffffff; background: #ee1111;}

a.logo                {color: transparent; background: transparent; text-decoration: none;}
a.logo:visited:hover  {color: transparent; background: #ccaaaa; text-decoration: none;}
a.logo:visited        {color: transparent; background: #ccaaaa; text-decoration: none;}
a.logo:hover          {color: transparent; background: #ccaaaa; text-decoration: none;}
a.logo:active         {color: transparent; background: #ee1111; text-decoration: none;}
a.logo:active:visited {color: transparent; background: #ee1111; text-decoration: none;}

main {
	width: 900px;
	margin: 0 auto;
	}

header {
	width: 900px;
    height: 52px;
	background: url("msm_logo.png") no-repeat 2% 50%, url("steeple-1903.png") no-repeat 98% 50%;
	line-height: 52px;
	margin: 0 0 1.5em;
	}
.dark header {
	background: url("msm_logo-white.png") no-repeat 2% 50%, url("steeple-1903-white.png") no-repeat 98% 50%;
	}

h1 {
	margin: 0;
	font-size: 2.7em;
	font-weight: 900;
	font-style: italic;
	letter-spacing: 0.4px;
	text-align: center;
	color: var(--rocket-blue);
	}
.dark h1 {color: #eee;}

nav {
	width: 900px;
	margin: 0 auto 2em;
	padding: 1px 0;
	text-align: center;
	font-size: 1em;
	border-top: 1px solid var(--rocket-blue);
	border-bottom: 1px solid var(--rocket-blue);
	}
.dark nav {
	border-top-color: #ccc;
	border-bottom-color: #ccc;
	}
nav ul { 
	margin: 0;
	padding: 0.4em 0 0.55em 0;
	list-style: none;
	}
nav ul li {
	background: url(diamond-blue.png) 100% 58% no-repeat;
	margin: 0 0.5em 0 0;
	padding: 0 1.2em 0 0;
	display: inline;
	}
.dark nav ul li {
	background: url(diamond-white.png) 100% 58% no-repeat;
	}
nav ul li:last-child {
	background: none;
	margin-right: 0;
	padding-right: 0;
	}
nav ul li span {
	font-size: 0.7em;
	padding: 0 1px;
	}
.mass {
	text-align: center;
	font-size: 1.3em;
	margin: 0 auto 2em;
	color: var(--rocket-blue);
	}
.mass span {
	font-size: 70%;
	color: var(--rocket-blue);
	}
.dark .mass {
	color: #ffffff;
	}
.dark .mass span {
	color: #ffffff;
	}

footer {
    position: absolute;
    bottom: 0;
    width: 900px;
	/*padding: 1.5em 0 1.5em 32px;*/
	padding: 1.5em 0;
	text-align: center;
	font-style: italic;
	font-size: 1em;
	letter-spacing: 1px;
	color: var(--rocket-blue);
	}
.dark footer {color: #d0d0d0;}

footer::first-letter {
	margin-left: 420px;
	}

section {
	width: 100%;
	text-align: center;
	}

.unavailable {
	color: #777;
	text-decoration: none;
	cursor: help;
	}
.dark .unavailable {
	color: #aaa;
	}

#sports {
	position: absolute;
	left: 0;
	bottom: 15px;
	border-radius: 5px;
	}
#clubs {
	position: absolute;
	left: 135px;
	bottom: 15px;
	border-radius: 5px;
	}
#bells {
	position: absolute;
	left: 310px;
	bottom: 15px;
	border-radius: 5px;
	}

#sportlogo, #clublogo, #bellslogo {
	cursor: pointer;
	}
	
#toggle {
	float: right;
	cursor: pointer;
	}