/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

* {
	box-sizing: border-box !important;
	max-width: 100% !important;
	font-family: helvetica, sans-serif;
}

html, body {
	background: url('images/main_cont_bg_250x250.jpg') repeat fixed !important;
	height: 100%;
	scroll-padding-top: 85px;
}

html {
	background: linear-gradient(#142c35, #0c1110) fixed;
	margin-top: -1em;
}

html, body, #maincont, #masthead {
	min-width: 320px;
}

body {
	background-color: #0c1110;
	color: lightblue !important;
  font-size: clamp(13px, 1.17vw, 15px);
  line-height: clamp(18px, 1.35vw, 20px);
	margin: 0;
	z-index: 0 !important;
}
::selection {
  background-color: yellow;
  color: black;
}
a::selection {
  background-color: black;
  color: yellow;
}

a {
	color: #3bc1e6;
	text-decoration: none !important;
}

a:hover {
	text-decoration: underline;
}

.border {
	border: solid 1px #550 !important;
	border-radius: .3em !important;
	overflow: hidden !important;
}
.borderless {
	border: none !important;
}

extra-column {
	display: none;
}

.row {
	display: inline;
}

.column, .base {
	display: block;
/*	font-size: .8rem;*/
	padding: .25em 0;
	vertical-align: top;
	text-align: center;
	width: 100%;
}

.internal_column {
	border: solid 1px #880;
	padding: .3em;
	width: 33%;
}
.internal_column h3 {
	background: linear-gradient(#555, #333);
	line-height: 1.3em;
}

.base {
	margin: 0;
}

.brick {
	white-space: nowrap;
}

.column input {
	width: 100%;
}

.control {
	margin: 1em 0;
	vertical-align: top;
}
.control img {
	margin-right: .2em;
	vertical-align: -.1em;
}
.control a {
	color: yellow;
	display: inline-block;
	margin: 0 .5rem;
	text-decoration: none;
}
.control a:hover {
	text-shadow: 0 0 4em yellow;
}
.control_supplement {
	display: inline-block;
	float: right;
}

.control_message {
	background: linear-gradient(to left, yellow 0%, transparent 25%);
}

.super_thumb {
	display: block;
	margin: 0 auto !important;
	max-height: 120px;
	max-width: 200px;
}

#maincont {
	background: linear-gradient(#445c65, #0c1110) fixed black;
	box-shadow: 0 0 5px 2px black;
	padding-bottom: 3em;
}

#content, #search:hover, #search:focus {
	border: solid 1px yellow;
}

#content {
	padding: 1em !important;
	border-style: solid none none none;
}

.thumbnail {
	max-height: 220px;
}

section {
	padding: 1em;
}

.spaced_icons a {
	display: inline-block;
	margin: .75em;
	text-align: center;
}
.spaced_icons img {
	display: block;
}

/*
p.search:after {
  content: '';
  display: block;
  position: absolute;
}

.two_thirds {
	display: inline-block;
	vertical-align: top;
	width: 55%;
}
*/

input, select, textarea {
	background-color: #ddd !important;
	border: solid 1px #880 !important;
	border-radius: .3em;
	font-weight: normal !important;
}

textarea {
	/*border: solid 1px #ddd;*/
	font-size: 1em;
	border-radius: .3em;
	min-height: 2em;
	max-height: 50vh;
	padding: .4em;
	min-width: 100% !important;
	max-width: 100% !important;
	width: 100%;
}
/*
label {
	display: block;
}

.post_box {
	height: 15vh;
}
*/
input, select {
	height: 2.3em;
	margin-bottom: .5em;
	width: 100%;
}

input {
	padding-left: .2em;
	line-height: 1.6em !important;
	vertical-align: text-center;
}

input[type=file] {
	background: none !important;
	border: dashed 1px #880 !important;
}

input[type=submit] {
	background-color: yellow !important;
	border: solid 1px;
	border-radius: .3em;
	/*border-color: #0c1110;*/
	color: black;
	line-height: 1em !important;
}

input[type=submit]:active {
	/*background: linear-gradient(#db0, #f6d32d);*/
}

input[type=date], input[type=time]/*, input[type=number]*/ {
	display: inline-block;
	height: 3em !important;
	width: 210px;
}

#banner_align_grid {
	margin: 0 auto;
	width: 100%;
