/* STRUCTURE */
/* Fonts
font-family: 'Iceland', sans-serif;
font-family: 'Kelly Slab', serif;
*/
html, body
{
	height:		100%;
	padding:	0;
    margin:		0;
}
body
{
	background-color: #999;
	color: #222;
	font-family: 'Kelly Slab', serif;
	min-height: 100%;
	text-rendering: optimizeLegibility;
}
body.dark
{
	background-color: #333;
}
h1, h2, h3, h4, h5, h6
{
	font-family: 'Iceland', sans-serif;
	margin:	10px 0;
}
h1{font-size:	2.5em;}
h2{font-size:	2.25em;}
h3{font-size:	2em;}
h4{font-size:	1.75em;}
h5{font-size:	1.5em;}
h6{font-size:	1.25em;}

table
{
	/*border: 1px solid #333;*/
}

textarea
{

}
select
{

}
fieldset
{
	border: none;
}

img
{
	border: none;
}

a{
	color: #444;
	text-decoration: none;
}
a:hover
{
	color: #000;
} 

hr
{
	border: none;
	border-top: 1px solid #232;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

article h1,article h2,article h3,article h4,article h5,article h6,
article p,
article pre,
article table
{
	margin:	5px;
}

field
{
    font-weight: 800;
}
field:after
{
    content: ": ";
    font-weight: 800;
}
value:after
{
    content: "\A";
    white-space: pre;
}

#page
{
	min-height: 100%;
	position:	relative;
}

#head, #foot
{
	background-color: #555;
	font-family: 'Iceland', sans-serif;
}
#head
{
	font-size:	26px;
	position:	relative;
	display:	flex;
	flex-direction:	column;
	line-height:	100%;
	
}
#head > nav
{
	display:			none;
	flex:				1;
	background-color:	#333;
}
#head a
{
	padding:			8px;
}
#head a,
.blocks-toolbox > *,
.blocks > * > .meta,
.tools > *
{
	color:				#888;
	text-shadow:		00px -1px #333;
}
#head nav > ul
{
	list-style-type: none;
	margin:			0;
	padding:		0;
}
#head nav > ul > li
{
	position:		relative;
	border-bottom:	1px solid #bbb;
	
}
#head nav > ul > li > a
{
	display:		inline-block;
	text-transform:		lowercase;
}
#head nav > ul > li > a:before
{
	content:		"/";
}
#head nav > ul > li:last-of-type
{
	border-bottom:	none;
}
#head nav > ul > li > a.active
{
	background-color:	#333;
}

#head > .links
{
	position:	absolute;
	right:		0;
	top:		0;
}
#head > .links a
{
	display:	inline-block;
}

#head nav > ul > li > a,
#head nav > ul > li,
#head nav > ul,
#head>nav
{
	display:	block;
}

#logo
{
	display:	inline-block;
}
#head_name
{
	display:			inline-block;
	background-color:	#000;
}
#navToggle
{
	display:	inline-block;
	padding:	0px;
}
@media all and (min-width: 770px)
{
	#head
	{
		display:	block;
	}
	#head > div#logo > div#navToggle
	{
		display:	none;
	}
	#head > nav
	{
		display:	inline-block;
		background-color:	transparent;
	}
	#head nav > ul > li > a,
	#head nav > ul > li,
	#head nav > ul,
	#head>nav
	{
		display:	inline-block;
	}
	#head nav > ul > li
	{
		border-bottom:	0;
	}
	#head a:hover,
	.blocks-toolbox > *:hover,
	.tools > *:hover
	{
		color:				#f93;
		text-shadow:		0 0 4px #f53;
	}
}

#content, #content-nopad
{

}
#content
{
	padding:		10px 20px;
	margin:			0;
}
#content > *:first-child
{
	margin-top:		0;
}
#content-nopad
{
	padding:		0;
	margin:			0;
}

#foot
{
	height:			16px;
	padding:		2px;
	text-align:		center;
	width:			100%;
	position:		absolute;
	bottom:			0;
}

}
#links
{
	width: 			100%;
}


.command
{
	color: 			silver;
	background-color: black;
	border: 		1px solid gray;
	padding: 		4px;
	display: 		block;
	white-space: 	nowrap;
	font-family: 	"Deja Vu Sans Mono", "Courir New", "Lucida Console", "Monospace", monospace;
	font-size:		10pt;
}

#content-nopad p,
#content p
{
    max-width:  60em;
}

.img_grid
{
	margin:		-8px -6px 4px -6px;
}
.img_grid a
{
	margin:		10px;
	float:		left;
}
.img_grid .end
{
	clear:		both;
	height:		0px;
}

.blocks:after
{
	content:	"";
	display:	block;
	clear:		both;
}
.blocks
{
}
.blocks > *
{
	width:		100%;
	height:		60vw;
	float:		left;
	display:	inline-block;
	position:	relative;
	overflow:	hidden;
}
.blocks > *:after
{
	padding-top: 50%;
	display:	block;
	position:	relative;
}

@media all and (min-width: 800px)
{
	.blocks > *
	{
		width:	50%;
		height:	30vw
	}
}
@media all and (min-width: 1200px)
{
	.blocks > *
	{
		width:	33.33%;
		width:	calc(100% / 3);
		height:	20vw;
	}
}
@media all and (min-width: 1600px)
{
	.blocks > *
	{
		width:	25%;
		height:	15vw;
	}
}

