/*
 * General layout
 */

body {
	background: #eef2ff url("img/fade-blue.png") repeat-x scroll 50% 0;
	margin: 0 4px 3ex;
	padding-left: 4px;
	padding-right: 4px;
}
.desktop-style body {
	padding-top: 20px;
}
body, .expanded-post-container, .expanded-post-container:hover {
	color: black;
	font-family: arial,helvetica,sans-serif;
	font-size: 10pt;
}
a, a:visited {
	text-decoration: underline;
	color: #34345C;
}
a:hover {
	color: #ff0000 !important;
}
header {
	margin: 1em 0;
	clear: both;
	text-align: center;
}
h1, h2, header div.subtitle {
	color: #AF0A0F;

}
h1 {
	font-family: tahoma;
	letter-spacing: -2px;
	font-size: 20pt;
	margin: 0;
}
header div.subtitle {
	font-size: 8pt;
}
h2 {
	font-size: 11pt;
	margin: 0;
	padding: 0;
}
.unimportant {
	font-size: 10px;
}
hr {
	border: none;
	border-top: 1px solid #B7C5D9;
	height: 0;
	clear: left;
}

.nsfw-image > span:first-child::after {
    content: "(Risque) ";
}

/*
 * Standard page elements
 */

/* Board list */
div.boardlist {
	color: #89A;
	font-size: 9pt;
	margin-top: 3px;
}
.desktop-style div.boardlist:nth-child(1) {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin-top: 0;
	z-index: 30;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
	border-bottom: 1px solid;
	background-color: #D6DAF0;
}
div.boardlist.bottom {
	margin-top: 20px;
}
div.boardlist a {
	text-decoration: none;
}

/* Banner. This is the "posting mode: reply" header, not the banner image. */
div.banner {
	background-color: #E04000;
	font-size: 12pt;
	font-weight: bold;
	text-align: center;
	margin: 1em 0;
}
div.banner, div.banner a {
	color: white;
}
div.banner a:hover {
	color: #EEF2FF !important;
	text-decoration: none;
}

/* Page selector */
div.pages {
	color: #89A;
	background: #D6DAF0;
	display: inline;
	padding: 8px;
	border-right: 1px solid #B7C5D9;
	border-bottom: 1px solid #B7C5D9;
}
div.pages.top {
	display: block;
	padding: 5px 8px;
	margin-bottom: 5px;
	position: fixed;
	top: 0;
	right: 0;
	opacity: 0.9;
}
@media screen and (max-width: 800px) {
	div.pages.top {
		display: none!important;
	}
}
div.pages a.selected {
	color: black;
	font-weight: bolder;
}
div.pages a {
	text-decoration: none;
}
div.pages form {
	margin: 0;
	padding: 0;
	display: inline;
}
div.pages form input {
	margin: 0 5px;
	display: inline;
}

/* Other */
img.board_image {
	display: block;
	border: 1px solid #a9a9a9;
	margin: 12px auto 0 auto;
}

div.blotter {
	color: red;
	font-weight: bold;
	text-align: center;
}



/*
 * Post form
 */
form {
	margin-bottom: 4em;
}
form table {
	margin: auto;
}
input[type="text"], input[type="password"], textarea {
	border: 1px solid #a9a9a9;
	text-indent: 0;
	text-shadow: none;
	text-transform: none;
	word-spacing: normal;
	max-width: 100%;
}
textarea {
	width: 100%;
}
form table tr td {
	text-align: left;
	margin: 0;
	padding: 0;
}
form table.mod tr td {
	padding: 2px;
}
form table tr th {
	text-align: left;
	padding: 4px;
}
form table tr th {
	background: #98E;
}
form table tr td div.center {
	text-align: center;
	float: left;
	padding-left: 3px;
}
form table tr td div input {
	display: block;
	margin: 2px auto 0 auto;
}
form table tr td div label {
	font-size: 10px;
}
form table tr td input[type="checkbox"] {
	vertical-align: top;
}
form table tr td input[type="file"] {
	max-width: 30em;
}
div.delete {
	float: right;
}
.image-preview img {
	max-width: 300px;
	max-height: 300px;
	padding: 4px 4px 0px 4px;
}

