/* Formate für die Dateien des Webprojektes
   Geschenkeliste 
   
   (c) 03/07 by kay berger 
   
   Verknüpfung zu dieser Datei mit
   <link rel="stylesheet" type="text/css" href="Formate.css">
*/

body{
     line-height:1.25em;
     font-size:12pt;
     color:#7B7B7B;  /* #949494 */
     font-family:"Verdana","Sans-Serif";
     text-align:justify;alignment:justify;
     background-image:url('../Bilder/Hintergr.jpg');
     background-attachment:fixed;
     margin-top:30pt;
     margin-left:4%;
     margin-right:6%;
	
	scrollbar-arrow-color:#FFFFFF;
	scrollbar-base-color:#6D8693;
	scrollbar-shadow-color:#F3F3F3;
	scrollbar-face-color:black;   /* #336699;     #617087;  #000099 */
	scrollbar-highlight-color:#F3F3F3;
	scrollbar-dark-shadow-color:white;
	scrollbar-3d-light-color:#9BAAC1;
}

#Spalten
 {
	 width:100%; 
	 display: grid; 
	 grid-template-columns: 1fr 1fr;  
	 grid-row-gap: 20px;  
	 grid-column-gap: 10px;
	 //background-color:yellow;
 }

#Spalte_links {
	//background-color: yellow;
	//border:1px green solid;
	/*width: 50%;
	float: left;*/
	grid-colomn: 1; grid-row:1;
	padding:10px;
	overflow:none;
}

#Spalte_Mitte {
	//background-color: green;
	margin-left: 50px;
	width: 300px;
	float:left;
	//text-align:right;
}

#Spalte_rechts {
    //background-color: orange;
	/*width: 45%;
    float: right;*/
	grid-colomn: 2; grid-row:1;
	padding:10px;
	padding-top:20px;
}

#unten {
    //background-color: white;
    text-align: center;
	width:100%;
    clear: both;
}

#RahmenKopf img.Logo
{
		text-align:right;
		vertical-align:top;
		max-width:100%;
		/*200px;*/
		/*120px; */
		/*80%; */
		height:auto;
		max-height:120px;
}
	 
 /*Graustufen: #7B7B7B;  #949494;   #E2E2E2;   #E7E7E7;  #CACACA;  #D8D8D8;  #C0C0C0 #F4F4F4; */

h1{
   font-size:18pt;
   font-family:"Verdana",sans-serif;
   font-weight:bold;
   color:#7B7B7B;
   margin-bottom:10pt;
   text-align:left;
   alignment:left;
   /* text-indent:1em; */
   padding-left:1em;
   padding-bottom:5;
   border-left:1px solid red;
   border-bottom:1px solid red;
   }
   
h2{
   font-size:14pt;
   font-family:"Verdana",sans-serif;
   font-weight:800;
   margin-bottom:-2pt;
   color:grey;}
h3{font-size:10pt;font-family:"Verdana",sans-serif;font-weight:normal;margin-bottom:-0pt;}
h4{font-size:11pt;font-family:"Arial",sans-serif;font-weight:bold;font-style:italic;margin-bottom:-6pt;color:blue;}
h5{font-size:8pt;font-family:"Arial",sans-serif;margin-top:2pt;}

/* h1:before {   }  \2022 */
/* h1:hover:before { content:""; color:#888; font-size:70%; font-style:bold }
   h1:hover:after { content:"\555"; color:#888; font-size:70%; font-style:bold } */
/* [title]:after { content:"attr(title)"; color:#080 } */

#RahmenKopf{
        border:1px solid #FFFFFF; 
        background:lightgrey;
        background-image:url('../Bilder/Titel.gif');
        background-repeat:no-repeat;
        background-atachment:fixed;
        background-position:10px center;
        padding:5pt; 
        width:65%;
		max-width:65%;
		min-height:20%; //100px;
        overflow:auto;
        margin:10pt;
        }

#RahmenLogo{
		position:absolute;
		left:65%;
		border:0	px solid green; /*#E7E7E7;*/
		width:15.8%; /*5%; /* 35 */
		max-width:20%;
		height:13%; /*100px;  90% */
        overflow:hidden;
        margin:10pt;
		text-align:left;
		vertical-align:middle;		
		
        //background-color:yellow;
		//display:inline;
		//float:right;
		/*top:27; */ 
        //padding:5pt; 
		//width:auto;
		//height:auto;
		//min-height:100px;
}
#RahmenLogo img.Logo{
	position:absolute;
	padding:0px;
	max-width:100%;	
	height:100%;
	width:auto;
	
	//background-size:contain;
	//background-position:center;align:center;vertical-align:middle;
		/*200px;*/
		/*120px; */
		/*80%; */
	//max-height:inherit; /*100px;*/
	//width:auto;
		
}

