/* this stylesheet provides basic assignments to the full viewport, the
   Body tag and a header and footer section.
   The main part for displaying data is to be styled with flex: 1;   */
/* STANDARD HTML TAG RESET */
/* basic font size for Firefox / Chrome / Chromium / Opera: 12pt (= 1em = 4.2333mm) */
/*
body, h1, h2, h3, p, ul, li, form {
  border:  0px;
  margin:  0px;
  padding: 0px;
}
*/
html {margin:0; padding: 0; height:100%; width: 100%; font-size: 10pt;}
/* basic font size for Firefox / Chrome / Chromium / Opera: 
    12pt (= 1em = 4.2333mm) 
    10pt as a basis unit: 1em = 0.3528mm  choosen here */
body { display: flex; 
  flex-direction: column;   /* creates a stacked layout: headline, search, bwrp, footer */
  height: 100vh;
  background-color: #FFFFEE; 
  margin: 0 auto;
  padding: 0;  /* must be 0 to avoid scrollbars */
  font-family: "DejaVu Sans Condensed", arial, helvetica, geneva, sans-serif;
  /* border not allowed to avoid scrollbars. add a body > div {margin}  
     box-model might be changed... */
}
body > div {  /* takes care of a common margin to the viewport: double between flex items */
  margin: 0.5ex;
}
h1, h2, h3, h4 {  margin-top: 1ex;  margin-bottom: 0.3ex; }
h1    { font-family: helvetica, arial, geneva, sans-serif;
		    font-size: 1.83em; font-weight: bold }
h2    { font-family: helvetica, arial, geneva, sans-serif;
			  font-size: 1.5em; font-weight: bold }
h3    { font-family: helvetica, arial, geneva, sans-serif;
			  font-size: 1.33em; font-weight: bold }
h4    { font-family: helvetica, arial, geneva, sans-serif;
			  font-size: 1.16em; font-weight: bold; margin-bottom: 10px; }
p, li { border:  0px;
        margin:  0px;
        padding: 0px; }
ul    { padding-left: 1em; }
form  { padding: 0.25em; margin: 0.25em; display: inline; }

button, input[type=button], input[type=submit] {
  background-color: white;  
  border: 1px solid grey; 
  margin-bottom: 1px; margin-top: 1px; 
  border-radius: 5px; 
  box-shadow: 1px 1px #999;
}
input[type=text], input[type=password], textarea {
  appearance: none;
  background-color: white;  
  border: 1px solid grey; 
  margin-bottom: 1px; margin-top: 1px;
  padding-bottom: 2px;
  outline: 0;
}
select {
	border-radius: 0;
}
input[type=text]:focus, input[type=text]:focus, textarea:focus, select:focus {
  /* appearance: none; */
  border: 1px solid black;
  box-shadow: -1px -1px #38e inset;
  outline: 0;
}

button:hover, input[type=button]:hover, input[type=submit]:hover {
  background-color: aliceblue;
}
button:active, input[type=button]:active, input[type=submit]:active {
  box-shadow: 0 0 #999;
  transform: translate(1px, 1px);
}
legend {
  border: 1px solid blue;
  background-color: white;
  padding:0.25ex 1ex;
  font-weight: bold;
  text-align: left; 
  margin-top: 0.3ex;
}

@media screen and (max-width: 41em) {
  .killOnMobile {
    display: none; 
  }
}  

table {
  border-collapse: collapse;
}
td {
  vertical-align: top;
  border-collapse: collapse;
}
fieldset {
  border: 1px solid blue; width: auto;
  padding: 6px;  
  margin-bottom: 1.5ex;
}

hl    { font-family:Times; font-size:25pt; color:#000000;
				background-color:#2cb6d2; margin-right:0pt }

a     { font-size: 14px; color: blue; font-weight: normal;
        text-decoration: underline; }
a:link    { text-decoration: underline; }
a:visited { text-decoration: underline; }
a:active  { text-decoration: underline; }
a:hover   { text-decoration: underline; color: black; }
a:focus   { text-decoration: underline; }

/* Styles for the html skeleton */
/*--- headline ---*/
div#headline {
  display: flex; /* create a flex container */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  border-radius: 10px; 
  background-color: white; 
  border: 1px solid #2CB6D2; 
}
div#headline.master{ 
  background-image: url("../resources/scope_master.png"); 
  background-repeat:    no-repeat;
  background-position:  50% 100%;
  border: 1px solid #FF9531; 
}
div#headline.local { 
  background-image: url("../resources/scope_local.png"); 
  background-repeat:    no-repeat;
  background-position:  50% 100%;
  border: 1px solid #2CB6D2; 
}
div#headline div {  /* formatting of all divs within headline */
  flex: 0 1 auto;
  padding-left: 1ex; padding-right: 1ex;
}
div#headline div.gs { /* global storage, unvisible */
  visibility: hidden; 
  padding: 0; margin: 0;
}
div#headline div.spacer {  /* div that gains space */
  flex: 5 1 auto;  
}
div#headline h1 { 
  font-family: helvetica, arial, geneva, sans-serif;
	font-size: 16pt; font-weight: bold;
	margin: 1px 1px 1px 0.5em; }