/*	text-align: center;*/
}
#banner_align_grid input[type=radio] {
	display: inline-block !important;
	margin: 0;
	padding: 0;
	height: 1.5em;
	width: 2em;
}
.deselected {
	filter: saturate(50%);
	font-style: italic;
}
.disabled, .blocked {
	filter: saturate(0);
	opacity: .6;
}
.blocked {
	cursor: not-allowed;
}
.teaser {
	filter: saturate(0%);
	font-style: italic;
}

.expanded {
	display: block;
}
.cp_item_selected {
	color: yellow;
	text-decoration: underline !important;
}

.scrolling_table {
	overflow-y: scroll !important;
}

.border, .no_border {
	border: none;
}

.info {
	color: gray;
	margin-left: 3em;
}

.invisible {
	display: none !important;
}

.hidden {
	opacity: .4;
}

text_splitter,
text_splitter_slashed,
image_splitter,
null_splitter {
	display: block;
}

text_splitter:before {
	content: " | ";
}

text_splitter_slashed:before {
	content: " / ";
}


#error, post_body, #copyright, #review {
	border: solid 1px #550;
	border-spacing: 0;
	border-radius: .2em;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
}
.alert a {
	color: black !important;
	font-weight: bold;
	text-decoration: underline !important;
}


label {
	display: inline !important;
	line-height: 1em;
	vertical-align: baseline;
}
input[type=checkbox], input[type=radio] {
	line-height: 1.2em;
	vertical-align: middle;
	margin: .15em .3em !important;
	height: 2em;
	width: 2em;
	-moz-transform: scale(1.5);
}


post_body {
  background-color: #1c262a;
  color: lightblue;
  vertical-align: top;
}

code {
	background-color: #550;
	color: black;
	font-family: monospace;
}

h1 {
	color: yellow;
	line-height: 2rem;
	margin: 2rem 0;
	text-align: center;
	text-shadow: .2em .2em .4em black;
	text-transform: capitalize;
}

h2 {
	font-size: 1rem;
	line-height: 1.6rem;
	margin: 1.9rem 0 2rem 0;
	text-align: center;
	font-weight: 100;
}

h3 {
	color: yellow;
	margin: 3em 0 .5em 0 !important;
	text-transform: capitalize;
}

h4 {
	color: lightyellow;
	margin: 0 !important;
}

#review {
	border-color: #550;
	font-style: italic;
}
.review_title {
	margin: 0;
	text-align: left;
	font-size: 1.6em;
}
.review_text {
	display: inline-block;
	vertical-align: top;
	max-width: 90% !important;
}
.reviewer {
	color: yellow;
	float: right;
	margin: 2em 2em 0 0;
}

hr {
	height: 1px;
	color: #550;
	width: 100%;
}

.post_body h4 {
	margin-top: .3em !important;
	margin-bottom: -1.2em !important;
}

#error p:first-of-type,
flexible-row p:first-of-type {
	margin-top: 0;
}
#error p:last-of-type,
flexible-row p:last-of-type {
	margin-bottom: 0;
}

.multi_child * {
	display: inline-block !important;
	max-width: 50% !important;
}

#masthead {
/*	height: 20vh;*/
	height: 236px;
/*	min-height: 230px;*/
	overflow: hidden;
	min-width: 100%;
	z-index: 900;
}

/* only applies to banners */
.scaled {
	background-size: 100% auto !important;
	background-position: bottom !important;
	height: 21vw !important;
}

#masthead, #masthead * {
/*	max-height: 320px !important;*/
}
.banner_small {
	display: block;
	border-radius: .3em;
	width: 100%;
}

#title_image {
	display: block;
	vertical-align: bottom;
}

.cover_preview {
	border-radius: .3em;
	max-height: 150px;
	max-width: 100%;
	margin: .5em auto;
}

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

.stretch {
	text-align: center;
}
.stretch * {
	margin: 0 auto;
	width: 100%;
	max-width: 90vw !important;
}

.qr_code {
	border: solid 1.5em white;
	border-radius: .3em;
}

.indicator {
	height: 15px;
	margin: 2px 1px !important;
	vertical-align: top !important;
}
.control img {
	vertical-align: -4px !important;
}

.optional {
	display: inline-block;
}
.short {
	display: none;
}