img {
	image-orientation: from-image;
}




/*
 * Posts
 */

/* General */
.post {
	display: inline-block;
	margin: 0 4px;
	padding: 0.2em 0.4em 0.6em 0.6em;
}
.post.reply {
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	background: #D6DAF0;
}
.post.reply:not(.inline) {
	border-width: 1px;
	border-style: none solid solid none;
	border-color: #B7C5D9;
	max-width: 94%;
}
.post.inline {
	border-width: 1px;
	border-style: solid;
	border-color: rgba(0,0,0,0.17);
	box-shadow: 0px 2px 7px rgba(0,0,0,0.07);
}
.post.highlighted {
	background: #D6BAD0;
}
.post.vip-post {
	box-shadow: -10px 0px 0px 0px red;
	/* This margin is the margin-left of regular posts, plus the size of the box shadow. */
	margin-left: 14px;
}

/* Intro */
.intro {
	margin: 0.3em 0 0 0;
	padding: 0 0 0.2em 0;
}
.intro label {
	display: inline;
}
.intro input.delete {
	vertical-align: top;
	margin: 1px 6px 0 0;
}
.subject {
	unicode-bidi: embed;
}
.intro .subject {
	color: #0F0C5D;
	font-size: 16px;
	font-weight: bold;
}
.name {
	color: #117743;
	unicode-bidi: embed;
}
.intro .name {
	font-weight: bold;
}
a.email .name {
	color: #34345C;
}
.trip {
	color: #228854;
}
.intro .capcode {
	color: #F00000;
	margin-left: 0;
}
.intro .poster_id {
	cursor: pointer;
}
.intro .post_no {
	color: inherit;
	text-decoration: none;
}
.intro a {
	margin-left: 8px;
}
.intro a.post_no, .intro a.email, .intro a.post_anchor {
	margin: 0;
}
.intro i.fa {
	margin: 0 4px;
	font-size: 16px;
}
.intro img.icon {
	display: inline;
	margin: 0 5px;
	padding: 0;
}

/* File */
.fileinfo {
	display: block;
	margin: 0.3em 2px 0 0;
	padding-left: 5px;
}
.post-file {
	float: left;
	margin: 0 20px 0 0;
	border: none;
	padding: 5px;
}
.post-file img {
	/* This apparently redundant float:left stops unwanted borders on click. */
	float: left;
}

/* Controls */
.controls {
	float: right;
	margin: 0 0 0 10px;
	padding: 0;
	font-size: 80%;
}
.controls a {
	margin: 0;
}

/* Body */
.post .body {
	word-wrap: break-word;
	margin-left: 1.8em;
	margin-top: 0.8em;
	padding-right: 3em;
	padding-bottom: 0.3em;
}
.post .body a {
	color: #D00;
}
.post > :not(.body) a {
	/* Necessary because of post inlining */
	color: #34345C;
}
.post .body .toolong {
	display: block;
	margin-top: 15px;
}
.post .body .public_ban {
	display: block;
	color: red;
	font-weight: bold;
	margin-top: 15px;
}
.post .omitted {
	display: block;
	margin-top: 1em;
}

/* BBcode */
span.bold {
	font-weight: bold;
}
span.italic {
	font-style: italic;
}
span.underline {
	text-decoration: underline;
}
span.strikethrough {
	text-decoration: line-through;
}
span.quote {
	color: #789922;
}
span.backquote {
	color: #E07000;
}
span.upquote {
	color: purple;
}
span.shy {
	font-size: 0.6rem;
	text-transform: lowercase;
}
span.rcv {
	text-shadow: 2px 2px 0px rgba(64, 64, 64, 0.4), -2px -2px 0px rgba(64, 64, 64, 0.2);
	font-size: 1.1em;
}
span.dice {
	font-weight: bold;
	border: 2px dashed blue;
}
/* [spoiler] */
span.spoiler {
	background: black;
	padding: 0 1px;
}
span.spoiler, span.spoiler:not(:hover) a:not(.nonspoiler), span.spoiler:not(:hover) a:not(.nonspoiler):visited {
	color: black;
}
span.spoiler:hover, span.spoiler:hover a:not(.nonspoiler),
span.spoiler.spoiler-revealed, span.spoiler.spoiler-revealed a:not(.nonspoiler) {
	color: white;
}
/* [hide] bbcode */
/*
 * .hidetext gets replaced by a .hidecontainer .hiddentext construction in javascript. 
 * .hidetext markup is there only for graceful degradation reasons.
 */
