@charset "utf-8";
*{
	border-radius: 5px;
	}
html{
	width: 100%;
	height: 100%;
	overflow:hidden;
	}
body{
	width: 100%;
	height: 100%;
	background:
	    linear-gradient(172deg, 
			rgba(100,100,200,0.2) 0%, 
			rgba(150,100,100,0.3) 50%, 
			rgba(100,100,250,0.7) 100%),
    	url(img/bg_1.png) 0 0;
	background-size: 100% 100%;
	font-size: 12pt;
	font-family: "Arial", "Lucida Grande", "sans-serif";
	color: rgb(0,0,0);
	padding: 0;
	margin: 0;
	}
td, th{
	overflow:hidden;
}
h1{
	margin: 0;
	margin: 0;
	font-size: 1.4em;
	color: rgb(255,255,255);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-shadow: 3px 3px 5px rgb(0,0,50);
	margin-top: 0;
	}
h1::first-letter{
	font-size: 1.5em
	}
h2{
	font-size: 1.2em;
	color: rgb(200,200,200);
	letter-spacing: 0.08em;
	text-shadow: 3px 3px 5px rgb(0,0,50);
	}
h3{
	margin: 0;
	border-top: 1px solid rgb(0,0,0);
	border-bottom: 1px solid rgb(0,0,0);
	font-size: 1.1em;
	color: rgb(0,0,0);
	letter-spacing: 0.08em;
	text-align:center;
	}
hr{
	height: 2px; 
	border: none; 
	background: linear-gradient(90deg, rgb(255,255,255) 0%, rgba(0,0,0,0.1) 50%, rgb(255,255,255) 100%); 
}
input::placeholder {
  color: rgb(255,100,100);
  font-weight:normal;
}
input:out-of-range {
    background: linear-gradient(0deg, rgb(255,0,0) 0%, rgb(243,255,0) 50%, rgb(255,0,0) 100%);
    border: 2px double rgb(255,255,255);
}
summary{
	border-top: 2px solid rgb(128,128,128);
	font-size: 20pt;
	width: 98%; 
}
summary::marker{
  content:  "+ ";
  font-size: 25pt;
  color: rgb(200,0,0);
  cursor: pointer;
  display: inline;
}
details[open] summary::marker {
	content:  "− ";	
  font-size: 25pt;
  color: rgba(0,200,0);
  cursor: pointer;
  display: inline;
}
#content{
	position: fixed;
	top: 35px;
	bottom: 3px;
	left: 3px;
	right: 3px;
	overflow:auto;
	}
#IL, #Ergebnis, #Klausur, #AW{
	margin-left: 10px;}
a{
	text-decoration:none;
	cursor:pointer;
	color: rgb(200,200,200);
	margin-left: 2px;
	margin-right: 2px;
}
a:active{
	text-shadow: 0 0 rgb(0,0,0);
	}
.data_clk, a{
	box-shadow: 3px 3px 3px #222;
	}
.data_clk:active, a:active{
	box-shadow: none;
	}
.hidden_input{
	border: 2px transparent solid;
	background: transparent;
	width: 90%;
	}
.table{
	display: block;
	}
.table-row{
	display: block;
	white-space: nowrap;
	border: none;
	vertical-align: middle;
}
input, select, .table-row, textarea{
	color: rgb(0,0,0);
	border: 1px solid #000;
	cursor:pointer;
	}

.table-cell, .form_element {
	display: inline-block;
	margin: 2px;
	padding: 2px;
	vertical-align: top;
	cursor: default;
	border: 1px solid #000;
	white-space: nowrap;
	font-size: 1rem;
}

.aw{
	background:rgba(200,0,0,0.4);
	}
.il{
	background:rgba(0,110,180,0.4);
	}
.kl{
	background:rgba(0,200,0,0.4);
	}
.eg{
	background:rgba(255,255,255,0.4);
	}
.rn{
	background:rgba(255,255,255,0.4);
}
.tn:focus-within{
	background: linear-gradient(180deg, 
		rgba(255,0,0,1) 0%, 
		rgba(0,0,0,0.2) 50%, 
		rgba(255,0,0,1) 100%
		);	
}