#RahmenText{
        border:1px solid #E7E7E7; 
        padding:5pt; 
		//width:85%;  /* 65 */
        overflow:auto;
        margin:10pt;
        }

span.schmal{
	font-size:80%;
}
	  
table{
      line-height:1.25em;
      // border-color:#336699;
      // border-collapse: collapse;
      width:100%;
     }
     
th{   
      background-color:#707070;
      color:white;
      text-align:left;alignment:left;
      padding:5px;
      }

table.Geschenkeuebersicht{
	border:1px solid lightgrey;
	padding:10;
	//border-collapse: separate;
    border-spacing: 5px;
	max-width:100%;
}

div.Geschenkezahl{
	border:1px solid gray;
	text-align:center;
	display:grid;
	//grid-template-columns:1fr 1fr 1fr 1fr;
	
	grid-template-areas:
	"GesamtzahlTitel FreizahlTitel ReserviertzahlTitel VergebenzahlTitel"
	"Gesamtzahl Freizahl Reserviertzahl Vergebenzahl"
}
div.GesamtzahlTitel{
	grid-area:GesamtzahlTitel;
}
div.Gesamtzahl{
	grid-area:Gesamtzahl;
}
div.FreizahlTitel{
	grid-area:FreizahlTitel;
	color:green;
}
div.Freizahl{
	grid-area:Freizahl;
}
div.ReserviertzahlTitel{
	grid-area:ReserviertzahlTitel;
	color:orange;
}
div.Reserviertzahl{
	grid-area:Reserviertzahl;
}
div.VergebenzahlTitel{
	grid-area:VergebenzahlTitel;
	color:red;
}
div.Vergebenzahl{
	grid-area:Vergebenzahl;
}


table.TabelleGeschenkezahl{
	border:2.5px solid lightgrey;
	padding:10;
    border-spacing: 5px;
	max-width:100%;
}

td.Geschenkeuebersicht{
	border:0px solid green;
	padding:10;
	//border-collapse: separate;
    border-spacing: 5px;
    vertical-align:top;
	hyphens: auto;
	/*hyphenate-limit-chars: auto 5;
	hyphenate-limit-lines: 2;
	-webkit-hyphens: auto;
	-webkit-hyphenate-limit-chars: auto 3;
	-webkit-hyphenate-limit-lines: 4;
	-ms-hyphens: auto;
	-ms-hyphenate-limit-chars: auto 3;
	-ms-hyphenate-limit-lines: 4;	*/
}

tr.Ungerade{
	background-color:white;
}
tr.Gerade{
	background-color:lightgray;
}

tr.Einstellungen{
	v-align:top;
	border-bottom:1px dotted gray;
}

.TabSpalteWeg
{
	
}
.TabelleRadio
{
		//background-color:blue;
		width:8px!important;
		vertical-align:top;
}

ul.Menue{
        list-style-image:url('../Bilder/Liste.gif');
        list-style-position:outside;
        }

li{
   margin-bottom:10;
   }

input{
      color:grey;
      font-family:"Verdana",sans-serif;
      }
input.Eingabe, select.Eingabe, textarea.Eingabe{
	width:333px; //20em;
	border-radius: 5px;
	padding:0px 2px 0px 2px;
	min-height:1.5em;
	//background-color:green;
}
input.Anmeldefelder{
	width:180px;
	height:1.8em;
}

input[type=hidden]{
		border:0px;
}

input[type="text"], input[type="password"], select 
{
		font-size:100%;
		//width:auto;
}
	
div.Formularfeld{
        width:60%;
		background-color:#FAFAFA; //#FAFAFA;  //#FFFFDD; 
        //border-top:solid 1px #F4E791;
        //border-bottom:solid 1px #F4E791;
        vertical-align:top;
		margin-bottom: 12px;
		padding:25px 15px 15px;
       }
	.Formularfeld {
      margin: 1em 0 1em 0;
      position: relative;
    }
    .Formularfeld label {
      position: absolute;
      //background: #FAFAFA; //#E7EBF0; //#fff;
      padding: 0.5em .5em;
      font-size: .8em;
      top: -0.3em; // 0.1em;
      left: .5em;
      transition: all .3s ease;
	  //color:red;
    }
    .Formularfeld label.als-placeholder {
      color: gray; // #666;
      font-size: 0.8em; // 1em;
      top: 2.1em; //.5em;
      left: 1.5em;
	}
	.Formularfeld input,select,textarea {
      padding: .5em;
	  width:380px;
	  //background-color:blue;
	  text-align:left;
	}
	.Formularfeld input[type=checkbox], input[type=radio]{
		width:auto;
		
	}

	.Formularfeld .SpalteHinweis
	{
			color:black;
			padding-top:10px;
	}
	
	.AufklappKopf, .AufklappKopfOffen{width:60%;}
	.AufklappInhalt{width:100%;padding:0px !important;}
	.AufklappKopf{background-color:silver;border:0px;}
	

	td.TabelleAuswahl{
		vertical-align:top;
	} 
	  
