@charset "UTF-8";

/**********************************
BEGIN styles for whole site
**********************************/

.yes-js {
	display:none;
}
.no-js {
	display:block;
}

.hidden {
	display:none;
}

/* TODO: add classes for showing/hiding content based on login state */
/* These will be purely for convenience; security won't depend on them */

body {
	background-color:silver;
	/* set site-wide font family */
	font-family:'Maven Pro', sans-serif;
	overflow-x:hidden;
	margin:0rem;
	margin-bottom:2rem;
}
section {
	padding-left:1rem;
	padding-right:1rem;
}
section.centered {
	text-align:center;
}
input[type=text], input[type=submit] {
	font-family:'Maven Pro', sans-serif;
	-webkit-box-sizing: border-box; /* webkit */
	-moz-box-sizing: border-box; /* gecko */
	box-sizing: border-box;
}

.row {
	margin-left:auto;
	margin-right:auto;
	max-width:75rem;
}
.row::after {
	/* apply clearfix to support floating elements */
	content:' ';
	display:table;
	clear:both;
}
.clearfix::after {
	content:' ';
	display:table;
	clear:both;
}

.left-column, .right-column {
	float:left;
	width:50%;
	box-sizing:content-box;
}

a {
	transition:0.5s ease;
}
.inline-link, a.inline-link {
	color:black;
	text-decoration:underline;
	cursor:pointer;
}
.inline-link:hover, .inline-link:focus,
a.inline-link:hover, a.inline-link:focus {
	color:white;
}

.desktop-only {
	display:inline-block;
}

.medium-down-only {
	display:none;
}
.mobile-only {
	display:none;
}

/* animation keyframes */
@keyframes spinner {
	from {
		transform: rotateY(0deg) rotateX(-5deg);
	}
	to {
		transform: rotateY(360deg) rotateX(-5deg);
	}
}

/* things which stay fixed to the top of the page */

.fixed-top {
	position:fixed;
	top:0;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
/*	z-index:4; */
}
.fixed-top::after {
	clear:both;
}

/* styles for undo */
.fixed-undo {
	z-index:6; /* minimum value to display over the top menu bar on mobile */
	width:30%;
	max-width:20rem;
}
.undo-output-section {
/*	background-color:#cc3333; */
	background-color:#1d5875;
	text-align:center;
	transition:0.5s;
	height:0rem;
	max-width:25rem;
}
.undo-output {
	display:inline-block;
	text-decoration:none;
	text-transform:uppercase;
	color:white;
}
.clear-undo-icon {
	display:none;
	height:1rem;
	width:auto;
	max-height:1rem;
	max-width:1rem;
}
.undo-anchor {
	display:inline-block;
	transition:0.5s;
}
.undo-anchor:hover, .undo-anchor:focus {
/*	background-color:#cc1111; */
	background-color:#3399cc;
	color:white;
}

/* things which stay fixed to the /bottom/ of the page */
.fixed-bottom {
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	z-index:4;
}
.warnings {
	background-color:#cc3333;
	color:white;
	text-align:center;
	padding:1rem;
	font-weight:700;
}
.warnings:empty {
	display:none;
}

/* leave room for position:fixed items */
.scrollable {
	margin-top:4rem;
}


.generic-error {
	text-align:center;
}

.generic-error .error-output {
	margin-bottom:1rem;
}

.generic-error .error-uri {
	font-weight:bold;
}

.show-hide-action-cont {
	float:right;
	margin-left:0.5rem;
	background-color:white;
	cursor:pointer;
	padding:0.125rem 0.25rem;
	border-radius:2px;
	height:100%;
	justify-content:center;
	align-items:center;
	min-height:28px;
}
.show-hide-action-cont .show-action, .show-hide-action-cont .hide-action{
	height:24px;
	width:24px;
}
.show-hide-action-cont.hide-action-used .show-action {
	display:block;
}
.show-hide-action-cont.hide-action-used .hide-action {
	display:none;
}
.show-hide-action-cont.show-action-used .show-action {
	display:none;
}
.show-hide-action-cont.show-action-used .hide-action {
	display:block;
}

/**********************************
END styles for whole page
**********************************/

/**********************************
BEGIN styles for heading
**********************************/


h1.site-title {
	text-align:center;
}
.site-version {
	text-align:center;
	font-size:0.75rem;
	margin-top:-0.75rem;
}

/* cool animations! */
.rotate-stage {
	margin: 2em auto;
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	-ms-perspective: 1200px;
	perspective: 1200px;
	position:relative;
}

.rotate-stage .cube-rotate {
	text-align:center;
	width:6rem;
	height:6rem;
	margin-left:auto;
	margin-right:auto;

	animation-name: spinner;
	animation-timing-function: linear;
/*	animation-iteration-count: infinite; */
	animation-iteration-count: 2; /* prevent CPU hogging */
	animation-duration: 6s;

	transform-style: preserve-3d;
}
.rotate-stage .cube-rotate:hover, .rotate-stage .cube-rotate:focus {
/*	animation-play-state: paused; */
}
.cube-rotate .back-face, .cube-rotate .left-face, .cube-rotate .front-face, .cube-rotate .right-face, .cube-rotate .top-face, .cube-rotate .bottom-face {
	position:absolute;
	box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
	border:1px solid black;
	height:6rem;
	width:6rem;
	font-size:3rem;
	font-weight:700;
	transition:1s;
}

