/*$background: #f9f9f9ff;*/

* {
    box-sizing: border-box;
}

html, body {
	/* background-color: rgb(248, 249, 236); */
	background-color: #f9f9f9ff;
	font-family: sans-serif;
	padding: 0;
    min-height: 100%;
}

html {
    margin: 0;
    height: 100%;
}

body {
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template:
        "header" 7rem 
        "content" 1fr
        "footer" 50px;
}

header {
    grid-area: header;
	border-bottom: 2px solid black;
    align-self: center;
}

header .logoContainer {
        display: inline-block;
        position: relative;
    }

header .logoContainer .logo {
            height: 5rem;
        }

header .logoContainer .siteTag {
            position: absolute;
            right: 0;
            bottom: 0;

            color: teal;
            font-size: 1.3em;
        }

header .logoContainer .betaTag {
            width: 1px; /* Out-of-box alignment hack */
            position: absolute;
            right: -.3em;
            bottom: 0;
            font-style: italic;

            color: rgb(218, 13, 13);
            font-size: 1.3em;
        }

main {
    grid-area: content;
	margin-bottom: 2em;
}

main div.search input { width: 100%; }

footer {
    grid-area: footer;
	border-top: 1px solid black;
	height: 2em;
	background-color: #f9f9f9ff;
}

.counter {
	margin-bottom: .5em;
	font-style: italic;
	font-size: .9em;
	text-align: right;
}

.staticContent {
	margin: 0 2em;
	max-width: 900px;
}

.linkSpacer {
	margin: 0 .5em;
}