.Button{
		width:120px; 
		min-height:2em;
		cursor:pointer;
      }
button.Button
{
		border-radius: 10px 10px 10px 10px;
		box-shadow: 2px 2px 3px lightgray;		
		border:2px solid silver;
}
button.Button:hover{
	background-color:silver;
	border:2px solid lightgray;
}
	  
.ButtonMenue, .ButtonMenueKlein, .ButtonKlein
	{
		border:3px solid white;
		background-color:lightgray;

		margin-bottom:5px;
		cursor:pointer;	
		hyphens:auto;
		//box-shadow: 10px 10px 5px grey;
	}
.ButtonMenue{
		width:100px;
		height:80px;
		display:inline;
		float:left;
}
.ButtonMenue:disabled{
	background-color:whitesmoke;
}
	  
textarea{
      font-family:"Verdana";
      color:grey;
      }
 
select{
      z-index:1;
      color:grey;
      }

small{
      font-size:8pt;
     }


a:link{
       font-weight:bold;
       color:#7B7B7B;  /* silver */
       text-decoration:none;
       border-bottom:1px dashed;
       }
a:visited{
       font-weight:bold;
       color:darkgrey;
       text-decoration:none;
       }
a:focus{
       font-weight:bold;
       color:black; 
       text-decoration:none; 
       border-bottom:1px solid;
       }
a:hover{
       font-weight:bold; 
       color:black; //white; //darkgrey; 
       text-decoration:none;
       border-bottom:2px solid red;
       // border-top:2px solid red;
       background-color:silver; //#EC9C98;
       padding-top:-2; /* -4 */
       padding-bottom:-5;
       }
a:active{
       font-weight:bold; 
       color:red; 
       text-decoration:none; 
       } /* beim Anklicken */