.cube-rotate .back-face {
	transform:translateZ(0rem) rotateY(-180deg) translateZ(3rem);
	background-color:rgba(0,255,0,0.25);
}
.cube-rotate .left-face {
	transform:translateZ(0rem) rotateY(-90deg) translateZ(3rem);
	background-color:rgba(0,0,255,0.25);
}
.cube-rotate .front-face {
	transform:translateZ(0rem) rotateY(0deg) translateZ(3rem);
	background-color:rgba(255,255,255,0.75);
	display:flex;
	align-items:stretch;
	justify-content:center;
}
.cube-rotate .front-face:hover, .cube-rotate .front-face:focus {
/*	background-color:purple; */
}
.cube-rotate .right-face {
	transform:translateZ(0rem) rotateY(90deg) translateZ(3rem);
	background-color:rgba(255,0,0,0.25);
}
.cube-rotate .top-face {
	transform:translateZ(0rem) rotateX(90deg) translateZ(3rem);
	background-color:rgba(255,255,255,0.25);
}
.cube-rotate .bottom-face {
	transform:translateZ(0rem) rotateX(-90deg) translateZ(3rem);
	background-color:rgba(255,255,255,0.25);
}

/* center the text within the front face */
.cube-rotate .front-face .spin-site-abbr {
	margin-top:1rem;
	margin-bottom:auto;
	margin-left:auto;
	margin-right:auto;
	transition:0.5s;
}
.cube-rotate .front-face .spin-site-abbr:hover, .cube-rotate .front-face .spin-site-abbr:focus {
	text-shadow: 0rem 0rem 1rem white;
}
.cube-rotate .front-face .favicon-img {
	object-fit:contain;
	display:block;
	margin-top:auto;
	margin-bottom:auto;
	text-align:center;
	width:75%;
}

.navbar {
	background-color:black;
	color:white;
	z-index:4;
}
.navbar > h1, .navbar > h2, .navbar > h3 {
	display:none;
	margin-top:0rem;
	margin-bottom:0rem;
}
.navbar > .row {
	position:relative;
}
.navbar .navbar-left, .navbar .navbar-right {
/*	width:50%; */
/*	width:33.3333%; */
}
.navbar .navbar-left {
	float:left;
}
.navbar .navbar-right {
	float:right;
}
.navbar ul {
	list-style-type:none;
	padding:0rem;
	display:inline-block;
}
.navbar-left ul, .navbar-left ul li {
	float:left;
}
.navbar-left ul {
	margin-top:0rem;
	margin-bottom:0rem;
}
.navbar-left ul a {
	display:inline-block;
	padding:0rem;
}
.navbar-left ul a .favicon-img {
/*	max-height:2.95rem; */
	height:2.65rem;
	padding:0.15rem;
}
.navbar-left ul a:hover {
	background-color:silver;
}
.navbar-right ul, .navbar-right ul li {
	float:right;
}
.navbar-mobile-dropdown {
	display:none;
	position:relative;
	max-height:0rem;
	overflow:hidden;
	transition:0.5s ease;
	width:100%;
/*	box-shadow:0rem 0.5rem 0.5rem white; */
	border-bottom:1px solid white;
}
.navbar-mobile-dropdown ul {
	width:100%;
	text-align:center;
}
.navbar-mobile-dropdown ul li a, .navbar-mobile-dropdown ul li label {
	display:none;
	background-color:black;
	text-align:center;
	transition:0.5s ease;
}
label.mobile-navbar-show-hide-label:hover, .navbar-mobile-dropdown ul li label:hover, label.mobile-navbar-show-hide-label:focus, .navbar-mobile-dropdown ul li label:focus {
/*	background-color:silver; */
	transform:rotateZ(-90deg);
}
label.mobile-navbar-show-hide-label {
	float:right;
	margin-top:0.25rem;
	margin-right:1rem;
	display:none;
	transition:0.5s;
}
label.mobile-navbar-show-hide-label img {
	height:2.5rem;
	width:auto;
	max-height:2.5rem;
	max-width:2.5rem;
}
input[type=checkbox].mobile-navbar-show-hide {
	display:none;
}
input[type=checkbox].mobile-navbar-show-hide:checked ~ .navbar-mobile-dropdown {
	max-height:100vh;
	overflow-y:auto;
} 
.navbar-mobile-dropdown ul, .navbar-mobile-dropdown ul li {
	margin-top:0rem;
	margin-bottom:0rem;
	width:100%;
}
.navbar-mobile-dropdown ul li {
	border-bottom:0.1rem solid white;
}
.navbar-mobile-dropdown ul li:first-child {
	border-top:0.1rem solid white;
}
.navbar-mobile-dropdown .login-info, .navbar-mobile-dropdown .mobile-dropdown-story-count {
	background-color:black;
	width:auto !important;
	padding:1rem;
	margin-top:0rem !important;
}
.navbar a {
	color:white;
	text-decoration:none;
	padding:1rem;
	background-color:black;
	transition:0.5s;
}
.navbar a:hover, .navbar a:focus {
	background-color:white;
	color:black;
}
.navbar .login-info {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	width:33.3333%;
	display:inline-block;
	margin-top:1rem;
}

