/* Shared site chrome — the dark social-bookmarks footer.
   Loaded by every page so the footer styling has one source of truth. */

#footer {
	background: #1c1c1c url("/images/noise.png") repeat;
	padding: 14px 0 0 0;
	border-top: 23px solid #191919;
	bottom: 0;
	position: absolute;
	width: 100%;
	margin: 0;
	height: 83px;
}
#ontopheader, #ontopheader *, #footer, #footer * { box-sizing: content-box; }

ul.social-bookmarks { display: block; overflow: hidden; margin: 0; padding: 10px 0 0 0; text-align: center; }
ul.social-bookmarks li { display: inline-block; list-style-type: none; margin: 0 4px 8px 4px; }
ul.social-bookmarks li.first { margin-left: 0; }
ul.social-bookmarks li.last { margin-right: 0; }
ul.social-bookmarks li a {
	display: inline-block;
	overflow: hidden;
	width: 45px;
	height: 45px;
	margin: 0 auto;
	outline: none;
	padding: 0;
	text-align: center;
	text-indent: -9999px;
	border: 2px solid #5b5b5b;
	border-radius: 100%;
}
ul.social-bookmarks li a:hover { border-color: #6b7aff; }
ul.social-bookmarks li.facebook a  { background: url("/images/facebook.png")  no-repeat center center transparent; }
ul.social-bookmarks li.twitter a   { background: url("/images/twitter.png")   no-repeat center center transparent; }
ul.social-bookmarks li.linkedin a  { background: url("/images/linkedin.png")  no-repeat center center transparent; }
ul.social-bookmarks li.youtube a   { background: url("/images/youtube.png")   no-repeat center center transparent; }
ul.social-bookmarks li.flickr a    { background: url("/images/flickr.png")    no-repeat center center transparent; }
ul.social-bookmarks li.googleplus a{ background: url("/images/googleplus.png")no-repeat center center transparent; }
ul.social-bookmarks li.pinterest a { background: url("/images/pinterest.png") no-repeat center center transparent; }

/* On phones use a flex sticky-footer pattern so the footer sits at the bottom of the
   viewport when content is short, and after content when it's tall. Not `position: fixed`
   — the footer scrolls with the page, just always at the end of body. */
@media (max-width: 880px) {
	body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
	#footer { position: static; bottom: auto; margin-top: auto; }
}