body, html {
	margin: 0;
	padding: 0;
	width: 100%;
}
body {
	font-family: helvetica;	
	/* margin-top: 51px; */
	position: absolute;
}
h1, h2, h3, h4, h5 {
	margin: 0; 
}
h3 {
	font-size: 1.0em;
}
header, nav, footer, section, article, div {
	box-sizing: border-box;
}
a, a:visited {
	color: #a64b3c;
	text-decoration: none;
}
a.black-link, a.black-link:visited {
	color: black;
}
a:hover, a.black-link:hover {
	color: #d67053;
	text-decoration: underline;
}
a.no-decoration, a.no-decoration:hover {
	text-decoration: none;
}
input, select, button {
	font-size: 16px;
}

/*
 * "Simple" page layout (login, signup, etc - where you want no distractions)
 */
body.simple {
	margin: 0 auto;
	max-width: 600px;
}
body.simple main {
	margin-bottom: 40px;
	padding-left: 0;
}
body.simple div.logo {
	margin: 10px 0 25px;
	text-align: center;
}
body.simple div.logo img {
	height: 3em;
	vertical-align: top;
	margin-top: 5px;				
}
body.simple div.logo h1 {
	font-weight: bold;
	margin: 9px 0;
	display: inline-block;
	color: #463c3c;
	letter-spacing: -3px;
	font-size: 2.2em;
}

/*
 * Centered content, max width 1200px
 */
 body > .centered {
	margin: auto;
	max-width: 1200px;
}

/*
 * Site-wide classes
 */
.positive {
	color: green;
}
.negative, .error {
	color: red;
}
.dist-suspicious {
	color: #cccc00;
}
.dist-veryhigh, .ratio-verygood {
	color: green;
}
.dist-aboveavg {
	color: #00ee00;
}
.dist-average, .ratio-ok {
	color: inherit;
}
.dist-belowavg {
	color: #ff9900;
}
.dist-poor, .ratio-worrisome {
	color: red;
}
.instructions {
	color: #808080;
	font-size: 0.8em;
}
.restricted {
	background-color: #ebcec9;
	border: 1px solid black;
	padding: 25px;
}
.dateline {
	color: #7e6d6d;
	font-size: 0.85em;
	margin-top: 5px;
}

/*
 * Qualitative Diligence Section (used in both stocks and articles pages)
 */
.qualitative__content img {
	height: 25px;
	margin-left: 7px;
	position: relative;
	top: 3px;
	vertical-align: bottom;
}


/*
 * Statistics table
 */
table.stats {
	border: 0;
	border-collapse: collapse;
}
table.stats th, table.stats td {
	padding: 8px;
	text-align: center;
	white-space: nowrap;
}
table.stats tr:nth-child(odd) td {
	background-color: #f5f5f5;
}
table.stats tr:nth-child(odd) th {
	background-color: #e2e2e2;
}
table.stats img {
	height: 1.2em;
	vertical-align: bottom;
}
table.stats tr.new td:first-child {
	border-left: 3px solid blue;
}
table.stats tr.new td {
	font-weight: bold;
}

/*
 * Expand/Collapse rows table
 */
table.rowexpand span.expandCollapse {
	background: url(images/plus.svg);
	cursor: pointer;
	display: inline-block;
	height: 16px;
	margin-right: 8px;
	vertical-align: top;
	width: 16px;
} 
table.rowexpand span.expandCollapse.expanded {
	background: url(images/minus.svg);
}
table.rowexpand tr.subrow {
	display: none;
}
table.rowexpand tr.subrow td:first-child {
	text-align: right;
}

/*
 * Sortable table
 */
table.sortable th:hover {
	cursor: pointer;
}

table td.float, table th.float {
	text-align: right;
}

/*
 * Footer
 */
footer {
	border-top: 1px solid rgba(0, 0, 0, 0.26);
	margin-top: 15px;
}
.footer__inner {
	padding: 10px;
}
.footer__inner ul {
	list-style-type: none;
	margin: 0;
	padding: 0px;	
}
.footer__inner ul li {
	float: left;
	padding-right: 10px;
	max-width: 25px;
}
.footer__inner img {
	height: 27px;
}
.footer__inner .right {
	font-size: 0.8em;
	position: absolute;
	right: 0;
}
.footer__inner .right a,
.footer__inner .right a:visited,
.footer__inner .right a:hover {
	color: #7e6d6d;
}

/*
 * Header
 */
