@charset "UTF-8";

/* Reset styles, for Blank Slate purposes. Extended from Eric Meyer’s Reset CSS: http://meyerweb.com/eric/tools/css/reset/index.html */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* End reset styles */

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.lte-ie7 .clearfix {
	zoom: 1;
}

.visuallyhidden {
	overflow: hidden;
	clip: rect(0 0 0 0);
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0;
	white-space: nowrap;
}



a {
	text-decoration: underline;
}

a:link,
a:hover,
a:active {
	color: #03f;
}

a:visited {
	color: #909;
}



html {
	background-color: #999;
	/*background: #999 url(../images/verticalrhythm.png) top left repeat;*/
	font: 112.5% 'Georgia', serif; /* Vertical rhythm: 18 pixels */
}

body {
	position: relative;/* Allow Remembrance Day poppy to be positioned */
	max-width: 45em;/* 810px */
	margin: 2em auto;/* 36px 0 */
	-webkit-box-shadow: 0 0 3em #000;
	-moz-box-shadow: 0 0 3em #000;
	box-shadow: 0 0 3em #000;/* 0 0 54px */
	padding: 1em 1em .5em;/* 18px 18px 9px */
	background-color: #fff;
	/*background: #fff url(../images/verticalrhythm.png) top left repeat;*/
	color: #000;
}

@media screen and (max-width: 500px) {
	body {
		padding: .5em;
	}
}

@media screen and (max-height: 450px) {
	html {
		background-color: #fff;
	}

	body {
		margin: 0;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
}

.lte-ie8 body {
	border: solid 1px #000;/* In lieu of box-shadow. I did try the glow filter, but I couldn’t find any variations that I thought looked good. */
}

.lte-ie6 body {
	width: 45em;/* 810px *//* Work around lack of support for max-width property in IE 6 */
}



.lte-ie8 .sprite {
	display: inline-block;
	width: 90px;
	height: 90px;
	background: url(../images/sprite1x.png) no-repeat;
}

.lte-ie7 a:hover .sprite {
	cursor: pointer;
}



.header {
	margin-bottom: .5em;
	padding: .5em 0 .444em/* 9px 0 8px (leave room for the header’s 1px bottom border) */;
	border-bottom: solid 1px #999;
}

.header .me,
.lte-ie7 .header .me-external {
	float: left;
	margin: -.5em .5em 0 0;/* -9px 9px 0 0 */
}

.header .me-external {
	display: none;
}

.lte-ie7 .header .me {
	display: none;
}

.lte-ie7 .header .me-external {
	display: inline-block;

}

.header h1 {
	font-size: 3em;/* 54px */
}

.header h1 svg {
	vertical-align: bottom;
}

@media screen and (max-width: 500px) {
	.header h1 {
		padding-top: .25em;/* 9px */
		font-size: 2em;/* 36px */
	}

	.header h1 svg {
		width: 210px;
		height: 36px;
	}
}

@media screen and (max-width: 374px) {
	.header h1 {
		padding-top: .334em;/* 9px */
		font-size: 1.5em;/* 27px */
	}

	.header h1 svg {
		width: 157.5px;
		height: 27px;
	}

	.header .subheading {
		font-size: .833em;/* 15px */
	}
}

.lte-ie7 .header h1,
.lte-ie7 .header .subheading {
	font-weight: normal;/* Work around lack of support for the inherit keyword */
}



.poppy-appeal {
	position: absolute;
	right: 1em;/* 18px */
	top: .75em;/* 13.5px */
}

@media screen and (max-width: 500px) {
	.poppy-appeal {
		top: -1.5em;/* -27px */
		right: .25em;/* 4.5px */
	}
}

.poppy-appeal a,
.poppy-appeal a img {
	display: block;
	text-decoration: none;
}

.lte-ie8 .poppy-appeal .poppy {
	display: none;
}

.lte-ie8 .poppy-appeal .poppy1x {
	background-position: -1px -277px;
}



.elsewhere {
	width: 17em;/* 306px */
	max-width: 100%;
	margin: 3.5em auto;/* 63px */
}

@media screen and (max-height: 375px) {
	.elsewhere {
		margin: 2em auto;/* 36px */
	}
}

@media screen and (max-width: 333px) {
	.elsewhere {
		width: 16em;
	}
}

.lte-ie7 .elsewhere {
	width: 306px;/* Work around apparent em rounding error in IE 7 and 6 */
	margin-top: 0;/* Work around inexplicable issues with margins on this element in IE 7 and 6, which behave differently depending on whether the Poppy Apppeal HTML is on the page or not. */
	margin-bottom: 0;
	padding: 3.5em 0;
}

.lte-ie6 .elsewhere {
	width: 324px;/* Work around lack of support for :first-child selector in IE 6 */
}

.elsewhere li {
	float: left;
	margin-left: 1em;/* 18px */
}

.elsewhere li.coffee,
.elsewhere li.settle {
	margin-top: 1em;
}

.elsewhere li.coffee {
	clear: left;
	margin-left: 3em;
}

@media screen and (max-width: 333px) {
	.elsewhere li {
		margin-left: .5em;/* 9px */
	}
}

.elsewhere li:first-child {
	margin-left: 0;
}

.lte-ie7 .elsewhere li {
	display: inline;
}

.elsewhere li a {
	display: block;
	width: 5em;/* 90px */
	height: 5em;/* 90px */
	text-decoration: none;
}

.elsewhere li a span {
	font-size: 90px;
}

.elsewhere li.settle a {
	position: relative;
}

.elsewhere li.settle a span.baby {
	font-size: 70px;
	line-height: 90px;
}

.elsewhere li.settle a span.sleepy {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 45px;
}

.elsewhere li a svg {
	width: 100%;
	height: 100%;
}

.lte-ie8 .elsewhere li a .sprite {
	display: block;
}

.lte-ie8 .elsewhere li a .sprite.linkedin {
	background-position: -1px -1px;
}

.lte-ie8 .elsewhere li a .sprite.stack-overflow {
	background-position: -1px -93px;
}

.lte-ie8 .elsewhere li a .sprite.pinboard {
	background-position: -1px -185px;
}



.footer {
	margin-bottom: -1px;
	border-top: solid 1px #999;
	font-size: .667em;/* 12px */
	line-height: 1.5;/* 18px */
	text-align: right;
}

@media screen and (max-width: 767px) {
	.footer {
		text-align: center;
	}
}

.footer .copyright {
	float: left;
	padding-right: 1em;
}

@media screen and (max-width: 767px) {
	.footer .copyright {
		float: none;
		padding: 0;
	}

	.footer .company-registration,
	.footer .company-address {
		margin-top: .75em;/* 9px */
	}
}

@media screen and (prefers-color-scheme: dark) {
	a:link,
	a:hover,
	a:active {
		color: #6cf;
	}

	a:visited {
		color: #f9f;
	}

	html {
		background-color: #111;
	}

	body {
		background-color: #222;
		color: #bbb;
	}

	h1 svg path {
		fill: #bbb;
	}

	.elsewhere svg.stack-overflow polyline {
		fill: #222;
	}

	.header,
	.footer {
		border-color: #666;
	}
}

@media screen and (max-height: 450px) and (prefers-color-scheme: dark) {
	html {
		background-color: #222;
	}
}