@charset "UTF-8";

:root {
	/* This sets the maximum width of the page */
	--pageWidth: 1200px;
	--pageWidthError: 512px;
	--paddingForWideDevice: 75px;

	/* colors */
	/* Note: Apple determines the alpha color of the scroll bar in iOS Safari based on the darkness of the background
	color. A very dark bg makes a very alpha scrollbar that is lost on a white background. Need to pick something in
	middle or toward the brighter end. White all the way across is too overbearing.
	 */
	--site-bg-color: #f4f4f4; /*#818181;*/ /*#96A4B3;*/ /*#2D2D2D;*/ /* #445c6c */
	--link-color: #0d79ee;
	--link-color-hover: #085ab4;
	--fa-icon-color: #b1185e;
	--logo-background: #000000;
	--top-nav-bg-color: #2a58a5;
	--top-nav-hover-color: #9ab1e2;
	--div-outline-color: #dadada;
	--donation_bg_color: black;
	--donation-text-color: #ffe81f;
	--avatarImageRank: var(--div-outline-color);
	--donation-star-color: #d6c21c;

}

/* main page container */
.page {
	width: 100%;
	max-width: var(--pageWidth);
	margin: auto;
}


/* Smaller main page width on login screen and error box screens: 512 vs 1024, etc */
.pageLoginOrError {
	width: 100%;
	max-width: var(--pageWidthError);
	margin: auto;
}