audio_cont {
	background: linear-gradient(to bottom right, rgba(255,255,255,0.25), transparent 60%);
	border: solid 1px #550;
	border-radius: .3em;
	color: white;
	display: block;
	line-height: 1.85em;
	overflow: hidden;
	padding: 0 .3em;
	width: 100%;
}
audio_cont img {
	border: 0 !important;
	float: left;
	padding: 7px 10px 8px 5px;
	vertical-align: bottom;
}
audio {
	border-radius: .3em;
	width: 100%;
}

ul li {
	margin-bottom: 1.5em;
}

#error, #review, .box {
	background-color: #1c262a;
	color: lightblue;
	display: block;
	margin: 1em 0;
	padding: 1em;
}

.alert {
	background: url('alert.png') .5em center no-repeat, linear-gradient(#ffd505, #ffb905);
	border: solid 1px #FF9D05;
	border-radius: .3em !important;
	color: black !important;
	display: block;
/*	margin: .75em 0;*/
	margin-top: 0 !important;
	min-height: 4em;
	line-height: 1.2em;
	padding: .3em;
	padding-left: 5.5em !important;
	text-shadow: 1px 1px 2px white;
	vertical-align: bottom !important;
}

.acknowledgement {
	background: url('info.png') 8px 6px no-repeat;
	border: solid 1px #550;
	border-radius: .3em;
	color: #222;
	height: 30px;
	line-height: 2em;
	margin: 1em 0 -1em 0;
	overflow: hidden;
	opacity: .5;
	padding-left: 30px;
  transition-property: color, opacity, width;
  transition-duration: 1s, .8s, .5s;
	vertical-align: middle;
	width: 30px;
}

.acknowledgement:hover, .acknowledgement:active {
	color: #eee;
/*	font-size: .8rem;*/
	opacity: 1;
	height: auto;
	line-height: 1.25em;
	padding: .3em;
	padding-left: 2em;
	width: 100%;
}

/*
.gateway_indicator {
	display: inline-block;
}

svg {
	position: absolute;
	right: .75em;
}

.tiny_field {
	width: 50px !important;
}*/

.glue {
	display: inline-block;
}

steps {
	display: block;
	margin: 0 0 2em 2em;
	font-size: 1.1em;
	line-height: 2.2em;
}

/* responsive tables */

table-section {
	display: none;
}

table-item img, 
solid-row img,
flexible-row img {
	vertical-align: text-bottom !important;
}

table-cont {
	background: none;
	border: none;
	display: block;
}

table-group {
	border: solid 1px #550;
	border-radius: .2em;
	background-color: #1c262a;
	display: block;
	margin-bottom: 1em;
	overflow: hidden;
	width: 100%;
}

.dark {
	background-color: #1c262a;
	color: white;
}

table-head, compact-head, extended-head, .titlebar {
	background: linear-gradient(#555, #333);
	display: block;
	padding-left: .3em !important;
	width: 100%;
}

table-head, compact-head {
	color: white;
/*	font-size: .95rem;*/
	line-height: 1.5em !important;
	padding-top: .2em;
	text-align: center;
}
table-group table-head {
	line-height: 1.8em !important;
}
extended-head flexible-row {
	display: none;
}
table-item {
	background-color: #1c262a;
	border: solid 1px #440;
	border-style: solid none none none;
	display: block;
	padding: .5em !important;
	line-height: 1.4rem;
	vertical-align: bottom;
	padding-top: 0;
}
table-item input {
	width: 100%;
}
table-item input[type=radio],[type=checkbox] {
	transition: background-color .75s;
	width: auto !important;
}
table-item:nth-child(even) {
  background-color: #182124;
}
table-item:hover {
  background-color: #141b1e;
}
solid-row {
	flex-grow: 1;
	flex-basis: 100px;
	padding-top: .25em;
}
flexible-row {
	display: block;
	flex-basis: 100%;
	padding-top: .25em;
}
.titlebar {
	padding: .3em;
}
.titlebar a {
	color: white;
}

.long_line {
	line-break: anywhere;
}

.credit_role, .credit_user {
	flex-basis: 49% !important;
	vertical-align: middle !important;
}
.credit_role {
	text-align: left;
	padding-top: 1px;
}

.icon_block {
	display: inline-block;
	vertical-align: -.2em;
}

.started, .light_green,
.stopped, .light_clear,
.problem, .light_red,
.processing, .light_amber,
.light_amber_flash {
	border-radius: 100%;
}

.started, .light_green {
	box-shadow: 0 0 5px 1px #0f6 !important;
}
.stopped, .light_clear {
	box-shadow: none;
}
.problem, .light_red {
	box-shadow: 0 0 5px 1px #f00 !important;
}
.processing, .light_amber {
	box-shadow: 0 0 5px 1px #eab434 !important;
}
.light_amber_flash {
	animation: light_pulse 2s infinite alternate;
}

@keyframes light_pulse {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 0 5px 1px orange;
  }
}

datestamp {
	display: block;
}

footer {
	background: linear-gradient(#000 0%, #080808 30%, #080808 100%);
	border: solid 1px yellow;
	border-style: solid none none none;
	color: lightblue;
	font-size: .8rem;
	padding: 1em;
	width: 100%;
}
footer img, .row img {
	opacity: .6;
	filter: saturate(0);
	margin: 0 1em;
}
footer img:hover {
	opacity: 1;
	filter: saturate(100%);
}
footer table-head {
	line-height: 2em !important;
}

#copyright {
	/*background: linear-gradient(#353535, #151515);*/
	display: block;
	/*font-size: .7rem;*/
	margin-top: 1.7rem;
	padding: .5em;
}

#copyright, #copyright a {
	color: #bbb;
	text-decoration: none;
	text-shadow: 1px 1px black;
}