.top-story-count-cont {
	display:block;
	position:relative;
	margin-top:3.125rem;
}
.top-story-count-cont.hidden {
	display:none;
}
.top-story-count-cont .top-story-count {
	position:absolute;
	top:0rem;
	right:0rem;
	padding:1rem;
	background-color:white;
	color:black;
	border-radius:0rem 0rem 1rem 1rem;
	z-index:1;
}
.top-story-count-cont .all-cache-read-link {
	position:absolute;
	top:0rem;
	right:14.875rem;
	display:block;
	background-color:#1d5875;
	border-radius:0rem 0rem 0rem 1rem;
	color:white;
	text-decoration:none;
	padding:1rem 3rem 1rem 1rem;
	text-align:center;
	z-index:0;
}
.top-story-count-cont .all-cache-read-link:hover, 
.top-story-count-cont .all-cache-read-link:focus {
	background-color:#3399cc;
}

.filter-menu {
}
.filter-menu input[type=submit] {
	display:block;
	margin-left:auto;
	margin-right:auto;
	width:40%;
	margin-top:2rem;
	margin-bottom:3rem;
	color:white;
	background-color:black;
	padding:1rem;
	border:none;
	border-radius:0.25rem;
	transition:0.5s ease;
}
.filter-menu input[type=submit]:hover, .filter-menu input[type=submit]:focus {
	color:black;
	background-color:white;
}
.filter-menu .float-list-fix {
	clear:both;
}
.filter-menu ul {
	list-style-type:none;
	padding:1rem;
	margin:0rem;
	margin-left:auto;
	margin-right:auto;
}
.filter-menu ul::after {
	content:' ';
	display:table;
	clear:both;
}
.filter-menu ul li {
	width:100%;
	float:none;
}
.filter-menu ul li:last-child {
	margin-top:2rem;
}
.filter-menu .filter-line-cont {
	font-size:0rem;
}
.filter-menu .filter-line-cont .filter-cont {
	font-size:1rem;
}
.filter-menu ul li .filter-cont.inline, .filter-menu ul li .sort-cont.inline {
	display:inline-block;
	margin-left:auto;
	margin-right:auto;
	margin-top:0.25rem;
	margin-bottom:0.25rem;
}
.filter-menu ul li .filter-cont.inline.half-line, .filter-menu ul li .sort-cont.inline.half-line {
	width:50%;
/*	padding:0rem 1rem 0rem 1rem; */
	padding:0rem;
}
.filter-menu ul li .filter-cont.inline.half-line:first-child, .filter-menu ul li .sort-cont.inline.half-line:first-child {
/*	padding:0rem 1rem 0rem 0rem; */
}
.filter-menu ul li .filter-cont.inline.half-line:last-child, .filter-menu ul li .sort-cont.inline.half-line:last-child {
/*	padding:0rem 0rem 0rem 1rem; */
}
.filter-menu ul li .filter-cont.inline.full-line, .filter-menu ul li .sort-cont.inline.full-line {
	width:100%;
/*	padding:0rem 1rem 0rem 1rem; */
	padding:0rem;
}
.filter-menu ul li .filter-cont.inline.full-line input[type=text], .filter-menu ul li .sort-cont.inline.full-line input[type=text] {
	width:100%;
}

.filter-menu ul li .filter-cont.inline.full-line .inline-label, .filter-menu ul li .sort-cont.inline.full-line .inline-label,
.filter-menu ul li .filter-cont.inline.half-line .inline-label, .filter-menu ul li .sort-cont.inline.half-line .inline-label {
	display:inline-block;
	float:left;
	margin-left:0rem;
	margin-top:0rem;
}
.filter-menu ul li .filter-cont.inline.full-line .inline-label ~ select, .filter-menu ul li .sort-cont.inline.full-line .inline-label ~ select,
.filter-menu ul li .filter-cont.inline.half-line .inline-label ~ select, .filter-menu ul li .sort-cont.inline.half-line .inline-label ~ select {
	display:inline-block;
	float:right;
	width:calc( 100% - 6rem );
	margin-right:1rem;
}
.filter-menu ul li .filter-cont.inline.full-line:last-child .inline-label ~ select, .filter-menu ul li .sort-cont.inline.full-line:last-child .inline-label ~ select,
.filter-menu ul li .filter-cont.inline.half-line:last-child .inline-label ~ select, .filter-menu ul li .sort-cont.inline.half-line:last-child .inline-label ~ select {
	margin-right:0rem;
}
.filter-menu ul li input[type=text]{
	width:100%;
	
	color:black;
}
.filter-menu ul li .label{
	display:none;
}
.save-filter-sort-as-default {
	text-align:center;
}
.tooltip-cont {
	position:relative;
}
.tooltip {
	display:none;
	position:absolute;
	bottom:3rem;
	padding:2rem;
	background-color:white;
	border-radius:0.5rem;
	border:1px solid black;
	max-height:10rem;
	overflow-y:auto;
	box-sizing:border-box;
	min-width:100%;
}
input:focus ~ .tooltip {
	display:block;
}

