body {
		background-color: rgb(0, 0, 0);
		border: 0px;
		padding: 0px;
		margin: 0px;

		font-family: Helvetica, sans-serif;
		font-size: 9pt;
		color: #ffffff;

		overflow: hidden;
	}
	div, table, tr, td {
		padding: 0px;
		margin: 0px;
	}
	.white {
		background-color: #ffffff;
		color: #333333;
	}

	/* fonts via: https://fonts.google.com/specimen/Karma?category=Serif,Display,Handwriting&sidebar.open&selection.family=Karma:wght@300;500|Open+Sans	*/

	/* ------------------------------------- */

	.small { font-size: 11px; }
	.normalsized { font-size: 14px; }
	.red { color: #ff0000; }
	.dimmed { opacity: .25; }
	.disabled {
		opacity: .15			 	!important;
		pointer-events: none		!important;
	}
	input:disabled { opacity: .25; }
	select:disabled { opacity: .25; }
	.floatleft { float: left; }
	.floatright { float: right; }
	.stickright { position: absolute; right: 10px; }
	/* .verticalCentre { position: absolute; top: 50%; transform: translateY(-50%); }	*/
	.clearfloat { clear:both; }
	.hidden { visibility:hidden; }
	.highlight { background-color: #00dead; }			/* #eeee33	*/

	.textright {
		width: 100%;
		text-align: right;
	}

	.bigbold {
		font-family: Helvetica, sans-serif;
		font-size: 19pt;
		font-weight: 400;
		margin-right: 10px;
	}

	/* ------------------------------------- */

	textarea, select, input, button {
		outline: none;
		cursor: pointer;
	}
	canvas:focus { outline: none; }

	a, a:visited {
		text-decoration: none;
		border: none;
		color: #999999;
	}
	a:hover {
		text-decoration: underline;
		color: #ffffff;
		cursor: pointer;
	}
	.white a:hover { color: #000000; }

	.button {
		display: inline-block;
		border: 1px solid #999999;
		border-radius: 4px;
		padding-left: 10px;
		padding-right: 10px;
		color: #999999;

		cursor: pointer;
		pointer-events: inherit;
	}
	.button:hover, .button_on {
		/* background-color: rgba(225, 225, 225, 0.9);	*/
		color: #ffffff;
	}
	.white .button:hover, .white .button_on { color: #000000; }

	.dropdown {
		background-color: rgb(0, 0, 0);

		font-family: Helvetica, sans-serif;
		font-size: 9pt;
		color: #999999;
	}
	.dropdown:hover { color: #ffffff; }
	.white .dropdown:hover  { color: #000000; }

	video:focus { outline: none; }

	/* scrollbars - firefox */
	* {
	  scrollbar-width: thin;
	  scrollbar-color: #000000 #ffffff;
	}

	/* scrollbars - chrome/edge/safari */
	*::-webkit-scrollbar { width: 12px; }
	*::-webkit-scrollbar-track { background: #000000; }
	*::-webkit-scrollbar-thumb {
	  background-color: #000000;
	  border-radius: 20px;
	  border: 1px solid #ffffff;
	}












	/* ------------------------------------- header/footer */ 

	#header {
		position: fixed;
		left: 0px;
		top: 0px;
		right: 0px;
		height: 30px;

		/*overflow-y: visible;
		overflow-x: hidden;		allows flow down, but not wrap */
		white-space: nowrap;

		background-color: rgba(0, 0, 0, 0.7);
		border-bottom: 1px solid #ffffff;

		padding: 10px;
		padding-left: 15px;

		font-size: 19pt;
		color: #ffffff;	
	}

	#footer {
		position: fixed;
		left: 0px;
		bottom: 0px;
		right: 0px;
		height: 20px;

		white-space: nowrap;

		background-color: rgba(0, 0, 0, 0.8);
		color: #999999;
		border-top: 1px solid #333333;

		padding: 10px;
		padding-left: 15px;
		color: #ffffff;

		z-index: 10;
	}
	/*
	#subsubheader {
		color: #ffffff;
		font-family: Helvetica, sans-serif;
		font-size: 9pt;
		padding-left: 25px;
	}		*/

	/* ------------------------------------- side menu

	#menubar {
		position: fixed;
		left: 0px;				
		top: 50px;
		width: 250px;		

		bottom: 0px;

		padding: 15px;
		padding-top: 0px;

		background-color: rgba(0, 0, 0, 0.9);
		border-right: 1px solid #ffffff;

		font-family: Helvetica, sans-serif;
		font-size: 11pt;
		color: #ffffff;

		z-index: 11;

		transition: left 0.5s ease-in;
	}
	#menubarinner {
		width: 100%;	
		height: 100%;
		padding-right: 8px;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.notransition { transition: none; }
	.menuOff { left: -290px 		!important;	}	// 250px width + 15px padding each side = 280px.
	#matt { 
		width: 265px;
		display: inline;
		overflow: hidden;
		float: left;
		transition: width 0.5s ease-in;
	}
	.mattOff { width: 0px !important; }

	.menuitem {
		display:block;
		padding-top: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid #333333;
		width: 100%;
		color: #ffffff;
	}
	.menuitem a {
		margin-left: 10px;
	}
	.menuitem_on > a, .menulink_on {
		text-decoration: underline 	!important;
		color: #ffffff 				!important;
	}

 */ 





	/* ------------------------------------- blog pages */
	
	#blogouter {
		position: absolute;
		top: 70px;
		left: 20px;
		bottom: 20px;
		right: 10px;
		
		overflow-y: auto;
		
		padding-right: 20px;
	}
	
	#blogpage {
		position: absolute;
		/* overflow-y: auto;	*/
		top: 0px;
		right: 15px;
		bottom: 0px;
		width: 700px;
		
		font-size: 14pt;
	}
	
	#blogpage p, #blogpage h2 { 
		max-width: 650px; 
		padding-left: 15px;
		padding-right: 5px;
	}
	
	#blogpage p { 
		padding-left: 30px;
		padding-right: 45px;
	}
	
	#blogpage .author {
		font-size: 11px;
		padding-left: 15px;
		margin-top: -10px;
		margin-bottom: 35px;
	}









	/* ------------------------------------- card pages - to be overridden */

	#cardholder {
		position: absolute;
		top: 65px;
		left: 20px;
		right: 10px;
		bottom: 0px;

		overflow: hidden;
		overflow-y: auto;
		padding-right: 10px;
	}
	.card {
		float: right;
		/* width: 500px;
		height: 280px;	*/

		margin: 0px;
		margin-left: 5px;
		margin-top: 5px;

		border: 1px solid #333333;
		width: fit-content;
		height: fit-content;
	}
	iframe {
		width: 500px;
		height: 280px;	
		border: none;
	}	

	.card > img, .card > video, .card > iframe {
		max-width: 500px;
		max-height: 500px;
		object-fit: contain;
	}
	.subcard img, .subcard video, .subcard iframe {
		max-width: 45%;
	    height: 150px;
	    margin: 10px;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.textcard {
		max-width: 460px;
		padding: 20px;
	}
	.textcard p {
		font-size: 14px;
		padding-left: 20px;
		width: 90%;
		text-align: left;
	}

	.titlecard {
	    font-size: 64px;
	    width: 480px;
	    padding: 10px;
	}


	/* ------------------------------------- big vid pages */
	
	.bigvid {
	  position: relative;
	  padding-bottom: 56.25%;		/* 720/1280	*/
	  left: -10%;
	}

	.bigvid iframe, .bigvid object, .bigvid embed {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 120%;
	  height: 120%;
	}








	/* ------------------------------------- devices / small screens */ 

	@media only screen and (max-device-width: 480px) {
		#menubar {
			width: 100%;
		}
		.menuOff { left: -110% !important;	}
		#matt {
			width: 110%;
		}

		#footer {
			padding-top: 5px;
		}


		#cardholder {
			left: 10px;
			right: 10px;
			padding-right: 0px;
		}
		.card {
		}
		iframe {
			width: 500px;
			height: 280px;	
			border: none;
		}	

		.card img, .card video, .card iframe {
			max-width: 360px;
			max-height: 360px;
		}

		.bigvid {
			top: 60px;
		}
	}