#copyright a:hover {
	text-decoration: underline;
}

.center_if_wide {
	text-align: left;
}
.hide_if_wide {
	display: none;
}

.card, .small_card, .wide_card {
	display: inline-flex;
	flex-wrap: wrap !important;
	min-height: 345px;
	height: auto;
	margin: 0 -2px !important;
	padding-top: 2em !important;
	text-align: center;
	vertical-align: top;
}
.small_card {
	min-height: 100px;
	margin: .15em 0 !important;
}
.small_card img {
	border-radius: .2em;
	margin-top: -1em !important;
	max-height: 100px !important;
	max-width: 100px !important;
}
.wide_card a, .wide_card h3 {
	margin: 0 auto;
}
.auto_height {
	height: auto !important;
}

.status_up, .status_down {
	display: block;
	font-size: .9em;
	text-align: center;
}
.status_up {
	color: lightgreen;
}
.status_down {
	color: gray;
}

.menu_icon {
	display: inline-block;
	float: right;
	line-height: 2.75em;
	margin-right: 1em;
	padding: 0 .5em;
}
.menu_icon img {
	max-height: 1em;
}

.tiny_field, .small_field, .short_field {
	display: inline-block;
}
.tiny_field {
	width: 150px;
}
.small_field {
	width: 35%;
}
.short_field {
	width: 49%;
	max-width: 250px;
}

.update_label {
	display: inline-block;
	background-color: yellow;
	border: solid 1px;
	border-radius: 0 .5em .5em 0;
	color: black;
	margin: 1em 0 1em -1.1em;
	padding: .21em .5em;
}

@media only screen and (max-width: 450px) {
	input[type=checkbox], input[type=radio] {
		line-height: 2em;
		vertical-align: middle;
		margin: .5em 1em !important;
		-moz-transform: scale(2);
		height: 1.5em;
		width: 1.5em;
	}

	.control a {
		display: block;
	}
	.card {
		display: block;
		margin: 0 auto;
		width: 100%;
		min-height: 200px;
	}
	.card, .wide_card {
		width: 100%;
	}
	.wide_card {
		height: auto;
	}

	.spaced_icons a {
		margin: .05em;
	}
}

@media only screen and (min-width: 451px) and (max-width: 600px) {
	.control a {
		display: block;
	}

	.card, .wide_card {
		overflow: scroll;
	}
	.card {
		min-height: 200px;
		width: 50%;
	}
	.card * {
		margin: 0 auto !important;
	}
	
	.wide_card {
		display: block !important;
		margin: 0 auto !important;
		height: auto;
		width: 100%;
	}

	.spaced_icons a {
		margin: .15em;
	}

	.icon_block {
		vertical-align: baseline;
	}

	.control_supplement {
		margin: 0 !important;
	}
}

@media only screen and (min-width: 601px) {
	.stretch {
		text-align: left;
	}
	.stretch * {
		margin: 0;
		width: auto;
	}
	
	datestamp {
		display: inline-block;
	}
	.wide_card h3, .plate_icon {
		display: block;
		text-align: center !important;
	}

	.icon_block {
		vertical-align: 1px;
	}
}

