/* STANDARD HTML TAG RESET */
/* basic font size for Firefox / Chrome / Chromium / Opera: 12pt (= 1em = 4.2333mm) */
html {margin:0; padding: 0; height:100%; width: 100%; font-size: 10pt;}
/* 10pt as a basis unit: 1em = 0.3528mm */

body, h1, h2, h3, h4, p, ul, li, form {
  border:  0px;
  margin:  0px;
  padding: 0px;
	background-color: #FFFFEE;
}
/*
body {
  background-color: #FFDD77;
  background-image: url("../content/schachbrett.png");
  background-size: 5em;
  background-repeat: repeat;
  background-blend-mode: darken;  
}*/

h1    { font-family: helvetica, arial, geneva, sans-serif;
		      font-size: 22pt; font-weight: bold; }
h2    { font-family: helvetica, arial, geneva, sans-serif;
			  font-size: 18pt; font-weight: bold; }
h3    { font-family: helvetica, arial, geneva, sans-serif;
			  font-size: 16pt; font-weight: bold;
        margin-top: 0.25ex;  
      }
h4    { font-family: helvetica, arial, geneva, sans-serif;
			  font-size: 14pt; font-weight: bold; font-style: italic; 
        margin-top: 0.15ex;  
      }

p, li { border:  0px;
        margin:  0px;
        padding: 0px;
      }
ul    { padding-left: 1em;
      }
body	{ font-family: arial, helvetica, geneva, sans-serif; }
form  { font-family: arial, helvetica, geneva, sans-serif;
         padding: 1pt; margin: 1pt; display: inline;
      }
input, textarea, select		
      { font-size:10pt; font-family: Verdana, sans-serif;
        font-weight:normal; color:#0000FF;
        background-color:#DAEADA;
      }
input[type=submit], input[type=button]
      { background-color:#CCCCCC;
      }
input[type=radio] 
      { background-color:transparent;
      }
pre	  { font-family: arial, helvetica, geneva, sans-serif;
        font-size: 7pt;
			  background-color: #CCCCCC;
      }
table { border: 0px none #000000; border-collapse: collapse;
        vertical-align: top;}
th    { font-family: arial, helvetica, geneva, sans-serif; 
        font-size: 80%; font-weight: bold; background-color: #D3DCD3;
        text-align: left;  
        background-repeat: no-repeat; background-position: right;
      }
td    { font-family: arial, helvetica, geneva, sans-serif; 
        font-weight: lighter; }
legend{ margin: 10px; border: 1px solid black; 
        padding:3px; font-weight:bold;
        background-color: #EEEEFF;
      }      
hl    { font-family:Times; font-size:25pt; color:#000000;
				background-color:#2cb6d2; margin-right:0pt }

a     { color: blue; font-family: inherit;
        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; }

/* setup Page Frames */
/* Display properly on mobile devices */
@media screen and (max-width: 40.5em) {
  .killOnMobile {
    display: none; 
  }
} 

div#pgtop {
		border: 0px solid yellow;
		background-color: lightgreen;
}
div#pgcontent {
		border: 0px solid black;
}
div#pgleft {
		border: 0px solid red;
    float: left;
		width: 20%; height: auto;
} 

div#pgbody {
		border: 0px solid green;
		margin-left: 20%;
		height: auto;
}
  
div#pgbodycnt {
		color:#000022;
		position: absolute;      
		margin-left: 20%;
    bottom: 20%;
    padding: 1em;
    background-color: #FFFFEE;	
    overflow-y: auto;
    /* border: 1px dashed blue; */
    width: 55%;
}
div#pgbtns {
    color:#000022;
		position: absolute;      
    bottom: 10%;
		right: 5%;
    background-color: #FFFFEE;
    /* border: 1px dashed blue; */
}

div#pgfooter {
		position: absolute; bottom: 0px; width: 99.5%; clear:both;
		border: 2px solid red;
		background-color: lightgreen;
    font-size:13pt; font-family: Verdana, sans-serif;
		text-align: center;
}

@media screen and (max-width: 40.5em) {
  div#pgbody {		
		margin-left: 0px;
    margin-right: 0px;
    opacity: 0.8;
  }
  div#pgbodycnt {
    left: 0;
    right: 0;    
    top: 8em;
    margin-left: 0px;
    width: auto;
    bottom: auto;    
  }
  div#pgbtns {
    top: 2%;
		right: 0;
    left: 0;
    padding: 0.5em; 
    bottom: auto;
    text-align: center;
  }
}

div#canvasError {
  z-index: 200;
  position: absolute; bottom: 0px; width: 99.2%; clear: both;
  border: 2px solid red; 
	background-color: lightgreen;
  font-size:13pt; font-family: Verdana, sans-serif;
	text-align: center;
  visibility: hidden;
}

canvas#pgcvleft  {
	position: absolute;
	z-index: -1;
	top:0px; left: 0px;
	/* width: 100px; height: 100px; */ 
}
canvas#pgcvbody  {
	position: absolute;
	z-index: -1;
	top:0px; left: 20%;
	/* width: 100px; height: 100px; */ 
}

ul#btn_ul {
  display: inline;
  list-style-type: none;
}
ul#btn_ul li {
  display: inline-block;
  margin: 2px;
  margin-bottom: 1em;
  padding: 2px 12px 7px 12px;
  border-radius: 6px;
  background-color: #7777FF;
  /*-moz-box-shadow:    0px 0px 0px 3px #999;*/
  /* -webkit-box-shadow: 0px 0px 0px 3px #999;*/
  box-shadow:         2px 2px 2px 2px #999;
} 


/* dedicated styles */


/* front page fonts */
@font-face {
    font-family: 'SFCartoonistHandRegular';
    src: url('SF_Cartoonist_Hand-webfont.eot');
    src: url('SF_Cartoonist_Hand-webfont.eot?#iefix') format('embedded-opentype'),
         url('SF_Cartoonist_Hand-webfont.woff') format('woff'),
         url('SF_Cartoonist_Hand-webfont.ttf') format('truetype'),
         url('SF_Cartoonist_Hand-webfont.svg#SFCartoonistHandRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.cartoonLarge {
  font-family: SFCartoonistHandRegular, helvetica, arial, geneva, sans-serif;
  font-size: 24pt; 
 /*  text-shadow: -1px -1px 0px #101010, 2px 2px 0px #505050; */
  text-shadow: 2px 1px 0px #90C090;
}
.cartoonMed {
  font-family: SFCartoonistHandRegular, helvetica, arial, geneva, sans-serif;
  font-size: 18pt; 
 /*  text-shadow: -1px -1px 0px #101010, 2px 2px 0px #505050; */
  text-shadow: 2px 1px 0px #90C090;
}
.cartoon, .login_desc {
  font-family: SFCartoonistHandRegular, helvetica, arial, geneva, sans-serif;
  font-size: 16pt; 
}

br.small  { line-height: 4pt; }

/* logon form styles */
#loginDiv h1 {
  font-family: SFCartoonistHandRegular, helvetica, arial, geneva, sans-serif;
  font-size: 24pt; text-shadow: 2px 1px 0px #90C090; font-weight: normal; 
}
#loginDiv td {padding: 0.5ex;}

/* Wildkamera */
.wild {
  display: block;
  margin-bottom: 2px;
}

@media screen and (orientation:portrait) {
  .wild {
    width: 100%;  
  }
}
@media screen and (orientation:landscape) {
  .wild {
    width: 30%;
  }
}

div.Datum {
  background-color: #90C090;
  color: white;
  text-align: center;
}