.cache-menu {
	margin-top:2rem;
	margin-bottom:2rem;
}
.cache-menu::after {
	content:' ';
	display:table;
	clear:both;
}
input.cache-menu-toggle,
input.filter-menu-toggle {
	display:none;
}
.cache-menu-content,
.filter-menu-content {
	display:none;
}
.cache-menu-toggle-label,
.filter-menu-toggle-label {
	text-align:center;
	transition:0.5s;
	border-radius:0.25rem;
	border:1px solid white;
	padding:1rem;
	margin-left:auto;
	margin-right:auto;
	display:block;
	width:37.25%;
}
.cache-menu-toggle-label:hover, .cache-menu-toggle-label:focus,
.filter-menu-toggle-label:hover, .filter-menu-toggle-label:focus {
	background-color:white;
}
.cache-menu-toggle-label::after,
.filter-menu-toggle-label::after {
	margin-left:1rem;
	content:'+';
}
input.cache-menu-toggle:checked ~ .cache-menu-toggle-label::after,
input.filter-menu-toggle:checked ~ .filter-menu-toggle-label::after {
	content:'-';
}
input.cache-menu-toggle:checked ~ .cache-menu-content,
input.filter-menu-toggle:checked ~ .filter-menu-content {
	display:block;
}
.split-button-cont {
	width:calc(50% - 2rem);
	float:left;
	padding:1rem;
}
.split-button-cont > a {
	text-decoration:none;
	display:block;
}
.split-button {
	padding:1rem;
	background-color:black;
	color:white;
	transition:0.5s ease;
	border-radius:0.25rem;
	border:none;
	width:calc(100% - 2rem);
	text-align:center;
}
.split-button:hover, .split-button:focus {
	background-color:white;
	color:black;
}
.cache-menu::after {
	content:' ';
	display:table;
	clear:both;
}

.loading-stage {
	text-align:center;
}

.loading-stage p a {
	color:black;
	text-decoration:underline;
	transition:0.5s ease;
}
.loading-stage p a:hover, .loading-stage p a:focus {
	color:white;
}

/**********************************
END styles for heading
**********************************/

/**********************************
BEGIN styles for story list
**********************************/

ul.story-list {
	list-style-type:none;
	padding:1rem;
	margin:0rem;
}
ul.story-list li {
/*	border-bottom:1px solid black; */
}
ul.story-list a {
	text-decoration:none;
	color:inherit;
	transition:0.2s;
}
ul.story-list a:hover, ul.story-list a:focus {
	color:blue;
}
ul.story-list li .feed-src-name {
	display:inline-block;
/*	float:left; */
	margin-right:2rem;
	display:none;
}

.story-group-row {
	position:relative;
}
/* Tab functionality by using radio buttons */
/* this lets us make a tabbed display with absolutely no javascript! */
.story-group {
	position:relative;
	min-height:14rem; /* TODO: try to avoid setting a min height */
	clear:both;
	transition:1s; /* this makes a nice slide effect when we clear a story group with ajax */
/*	overflow-x:auto; */
/*	white-space:nowrap; */
	font-size:0rem; /* to avoid white space in html causing margins to appear on inline-block items */
}
.story-group::after {
	content:' ';
	display:table;
	clear:both;
}
.story-group.hide {
	min-height:0rem;
}
.story-group .debug-gid {
	display:none; /* this is only for debug so don't display it while we're not actively debugging */
	position:absolute;
	top:1rem;
	right:2rem;
	z-index:6;
}
/* this is necessary because transitions on story-group always apply to story-group::after, so we have to separate out the footer */
.story-group-footer {
	position:absolute;
	left:0rem;
	right:0rem;
	bottom:3.8rem;
	height:3.2rem;
	background-color:#cccccc;
	content:' ';
	z-index:-1;
	border-radius:0rem 0rem 1rem 1rem;
}
.story-group.hide ~ .story-group-footer {
	height:0rem;
	display:none;
}
.story-group.hide ~ .rank-match {
	height:0rem;
	display:none;
	opacity:0;
}
.single-story {
/*	float:left; */
	display:inline-block;
	font-size:1rem;
}

.single-story label {
	display:inline-block;
	padding:1rem;
	position:relative;
	left:0rem;
	bottom:calc(1px - 7rem);
	background-color:#dddddd;
	z-index:1;
	min-width:1.5rem;
	text-align:center;
	border-left:1px solid #aaaaaa;
}
.single-story.first-child label {
	border-radius:0rem 0rem 0rem 1rem;
	border:none;
}

