@font-face {
    font-family: 'ArialNarrow-Regular';
    src: url('../fonts/ArialNarrowRegular.eot');
    src: url('../fonts/ArialNarrowRegular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ArialNarrowRegular.ttf') format('truetype'),
         url('../fonts/ArialNarrowRegular.otf') format('otf');
}

* {
	box-sizing: border-box;
}

html {
	height: 100%;
	font-size: 18px;
}

body{
	height: 100%;
	width: 100%;
	font-family: 'Arial Narrow', 'ArialNarrow-Regular', 'Arial', 'Helvetica', sans-serif;
	line-height: 1.4;
	letter-spacing: 0.02rem;
	font-size: 1rem;
	margin: 0;
	background: #f5f5f3;
}
.section {
	width: 50%;
	min-height: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	float: left;
	overflow-y: scroll;
}

header {
	margin: 0 1rem;
	padding: 0.7rem 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

article {
	margin: 0 1rem;
	padding: 1rem 0;
}

header {
	position: -webkit-sticky;
	position: sticky;
	background: #f5f5f3;
	top: 0;
}

.right header {
	border-bottom: 2px groove dimgray
}

.left header {
	border-bottom: 2px groove dimgray
}

.left {
	border-right: 2px groove dimgray;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}

p {
	margin: 0 0 1rem;
}

img {
	max-width: 100%;
	height: auto;
	margin: 0 0 1rem;
  display: block;
}

a {
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}

a[target='_blank'] {
	cursor: alias;
}

a:hover {
	text-decoration: underline;
}

li[data-new="true"]:after {
	content: ' NEW';
	color: red;
	font-size: 0.8em;
	margin-left: 1px;
	letter-spacing: 1px;
	text-underline: none!important;
}

figure {
	padding: 0;
	margin: 0;
}

@media (max-width: 720px) {
	body {
		height: auto;
		/* position: relative; */
	}
	.section {
		width: 100%;
		margin-bottom: 3em;
		position: relative;
		float: none;
		overflow-y: auto;
	}

	header {

	}


	.left {
		border-right: 0px groove;
	}

}