.w0{
	display:inline-block;
	width: 25px;
	overflow:hidden;
	}
.w1{
	display:inline-block;
	width: 40px;
	overflow:hidden;
}
.w2{
	display:inline-block;
	width: 80px;
	overflow:hidden;
}
.w3{
	display:inline-block;
	width: 120px;
	overflow:hidden;
}
.w4{
 	display:inline-block;
	width: 200px;
	overflow:hidden;
}
.w5{
	display:inline-block;
	width: 240px;
	overflow:hidden;
}
.grau_verlauf{
	color: rgb(200,200,200) !important;
	background: linear-gradient(180deg, rgba(230,230,230,1) 0%, rgba(100,100,100,1) 27%, rgba(25,25,25,1) 39%, rgba(120,120,120,1) 100%);	
	text-shadow: 3px 3px 5px rgb(0,0,50);
	border: 2px rgb(145,125,55) solid;
	cursor:pointer;
}
.grau_verlauf:hover{
	color: rgb(200,200,200) !important;
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(110,110,110,1) 27%, rgba(25,25,25,1) 39%, rgba(140,140,140,1) 100%);	
}
.blau_verlauf, input{
	color: rgb(200,200,200) !important;
	background: linear-gradient(180deg, rgb(50,115,255) 0%, rgb(25,50,100) 30%, rgb(5,15,25) 40%, rgb(30,65,130) 100%);	
	text-shadow: 3px 3px 5px rgb(0,0,50);
	border: 2px rgb(145,125,55) solid;
	cursor:pointer;
	}
.blau_verlauf:hover, input:hover{
	color: rgb(255,255,0);
	background: linear-gradient(180deg, rgb(50,115,255) 0%, rgb(25,50,99) 30%, rgb(5,15,25) 40%, rgb(30,65,130) 100%);	
}

.rot_verlauf{
	color: rgb(255,255,0);
	background: linear-gradient(180deg, rgb(255,0,40) 0%, rgb(80,0,00) 30%, rgb(40,0,10) 40%, rgb(160,0,40) 100%);
	cursor:pointer;
	text-shadow: 3px 3px 5px rgb(0,0,50);
	border: 2px rgb(145,125,55) solid;
}
.rot_verlauf:hover{
	color: rgb(255,0,0);
	background: linear-gradient(180deg, rgb(255,0,80) 0%, rgb(110,0,0) 30%, rgb(80,0,5) 40%, rgb(200,0,40) 100%);
}
.transparent{
	background-color: rgba(200,200,200,0.5);
	color: rgb(0,0,0);
}
.gelb{
	color: rgb(200,200,0)
	}
.schwarz{
	color: rgb(0,0,0)
	}
.rot{
	color: rgb(200,0,0)
	}
.fehler{
	color: rgb(200,0,0);
	background: rgb(250,255,104);
	font-weight:bold;
	}
.feiertag{
	background: rgb(81,255,79);
	color: rgb(0,0,0);
	}
.left, .l{
	text-align: left !important;
	}
.right, .rechts, .r{
	text-align: right !important;
	}
.center, .c{
	text-align: center !important;
	}
.b{
	font-weight: bold !important;
	}
.k{
	font-style: italic !important;
	}
.s{
	font-size: 0.7em !important;
	}
.l{
	font-size: 1.2em !important;
}
.xl{
	font-size: 1.5em !important;
}
.grau{
	color: rgb(80,80,80);
}
.border{
	border: 1px solid rgb(0,0,0);
}
dialog{
	color: rgb(0,0,0);
	background: rgba(255,255,255,0.8);
	border: 1px solid rgba(255,255,255,0.5);
	padding: 20px;
	box-shadow:  
		3px 3px 7px rgb(0,0,0) inset,
		-1px -1px 2px rgba(0,0,0,0.5) inset;
}
.dialog_close{
	width: 24px; 
	height: 24px; 
	padding: 0px; 
	border: 1px solid #888; 
	text-align:right;
	vertical-align:middle;
	cursor: pointer;
	}
dialog:target {
   display: block;
}