@media only screen and (min-width: 601px) and (max-width: 700px) {
	body {
/*		font-size: 1.02em;*/
	}

	.card {
		width: 33.333%;
	}

	.wide_card {
		height: 375px;
		width: 50%;
	}

	.spaced_icons a {
		margin: .4em;
	}
}

@media only screen and (min-width: 701px) and (max-width: 835px) {
	.card {
		width: 25%;
	}

	.wide_card {
		width: 50%;
	}
}

@media only screen and (max-width: 835px) {
	body {
		font-size: 15px;
	}

	.hide_if_wide {
		color: lightgray;
		display: inline-block;
	}
	
	text_splitter, text_splitter_slashed, image_splitter {
		display: block;
	}
	
	text_splitter:before, text_splitter_slashed:before {
		content: "";
	}

	.super_thumb {
		display: block;
/*		width: 75%;*/
		height: auto;
	}

	.control_supplement {
		float: none;
		display: block;
		margin: .5em;
	}
}

@media only screen and (min-width: 836px) {
	html {
		margin-top: 0;
	}

	h1 {
/*		font-size: 2rem;*/
	}

	#banner_align_grid {
		margin: 0;
	}

	text_splitter, text_splitter_slashed, image_splitter, null_splitter {
		display: inline;
	}
	
	text_splitter_slashed:before {
		content: " | ";
	}

	splitter_rev {
		display: block;
	}
	splitter_rev:before {
		content: '';
	}

	.column, .base {
		display: block;
	/*	font-size: .8rem;*/
		padding: .25em 0;
		vertical-align: top;
		text-align: center;
		width: 33%;
	}

	.acknowledgement {
/*		font-size: 1rem !important;*/
		height: 2em !important;
	}

	.indicator {
		display: inline-block;
	}

	.tiny_field {
		display: inline;
		width: 120px;
	}

	.spaced_icons a {
		margin: .75em;
	}
	.spaced_icons img {
		display: inline;
	}

	/* responsive tables */

	table-cont {
		border: solid 1px #550;
		border-radius: .2em;
		background-color: #1c262a;
		width: 100%;
	}

	table-group {
		background: none;
		border: none;
		display: block;
		margin-bottom: 0;
	}

	table-head, extended-head {
/*		line-height: .6em !important;*/
		padding: .3em !important;
		width: 100% !important;
	}
	compact-head {
		display: none;
	}
	extended-head {
		color: white;
		padding: .5em 0;
	}
	extended-head flexible-row {
		display: inline-block;
		margin: 0 -2px;
	}
	extended-head:first-child {
		padding-left: .5em !important;
		padding-right: -.5em !important;
	}

	table-head * {
		padding: 0;
	}

	table-item {
		align-content: flex-start;
/*		align-items: stretch;*/
		background: none;
		border: none;
		display: -webkit-box;
	  display: -moz-box;
	  display: -ms-flexbox;
	  display: -webkit-flex;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between safe;
/*		margin-bottom: 0;*/
		margin: 0;
		padding: .35em !important;
		text-align: left;
		vertical-align: top;
		width: 100%;
	}

	table-item solid-row, 
	table-item flexible-row {
		padding: .2em;
	}

	solid-row {
		flex-grow: 1;
		flex-basis: 20%;
		margin: 0 .3em;
	}

	flexible-row {
		flex-grow: 3;
		flex-shrink: 3;
		flex-basis: 65%;
	}

	.right_end {
		align-content: flex-end;
	}

	.icon_block {
		display: inline-block;
		vertical-align: -2px;
	}
	.icon_block img {
		max-height: 16px;
	}

	.credit_role {
		text-align: right;
	}

	.center_if_wide {
		text-align: center;
	}

	extra-column {
		display: inline-block;
	}

	.card, .wide_card {
		clear: both;
		display: block;
		margin: 0 auto !important;
		min-height: 10em;
		padding: .1em;
	}
	
	.card {
		display: inline-block;
		width: 19.6% !important;
	}

	.wide_card {
		display: inline-block;
		margin: 0 -2px !important;
		padding: 1em;
		text-align: center;
		width: 33.333%;
	}
	.wide_card h3 {
		line-height: 1.5em;
		margin-bottom: .5em;
	}

	.base {
		margin: 0 auto;
		width: 99.75%;
	}

	.column_holder {
		display: block;
		padding: 0;
		text-align: center;
		width: 100%;
	}

	.column {
		display: inline-block !important;
		max-width: 33% !important;
		margin-bottom: .5em !important;
	}

	.column table-item {
		padding: 1.5em;
		text-align: center;
		min-height: 6.5em !important;
	}

	.optional {
		display: none;
	}
	.short {
		display: inline-block;
	}

	/* only applies to banners */
	.scaled {
		background-size: cover !important;
		background-position: center !important;
		height: 236px !important;
	}
}