.single-story .mark-read {
/*	background-color:#cc3333; */
	background-color:#1d5875;
	position:relative;
	bottom:0rem;
	left:0rem;
	border-radius:0rem 0rem 1rem 1rem;
	text-align:center;
	z-index:0;
	transition:0.5s;
	bottom:-3.5rem;
}
.single-story .mark-read:hover, .single-story .mark-read:focus {
	bottom:-6rem;
	background-color:#3399cc;
}
.single-story .mark-read img {
	width:1rem;
	height:auto;
	max-width:1rem;
	max-height:1rem;
}
.single-story .mark-read .mark-read-link {
	font-size:2rem;
	line-height:0.4;
	
	padding-top:1.5rem;
	padding-bottom:0.5rem;
	padding-left:1rem;
	padding-right:1rem;
	
	display:flex;
	align-items:center;
	justify-content:center;
}
.single-story .mark-read .mark-read-link:hover, .single-story .mark-read .mark-read-link:focus {
	color:black;
}

.single-story label:hover ~ .mark-read, .single-story label:focus ~ .mark-read {
	bottom:-6rem;
}

.single-story input[type=radio].tab-toggle {
	display:none;
}
.single-story input[type=radio]:checked.tab-toggle ~ label {
	transition:0.5s;
}
.single-story input[type=radio]:checked.tab-toggle ~ .mark-read {
	bottom:-6rem;
}
.single-story input[type=radio].tab-toggle ~ .tab-content {
	display:none;
	position:absolute;
	top:0rem;
	left:0rem;
	right:0rem;
	bottom:7rem;
	width:calc(100%-4rem);
	background-color:white;
	height:5rem;
	padding-left:2rem;
	padding-right:2rem;
	padding-top:1rem;
	padding-bottom:1rem;
	border-radius:1rem 0rem 0rem 0rem;
	z-index:2;
}
.single-story input[type=radio].tab-toggle ~ .tab-content.one-story-only {
	border-radius:1rem 1rem 0rem 0rem;
}
.single-story .tab-content .pub-date {
	margin-bottom:0.5rem;
}
.single-story input[type=radio]:checked.tab-toggle ~ .tab-content {
	display:block;
}
.single-story input[type=radio]:checked.tab-toggle ~ label {
	background-color:white;
}
.single-story .headline a {
	transition:0.2s;
}
.single-story .headline h3 {
	margin-top:0rem;
}
.single-story .headline a:hover, .single-story .headline a:focus {
	color:silver;
}
.single-story .headline.mobile {
	display:none;
}

.story-switcher {
	min-height:2.5rem;
}

.rank-match {
	position:absolute;
	top:-2.5rem;
	right:0rem;
	height:2rem;
	display:block;
}
.rank-match.yes-js {
	display:none;
}

.rank-match.output {
	padding:0.5rem;
	border-radius:0.5rem 0.5rem 0rem 0rem;
	font-weight:bold;
	padding-left:1rem;
	padding-right:1rem;
}
.rank-match.output.good {
	background-color:#009999;
	color:#ffffff;
}
.rank-match.output.bad {
	background-color:#cc3333;
	color:#ffffff;
}

.rank-match-link {
	display:inline-block;
	height:100%;
	padding:0.25rem;
	border-radius:0.5rem 0.5rem 0rem 0rem;
	transition:0.5s;
	background-color:#cccccc;
}
.rank-match-link.plus:hover, .rank-match-link.plus:focus, {
	background-color:#009999;
}
.rank-match-link.minus:hover, .rank-match-link.minus:focus, {
	background-color:#cc3333;
	
}
.rank-match-link img {
	height:100%;
}

/**********************************
END styles for story list
**********************************/

/**********************************
BEGIN styles for login
**********************************/

.settings h2, .settings h3, .faq h2, .about h2, .donate h2, .login h2, .construction-splash h2 {
	text-align:center;
}
.login-form {
	max-width:50rem;
	margin-left:auto;
	margin-right:auto;
}
.login-form .login-inputs br {
	clear:both;
}
.login-form .email-input {
	float:left;
}
.login-form .email-input.forgot-pass, .login-form .email-token-input {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	float:none;
	width:100%;
}
.login-form .passphrase-input {
	float:right;
}
.black-button, .login-form .submit-login {
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:1rem;
	
	padding-top:1rem;
	padding-bottom:1rem;
	padding-left:2rem;
	padding-right:2rem;
	text-transform:uppercase;
	background-color:black;
	border:0px solid transparent;
	color:white;
	transition:0.5s;
	text-align:center;
}
.black-button {
	font-size:0.75rem;
	text-decoration:none;
	margin-top:0rem;
}
.black-button:hover, .black-button:focus, .login-form .submit-login:hover, .login-form .submit-login:focus {
	background-color:white;
	color:black;
}

.login-failure, .mfa-continue, .login-to-verify {
	text-align:center;
	padding-top:2rem;
	padding-bottom:2rem;
	font-weight:700;
	font-size:1.5rem;
}