body {
	color: black;	/* default text color if not specified */
	background-color: var(--site-bg-color); /*#3C3F41;*/
	text-align: center;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

html {
	height: 100%;
	width: 100%;
	font-size: 18px;
	font-weight: normal;
	font-family: 'Lato', sans-serif;

	/* keep scrollbar on screen so page doesn't jitter when you go to pages with w/o scrollbar */
	overflow-y: scroll;
}


/*
::-webkit-scrollbar{
	width:12px;
}
::-webkit-scrollbar-thumb{
	border-radius: 10px;
	background-color: var(--top-nav-bg-color);
	box-shadow: inset 0 0 6px rgba(0,0,0,.5);
}
*/
/*
::-webkit-scrollbar-track{
	border-radius: 10px;
	background-color: var(--site-bg-color);
	box-shadow: inset 0 0 6px rgba(0,0,0,.4);
}
*/
	/* default link colors -
        NOTE: These need to come first so overrides can happen below on other elements. */
a:link {
	color: var(--link-color);
	text-decoration: none;
}

a:visited {
	color: var(--link-color);
	text-decoration: none;
}

a:hover {
	color: var(--link-color);
	text-decoration: none;
}

a:active {
	color: var(--link-color);
	text-decoration: none;
}

/* Font Awesome styling */
/* default color for all font awesome icons */
.fa {
	color: var(--fa-icon-color);
}

.fa-home, .fa-caret-down, .fa-caret-up {
	color: var(--link-color);
}

.fa-home:hover, .fa-caret-down:hover, .fa-caret-up:hover {
	color: var(--link-color-hover);
}

/* 3 bar icon on the top nav. */
.fa-bars {
	color: #cccccc;
}

/* Thread title text */
h1 {
	/* color defaults to black */
	margin: 0;
	color: #434343;
	font-family: 'Lato';
	font-size: 32px;
	font-weight: 900;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Page / section header text */
h2 {
	/* color defaults to black */
	margin: 0;
	color: #434343;
	font-size: 24px;
	font-weight: 900;
	font-family: 'Lato', sans-serif;
}

h2 a:link, h2 a:visited {
	color: #0d79ee;
	text-decoration: none;
}

h2 a:hover, h2 a:active {
	color: #0d79ee;
	text-decoration: underline;
}

/* nomral text */
h3, .donationText {
	/* color defaults to black */
	font-size: 18px;
	font-weight: normal;
	font-family: 'Lato', sans-serif;
	overflow-wrap: break-word;
	word-wrap: break-word;
	display:inline;
}

h3 a:visited {
	color: #919191;
}

/* Front page story headlines and normal size text you want to keep track of visited links */
h4 {
	/* color defaults to black */
	font-size: 18px;
	font-weight: bold;
	font-family: 'Lato', sans-serif;
	overflow-wrap: break-word;
	word-wrap: break-word;
	display:inline;
}
/* link visited hover active */
/* Show visited threads on front page story headlines */
h4 a:visited {
	color: #919191;
	text-decoration: none;
}

/* smallest text */
h6 {
	/* color defaults to black */
	margin: 0;
	font-size: 14px;
	font-weight: normal;
	font-family: 'Lato', sans-serif;
}

h6 a:link, h6 a:visited {
	color: purple;
	text-decoration: none;
}

h6 a:hover, h6 a:active {
	color: #0d79ee;
	text-decoration: underline;
}

.postCountColor {
	color: #cccccc;
}

.subBoardFont {
	margin: 0;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	font-family: 'Lato', sans-serif;
}

/* remove */
.whiteColorText {
	color: #FFFFFF;
}

/* test */
.yellowColorText {
	color: yellow;
}

.centerText {
	text-align: center;
}

.indent_left_20 { margin-left: 20px; }

/* Normal text size */
p {
	font-family: 'Lato', sans-serif;
	font-size: 13pt;
	line-height: 1.6em;
}

/* comment url's in posts ... highlight them a little with background box */
.comment_url a:link {
	background-color: #f2f2f2;
	color: #686E66;
	padding: 0 5px;
	border-radius: 			2px 2px 2px 2px;
	-moz-border-radius: 	2px 2px 2px 2px;
	-webkit-border-radius: 	2px 2px 2px 2px;
}

.comment_url a:hover, .comment_url a:active {
	color: #0d79ee;
	border-style: none;
	border-bottom: 3px solid currentColor;
}

/* Used on main menu to space items apart (adds 25px margin to right of element) like Bookmarks and Thread Vault */
.tabSpacer a {
	margin-left: 12px;
	margin-right: 12px;
	overflow: hidden;
}

.tabSpacer a:hover {
	margin-left: 12px;
	margin-right: 12px;
	text-decoration: underline;
	color: #0d79ee;
}

/* sets background color for all text entry fields */
textarea {
	background-color: #EBEBEB;
	border: 2px solid #555555;
	overflow-y: scroll;
	resize: none;
	width: 98%;
	padding: 1%;
	font-family: 'Lato', sans-serif;
	font-size: 13pt;
	line-height: 1.6rem;
}

input[type=text],
input[type=password] {
	background-color: #EBEBEB;
	border: 2px solid #555555;
	/* important here to have the padding AND the width add up to 100% if you want the text area to stay within div margins */
	width: 98%;
	padding: 1%;
	font-family: 'Lato', sans-serif;
	font-size: 13pt;
	line-height: 1.6rem;
}

.new-button {
	display: inline-block;
	padding: 8px 12px;
	cursor: pointer;
	border-radius: 4px;
	background-color: #9c27b0;
	font-size: 16px;
	color: #fff;
}

/* rename. std image class */
.imgsize {
	border-style: none;
	display: inline-block;
	transition: transform .1s;
	transform: scale(1);
}

.imgsize:hover {
	border-style: none;
	transition: transform .1s;
	transform: scale(1.1);
}

/* site logo bar */
.logoBarWrapper {
	background-color: var(--logo-background); /* brown color to go with logo */
	max-width: 100%;
	padding: 15px;
}

/* Logo can be 600px wide or 100% wide - will scale to smaller widths */
.logo_img {
	display: inline-block;
	width:600px;
	max-width:100%;
	/*transform: scale(1);*/
}

.logo_img:hover {
	/*transition: transform .1s;*/
	/*transform: scale(1.01);*/
}

/* Button style for the sbu message boards on the main page */
.subBoardButton {
	background-color: var(--top-nav-bg-color);
	text-align: center;

	color: white;

	position: relative;
	z-index: initial;
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 5px;
	padding: 5px 10px;

	border-radius: 			5px 5px 5px 5px;
	-moz-border-radius: 	5px 5px 5px 5px;
	-webkit-border-radius: 	5px 5px 5px 5px;
	-webkit-transition-duration: 0.1s;
	-moz-transition-duration: 0.1s;
	transition-duration: 0.1s;
	transform: scale(1);
}

.subBoardButton:hover {
	position: relative;
	background-color: var(--top-nav-hover-color);
	transform: scale(1.25);
	z-index: 1;
}

.subBoardButton:hover .subBoardFont {
	color: black;
}

.subBoardButton:hover .postCountColor {
	color: black;
}

/* IFRAMELY */
/* change this to style width etc. Some options controlled via website account */
.iframely-embed {
	width: 100%;
	max-width: 75%;
	margin: 0 auto; /* center cards */
	border-style: none;
}

/* Leave these two alone? */
.iframely-responsive {
	top: 0; left: 0; width: 100%; height: 0;
	position: relative; padding-bottom: 56.25%;
}
.iframely-responsive>* {
	top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;
}

/* END OF IFRAMELY */

/* user avatar images */
.avatarImg {
	height: 96px;
	width: 96px;
	border: 4px solid var(--avatarImageRank);
	/*outline: var(--div-outline-color) solid 3px;*/
}

/* Code tag in comments */
.code_block {
	color: #555555;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	font-family: "Courier New", Courier, monospace;
}

/* mutter/small tag in comments */
.mutter_text {
	color: #91998E;
	font-weight: normal;
	font-style: normal;
	font-size: 12px;
	font-family: 'Lato', sans-serif;
}

/* highlight boxes for page numbers */
.highlight_page_number
{
	font-size: 18px;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	font-family: 'Lato', sans-serif;

	padding: 3px;
	border-radius: 			5px 5px 5px 5px;
	-moz-border-radius: 	5px 5px 5px 5px;
	-webkit-border-radius: 	5px 5px 5px 5px;
}

.highlight_page_number {
	color: #ffffff;
	background-color: #00ACEE;
	padding: 3px;
}

.highlightNewPost {
	color: #7B7B7B;
	background-color: #E7E7E7;/* #00ACEE;*/
}

.highlightHotPost {
	color: white;
	background-color: #ce2929;
}

/* locked posts label */
.highlightLocked {
	color: white;
	background-color: #ce2929;
}

.highlightNewPost,
.highlightLocked,
.highlightHotPost {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 5px;
	padding: 3px 10px;
	border-radius: 			5px 5px 5px 5px;
	-moz-border-radius: 	5px 5px 5px 5px;
	-webkit-border-radius: 	5px 5px 5px 5px;
}

.horzLine {
	width: 100%;
	color: var(--div-outline-color);
	border-width: 1px;
	border-bottom-style: solid;
}

.vertLine {
	width: 100%;
	color: #dddddd;
	border-width: 1px;
	border-left-style: solid;
}

.dotted_line {
	width: 100%;
	color: #bbbbbb;
	border-width: 2px;
	border-bottom-style: dashed;
}

/* boxes, headers and the like */
.wideheader {
	background-color: #EBEBEB;
	padding: 15px;
	text-align: left;
	border-color: var(--div-outline-color);
	border-style: solid;
	border-width: 0px 1px;
}

.widebox,
.widebox_comment,
.widebox_subboard {
	background-color: #FFFFFF;
	text-align: left;
	word-wrap: break-word;

	border-color: var(--div-outline-color);
	border-style: solid;
	border-width: 0px 1px;

}

.widebox {
	padding: 15px;
	max-width: 100%;
}

.widebox_comment {
	background-color: #EBEBEB;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 0;
}

/* main screen sub-board menu. Centered, special padding, etc */
.widebox_subboard {
	text-align: center;
	padding: 1px 5px 15px;
}

/* nav bar for threads with the top / bottom / home icons */
.wideNavBarWrapper {
	background-color: #f4f4f4; /*#f5f5f5;*/
	text-align: center;
	padding-top: 6px;
	padding-bottom: 4px;
	border-color: var(--div-outline-color);
	border-style: solid;
	border-width: 1px;
}

.donationWrapper {
	background-color: var(--donation_bg_color);
	max-width: 100%;
	padding: 10px;
}

.donationDiv {
	text-align: center;
	margin: 0 auto;
}


.donationText {
	color: var(--donation-text-color);
}

.donationText:link, .donationText:visited {
	color: var(--donation-text-color);
	text-decoration: underline;
}

.widefooter {
	background-color: #EBEBEB;
	text-align: left;
	padding: 15px;
	margin-bottom: 6px;

	border-color: var(--div-outline-color);
	border-style: solid;
	border-width: 0 1px;
}

.widefooter {
	/*margin-top: 2px;
	margin-bottom: 0;*/
}

/* preview post box */
.preview_box {
	background-color: #EEEEEE;
	border-color: #999999;
	border-width: 2px;
	border-style: dashed;
	padding: 10px;
}

/* FIXME: Kill all this is the re-format of the sbu board pages */
/* cells */
.boardname,
.boardname1,
.boardlastpost,
.boardlastpost1,
.boardposts,
.boardposts1,
.boardviews,
.boardviews1 {
	float: right;
	background-color: #E0ECF8;
	padding: 10px;
	margin-top: 2px;
	margin-bottom: 2px;
}

.boardname,
.boardname1 {
	width: 23%;
	height: 55px;
	text-align: left;
}

.boardlastpost,
.boardlastpost1 {
	width: 49%;
	height: 55px;
	text-align: left;
}

.boardviews,
.boardviews1 {
	width: 9%;
	height: 55px;
	text-align: center;
}

.boardposts,
.boardposts1 {
	width: 10%;
	height: 55px;
	text-align: center;
}

.boardviews1,
.boardposts1,
.boardlastpost1,
.boardname1 {
	background-color: #CEE3F6;
}

.boardheader_posts,
.boardheader_views,
.boardheader_lastpost,
.boardheader_name {
	float: right;
	background-color: #EFF5FB;
	padding: 10px;
}

.boardheader_posts {
	width: 10%;
	height: 15px;
	text-align: center;
}

.boardheader_views {
	width: 9%;
	height: 15px;
	text-align: center;
}

.boardheader_lastpost {
	width: 49%;
	height: 15px;
	text-align: left;
}

.boardheader_name {
	width: 23%;
	height: 15px;
	text-align: left;
}

.activity_name,
.activity_views,
.activity_posts,
.activity_ppy,
.activity_lastvisit,
.activity_lastpost {
	float: left;
	background-color: #EFF5FB;
	padding: 10px;
}

.activity_name { width: 22%; height: 15px; text-align: left; }
.activity_views { width: 6%; height: 15px; text-align: left; }
.activity_posts { width: 6%; height: 15px; text-align: left; }
.activity_ppy { width: 10%; height: 15px; text-align: left; }
.activity_lastvisit { width: 16%; height: 15px; text-align: left; }
.activity_lastpost { width: 16%; height: 15px; text-align: left; }

/* fixme: should be able to replace these with some version of widebox */
.numcomments_top,
.numcomments_bottom {
	background-color: #EBEBEB;
	word-wrap: break-word;
	padding: 15px;
	text-align: justify;
	word-break: break-word;
	overflow-wrap: break-word;

	border-color: var(--div-outline-color);
	border-style: solid;
	border-width: 0px 1px;
}

.avatar_wrapper {
	background-color: #FFFFFF;
	text-align: left;
	padding: 15px;
	height: 96px;

	border-color: var(--div-outline-color);
	border-style: solid;
	border-width: 0px 1px;
}

.avatar_wrapper_no_outline {
	background-color: #FFFFFF;
	text-align: left;
	padding: 15px;
	height: 96px;
}

/* Avatar image box */
.avatar_box {
	float: left;
	text-align: left;
	margin-right: 10px;
}

/* Standard button: Changes color, lerps/animates when pressed */
.button-link,
.button-link-login {
	background: #00ACEE;
	color: #FFFFFF;
	border-width: 5px;
	border-style: none;
	font-style: normal;
	font-weight: bold;
	font-size: 18px;
	font-family: 'Lato', sans-serif;
	margin-right: 0;
	padding: 7px;

	transform: scale(1);

	-webkit-appearance: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

	-webkit-transition-duration: 0.1s;
	-moz-transition-duration: 0.1s;
	transition-duration: 0.1s;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

.button-link:hover {
	background: #0d79ee; /*#00ACEE;*/
	transform: scale(1.1);
	text-decoration: none;
	-webkit-appearance: none;
}

.button-link-login {
	width: 100%;
}

/* FIXME crap */
.views_info {
	padding: 0;
	width: 48%;
	float: right;
	text-align: right;
}

.views_info_post {
	padding: 0;
	width: 48%;
	float: right;
	text-align: right;
}

/* FIXME crap */
.comment_box_wrapper {
	padding: 0;
	width: 100%;
	text-align: right;
}

/* used to align right admin links on posts and stories */
.align_right {
	text-align: right;
}

/* these 3 for the posting buttons */
.align_left {
	text-align: left;
}

/* box tht contains the message posting buttons */
.post_buttons {
	margin-top: 30px;
	padding-bottom: 20px;
	text-align: center;
}

/* quote text in a post */
.quote {
	background-color: #F6F6F6; /*#ebebeb;*/
	color: #686E66;
	margin-left: 15px;
	margin-right: 15px;
	border-style: none;
	border-width: 2px;
	border-left: 5px solid #cccccc;
	padding: 10px;
}

/* sig for a member's post */
.sig {
	background-color: #EBEBEB;
	border-color: #91998E;
	border-top-style: dashed;
	border-top-width: 2px;
	padding: 2px;
	margin-top: 30px;
}

/* spoiler text roll over */
A.roll,
A.roll:hover {
	cursor: help;
	color: #333333; /* DDDDDD */
	background: #333333;
	text-decoration:none;
	padding: 3px 0;
	border-bottom: none;
}

A.unroll,
A.unroll:hover {
	cursor: help;
	color: #EEEEEE;
	background: #333333;
	text-decoration:none;
	padding: 3px 0;
	border-bottom: none;
}

/* small spacer above the poster names in the recent thread activity */
.posterListSpacer { margin-top: 3px; }

/* These Span overrides are used on the main page to right jutify the comment icon and number of posts.
	And also on the thread pages listing the number of comments. disallow breaking a couple elements up due to white space */
span.nobreak {
	white-space: nowrap;
}

span.nobreak_alignright {
	white-space: nowrap;
	float: right;
}

/* This adds a Font Awesome 4 "external link" icon before any http links. The f14c below is the unicode for the font.
	The 00a0 is unicode for nonbreakable space so the urls didn't line break after the icon. */
a[href^='http']::before {
	color: var(--fa-icon-color);
	content: '\f14c\00a0';
	font-family: "FontAwesome", sans-serif;
}

.donation_gold {
	color:  var(--donation-star-color);
	position: absolute;
	bottom: -10px;
	right: -10px;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: white;
}

/* This is all to style drop down selector boxes */
.select-css {
	display: block;
	background-color: #EBEBEB;
	border: 2px solid #555555;
	font-family: 'Lato', sans-serif;
	font-size: 13pt;
	line-height: 1.6rem;
	width: 50%;
	max-width: 100%;
	padding: 1%;

	box-sizing: border-box;
	margin: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}
.select-css option {
	font-weight:normal;
}

.widePadding {
	padding-left: var(--paddingForWideDevice);
	padding-right: var(--paddingForWideDevice);
}

.postPadding {
	padding-left: var(--paddingForWideDevice);
	padding-right: var(--paddingForWideDevice);
}

/* Mobile overrides. As long as this section comes LAST in your CSS it will overwrite the previous rules. */

/* @media screen and (max-width: 1920px) { */
/*@media screen and (max-width: 1920px) {*/
	.topnav {
		overflow: hidden;
		background-color: var(--top-nav-bg-color);
	}

	.topnav .icon {
		display: none;
	}

	.topnav a {
		float: left;
		display: block;
		color: white;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		font-size: 17px;
		font-weight: bold;
	}

	.topnav a:not(:first-child) {display: none;}

	.topnav a.icon {
		float: right;
		display: block;
	}

	.topnav.responsive {position: relative;}

	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
		color: white;
	}

	.topnav.responsive a {
		float: none;
		display: block;
		text-align: center;
		background-color: var(--top-nav-bg-color);
		color: white;
	}

	.topnav.responsive a:hover {
		background-color: var(--top-nav-hover-color);
		color: black;
		border-style: none;
	}
	.topnav.responsive a.active {
		background-color: var(--top-nav-bg-color);
		color: white;
	}
/*}*/

@media only screen and (max-device-width: 480px) {
	.widePadding {
		padding-left: 15px;
		padding-right: 15px;
	}

	.postPadding {
		padding-left: 15px;
		padding-right: 15px;
	}
}