//reset reloaded - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
//html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td

//html, body, div, nav, span, h1, h2, h3, h4, p, pre, a, code, img, b, u, i, ol, ul, li, form, table, tbody, tr, th, td, mark
*
{
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
//	font-family: inherit;
	font-family: Sys1;
	line-height: 100%;
	vertical-align: baseline;

	outline: 0;

//background:inherit;
//background-image: none;
//"inherit" inherits from html/body with stretched background - nav buttons will stretch their pictures. so its bes to set to <initial>
background:initial;
background-color: transparent;
//	background-color: inherit;
//	background-position-x: inherit;
//	background-position-y: inherit;
//	background-repeat: inherit;
//	background-attachment: inherit;
//	background-image: inherit;
//	background-size: 100% 100%;

}

html
{
	width: 100%;

	color:black;

//	background-color: red;

//	background-image: url("/pic/bkgnd2.png");

	background-size: 400px 400px;

	background-repeat: repeat;
	background-position: left top;

	background-attachment: fixed;

}


body
{
	width: 100%;

	font-family: "Sys1";
//	font-family: "Sys1", "Segoe UI", Arial;
//	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Ubuntu,"Helvetica Neue",Oxygen,Cantarell,sans-serif
//	font-weight: 400;

	font-size: 16px;


	
	
//	background-color: var(--text-color-background);

}




div, nav
{
	overflow:hidden;
//background-color: white;
//background:inherit;
	margin:0;
	padding:0;

	
}

form
{
	line-height: 190%;
	//background: rgba(255, 255, 255, 0.5) ;
	
	border:1px solid #E0E0E0;
	padding:5px;
}

table
{
	border-spacing: 0;
	border-collapse: collapse;

}
table td
{
	vertical-align: top;
}

input, select
{
	border: 1px solid #E0E0E0;
	padding-left: 5px;
	padding-right: 5px;
	line-height: 150%;
	cursor: pointer;
}

input[type=button], input[type=submit]
{
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 5px 8px;
  margin-top: 5px;
    margin-bottom: 5px;
///  text-decoration: none;
//  margin: 4px 2px;
//  cursor: pointer;
}


input[type="button"]:disabled, input[type="submit"]:disabled
{
  background-color: #E0E0E0;
}

@font-face
{
	font-family: 'Sys1';
	font-style: normal;

	font-weight: 300;

//	src: url('/font/OpenSans-Light.ttf');
//	src: url('/font/FiraSans-Light.ttf');
//	src: local('Segoe UI'), url('/font/Roboto-Light.ttf');
//	src: url('/font/Ubuntu-Regular.ttf');
//??	src: url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

//	src: local('.SFNSText-Light'), local('.HelveticaNeueDeskInterface-Light'), local('.LucidaGrandeUI'), local('Ubuntu Light'), local('Segoe UI Light'), local('Roboto-Light'), local('DroidSans'), local('Tahoma');
//	src: url('/font/Montserrat-Light.ttf'), local('.SFNSText-Regular'), local('.HelveticaNeueDeskInterface-Regular'), local('.LucidaGrandeUI'), local('Ubuntu'), local('Segoe UI'), local('Roboto-Regular'), local('DroidSans'), local('Tahoma');
	src: local('.SFNSText-Regular'), local('.HelveticaNeueDeskInterface-Regular'), local('Segoe UI'), local('Segoe UI Light'), local('.LucidaGrandeUI'), local('Ubuntu'), local('Roboto-Regular'), local('DroidSans'), local('Tahoma');


//system fonts stack on all oses
//https://gist.github.com/duncanwilcox/2d7aace1d9928c464240a197f9b4416d



// G page insights: Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.
//https://stackoverflow.com/questions/55677376/what-is-font-display-css-feature
	font-display: swap;

}





//a
//{
//	text-decoration: none;
//	color: inherit;
//	font-style: normal;
//	font-weight: normal;
//}

//no decoration and body color (black by default)
//navigation and main_content have dedicated stylings
//a:link, a:visited, a:hover
//{
//	text-decoration: none;
//	color: #1070C0;
//	font-style: normal;
//	font-weight: normal;
//}
a[href]
{
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
	color: #1070C0;
}
a:hover
{
//	color: #0000FF;
	text-decoration: underline;
	text-underline-offset: 4px;
}




ul, ol
{
	margin-left: 15px;
	margin-right: 15px;
}

li
{
	padding: 5px;
	line-height: 1.5em;
}

b
{
	font-weight: bold;
}

p
{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	text-align:justify;
	line-height: 25px;
}


h1, h2, h3, h4, h5
{
	font-weight: 400;
}

h1
{
	font-size: 28px;
	margin-top: 15px;
	margin-bottom: 25px;
}

h2 
{
	font-size: 24px;
	margin-top: 30px;
	margin-bottom: 10px;

	scroll-margin-top: 50px;
}