.Gfrei{color:#006600;background-color:#DEF3DE;}  /* CCFFCC */
.Greserviert{color:orange;background-color:#FFFFD3;}
.Gvergeben{color:red;background-color:#FFBAA5;}
.Kachel{padding:4px 10px 4px 10px;opacity:.78;}
.Beschrfrei{}
.Beschrreserviert{}
.Beschrvergeben{}

a.BildLink
{
 border:0px;
 background-color:transparent;
}
 
 div#Filter
 {
	 width:100%; display: grid; grid-template-columns: 1fr 1fr 1fr;  grid-row-gap: 50px; grid-column-gap: 40px;
 }
 div.Geschenkeuebersicht
 {
	 width:100%; display: grid; grid-template-columns: 1fr 1fr 1fr;  grid-row-gap: 20px;  grid-column-gap: 10px;
	 //background-color:yellow;
 }
 div.GeschenkeListenbeginn
 {
	 grid-column: 1 / span 3;grid-row: 1;
 }
 div.GeschenkInfo
 {
	 box-shadow:5px 5px 15px silver; padding:10px;
	 min-height:80px;
 }
 div.GeschenkAngaben
 {
	 display: grid; grid-template-columns: 1fr 1fr ;position:relative;
 }
 
 	img.GeschenkBild{
			/*max-width:60%;
			height:auto;*/
			max-height:200px;width:auto;
			//border:solid green 2px;
	}
	img.GeschenkBild:hover {
		z-index: 10;
		box-shadow: 8px 8px 15px rgba(0,0, 0, 0.4);
		-webkit-transform: rotate(0deg) scale(2);
		-o-transform: rotate(0deg) scale(2);
		-moz-transform: rotate(0deg) scale(2);
		-ms-transform: rotate(0deg) scale(1);
		transform: rotate(0deg) scale(2);
		transition: all ease-out 1s;
		left:0;
	}
 
 	input[type=checkbox].css-checkbox 
	{
		position:absolute; z-index:-1000; left:-1000px; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
		overflow: hidden; 
	}

	input[type=checkbox].css-checkbox + label.css-label 
	{
							padding-left:60px;
							height:20px; 
							display:inline-block;
							line-height:20px;
							background-repeat:no-repeat;
							background-position: 0 0;
							//font-size:20px;
							vertical-align:middle;
							cursor:pointer;
							color:silver;

	}

	input[type=checkbox].css-checkbox:checked + label.css-label 
	{
							background-position: 0 -20px;
							color:black;
	}
	label.css-label 
	{
				background-image:url(Schalter.png); //(http://csscheckbox.com/checkboxes/u/csscheckbox_b51c74b8724821821fa2284c66565d77.png);
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				
				/*background-color:yellow;
				border:1px solid red;
				width:100px;
				margin-bottom:10px; */
				/*height:auto;
				display:inline;*/
	}

.nachoben{
		position: fixed;bottom: 4px;right:15%;width: 0;height: 0;border-left: 14px solid transparent;border-right: 14px solid transparent;border-bottom: 28px solid rgb(204, 204, 204);
}


@media print 
 {
    body { margin-left:10px;}
    button { 
    		display:none;
    		color: green;
            background-color:red; 
           }
    input { 
    		display:none;
    		color: green;
            background-color:red; 
           }
    table{line-height:100%;font-size:10pt;}
    th {border-bottom:2px solid black;font-weight:bold;font-style:italic;line-height:100%}
    h1 {border-right:0px;}
    .DruckUnsichtbar{display:none;}
    .ButtonDruckbar{border:0px;display:inline;background-color:white;}
    .ButtonLeerDrucken{display:none;border:0px;background-color:white;color:white;font-color:white;font-size:1;font-style:italic}
 }



/*  ************************ RESPONSIVE *****************  */
/*  *****************************************************  */

@media only screen and (min-width: 687px) AND (max-width: 1080px) 
{	/* Smartphones und tablet quer */ 
	/* AND (orientation : landscape) 687*/
	
	body
	{
		width:98%;
		padding:1%;
		font-size:110%;
		//background-color:yellow;
		margin:0px;
	}	
	
	#Spalten{
		grid-template-columns: 1fr;  
	}
	
	#Spalte_links, #Spalte_Mitte, #Spalte_rechts 
	{
     float: none;
     width: auto;
	 //background-color:silver;
	}
	
	#Spalte_rechts
	{
		margin-top:10pt;
		grid-colomn: 1; grid-row:1;
	}
	#Spalte_links
	{
		margin-top:10pt;
		grid-colomn: 1; grid-row:2;
		padding-right:15px;
	}	
	
	div.Geschenkeuebersicht
	{
		display:grid;
		grid-template-columns: 1fr 1fr;
		//background-color:green;
	}

	#RahmenKopf, #RahmenText, #RahmenKopf
	{
		margin:0pt;
		width:auto;
	}
}
	 
@media only screen and (max-width: 686px) 
{	/* Smartphones und tablet hochkant */
	
	/* 1025px  */
	 /*   Darstellung auf Smartphones etc. */
	
	body
	{
		width:98%;
		padding:1%;
		font-size:110%;
		//background-color:green;
		margin:0px;
	}
	
	div.Geschenkeuebersicht
	{
		display:grid;
		grid-template-columns: 1fr;
		//background-color:green;
	}
	
	#Spalten{
		grid-template-columns: 1fr;  
	}
	
	#Spalte_links, #Spalte_Mitte, #Spalte_rechts 
	{
     float: none;
     width: auto;
	 //background-color:silver;
	}
	
	#Spalte_rechts
	{
		margin-top:10pt;
		grid-colomn: 1; grid-row:1;
	}
	#Spalte_links
	{
		margin-top:10pt;
		grid-colomn: 1; grid-row:2;
		padding-right:15px;
	}	
	
	h1
	{
		font-size:120%;
	}
	
	h2
	{
		font-size:115%;
	}
	
	#RahmenLogo, #RahmenText, #RahmenKopf
	{
		margin:0pt;
		width:auto;
		left:68%;
	}
	
	#RahmenLogo img, #RahmenKopf img
	{
		//display:none;
		height:40%;
		width:auto;
	}
	#RahmenLogo, #RahmenKopf{
		height:auto;
		//max-height:10%;
		//border:2px solid green;
		margin:0px;
		padding:0px;
		min-height:10px;
	}
   
	/* #unten{background-color:pink;} */
   
   	.LehrerUebersicht
	{
		width:80%;
		hyphens: auto;
	}
	
	Button{
       max-width:120px;
      }
	input[type="text"], select 
	{
		font-size:105%;
		//width:auto;
	}
	input[type="radio"]
	{
		width:10px;
		margin:0px;
	}
	.ButtonMenue
	{

	}
	 
	#AnmeldungVorname{
		width:200px;
		height:30px;
	}
	#AnmeldungPasswort{
		width:200px;
		height:30px;
	}
	
	td
	{
		font-size:105%;
	}
	td.Anmeldefelder
	{
		float: left;
	}
	td.Geschenkeuebersicht, th.Geschenkeuebersicht, th a.Geschenkeuebersicht
	{
		font-size:80%;
	}

	
	.TabSpalteWeg, .nomobile
	{
		display:none;
	}
	
	tr.mobile{
		border:silver 2.5px solid !important;
		//background-color:green;
	}
	tr:first-child{
		//background-color:orange !important;  /*geht nicht*/
	}
	td.TabSpalteMobil, td.TabSpalteMobilNeueReihe
	{
		min-width: 10%;
		padding: 0px;
		border-spacing:0px;
		//margin:0px;
		text-align: left;
	}
	td.TabSpalteMobil{
		display:inline-block;
	}
	td.TabSpalteMobilNeueReihe{
		display:block;
		//padding-top:20px;
	}
	td.TabSpalteMobil::before , td.TabSpalteMobilNeueReihe::before{
        content: attr(description)"";
		font-size:14px;
	}
	td.TabAbstand{
		border-bottom:8px silver solid;
		width:100%;
	}
	
	img.GeschenkBild{
			max-width:60%;
			height:auto;
			/*max-height:200px;width:auto;
			border:solid green 2px;*/
	}

	input.Anmeldefelder
	{
		//background-color:yellow;
		max-width:60%;
	}
	.Eingabe{
		width:auto;
	}
	
	div.Formularfeld{
		width:95%;
		padding-right:0px;
		margin:0px;
	}
	.Formularfeld input,select,textarea {
	  width:95%; 
	}
	
	img.Logo
	{
		text-align:right;
		vertical-align:top;
		//width:120px;height:100px;
		max-width:80%;
		/*120px; */
		/*80%; */
		height:auto;
		//max-height:100px;
	}
	
	.SymbKreis
	{
		width:25px;
		height:25px;
	}
	
	.Beschrfrei{color:#006600;background-color:#DEF3DE;}
	.Beschrreserviert{color:orange;background-color:#FFFFD3;}
	.Beschrvergeben{color:red;background-color:#FFBAA5;}
	
	div.Geschenkezahl{
	text-align:right;
	
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-column-gap: 30px;
	
	grid-template-areas:
	"GesamtzahlTitel Gesamtzahl"
	"FreizahlTitel Freizahl"
	"ReserviertzahlTitel Reserviertzahl"
	"VergebenzahlTitel Vergebenzahl"
	}
	div.Gesamtzahl,div.Freizahl,div.Reserviertzahl,div.Vergebenzahl{
		text-align:left;
	}

	div#Filter{
		width:100%; display: grid; grid-template-columns: 1fr ;  grid-row-gap: 50px; grid-column-gap: 40px;
		/*
		grid-template-columns: 1fr 1fr; */		
	}
	.Filterschalter{
		height:auto !important;
		vertical-align:top;
	}	
	
}

 
/*
@media (light-level: normal) {
  p { 
    background: url("texture.jpg"); 
    color: #333 }
}
@media (light-level: dim) {
  p {  //gedimmt
    background: #222; 
    color: #ccc }
  }
@media (light-level: washed) {
  p {   //sehr hell
    background: white; 
    color: black; 
    font-size: 2em; }
}
*/

/* Dies können <a class="infobox" href="#INFO">AFAIK<span> <b>Infobox:</b><br />
 englisch für: 'As far as I know' ('soweit ich weiß')</span></a> alle modernen Browser interpretieren:</p> */
 
 /*
   a.infobox { border-bottom: 1px dashed #c30; text-decoration:none; }
  a.infobox:hover { cursor:help; color:#c30; background:white; }
  a.infobox span { visibility:hidden; position:absolute; left:-99em;
    margin-top:1.5em; padding:1em; text-decoration:none; }
  a.infobox:hover span, a.infobox:focus span, a.infobox:active span {
    visibility:visible; left:1em;
    border:1px solid #c30; color:blue; background:white; }
<!--[if IE 5]>
  a.infobox span { display:none; }
  a.infobox:hover span { display:block; }
<![endif]-->
*/