.hidetext {
	background: rgba(0, 0, 0, 0.1);
	padding: 5px;
	margin: 5px;
	overflow: hidden;
}
.hidetext, .hidetext a {
	color: rgba(0, 0, 0, 0);
}
.hidetext:hover, .hidetext:hover a {
	color: black;
}
.hidetogglebutton {
	min-width: 4em;
}
.hiddentext {
	border: 1px solid rgba(0, 0, 0, 0.3);
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
	padding: 5px;
	margin: 5px;
	overflow: hidden;
	transform-origin: center top 0;
	transform: scaleY(1);
	transition: transform 0.25s ease-in-out 0s, margin 0.25s ease-in-out 0s, padding 0.25s ease-in-out 0s, height 0.25s ease-in-out 0s;
}
.hiddentext.disabled {
	height: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
	transform: scaleY(0);
}
.hidecontainer + br, .hidetext + br {
	display: none;
}
/* This class resets all inherited bbcode effects that might apply to an inline expanded post. */
div.expanded-post-container {
	word-wrap: normal;
	
	/* Apparently IE doesn't support /initial/. */
	font-weight: normal;
	font-weight: initial;
	
	font-style: normal;
	font-style: initial;
	
	text-decoration: none;
	text-decoration: initial;
	
	text-shadow: none;
	text-shadow: initial;
	
	text-transform: none;
	text-transform: initial;
	
	margin: 3px;
}
div.expanded-post-container + br {
	display: none;
}

/* Code tags */

pre {
	margin: 0;
	max-width:inherit;
	word-wrap:normal;
	overflow:auto;
	display: inline;
	font-size:9pt;
	font-family:monospace;
	white-space: pre-wrap;       /* Since CSS 2.1 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* Fixes tiny text next to images */
div.body:before {
  content: "";
  width: 6em;
  display: block;
  overflow: hidden;
}

/*
 * Bans
 */
.ban {
	background: white;
	border: 1px solid #98E;
	max-width: 700px;
	margin: 30px auto;
}
.ban p, .ban h2 {
	padding: 3px 16px;
}
.ban h2 {
	background: #98E;
	color: black;
	font-size: 12pt;
}
.ban p {
	font-size: 12px;
	margin-bottom: 12px;
}
.ban .reason {
	font-weight: bold;
}
.ban h3 {
	padding: 3px 10px;
}
.ban h4 {
	padding: 2px 12px;
}
form.ban-appeal {
	margin: 9px 20px;
}
form.ban-appeal textarea {
	display: block;
}



/*
 * Options dialog, alert box
 */
/* Shared popup-box style */
#options_handler, #alert_handler {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 9900;
}
#options_background, #alert_background {
	background: black;
	opacity: 0.5;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#options_div, #alert_div {
	background-color: #d6daf0;
	border: 1px solid black;
	display: inline-block;
	position: relative;
	margin-top: 20px;
}
#options_div {
	width: 600px;
	height: 450px;
}
#alert_div {
	width: 500px;
}
.mobile-style #options_div, .mobile-style #alert_div {
	display: block;
	width: 100%;
	height: 100%;
	margin-top: 0px;
}
#options_close, #alert_close {
	top: 0px;
	right: 0px;
	position: absolute;
	margin-right: 3px;
	font-size: 20px;
	z-index: 100;
}
#option_ponymote {
	display: inline-block;
	padding: 0px 5px;
}