.login-failure {
	background-color:#cc3333;
	text-transform:uppercase;
}

.login-failure .subtext {
	font-size:1rem;
	text-transform:none;
	margin-top:1rem;
}

.register-info {
	max-width:50rem;
	margin-left:auto;
	margin-right:auto;
}
.register-info, .login-note {
	margin-top:2rem;
	margin-bottom:2rem;
	text-align:center;
}

.mfa-continue, .login-to-verify {
	background-color:#33cc33;
}

a.button.forgot-login {
	display:block;
	margin-left:auto;
	margin-right:auto;
	padding:1rem;
	text-decoration:underline;
	text-align:center;
	transition:0.5s ease;
	width:33%;
	max-width:10rem;
	margin-top:1rem;
	color:black;
}
a.button.forgot-login:hover, a.button.forgot-login:focus {
	background-color:white;
}

.new-user-info-block-cont {
	text-align:center;
	margin-bottom:2rem;
	margin-top:2rem;
}
.new-user-info-block-cont .new-user-info-block {
	display:none;
}
.new-user-info-block-cont .new-user-info-block-checkbox:checked ~ .new-user-info-block {
	display:block;
}

/**********************************
END styles for login
**********************************/

/**********************************
BEGIN styles for settings
**********************************/

.no-login {
	background-color:#cc3333;
	padding:1rem;
}

.settings-form {
	max-width:40rem;
	margin-left:auto;
	margin-right:auto;
}
.settings-form hr {
	margin-top:2rem;
	margin-bottom:2rem;
}
.settings-form ul {
	list-style-type:none;
	padding-left:0rem;
}
.settings-form ul li {
	padding:0.5rem;
}
.settings-form a.button {
	display:block;
	padding:1rem;
	text-decoration:none;
/*	text-transform:uppercase; */
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	color:black;
	transition:0.5s;
	border-radius:0.5rem;
	border:1px solid white;
}
.settings-form a.button:hover, .settings-form a.button:focus {
	background-color:white;
}
.settings-form li.button-container.disabled {
	display:none;
}
.settings-form input[type=checkbox] {
	margin-right:1rem;
}
.settings-form .feed-and-progress-cont {
	margin-bottom:3rem;
	position:relative;
}
.settings-form .feed-cont {
	padding: 1rem;
	box-shadow:0rem 0rem 0.25rem black;
	border-radius:0.5rem;
	z-index:1;
}
.settings-form .feed-and-progress-cont:last-child {
/*	margin-bottom:0rem; */
}
.settings-form .feed-cont .feed-fetched-title {
	margin-bottom:1rem;
}
.settings-form .feed-cont .feed-fetched-title:empty {
	display:none;
}
.settings-form .feed-cont input[type=text] {
	width:100%;
}
.settings-form .feed-and-progress-cont .feed-progress-info {
	position:absolute;
	bottom:0rem;
	left:0rem;
	right:0rem;
	transform:translateY(27px);
	width:85%;
	margin-left:auto;
	margin-right:auto;
	padding:0.25rem 1rem 0.25rem 1rem;
	border-radius:0rem 0rem 0.5rem 0.5rem;
	/* TODO: style this to be below the feed information (feed-cont); z index and html re-ordering seem insufficient to accomplish this */
	z-index:0;
	background-color:#3399cc;
}
.settings-form .feed-and-progress-cont .feed-progress-info:empty {
	display:none;
}
.settings-form .feed-and-progress-cont .feed-progress-info.valid {
	background-color:#3399cc;
}
.settings-form .feed-and-progress-cont .feed-progress-info.invalid {
	background-color:#cc3333;
}
.settings-form input[type=submit] {
	margin-left:auto;
	margin-right:auto;
	display:block;
	margin-top:2rem;
	color:white;
	background-color:black;
	padding:1rem;
	border:none;
	border-radius:0.25rem;
	transition:0.5s ease;
	width:75%;
	text-transform:uppercase;
}
.settings-form input[type=submit]:hover, .settings-form input[type=submit]:focus {
	color:black;
	background-color:white;
}
.passphrase-change-cont, .filter-sort-str-cont, .feed-change-cont {
	box-shadow:0rem 0rem 0.25rem black;
	padding:2rem;
	max-width:40rem;
	margin-bottom:1.5rem;
	margin-left:auto;
	margin-right:auto;
}
.setting-link-cont {
	padding-left:2rem;
	padding-right:2rem;
	max-width:40rem;
	margin-left:auto;
	margin-right:auto;
}
.passphrase-change-cont input[type=password], .filter-sort-str-cont input[type=text] {
	width:100%;
	max-width:35rem;
}
.passphrase-change-hdg, .filter-sort-change-hdg, .feed-change-hdg {
	font-weight:bold;
	font-size:1.2rem;
	margin-bottom:1.5rem;
}
.feed-change-cont ul {
	margin-bottom:0rem;
}
.feed-change-cont {
	margin-bottom:3rem;
}
.settings-output {
	font-size:1.5rem;
	text-align:center;
	padding-top:2rem;
	padding-bottom:2rem;
	background-color:#33cc33;
	font-weight:bold;
}
.settings-output.error {
	background-color:#cc1111;
	color:white;
}