@media screen and (max-width: 41em) {
  div#headline h1 {
  	font-size: 9pt; font-weight: bold;    
  }
}  
div#headline a:link , div#headline a:visited {
  text-decoration: none; 
}
div#headline a.lol_bg  { 
  color:LightPink; font-size: 30pt; 
  text-decoration: none; }
div#headline img { 
  border: 0pt solid black;
	max-height: 45px; }
div#headline.lol_sm { 
  color:LightPink; font-size: 7pt; 
  text-decoration: none; }
div#headline.infotxt { 
  color:black; font-size: 7pt; 
  text-decoration: none; }
div.error	{  
  border: 2px solid red;
	font-weight: bold; background-color: #D3DCD3;
	min-width: 400px; padding: 1ex; width: 400px;
}
/*
div#headline div#warning {
  position: relative;  
  height: 45px;
  width: 45px;
  overflow:hidden;
  background-image: url("../resources/warning.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 45px, 45px;
}
div#headline div#warning:hover {
  position: absolute;
  top: 10px;
  right: 10px;  
  width: 500px;
  height: 200px;
  border: 1px solid red;
  overflow-y: auto;
}
div#headline div#warning div#warningtxt {
  background-color: blue;
  color: white;
  height: 100%;  
}
*/

/*--- Suche / #search ---*/
div#search { 
  flex: 0 1 auto;  /* flex behavior of search div */  
  display: flex; flex-direction: row; justify-content: space-between; align-items: center;
  margin-bottom: 8px; 
  border-radius: 10px; border: 1px solid #000000; 
  background-color: #CCCCFF;
  background-image: url("../resources/search.png");
  background-repeat: no-repeat; background-position: 1ex center;
  padding: 4px; padding-left: 40px; /* line-height: 25px; */
}
div#search input {
  flex: 0 1 auto;
  margin: 0.2ex; vertical-align: middle;
	background-color: white; 
  height: 24px; padding: 0 10px 0 10px;}
div#search button {
  flex: 0 1 auto;
  margin: 0.2ex; vertical-align: middle; 
	height: 24px; padding: 0 10px 0 10px;
  background-color: white;  
}
div#search button:hover, div#search input[type=button]:hover, div#search input[type=submit]:hover {
  background-color: aliceblue;
}

div#search div.spacer {  /* div that gains space */
  flex: 5 1 auto;  
}

/*--- body wrapper / #bwrp ---*/
div#bwrp {
  flex-grow: 1;
  display: flex; flex-direction: row; align-items: stretch;
  margin: 0px; padding: 0px; border: 0px solid black; /* verduften! */
}
@media screen and (max-width: 41em) {
  /* for handy, we change from row to column */
  div#bwrp {
    flex-direction: column;
  }
}  
/*--- left side menu / #menu ---*/
div#menu {
  flex: 0 1 auto;   /* flex behavior of menu div: do not expand */  
}

/*--- content wrapper / #conttwrp ---*/
div#conttwrp {
  flex: 1 1 auto;  /* flex behavior of conttwrp div: expand and shrink */ 
  display: flex; flex-direction: column; align-self: stretch;
  margin: 0px; padding: 0px; border: 0px solid black; /* verduften! */
}

/*--- filter line / #filter ---*/
div#filter { 
  flex: 0 1 auto;  /* flex behavior of filter div: shrink */   
  border-radius: 10px; border: 1px solid black; 
  background-color: #CCCCFF;
  background-image: url("../resources/filterOn.gif");
  background-repeat: no-repeat; background-position: 8px 4px;
  padding: 4px; padding-left: 40px; line-height: 25px;
  margin-bottom: 0.5ex;
}
div#filter input {margin-right: 3px; margin-left: 3px; vertical-align: middle;
	/* background-color: white;  */
  height: 24px; }
div#filter button {
  margin-right: 3px; margin-left: 3px; vertical-align: middle;
	height: 24px; /* width: 26px; */ padding: 0 1px 0 1px;
}

/*--- content box / #contt ---*/
div#contt { 
  flex: 1 0 auto;  /* flex behavior of content: shall grow */   
  flex-basis: 0;  /* this causes the container to stop at the footer and scroll content inside */
  align-self: stretch; 
}

/*--- content box lightbox ---*/
div#overlay {
  position: fixed; top: 0px; left: 0px; 
  height:100%; width:100%; 
  background-color: rgba(0,20,0,0.75);   
  z-index: 20;
}

/*--- footer ---*/
div#footer {
  /* is a flex item; hence position accordingly; auto will give all space possible */
  flex: 0 1 auto; 
  margin-top: auto;
  display: flex; /* create a flex container */
  flex-direction: row;
  justify-content: space-between; 
  border-radius: 5px; border: 1px solid #2CB6D2; 
  border: 1px solid green;    
  background-color: #DDFFDD;     
}

div#footer > div {
    flex: 0 1 auto;    
    padding-left: 1ex; padding-right: 1ex;
}