.b0 {background-color: #000;}
.b1 {background-color: #111;}
.b2 {background-color: #222;}
.b3 {background-color: #333;}
.b4 {background-color: #444;}
.b5 {background-color: #555;}
.b6 {background-color: #666;}
.b7 {background-color: #777;}
.b8 {background-color: #888;}
.b9 {background-color: #999;}
.ba {background-color: #aaa;}
.bb {background-color: #bbb;}
.bc {background-color: #ccc;}
.bd {background-color: #ddd;}
.be {background-color: #eee;}
.bf {background-color: #fff;}

.blocks > *
{
	display:		flex;
	align-items:	center;
	justify-content:center;
}
.blocks > * > div:first-of-type, .blocks > * > img
{
	width:			100%;
}
.blocks > * > div:first-of-type
{
	background:		rgba(63,63,63,0.4);
	height:			100%;
	transition:		250ms all ease;
	display:		flex;
	align-items:	center;
	justify-content:center;
	color:			#ccc;
	position:		absolute;
	left:			0;
	top:			0;
}

.blocks > * > div:first-of-type > div:first-child
{
	font-family:	'Iceland', sans-serif;
	font-size:		40px;
	text-align:		center;
	margin:			0.5vw 0;
	width:			100%;
	text-shadow:	2px 2px #444;
	transition:		250ms all ease;
	
	text-overflow:	ellipsis;
	white-space:	nowrap;
	overflow:		hidden;
}
.blocks > .light > div:first-of-type > div:first-child
{
	color:			#444;
	text-shadow:	2px 2px #666;
}

.blocks > * > .meta,
.blocks-toolbox > *
{

	background:		#555;
	
	display:		flex;
	align-items:	center;
	justify-content:center;
	text-align:		center;
	
	font-size:		30px;
	border-radius:	30px;
	width:			60px;
	height:			60px;
	
	transition:		250ms all ease;
}
.blocks > * > .meta
{
	position:		absolute;
	bottom:			5px;
	right:			5px;
}
.blocks-toolbox
{
	position:		fixed;
	top:			42px;
	left:			0px;	
	transition:		250ms all ease;
}
.blocks-toolbox.embed
{
	z-index:		1;
	position:		relative;
	height:			0;
	top:			5px;
}
.blocks-toolbox.hidden
{
	left:			-70px;
	transition:		250ms all ease;
}
.blocks-toolbox > *
{
	margin:			5px;
}
@media all and (min-width: 600px)
{
	.blocks > * > .meta
	{
		bottom:			10px;
		right:			10px;
	
		font-size:		40px;
		border-radius:	40px;
		width:			80px;
		height:			80px;
	}
	.blocks > *:hover > div:first-of-type
	{
		height:			15%;
		transition:		250ms all ease;
	}
	.blocks > *:hover > div > div:first-child
	{
		font-size:		25px;
		transition:		250ms all ease;
	}
	.blocks > *:hover > .meta
	{
		/*opacity:		0;*/
		bottom:			-90px;
		transition:		250ms all ease;
	}
}
.preview, .tools/*.preview-fill*/
{
	display:		flex;
	align-items:	center;
	justify-content:center;
	text-align:		center;
	background-color:	#111;
}
.preview
{
	max-width:		100%;
	height:			calc( 100vh - 42px - 70px );

}
.preview > .image
{
	margin-right:	auto;
	margin-left:	auto;
	max-width:		100%;
	max-height:		calc( 100vh - 42px - 70px );
	display:		block;
	box-sizing:		border-box;
	/*border:			10px solid #222;*/
}
.preview-fill
{
	overflow:		hidden;
	overflow-y:		scroll;
	overflow-x:		scroll;
	width:			100%;
	height:			calc( 100vh - 42px - 70px );
}

.tools
{
}
.tools > *
{
	background-color:	#555;
	display:		flex;
	align-items:	center;
	justify-content:center;
	text-align:		center;
	font-size:		25px;
	border-radius:	25px;
	width:			50px;
	height:			50px;
	margin:			10px 5px;
}
.tools > a.nav[href="#gallery"],
.tools > a.nav[href="#gallery"]:hover
{
	color:			#666;
	text-shadow:		00px -1px #333;
}

.top-image
{
	width:			100%;
	height:			30vh;
	overflow:		hidden;
	display:		flex;
	align-items:	center;
	justify-content:center;
}
.top-image img
{
	width:			110%;
	-webkit-filter: blur(4px);
	-moz-filter: blur(4px);
	-o-filter: blur(4px);
	-ms-filter: blur(4px);
	filter: blur(4px);
}

.flex-horizontal
{
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
.flex-horizontal div
{
}

#rf-form > div
{
    float:left;
    margin: 8px;
}
#rf-form > div > *
{
    vertical-align: top;
}

#rf-spectrum
{
    width: 100%;
    background-color:white;
    overflow-x: scroll;
    font-size: 12px;
}

#rf-spectrum > #scale
{
    width: 90%;
    /*min-height: 150px;*/
    /*background-color:silver;*/
    display: block;
    position: relative;
    border-bottom: 4px solid black;
    margin: 30px 5%;
}

#rf-spectrum > #scale > .band
{
    position: absolute;
    width: 100%;
    /*height: 100%;*/
    bottom: 0;
    box-sizing: border-box;
    border-left: 1px solid black;
}

#rf-spectrum > #scale > .band > .description
{
    padding: 0 4px;
    box-sizing: border-box;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.7)
}

#rf-spectrum > #scale > .band > .slice
{
    box-sizing: border-box;
    display: block;
    height: 20px;
    border-right: 1px solid black;
    /*position: absolute;
    bottom: 0;*/
    background-color: #666;
    margin-top: 10px;
}

#rf-spectrum > #scale > .Amatörradio > .slice
{
    background-color: #bbf;
}

#rf-spectrum > #scale > .Rundradio > .slice
{
    background-color: #bff;
}

#rf-spectrum > #scale > .Luftfart > .slice
{
    background-color: #fdb;
}

#rf-spectrum > #scale > .ISM > .slice
{
    background-color: #bfb;
}