/**********************************
END styles for settings
**********************************/

/**********************************
BEGIN styles for faq
**********************************/

.faq .faq-list {
	list-style-type:none;
	margin-left:0rem;
	padding-left:0rem;
}
.faq .faq-list li::after {
	content:' ';
	display:table;
	clear:both;
}
.faq .faq-list li {
	padding-bottom:1rem;
	border-bottom:1px solid black;
}
.faq .faq-list li:nth-child(2n){
	background-color:#d0d0d0;
}
.faq .question, .faq .answer {
	padding-left:1rem;
	padding-right:1rem;
}
.faq .question > p, .faq .answer > p {
	display:inline;
}
.faq .question > p::after, .faq .answer > p::after {
	content:' ';
	display:block;
	margin-bottom:1rem;
}
.faq .question::before, .faq .answer::before {
	font-size:4rem;
	font-weight:700;
/*	float:left; */
	display:inline-block;
	margin-bottom:-9px;
}
.faq .question::before {
	content:'Q:';
}
.faq .answer::before {
	content:'A:';
}
.faq a, .about a, .construction-splash a, .warrant-canary a {
	color:black;
}
.faq a:hover, .faq a:focus, .about a:hover, .about a:focus, .construction-splash a:hover, .construction-splash a:focus, .warrant-canary a:hover, .warrant-canary a:focus {
	color:white;
}

/**********************************
END styles for faq
**********************************/

/**********************************
BEGIN styles for donate
**********************************/

.donate .donate-buttons {
	list-style-type:none;
	margin-left:0rem;
	padding-left:0rem;
}
.donate .donate-buttons li {
	padding:1rem;
}

.donate .donate-buttons .donate-button {
	transition:0.5s ease;
	box-shadow:0rem 0rem 0.5rem black;
}
.donate .donate-buttons .donate-button:hover,
.donate .donate-buttons .donate-button:focus  {
	transform:scale(1.1);
}

.donate .donate-buttons .donate-button a {
	display:block;
	text-align:center;
	font-size:1.25rem;
	font-weight:bold;
	color:black;
	text-decoration:none;
	padding:1rem;
}
.donate .donate-buttons .donate-button .crypto-address {
	text-align:center;
	padding-bottom:1rem;
	word-wrap:break-word;
}
.donate .donate-buttons .donate-button .crypto-address::before {
	content:'Address: ';
}
.donate .donate-buttons .donate-button.ether .crypto-address::before {
	content:'Address (ETH): ';
}
.donate .donate-buttons .donate-button.monero .crypto-address::before {
	content:'Address (XMR): ';
}

/**********************************
END styles for donate
**********************************/


/**********************************
BEGIN styles for footer
**********************************/

.remaining-count {
	text-align:center;
	padding:2rem;
	background-color:white;
	margin-left:auto;
	margin-right:auto;
	max-width:20rem;
	border-radius:0.25rem;
}

.story-count {
	display:inline-block;
}
a.load-more-link {
	display:inline-block;
	text-decoration:none;
}
a.load-more-link .load-more-stories {
	color:black;
	transition:0.5s;
	padding:1rem;
	text-transform:uppercase;
	margin-top:1rem;
	border-radius:0.5rem;
	box-shadow:0rem 0rem 0.5rem silver;
}
a.load-more-link .load-more-stories:hover, a.load-more-link .load-more-stories:focus {
	background-color:silver;
}

/* scroll to top button */
.scroll-to-top-btn {
	position:fixed;
	right:2rem;
	bottom:2rem;
	z-index:2;
	font-size:2.5rem;
}
.scroll-to-top-btn:hover, .scroll-to-top-btn:focus {
}
.scroll-to-top-btn .diamond {
	position:absolute;
	bottom:0rem;
	right:-0.2rem;
	width:2.5rem;
	height:2.5rem;
	transform:rotate(45deg);
	background-color:rgba(0,0,0,0.5);
	box-shadow: -1px -1px 10px 0px rgba(0,0,0,0.5);
	transition:1s;
	z-index:-5;
}
.scroll-to-top-btn:hover .diamond, .scroll-to-top-btn:focus .diamond {
	background-color:rgba(0,0,0,0.8);
}
.scroll-to-top-btn a {
	text-decoration:none;
	color:rgba(255,255,255,0.3);
	transition:1s;
}
.scroll-to-top-btn:hover a, .scroll-to-top-btn:focus a {
	color:white;
}
.scroll-to-top-btn a .to-top-icon {
	z-index:1;
}

.row.footer {
	margin-top:2rem;
	font-size:0.7rem;
	text-align:center;
	padding-left:2rem;
	padding-right:2rem;
	overflow-wrap:break-word;
}

/**********************************
END styles for footer
**********************************/

/**********************************
BEGIN styles for mobile adjustment
**********************************/