@media only screen and (min-width: 1200px) {
	#maincont, footer, .base {
		width: 1400px !important;
		margin: 0 auto !important;
	}

	.wide_card {
		width: 25%;
	}
}

/* videos */
.video_cont {
  height: 0;
  overflow: hidden !important;
  margin: .5em 0 2em 0;
  padding-bottom: 56.25%;
/*	padding-bottom: 80vh;*/
  position: relative;
  z-index: 0;
  width: 100%;
}

.video_cont iframe {
  border: solid 1px yellow !important;
  border-radius: .3em;
  left: 0;
  top: 0;
  position: absolute;
  overflow: hidden;
  margin: 0 auto !important;
  height: 100%;
  width: 100%;
  z-index: 0;
}

/* music */

.album_cover, .album_info, .album_cover_medium {
	display: block;
	text-align: center;
	clear: both;
}

.album_cover, .album_info {
	width: 100%;
}

.album_info {
	margin-left: 0;
	text-align: justify;
}

.album_info h2 {
	margin-top: .3em;
	text-align: center;
}

.album_cover img {
	max-height: 90vh;
	max-width: 100vw;
}

.album_cover_thumbnail {
	margin: .1%;
	width: 16.4%;
}

.album_cover_medium {
	margin: 0 auto;
	max-height: 200px;
	max-width: 200px;
}

.overflow_icons {
	text-align: center;
}

iframe {
	width: 99%;
}

@media only screen and (max-width: 600px) {
	.album_cover_thumbnail {
		width: 32.8%;
	}
}
@media only screen and (min-width: 601px) and (max-width: 700px) {
	.album_cover_thumbnail {
		width: 24.8%;
	}
}
@media only screen and (min-width: 701px) and (max-width: 835px) {
	.album_cover_thumbnail {
		width: 19.8%;
	}
}
@media only screen and (max-width: 835px) {
	.album_cover_medium {
		margin: 0 auto !important;
		max-height: 40vh !important;
		max-width: 40vw !important;
	}

	.title {
		font-size: 1.3em;
		text-align: center;
	}
}

/* menu */

#dead_link, .link_data, .link_breaker {
  color: gray;
  display: block;
}

.link_data {
  margin-top: .5em;
}

.menu_header {
  border: solid 1px yellow;
  border-style: none none solid none !important;
  height: 43px;
  display: block;
  position: sticky;
  z-index: 1;
}

.menu_header a {
  display: inline-block;
  margin: 0;
  text-align: right;
  line-height: 45px;
  vertical-align: bottom;
}

.menu_header a:active, .menu_header a:hover {
  background: none;
}

.menu_root_full,
.menu_root_short,
.menu_root_tiny,
#menu_button {
  position: absolute;
  display: inline-block;
  vertical-align: top;
}

.menu_root_full,
.menu_root_short,
.menu_root_tiny {
  top: .3em !important;
  left: 0;
  filter: saturate(50%);
  z-index: 2;
}
.menu_root_full {
  display: inline-block;
}
.menu_root_short {
  display: none;
}
.menu_root_tiny {
  display: none;
}
#menu_button {
  float: right;
  top: .65em !important;
  right: 1em;
}

nav_block {
  position: sticky;
  top: 0;
  z-index: 4;
}
nav_block .menu_header {
  background: #142c35;
}
nav_block #subnav {
  background: linear-gradient(#142c35, #0c1110);
}


nav {
  background-color: #142c35;
  border: solid 1px yellow;
  border-style: none none solid none !important;
  display: none;
  margin-top: -1em;
  line-height: 40px;
  width: 100%;
  z-index: 10 !important;
}

nav ul {
  padding: 0;
}

nav ul li {
  border: solid 1px #092720;
  border-style: none none solid none;
  list-style: none;
  margin: 0 auto !important;
  padding: 0;
}

nav ul a {
  background: transparent;
  color: yellow;
  display: block;
  line-height: 1em;
  padding: .35em 1em;
  text-align: center;
  text-decoration: none;
  transition: background .75s;
  width: 100%;
  line-height: 1.2em;
}