//h2:not(:first-child)
//{
//	margin-top: 50px;
//}

h2:not(:nth-of-type(1))
{
	background: linear-gradient(#A0A0A0, #A0A0A0) top center / 50px 1px no-repeat;
	padding-top:30px;
}



h3 
{
	font-size: 22px;
        margin-top: 30px;
	margin-bottom: 10px;
}

h4 
{
	font-size: 20px;
	margin-top: 20px;
	margin-bottom: 10px;
	opacity:0.6;
}


h5
{
	font-size: 18px;
	margin-top: 5px;
	margin-bottom: 2px;
}





p b
{
	font-style: normal;
	font-weight: bold;
}


img
{
	border:0px;
	padding: 2px;

//auto scaling - https://www.w3schools.com/css/css_rwd_images.asp
	max-width: 100%;
	height: auto;
}

table img
{
	border:0px;
	padding: 2px;
	margin-bottom: 0px;
}






.dt
{

	margin:0;

//bckground-color: rgba(255, 255, 255, 0.5);

}
.dt td, .dt th
{
	padding: 4px;

	border-style: solid;
	border-width: 1px;
	border-color: #C0C0C0;

	vertical-align:top;
}
.dt th
{
	font-weight: bold;
}



//a responsive list of properties in <ul>

.proplist
{
	display:inline-block;

	padding:0;
	margin:0;

	padding-left:10px;

	margin-top:10px;
	margin-left:10px;


	overflow:hidden;

	vertical-align: top;

	border-left: 1px solid #00C947;
}

.proplist h4
{
	margin-top:0;
}












.clear
{
	clear:both;
}


code
{
	display:block;

//does not mean anything because left-top are not set. this defines the positioning parent for the "code expand" button inside the code block
//!no, it changes z-order. something with float:right will be covered by the <code> block
	//position:relative;


	

//top-right-bottom-left
	padding: 0px 10px 0px 10px;
	
	border-style:none;


	border-left: 3px solid #00C947;

	margin-top: 5px;
	margin-bottom: 5px;


//	width:80%;
	width:auto;
//	max-width:95%;



//	overflow-x:auto;

	font-family:monospace;
	font-size: 14px;
	line-height: 16px;

	background-image: url("/pic/code-bkgnd.png");
	background-position: left top; 
	background-repeat: repeat;


//	white-space:pre;
	white-space: pre-wrap;
}


code span
{
//	color: #608060;
	color: #60C060;
}






:target
{
//	animation-name: trg;
//	animation-duration: 1s;
//	animation-iteration-count: 3;
}

//@keyframes trg
//{
//	50% filter: brightness(20%);
//	50%  {background-color:#E0FFE0;}
//	50% {filter: sepia(0.8);}
//	50%  {background-color:#808080;}
//	50%  {color:#808080;}
//	50% {filter: invert(80%);}
//}



.warning
{
	border: 2px solid #F0F0F0;
	padding: 15px;
	background: rgba(250, 250, 250, 1) ;

	margin:0;
	margin-top:20px;
	margin-bottom:20px;
	
	border-radius: 0px;
}
.warning p
{
	margin: 0;
}
.warning li
{
 	margin-bottom:10px;
}

[data-theme~='dark'] .warning
{
	border: 2px solid #A0A0A0;
	background: rgba(50, 50, 50, 1) ;
}






//.iframe-container
//{
//	position: relative;
//	overflow: hidden;
//	width: 100%;
//	padding-top: 56.25%;
////16:9 Aspect Ratio
//}


//.iframe-container iframe
//{
//	position: absolute;
//
//	width: 100%;
//	height: 100%;
//
//	top: 0;
//	left: 0;
//
//}

[data-theme='medium dark'] .iframe-container iframe
{
	filter: brightness(60%);
}
[data-theme='dark'] .iframe-container iframe
{
	filter: brightness(40%);
}




//.rightpic
//{
//	float: right;
//	margin: 0px 0px 0px 10px;
//	padding: 6px;
//	border-radius: 5px;
//}

.leftpic
{
	float: left;
	margin: 10px;
	
	padding: 16px;
	padding-left: 5px;
	border-radius: 5px;
}



.hpic
{
	float: left;
	margin-right: 10px;
	padding: 6px;
}


.pic
{
	float: none;

	margin: 10px 10px 10px 0px;

	border-radius: 5px;
}

//.rightpic,
.leftpic, .pic, .hpic
{
    display: flex;
    flex-flow: column;
}




//the same media in the layout.css - manually sync both!
@media  (max-width: 1000px), (max-height: 600px), (hover: none), (pointer: coarse)
{
	.hpic
	{
	display:none;
	}
}

/* TEST
//code collapsing with checkboxes
input[type="checkbox"] + label+code
{
    display:block;
    overflow:hidden;
    height:80px;
}
input[type="checkbox"]:checked + label+code
{
    height:auto;
}
*/