body {background: #eef3ff url('') repeat-x 50% 0%;}

div.banner {background-color:#4173b5;}

form table tr th {
	background: #6894ff;
	color:#041;
	border-color:#041;
}

div.post.reply {
	background-color:#d6dcf0;
	border-color:#3F51B5;
}

div.post.reply.highlighted {
	background-color:#d6d0ba;
	border-color:#3F51B5;
}

hr, img.banner, img.board_image {border-color:#C1D9B7;}

.intro span.name {color:#458671;}
.intro a.email span.name {color:#6e9b8d;}
.intro span.subject {color:#000;}

a, a:visited {color: #36335b;}
a:hover {color:#e04000;}

div.boardlist, div.pages {
	color: #3F51B5;
}
div.pages {
	background: #3F51B5;
	border-right-color:#673AB7;
	border-bottom-color:#3F51B5;
}
span.quote{color:#3F51B5;}


div.pages {background: #3f51b512;border: none;font-size: 0pt;}

div.pages form input {display: none;}

div.pages a {font-size: 10pt;text-decoration: none;margin-left: -1px;line-height: 1.6;position: relative;float: left;

background: #3f51b557;color: var(--a1-color);border-radius: 3px;border: 1px solid var(--other-color);padding: 5px 15px;margin: 2px;}

div.pages a.selected, div.pages a.selected:hover {transition: all 0.1s;border: 0;color: var(--replyborder-color) !important;border: 1px solid var(--replyborder-color);background: var(--body-color);pointer-events: none;}

div.pages a:hover {opacity: 1;transition: all 0.1s;color: var(--a2-color) !important;border: 1px solid var(--other-color);background: var(--body-color);}


.desktop-style div.boardlist:not(.bottom), .desktop-style div.boardlist:not(.bottom):hover, .desktop-style div.boardlist:not(.bottom).cb-menu {

position: fixed;text-align: center;left: 0;right: 0;margin: auto;z-index: 4;line-height: 1em;

background: var(--other-color);

color:black;

box-shadow: 0;

font-size: 16px;

height: 20px;

}

div.boardlist.bottom {display: none;}

div.boardlist a {color: var(--a3-color);background-color: transparent;}



div.post.reply::before {
    content: ">>";
    position: absolute;
    margin-left: -27px;
}

/*
	TODO:
		Move this font to be locally stored.
		If privacy is the goal we should not be making any calls to third parties.
*/
@import url('https://fonts.cdnfonts.com/css/inconsolata-2');

:root {
	--other-color: #cfd8f4;
}

/* Front page */
body {
	font-family: 'Inconsolata', monospace;
}

h1 {
	font-family: 'Inconsolata', monospace;
	letter-spacing: 0.2px;
}

#front-page-logo {
	max-width: 320px;
	max-height: 320px;
	width: 20vw;
	height: 20vw;
}

div.container.narrow {
	margin-top: 15px;
	background-color: #d6dcf0;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}

h2.barheader {
	border: 1px solid black;
	border-left-width: 0px;
	border-right-width: 0px;
	background-color: #00000011;
	padding: 10px;
	text-align: center;
}

.box.left,
.box.right {
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}

.box > ul,
.box.left,
.box.right {
	background-color: #d6dcf0;
}

.box.left > h2,
.box.right > h2 {
	color: white;
	text-align: center;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
	background: linear-gradient(to bottom, #6155aa, #4a3f8ade);
}

.box.left {
	text-align: center;
}

a {
	color: #070796;
	text-decoration: none;
}

a:visited {
	color: #070796;
}

a:hover {
	color: red;
}

/* Boards */
.image_id {
	margin-left: 5px;
}

hr {
	border-color: black;
	opacity: 0.0;
}

div.post.reply {
	border: 1px solid #d6dcf0;
	padding-right: 20px;
}

div.post.reply::before {
	content: '';
}

div.post.reply.highlighted {
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
	border: 1px solid red;
	background-color: #d6dcf0;
}

.omitted {
	font-style: italic;
	opacity: 0.8;
}

.controls {
	opacity: 0.2;
}

.controls:hover {
	opacity: 1;
}

span.name {
	font-weight: bold;
	color: darkgreen;
}

span.trip {
	color: darkgreen;
	font-weight: normal;
}

span.quote {
	color: #005e00;
}

form > table > tbody > tr > th,
.banner {
	background: linear-gradient(to bottom, #6155aa, #4a3f8ade);
	color: white;
	font-weight: bold;
}

.banner {
	padding-top: 5px;
	padding-bottom: 5px;
}

header > h1 {
	font-weight: bold;
}

div.pages.top {
	margin-top: 20px;
	padding: 0px;
	padding-left: 2px;
	padding-right: 2px;
	background-color: #cfd8f4;
	border: 1px solid black;
}

/* Moderation panel */
fieldset {
	background-color: #d6dcf0;
	border: 1px solid black;
}

fieldset > legend {
	font-weight: bold;
}

/*
	Changing button styling to match with Mio theme.
	TODO: Button styling for file upload is still browser default.
*/
input[type="button"], input[type="submit"], button {
	color: white;
	background-color: #6156a7;
	border: none;
	padding: 2px 6px;
	border-radius: 2px;
	margin: 0px 2px;
}

input[type="text"], input[type="number"], textarea, select {
	color: black;
	border: 1px solid #6156a7;
	border-radius: 2px;
	background-color: #d9e1f4;
}

/* Spacing for hamburger menu beside posters name. */
.post-btn {
	padding-right: 7px;
}