<!--
//	td		{ outline:1px solid red; }
//	span		{ outline:1px solid yellow; }
//	div		{ outline:1px solid blue; }
//	div.dimmer	{ outline:1px solid green; }
	
	html
	{
		background-size: cover;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	body
	{
		width: 100%;
		height: 100%;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}
	body
	{
		background-image: url("./pics/projects.jpg");
		background-repeat: no-repeat;
		background-position: left top;
	//	background-attachment: fixed;
		background-size:cover;
	}
	.main_radio
	{
		display:relative;
		width:100%;
		max-width:800px;
	//	height:100%;
		padding:0px 20px;
		margin:0px;
    	}
    	
	audio.media_element
	{
	//	outline:2px solid cyan;
		display:block;
		position:relative;
		top:-1px;
	
		width:100% !important;
		min-width:300px !important;
		
	//	height:30px !important;
	//	border-radius: 15px !important;
	}

	audio::-webkit-media-controls-enclosure
	{
		width:100% !important;
		min-width:300px !important;
		
	//	height:30px !important;
	//	border-radius: 15px !important;

	//	color: white;
	//	background-color: #eeeeee;
	//	box-shadow:8px 8px 16px black, inset -4px -4px 10px #aaaaaa;
	}
	
	audio::-webkit-media-controls-current-time-display,
	audio::-webkit-media-controls-time-remaining-display
	{
//		color: black;
//		text-shadow: 1px 1px 4px #222222;
	}
	
	
	div.safari
	{
		display:none;
	}
	@supports not ((hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none))
	{
			audio.media_element
			{
				height:30px !important;
				border-radius: 15px !important;
			}
			audio::-webkit-media-controls-enclosure
			{
				height:30px !important;
				border-radius: 15px !important;

				color: white;
				background-color: #eeeeee;
				box-shadow:8px 8px 16px black, inset -4px -4px 10px #aaaaaa;
			}
	}
	@supports ((hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none))
	{
		@media screen and (orientation: landscape)
		{
			div.safari
			{
				display:none !important;
			}
			audio.media_element
			{
				height: 50% !important;
				max-height: 40px !important;
			//	border-radius: 50px !important;
			}
			audio::-webkit-media-controls-enclosure
			{
				height: 50% !important;
				max-height: 40px !important;
			//	border-radius: 50px !important;
			}
		}
		@media screen and (orientation: portrait)
		{
			div.safari
			{
				display:block !important;
			}
			audio.media_element
			{
				height: 50% !important;
				max-height: 80px !important;
			//	border-radius: 50px !important;
			}
			audio::-webkit-media-controls-enclosure
			{
				height: 50% !important;
				max-height: 80px !important;
			//	border-radius: 50px !important;
			}
		}
	}

	span.nobreakbox
	{
		display:inline-table;
	}
	span.nobreakbox_little
	{
		display:inline-table;
		border-collapse:collapse;
	}

	a		{ text-decoration:none;		font-family:Tahoma,sans-serif; font-size:10pt; font-weight:none; color:#ffffff; }
	a:hover		{ text-decoration:underline;	font-family:Tahoma,sans-serif; font-size:10pt; font-weight:none; color:#9988dd; text-shadow:0px 0px 1px #000000, 0px 0px 2px #000000, 1px 1px 10px #ffffff; text-decoration-color: white; }
	a.up		{ text-decoration:none;		font-family:Tahoma,sans-serif; font-size:10pt; font-weight:none; color:#cccccc; text-shadow:1px 1px 2px #000000, 1px 1px 4px #000000, 1px 1px 10px #ffffff; }
	a.up:hover	{ text-decoration:underline;	font-family:Tahoma,sans-serif; font-size:10pt; font-weight:none; color:#ffffff; text-shadow:1px 1px 2px #000000, 1px 1px 4px #000000, 1px 1px 10px #ffffff; text-decoration-color: white; }
//	.hn		{ text-decoration:none;		font-family:'courier new'; font-size:12pt; font-weight:bold; color:#ffffff; text-shadow:-1px -1px 2px #000000, 1px 1px 4px #000000, 1px 1px 8px #000000; }
//	.hn:hover	{ text-decoration:underline;	font-family:'courier new'; font-size:12pt; font-weight:bold; color:#ffffff; text-shadow:1px 1px 2px #000000, 1px 1px 4px #000000, 1px 1px 8px #000000; text-decoration-color: white; }

	body		{ font-family:Arial,sans-serif;	font-size:11pt; background-color:#000000; color:#555555; background-image: radial-gradient(rgb(128,128,255,0.9),rgb(0,0,0,0.0),rgb(0,0,0,0.0));}
//	td		{ font-family:Arial,sans-serif;	font-size:8pt; 	background-color:#111111; color:#ffffff; }
	td.tparnt	{ background-color:transparent; }
	
	td		{ 			font-family:Arial,sans-serif;	font-weight:normal; 	font-size:8pt;	color:#ddddee; xtext-shadow:-1px -1px 1px black, 1px 1px 1px black; }
	td.w1		{ letter-spacing:4px; 	font-family:Arial,sans-serif;	font-weight:normal; 	font-size:8pt;	color:#ddddee; xtext-shadow:-1px -1px 1px black, 1px 1px 1px black; }
	td.w2		{ letter-spacing:12px; 	font-family:Arial,sans-serif;	font-weight:bold; 	font-size:8pt;	color:#ccccdd; xtext-shadow:-1px -1px 1px black, 1px 1px 1px black; }
	td.w3		{ letter-spacing:4px; 	font-family:Arial,sans-serif;	font-weight:bold; 	font-size:8pt;	color:#bbbbbcc; xtext-shadow:-1px -1px 1px black, 1px 1px 1px black; }
	
	div.card	{ width: 250px;	border: 2px solid #dddddd;	padding: 0px 0px 0px 0px;	background-color: #666666;	/* box-shadow: 4px 4px 10px #888888; */ }
	div.inside	{ width: 228px;	border: 1px solid #bbbbbb;	padding: 10px 10px 10px 10px;	background-color: #666666;	box-shadow: 6px 6px 20px #000000 inset; }
	
	span.small	{ position:relative; top:-2px; letter-spacing:2px; text-decoration:none;	font-family:Tahoma,sans-serif; font-size:9pt;  font-weight:normal;  	color:#ffffff; text-shadow:1px 1px 2px #000000, 1px 1px 3px #000000, 1px 1px 12px #ffffff; }
	h2		{ letter-spacing:6px; text-decoration:none;	font-family:Tahoma,sans-serif; font-size:24pt; font-weight:bold; 	color:#8070c0; text-shadow:1px 1px 4px #000000, 1px 1px 8px #000000, 1px 1px 12px #ffffff; text-shadow: 0px 1px 1px rgba(255, 255, 255, 1.0); }
	h2.alter	{ letter-spacing:6px; text-decoration:none;	font-family:Tahoma,sans-serif; font-size:14pt; font-weight:bold; 	color:#7060b0; text-shadow:1px 1px 4px #000000, 1px 1px 8px #000000, 1px 1px 12px #ffffff; }
	h3		{ letter-spacing:3px; text-decoration:none;	font-family:Tahoma,sans-serif; font-size:12pt; font-weight:bold; 	color:#dddddd; text-shadow:0px 0px 4px #000000, 1px 1px 12px #ffffff; }
	h4		{ letter-spacing:1px; text-decoration:none;	font-family:Tahoma,sans-serif; font-size:9pt;  font-weight:normal; 	color:#cccccc; text-shadow:0px 0px 2px #000000, 1px 1px 8px #ffffff; }
	h5		{ letter-spacing:6px; text-decoration:none;	font-family:Tahoma,sans-serif; font-size:9pt;  font-weight:bold; 	color:#aaaaaa; text-shadow:0px 0px 4px #000000, 1px 1px 12px #ffffff; }

	table.chart	{ font-size:10pt; background-color:#000000; text-decoration:none; font-weight:bold; color:#bbbbbb; }
	td.chart	{ font-size:8pt;  background-color:#444444; text-decoration:none; font-weight:normal; color:#aaaaaa; }
	td.line		{ font-size:8pt;  background-color:#222222; text-decoration:none; font-weight:normal; color:#dddddd; }

	li 		{ text-shadow:-1px -1px 1px black, 1px 1px 2px black; }
	.boxshadw	{ box-shadow:-1px -1px 1px black, 1px 1px 1px black, 2px 2px 4px black, 4px 4px 8px black, 8px 8px 16px black; }

	.bo
	{
		border-collapse:collapse;
	}
	.boxx
	{
		outline:1px none seagreen;
		position:relative;
		display:inline-table;
		height:auto;
	}
	.boxxx
	{
		outline:1px none skyblue;
		position:relative;
		display:inline-table;
		width:49.7%;
		max-width:362px;
		min-width:290px;
		height:auto;
		margin:4px;
	}
	.boxxxx
	{
		outline:1px none white;
		position:relative;
		display:inline-table;
		width:200px;
		height:200px;
		vertical-align:middle;
		margin:4px;
	}
	.flo_lbl
	{
		outline:1px none yellow;
		dosplay:block;
		position:relative;
		padding:10px;
		font-size:8px;
		text-align:center;
		text-shadow:-1px -1px 1px black, 0px 0px 2px black, 1px 1px 3px black, 2px 2px 6px black;
	//	z-index:0;
	}
	.bgr
	{
		font-size:10px;
	}
	.flo_vid
	{
		outline:1px solid dimgray;
		width:100%;
		height:auto;
		max-width:644px;
		max-height:auto;
		margin:4px;
	}
	.flo_map
	{
		outline:1px none white;
		width:100%;
		height:auto;
		max-width:370px;
		margin:4px;
	}
	.flo_pic
	{
		outline:1px none orange;
		width:100%;
		height:auto;
		max-width:220px;
		max-height:220px;
		margin:4px;
	//	z-index:3;
	}
	.boxgrow
	{
		transform: scale(1.0);
		transition-timing-function: linear;
		transition: all 1s;
		z-index:0;
	}
	.boxgrow:hover
	{
		transform: scale(1.2);
		transition-timing-function: linear;
		transition: all 1s;
		z-index:2;
	}
-->