.header {
	background-color: #ffffff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.26);
	/* position: fixed; */
	top: 0;
	left: 0;
	width: 100%;
	z-index: 5;
}
.header__inner {
	display: flex;
	margin-left: auto;
	margin-right: auto;
}
.header__burger_block {
	cursor: pointer;
	width: 12%;
}
.header__title_block {
	text-align: center;
	width: 76%;
}
.header__search_block {
	cursor: pointer;
	margin-right: 5px;
	margin-top: 10px;
	text-align: right;
	width: 12%;
}
.header__search {
	height: 1.8em;
}
.header__burger {
	display: inline-block;
	font-size: 2.0em;
	margin-left: 7px;
}
.header__burger.open {
	color: #e1e2e4;
}
.header__logo {
	height: 2.5em;
	vertical-align: top;
	margin-top: 5px;
}
.header__title {
	font-size: 1.8em;
}
.header__title {
	font-weight: bold;
	margin: 9px 0;
	display: inline-block;
	color: #463c3c;
	letter-spacing: -2px;
}

/*
 * Navigation
 */
nav {
	background-color: #e1e2e4;
	padding: 8px;
	position: absolute; /* fixed; */
	/* left: 0; */
	float: left;
	height: 100%;
	width: 200px;
	z-index: 4;

	transform: translate(-300px, 0);
	transition: transform 0.3s ease;		
}
nav.open {
	transform: translate(0, 0);
}
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
nav ul li {
	padding: 5px 0;
}
nav ul .menu-name { 
	font-weight: bold;
}
nav ul .menu { 
	margin-left: 15px;
}
nav ul li img {
	height: 0.8em;
	margin-top: 3px;
	vertical-align: top;
}

/*
 * Search
 */
#search {
	background-color: #e1e2e4;
	display: block;
	padding: 10px;
	position: fixed;
	top: 51px;
	text-align: center;
	width: 100%;
	z-index: 4;

	transform: translate(0, -1000px);
	transition: transform 0.3s ease;
}
#search.open {
	transform: translate(0, 0);
}
#search-icon.open {
	fill: #e1e2e4;
}
#search__term {
	width: 95%;
}

/*
 * Main and content
 */
main {
	position: relative;
	top: 10px;
}
main .content {
	padding: 0 7px;
}
main .content h1 {
	font-size: 1.20em;
}
.content__titlebox {
	margin-bottom: 15px;
}
.content__titlebox .teaserline {
	color: #7e6d6d;
	font-size: 0.85em;
	margin-top: 5px;
}
.section__title {
	margin-bottom: 15px;
	margin-top: 7px;	
}
.section__title h2 {
	font-size: 1.20em;
	font-weight: normal;
}
.section__title img.subscriber {
	height: 0.8em;
	float: right;
}

/* 
 * Right column for wide layout
 */
.right-column {
	display: none;
	padding-left: 7px;
	min-width: 215px;
	max-width: 215px;
}
.right-column > * {
	margin-bottom: 35px;
}
.right-column img {
	height: 25px;
}
.right-column table {
	width: 100%;
}
.right-column table caption {
	font-weight: bold;
	padding-bottom: 8px;
}
.right-column table td {
	padding-left: 5px;
}
.right-column table td:first-child {
	padding-left: 0;
	max-width: 25px;
}

/*
 * Spell box
 */
.spell-box {
	/*font-size: 90%;*/
}
.spell-box table td {
	white-space: nowrap;
}
.spell-box .updated {
	color: #666666;
	font-size: 80%;
	margin-top: 6px;
	text-align: center;
}
.right-column .spell-box .updated span {
	display: block;
}

/*
 * Latest Diligence and New Spell Stocks
 */
.latest-diligence table td,
.new-spell-stocks table td {
	padding-bottom: 7px;
}
.latest-diligence table td:first-child {
	vertical-align: top;
}

/*
 * Promo space
 */
div.promo {
	background: url("/images/buildings-darker.jpg") no-repeat -800px -450px;
	border: 1px solid #f2f2f2;
	color: white;
	cursor: pointer;
	margin-bottom: 15px;
	padding: 10px;
	position: relative;
	text-align: center;
	height: 90px;
	width: 100%;
}
div.promo h2 {
	font-size: 1.5em;
}
div.promo .subtext {
	font-size: 90%;
	position: absolute;
	bottom: 5px;
	width: 100%;
}

/*
 * Breakpoints
 */
@media screen and (min-width: 600px) {
	.header__burger_block, .header__search_block {
		display: none;
	}

	.header__title_block {
		margin-left: 10px;
		text-align: left;
		width: 60%;
	}

	nav {
		/* height: 100%; */
		/* position: fixed; */
		transform: none;
	}

	main { 
		display: block;
		padding-left: 200px;
	}

	#search {
		background-color: transparent;
		position: absolute; /*fixed;*/
		right: 0;
		top: -56px; /*7px;*/
		width: 40%;
		z-index: 7;

		transform: none;
	}
}

@media screen and (min-width: 900px) {
	.content {
		display: flex;
	}
	.right-column {
		display: block;
	}
}

@media screen and (min-width: 1024px) {
	div.promo h2 {
		font-size: 1.8em;
	}
	div.promo .subtext {
		font-size: 100%;
	}
}

@media screen and (max-height: 480px) {
	nav {
		min-height: 500px;
		position: absolute;
	}
}