@charset "UTF-8";
/* Shared frame of every page (banner, menu, footer), drawn by site.js.
   Replaces the old index.html + iframe layout; the look copies it exactly.
   Class names start with "site-" so that they never clash with the pages' own styles. */

html body {
	background: #D6D6D6;
	margin: 0;
	padding: 0;
}
.site-container {
	width: 1024px;
	margin: 0 auto;
	background: #EEE;
	font-family: Georgia, "Times New Roman", Times, serif;
}
.site-header {
	background: #FFF;
	line-height: 0;
}
.site-header img {
	border: 0;
}

/* While scrolling, the banner scrolls away but the menu stays at the top and the
   address bar at the bottom of the window (position: sticky keeps them 1024px wide,
   and the footer settles back into place at the end of the page). */
html {
	scroll-padding-top: 48px;    /* #anchors are not hidden under the menu */
}
.site-nav {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 100;
	background: #EEE;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Menu: same colours and sizes as the old Spry menu bar. The items share the width,
   so the bar looks the same with 7 items and still fits when Logout appears. */
ul.site-menu {
	display: flex;
	width: 63em;
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
	font-size: 16px;
}
ul.site-menu li {
	flex: 1 1 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
	line-height: 22px;
	color: #333;
}
ul.site-menu li a,
ul.site-menu li a:link,
ul.site-menu li a:visited {
	display: block;
	padding: 0.5em 0.75em;
	background-color: #EEE;
	color: #333;
	text-decoration: none;
	cursor: pointer;
}
/* The page you are on: one step darker than the other tabs (same grey as the page background). */
ul.site-menu li a.site-current,
ul.site-menu li a.site-current:link,
ul.site-menu li a.site-current:visited {
	background-color: #D6D6D6;
}
ul.site-menu li a:hover,
ul.site-menu li a:focus,
ul.site-menu li a.site-current:hover,
ul.site-menu li a.site-current:focus {
	background-color: #3C5C85;
	color: #FFF;
}
/* Logged in: 9 tabs share the bar, so give the labels a little more room. */
html.site-logged-in ul.site-menu li a {
	padding-left: 0.3em;
	padding-right: 0.3em;
	white-space: nowrap;
}

.site-content {
	background: #FFF;
	overflow: hidden;      /* contains the floating boxes of home page */
	padding-bottom: 10px;
}
.site-footer {
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
	z-index: 100;
	padding: 10px 0;
	text-align: center;
	font-size: 16px;
	color: #000;
	background-color: #E6E6E6;
}

/* Login state: site.js puts "site-logged-in" on <html> for logged-in visitors. */
.only-in { display: none !important; }
html.site-logged-in .only-in { display: block !important; }
html.site-logged-in li.only-in { display: list-item !important; }
html.site-logged-in .only-out { display: none !important; }
/* Admin only ("site-admin", also set by site.js). Just hides the button: gm_admin.php checks the login itself. */
.only-admin { display: none !important; }
html.site-admin .only-admin { display: inline-block !important; }