nav ul li .link_label {
  display: inline-block;
  z-index: 12;
  margin-left: -.2em;
}
nav ul li .link_icon {
  display: inline-block;
  vertical-align: middle;
  z-index: 13;
}

.menu_icon {
  display: inline-block;
  height: 28px;
  margin: 0 !important;
  padding: 0 !important;
    width: 28px;
  z-index: 20;
}
.menu_icon:hover {
  filter: invert(100%);
  filter: brightness(0.25);
}
.link_counter {
  display: inline-block;
  margin: 0 .3em 0 -.4em;
  z-index: 3;
}
.link_description {
  display: none;
}

#subnav {
  display: block;
  line-height: 2em;
  padding: 0 1em;
  width: 100%;
}
#subnav a {
  display: inline-block;
  line-height: 1em;
  margin: .5em;
}

@media only screen and (max-width: 480px) {
  .menu_root_tiny {
    display: none;
  }
  .menu_root_short {
    display: inline-block;
  }
  .menu_root_full {
    display: none;
  }

/*  .menu_header a {
    line-height: 60px;
    margin-top: -12px;
  }
*/
}

@media only screen and (max-width: 300px) {
  .menu_root_tiny {
    display: inline-block;
  }
  .menu_root_short {
    display: none;
  }
  .menu_root_full {
    display: none;
  }
}

@media only screen and (min-width: 451px) and (max-width: 600px) {
  body {
    margin-top: 2px !important;
  }

  .menu_root_tiny {
    display: none;
  }
  .menu_root_short {
    display: inline-block;
  }
  .menu_root_full {
    display: none;
  }

/*  .menu_header a {*/
/*    line-height: 36px;*/
/*    margin-top: -3px;*/
/*  }*/
}

@media only screen and (min-width: 601px) and (max-width: 720px) {
/*  .menu_header a {*/
/*    line-height: 36px;*/
/*    margin-top: 2px;*/
/*  }*/
}

@media only screen and (min-width: 836px) and (max-width: 935px) {
  nav {
    display: block !important;
    visibility: visible !important;
  }

  .menu_root_full {
    display: none;
  }
/*  .menu_header a {*/
/*    line-height: 36px;*/
/*    margin-top: 2px;*/
/*  }*/
  .menu_icon {
    height: auto;
    padding: .5em !important;
    padding-right: .8em !important;
  }

  nav {
    background-color: #142c35;
    border: solid 1px yellow;
    border-style: none none solid none !important;
    display: none;
    margin-top: -1em;
    text-align: center;
    width: 100%;
    z-index: 20 !important;
  }
  nav ul li .link_label {
    display: none;
  }
  nav ul li .link_icon {
    display: inline-block;
  }
  nav ul li a {
    padding: 0;
  }
  .link_icon {
    padding: 0 !important;
  }
  .link_counter {
    margin-left: -1em;
  }
  #dead_link, .link_data, .link_breaker {
    display: none;
  }
}

@media (min-width: 936px) and (max-width: 1100px) {
  nav {
    display: block !important;
    visibility: visible !important;
  }
  nav ul li a {
    min-width: 80px;
  }
  nav ul li .link_icon {
    display: none;
  }
  nav ul a {
    padding: 1em;
/*    min-width: 80px;*/
  }
}

@media (min-width: 836px) /*, (orientation: landscape)*/ {
  .menu_header {
    display: none;
  }

  nav {
    background: linear-gradient(#142c35, #092730) fixed;
    display: block !important;
    margin-top: 0;
    visibility: visible !important;
  }

  nav a, #baseline a {
    display: inline-block;
    width: auto;
  }

  nav ul, nav li {
    display: inline-block;
    margin: 0;
    width: auto;
  }

  nav ul li {
    margin: 0;
    padding: 0;
  }

  #dead_link, .link_data, .link_breaker {
    display: none;
  }
}

nav a:hover {
  background: linear-gradient(#880, #ff0);
  color: black !important;
  text-decoration: none;
}

.notify {
  animation: pulse 1s infinite alternate;
}
@keyframes pulse {
  from {
    color: #aa0;
  }
  to {
    color: yellow
  }
}

nav a.active {
  background-color: #04AA6D;
  color: white;
}

nav .icon {
  display: none;
} 
/*
nav form {
  display: inline-block;
  margin: 0;
  margin-top: -1.2em;
  margin-bottom: -1.2em;
  float: right;
}*/