.ponymote, .ponymote_option {
	width: auto;
	height: 27px;
}

/* Alert box */
#alert_message {
	text-align: center;
	margin: 13px;
	font-size: 110%;
}
.alert_button {
	margin-bottom: 13px;
}

/* Options dialog */
#options_tablist {
	padding: 0px 5px;
	left: 0px;
	width: 70px;
	top: 0px;
	bottom: 0px;
	height: 100%;
	border-right: 1px solid black;
}
.options_tab_icon {
	padding: 5px;
	color: black;
	cursor: pointer;
}
.options_tab_icon.active {
	color: red;
}
.options_tab_icon i.fa {
	font-size: 20px;
}
.options_tab_icon div {
	font-size: 11px;
}
.options_tab {
	padding: 10px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 81px;
	right: 0px;
	text-align: left;
	font-size: 12px;
	overflow-y: auto;
}
.options_tab h2 {
	text-align: center;
	margin-bottom: 5px;
}
.setting-disabled {
	color: dimgrey;
}
.setting textarea {
	max-width: 100%;
}



/*
 * Quickreply
 */
#quick-reply {
	position: fixed;
	right: 5%;
	top: 5%;
	float: right;
	display: block;
	padding: 0 0 0 0;
	width: 300px;
	z-index: 100;
}
#quick-reply table {
	border-collapse: collapse;
	background: #D6DAF0;
	border-width: 1px;
	border-style: none solid solid none;
	border-color: #B7C5D9;
	margin: 0;
	width: 100%;
}
#quick-reply tr td:nth-child(2) {
	white-space: nowrap;
	text-align: right;
	padding-right: 4px;
}
#quick-reply th, #quick-reply td {
	margin: 0;
	padding: 0;
}
#quick-reply th {
	text-align: center;
	padding: 2px 0;
	border: 1px solid #222;
}
#quick-reply th .handle {
	float: left;
	width: 100%;
	display: inline-block;
}
#quick-reply th .close-btn {
	float: right;
	padding: 0 5px;
}
#quick-reply input[type="text"], #quick-reply select {
	width: 100%;
	padding: 2px;
	font-size: 10pt;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
}
#quick-reply textarea {
	width: 100%;
	min-width: 300px;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
	font-size: 10pt;
	resize: vertical horizontal;
}
#quick-reply input, #quick-reply select, #quick-reply textarea {
	margin: 0 0 1px 0;
}
#quick-reply input[type="file"] {
	padding: 5px 2px;
}
#quick-reply .image-preview {
	text-align: center;
}
#quick-reply .image-preview img {
	padding: 2px 4px 2px 4px;
}
.quick-reply-btn {
	position: fixed;
	right: 0;
	bottom: 0;
	display: block;
	padding: 5px 13px;
	text-decoration: none;
}




/*
 * Moderation
 */
table.modlog {
	margin: auto;
	width: 100%;
}
table.modlog tr td {
	text-align: left;
	margin: 0;
	padding: 4px 15px 0 0;
}
table.modlog tr th {
	text-align: left;
	padding: 4px 15px 5px 5px;
	white-space: nowrap;
}
table.modlog tr th {
	background: #98E;
}
td.minimal, th.minimal {
	width: 1%;
	white-space: nowrap;
}

/* Reports */
.report {
	color: #333;
}
.report a, .report a:visited {
	color: #d00;
}

/* Ban list */
#banlist {
	clear: left;
}
#banlist tr.tblhead {
	display: block;
	box-sizing: border-box;
	clear: left;
	width: 100%;
}
#banlist tr.tblhead > th {
	display: block;
	box-sizing: border-box;
	float: left;
	padding: 0;
	color: black;
}
#banlist tr.tblhead > th.sortable {
	cursor: pointer;
}
#banlist th {
	text-align: center;
}
#banlist th, #banlist td {
	margin: 2px;
	padding: 2px;
	overflow: hidden;
}
#banlist td:hover {
	overflow: visible;
	height: auto !important;
	background-color: white;
	z-index: 1;
	position: relative;
	border: 1px solid black;
	padding: 1px;
}
.banlist-opts .checkboxes {
	float: left;
	width: 50%;
}
.banlist-opts .checkboxes label {
	display: block;
	color: black;
}
.banlist-opts .buttons {
	float: left;
	width: 50%;
}
.banlist-opts .buttons * {
	display: inline-block;
	width: 49%;
	font-size: 18pt;
}

