@charset "utf-8";
@import url("webfonts/greenscr/stylesheet.css");
@import url("webfonts/pixelmix/stylesheet.css");

body {
	width: 960px;
	max-width: calc(100% - 32px);
	margin-left: auto;
	margin-right: auto;
}

#lmFooter p {
	font-family: pixelmixregular;
	font-size: 50%;
	text-align: center;
	padding-top: 30px;
}

#lmContent p {
	font-size: 1em;
	font-family: pixelmixregular;
	line-height: 1.5em;
}

#lmContent h1 {
	font-size: 1.5em;
	font-family: "green_screenregular";
	text-transform: uppercase;
	text-align: center;
	line-height: 1em;
}

#lmHeader #lmMasthed {
	text-align: center;
	font-family: pixelmixregular;
	font-size: 1em;
	letter-spacing: 5px;
	line-height: 1em;
	width: 100%;
}

#lmHeader {
	box-sizing: border-box;
	border: 5px solid #000000;
	line-height: 1;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 15px;
	margin-bottom: 10px;
	float: left;
}

#lmHeader h1 {
	width: 100%;
	float: left;
	text-align: center;
	font-family: "green_screenregular";
	font-weight: bold;
	font-size: 3em;
}

#lmContent {
	float: left;
	width: 100%;
	font-size: .9em;
}

.twocolumns {
	column-count: 2;
	column-gap: 32px;
	column-rule: 1px solid #999;
	-moz-column-count: 2;
	-moz-column-gap: 32px;
	-webkit-column-count: 2;
	-webkit-column-gap: 32px;
	width: 100%;
}

#lmContent .twocolumns h1,
#lmContent .twocolumns h3 {
	column-span: all;
}

#lmContent .twocolumns h3 {
	font-family: pixelmixregular;
	text-align: center;
	font-size: 90%;
}

/* Keep story artwork inside its own newspaper column. */
#lmContent .twocolumns img {
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
	break-inside: avoid;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

/* Standalone story photos fill one column and travel with that story. */
#lmContent .twocolumns > img {
	display: block;
	width: 100%;
	margin: 0 0 1em 0;
	column-span: none;
}

/* Small photos embedded in copy allow the text to wrap around them. */
#lmContent .twocolumns p img[align="right"] {
	float: right;
	width: auto;
	max-width: 45%;
	margin: .2em 0 .75em .9em;
}

#lmContent .twocolumns p img[align="left"] {
	float: left;
	width: auto;
	max-width: 45%;
	margin: .2em .9em .75em 0;
}

@media (max-width: 700px) {
	.twocolumns {
		column-count: 1;
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-rule: 0;
	}

	#lmHeader h1 {
		font-size: 2.2em;
	}

	#lmHeader #lmMasthed {
		letter-spacing: 2px;
	}

	#lmContent .twocolumns p img[align="right"],
	#lmContent .twocolumns p img[align="left"] {
		max-width: 50%;
	}
}