/* policebox.org */

html {
	background: #000 url(backg/whobak.jpg) center / cover fixed;
	overflow-y: scroll;         /* keep the scrollbar space */
	scrollbar-gutter: stable;
	}

body {
	margin: 0;
	color: #1E90FF;
	font: 16px/1.45 "Comic Sans MS", verdana, arial, sans-serif;
	}

a { color: lightblue; }
a:visited { color: #1E90FF; }
a:active, a:hover { color: #00FF00; }

/* LAYOUT: nav left, content right */
.site {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 30px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px;
	}

/* NAV: rollover buttons */
.nav { position: sticky; top: 16px; align-self: start; text-align: center; }
.nav a { display: block; line-height: 0; }
.nav a img { display: inline-block; }
.nav .on, .nav a:hover .off, .nav a:focus .off, .nav a.current .off { display: none; }
.nav a:hover .on, .nav a:focus .on, .nav a.current .on { display: inline-block; }
.nav .home { margin-top: 18px; }

.content { min-width: 0; }
.content img { max-width: 100%; height: auto; }

/* HEADINGS */
.title { margin: 0; font-size: 2.2em; font-weight: normal; text-align: center; }
.subtitle { margin: 0 0 12px; font-size: 1.6em; font-weight: normal; text-align: center; }
h2 { margin: 1.6em 0 0; font-size: 1.6em; }
hr { border: 0; border-top: 2px groove #808080; margin: 8px 0 16px; }

.center { text-align: center; }
.quote { text-align: center; }

/* bevelled photo frame */
.frame {
	display: inline-block;
	padding: 2px;
	border: 6px outset #b0b0b0;
	}
.frame img { display: block; border: 1px inset #b0b0b0; }

.float-left { float: left; margin: 0 14px 8px 0; }
.float-right { float: right; margin: 0 0 8px 14px; }
.clear { clear: both; }

/* credits table */
.credits { border: 1px outset #b0b0b0; border-spacing: 2px; }
.credits th, .credits td { border: 1px inset #b0b0b0; padding: 1px 6px; text-align: left; vertical-align: top; }
.credits th { font-size: 1.3em; }

/* Home page */
.home-page { font-family: arial, sans-serif; text-align: center; color: #00BFFF; }
.home-page .intro { font-size: 0.85em; }
.updated { color: #00ff00; }

/* Doctors grid */
.doctor-grid { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 6px; }
.doctor-grid img { display: block; }

.footer { margin-top: 30px; text-align: center; font-size: 0.65em; clear: both; }
.footer .home img { display: inline-block; }

/* PHONES: nav buttons across the top */
@media (max-width: 700px) {
	.site { grid-template-columns: 1fr; gap: 12px; padding: 10px; }
	.nav { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
	.nav .home { display: none; }
	.nav .music { margin: 2px; }
	.nav .music-note { width: auto; flex-basis: 100%; text-align: center; margin-bottom: 4px; }
	.float-left, .float-right { float: none; display: block; margin: 0 auto 10px; }
	.credits { font-size: 0.8em; }
	}

/* framed text box */
.frame-box { display: block; padding: 10px 14px; margin: 10px 0; }

/* picture beside text */
.media { display: flex; gap: 14px; align-items: flex-start; margin: 12px 0; }
.media-img { flex: none; }
.media-text { flex: 1; min-width: 0; }

/* Picture archive */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gallery a { display: block; border: 3px outset #b0b0b0; background: #000; }
.gallery img { display: block; width: 100%; height: 130px; object-fit: cover; }

.survey-gone { font-size: 2em; margin-top: 2em; color: #00BFFF; }

@media (max-width: 700px) {
	.media { flex-direction: column; align-items: center; }
	.credits { display: block; overflow-x: auto; }
	}

/* music button */
.nav .music {
	display: block;
	margin: 14px auto 0;
	padding: 4px 12px;
	border: 2px outset #1E90FF;
	background: #000;
	color: #00BFFF;
	font: bold 13px arial, sans-serif;
	cursor: pointer;
	}
.nav .music:hover, .nav .music:focus { color: #00ff00; }
.nav .music[hidden] { display: none; }
.nav .home { text-decoration: none; }
.nav .home span { display: block; margin-top: 2px; font: 10px/1 arial, sans-serif; white-space: pre; color: lightblue; }
.nav .home:hover span, .nav .home:focus span { color: #00FF00; }
main:focus { outline: none; }
/* music notice */
.music-note { display: none; width: 105px; margin: 0 auto 10px; font: 10px/1.35 arial, sans-serif; color: lightblue; }
.has-music .music-note { display: block; }