.top_notice {
	text-align: center;
	margin: 5px auto;
}



/*
 * Extension styles
 */

/* Catalog */
.theme-catalog div.thread img {
	float: none!important;
	margin: auto;
	max-height: 150px;
	max-width: 200px;
	box-shadow: 0 0 4px rgba(0,0,0,0.55);
	border: 2px solid rgba(153,153,153,0);
}
.theme-catalog div.thread {
	display: inline-block;
	vertical-align: top;
	text-align: center;
	font-weight: normal;
	margin-top: 2px;
	margin-bottom: 2px;
	padding: 2px;
	height: 300px;
	width: 205px;
	overflow: hidden;
	position: relative;
	font-size: 11px;
	max-height: 300px;
	background: rgba(182,182,182,0.12);
	border: 2px solid rgba(111,111,111,0.34);
}
.theme-catalog div.thread:hover {
	background: #D6DAF0;
	border-color: #B7C5D9;
}
.theme-catalog div.thread strong {
	display: block;
}
.theme-catalog div.threads {
	text-align: center;
	margin-left: -20px;
}
.theme-catalog div.grid-size-vsmall img {
	max-height: 33%;
	max-width: 95%
}
.theme-catalog div.grid-size-vsmall {
	min-width:90px; max-width: 90px;
	max-height: 148px;
}
.theme-catalog div.grid-size-small img {
	max-height: 33%;
	max-width: 95%
}
.theme-catalog div.grid-size-small {
	min-width:140px; max-width: 140px;
	max-height: 192px;
}
.theme-catalog div.grid-size-large img {
	max-height: 40%;
	max-width: 95%
}
.theme-catalog div.grid-size-large {
	min-width: 256px; max-width: 256px;
	max-height: 384px;
}
.theme-catalog img.thread-image {
	height: auto;
	max-width: 100%;
}
@media (max-width: 420px) {
	.theme-catalog ul#Grid {
		padding-left: 18px;
	}
	.theme-catalog div.thread {
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}
	.theme-catalog div.threads {
		overflow: hidden;
	}
}

/* Thread watcher */
/*
#watchlist {
	display: none;
	max-height: 250px;
	overflow: auto;
	border: 1px solid;
	border-style: none solid solid none;
	width: 50%;
	margin: 0 auto;
	margin-bottom: 10px;
}
.watchlist-inner, .watchlist-controls {
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
}
#watchlist-toggle, .watchThread, .watchlist-remove, #clearList, #clearGhosts {
	cursor: pointer;
}
*/

/* Index autoupdate */
/*
.new-posts {
	opacity: 0.6;
	margin-top: 1em;
}
.new-threads {
	text-align: center;
}
*/

#thread_stats {
	display: inline;
	margin-left: 10px;
	margin-right: 10px;
}

.MathJax_Display {
	display: inline!important;
}



/*
 * Library
 */

/* Longtable */
.longtable {
	display: block;
	position: relative;
	box-sizing: border-box;
}
.longtable > tbody {
	display: block;
	box-sizing: border-box;
}
.longtable > tbody > tr {
	display: block;
	box-sizing: border-box;
	clear: left;
	width: 100%;
}
.longtable > tbody > tr > td {
	display: block;
	box-sizing: border-box;
	float: left;
	padding: 0;
}
.longtable > tbody > tr > th {
	display: block;
	box-sizing: border-box;
	float: left;
	padding: 0;
}
.longtable > tbody > tr > th.sortable {
	cursor: pointer;
}