/* phone /and/ tablet adjustments */
@media screen and (max-width:1023px) {
	.desktop-only, .navbar .desktop-only {
		display:none;
	}
	.medium-down-only, .navbar .medium-down-only {
		display:block;
	}
	section.navbar, section.fixed-top {
		padding-left:0rem;
		padding-right:0rem;
	}

	.filter-menu {
		margin-bottom:2rem;
	}

	.navbar-mobile-dropdown {
		display:block;
	}
	label.mobile-navbar-show-hide-label {
		display:inline-block;
	}
	.navbar-left ul a .favicon-img {
		margin-left:0.5rem;
	}

	.navbar-mobile-dropdown ul li a, .navbar-mobile-dropdown ul li label {
		display:block;
	}

	.navbar.medium-down-only:not(.navbar-to-top) {
		position:relative;
		z-index:5;
	}
	.navbar.fixed-top.navbar-to-top {
		z-index:4;
	}
	
	.navbar .navbar-right a.to-top-link {
		display:block;
		padding:0.35rem;
	}
	.navbar .navbar-right a.to-top-link img {
		margin-right:0.5rem;
		display:block;
		height:2.5rem;
		width:auto;
		max-height:2.5rem;
		max-width:2.5rem;
	}
}

/* small-only adjustments */
@media screen and (max-width:640px) {
	.mobile-only, .navbar .mobile-only {
		display:block;
	}
	
	.fixed-undo {
		width:65%;
/*		margin-right:0rem; */
	}

	.show-hide-action-cont {
		float: none;
		width: auto;
		margin-left: 0rem;
		margin-right: 0rem;
		margin-top: 1rem;
		margin-bottom: -1rem;
	}
	.show-hide-action-cont ~ .tooltip {
		bottom:5rem;
	}
	
	/* TODO: clean up unncessary css; there's no way we need all of this */
	.filter-menu ul li .filter-cont.inline.full-line, .filter-menu ul li .sort-cont.inline.full-line {
		width:100%;
	}
	.filter-menu ul li .filter-cont.inline.half-line, .filter-menu ul li .sort-cont.inline.half-line,
	.filter-menu ul li .filter-cont.inline.half-line:last-child, .filter-menu ul li .sort-cont.inline.half-line:last-child {
		width:100%;
		float:none;
	}

	.filter-menu ul li .filter-cont, .filter-menu ul li .sort-cont {
	}
	.filter-menu ul li .filter-cont::after, .filter-menu ul li .sort-cont::after {
		content:' ';
		display:table;
		clear:both;
	}
	.filter-menu input[type=submit] {
		width:80%;
	}
	.filter-menu ul li .inline-label {
		display:inline-block;
		float:left;
		margin-left:0rem;
	}
	.filter-menu ul li .filter-cont.inline.half-line .inline-label ~ select,
	.filter-menu ul li .filter-cont.inline.full-line .inline-label ~ select {
		display:inline-block;
		float:right;
		margin-right:0rem;
	}

	.split-button-cont {
		width:80%;
		float:none;
		display:block;
		margin-left:auto;
		margin-right:auto;
	}

	.cache-menu-toggle-label,
	.filter-menu-toggle-label {
		width:70%;
	}

	.left-column, .right-column {
		width:100%;
	}
	
	.story-group {
		min-height:23rem;
	}
	.story-group-footer {
		bottom:5.8rem;
	}
	.single-story input[type=radio].tab-toggle ~ .tab-content {
		height:12rem;
	}
	.single-story label {
		bottom:calc(1px - 14rem);
	}
	/* hover doesn't make sense on a mobile screen so just always display the close tabs for now */
	.single-story input[type=radio]:checked.tab-toggle ~ .mark-read {
		bottom:-13rem;
	}
	.single-story label ~ .mark-read {
/*		bottom:-13rem; */
		bottom:-10.5rem;
	}
	.single-story label:hover ~ .mark-read, .single-story label:focus ~ .mark-read {
		bottom:-13rem;
	}
	.single-story .mark-read:hover, .single-story .mark-read:focus {
		bottom:-13rem;
	}
	.single-story .tab-content .pub-date {
		display:none;
	}
	.single-story .headline.mobile {
		display:inline-block;
	}
	.single-story .headline.desktop {
		display:none;
	}
	
	.remaining-count {
		max-width:none;
		width:50%;
	}
	.scroll-to-top-btn {
		display:none;
	}

	.login-form .email-input, .login-form .passphrase-input {
		margin-left:auto;
		margin-right:auto;
		text-align:center;
		float:none;
		width:100%;
		margin-top:1rem;
		margin-bottom:1rem;
	}
	.login-form .email-input input, .login-form .passphrase-input input {
		margin-top:1rem;
		margin-left:auto;
		margin-right:auto;
		display:block;
	}
	.passphrase-change-cont input[type=password], .filter-sort-str-cont input[type=text] {
		width:calc( 100% - 1rem );
	}
	.tooltip {
		padding:1rem;
		max-height:6rem;
	}
}

/**********************************
END styles for mobile adjustment
**********************************/