/* 	v.1.0_2021.02.10
	v.1.1_2021.02.13
	v.1.2_2021.03.12 
	v.1.3x 2021.03.16 test ab leer
	v.1.4 2021.03.16 ok 
	v.1.5 2021.03.16 ext.
	v.1.6 2021.03.16 ok */
	
	
		@viewport {
		
			width: 320px;	/* ebs.meta */
			zoom:1;
		
		}
		
		* {											
			
			box-sizing:border-box;				/* accordion 20210210 off */
			padding: 0px;
			margin: 0px;
			font-weight: 300;
	
		}
		
		html {
			
			font-size: 100%;
			
		}
	
	
		body, table {
		
			max-width: 37.5rem;
			margin: 0 auto;
			padding: 0 1.25rem;
			font-family:TIMES,serif;				/* unused */
			font-family:COURIER,mono-space;			/* unused */
			font-family:VERDANA,Helvetica,sans-serif;
			font-size:11px;							/* fallback px | 20190607 */
			font-size:1.1rem;				
			line-height:1.2;						/* 1.5 zu viel | neu 20190607 */	
			background-color:#fff;
			
			color: #1a1a1a;
			
			/*background-image: url(img/moon2019c.png);*/
			/*background-attachment: fixed;
			background-repeat: no-repeat;*/
			background-size: 100%;
			/*background-color: #2c5aa0;*/				
			
		}
		
		table {
		
			table-layout:fixed;
			width:320px; 											
			
			margin-left:auto;
			margin-right:auto;
			
			/*border: solid 2px darkgrey;
			background-color:blue;*/
			background-color:white; 
			/*background-image: url(img/moon2019c.png);
			background-repeat: no-repeat;*/
			padding:5px 0px 0px 0px;									
			overflow:hidden;
			
		}
		
		tr {
		
			width:95%;	
		
		}
		
		td {
			
			padding:5px;
			/*overflow:hidden;*/
			
		}
		
		td.ohne {
				
			padding: 0px 8px 0px 8px;
				
		}	
		
		a:link {
			
			text-decoration: none;
			color:#44aa00;
			
		}
		
		a.input {
			
			text-decoration: none;
			color:white;
			
		}
		
		img {
		
			max-width: 100%; 	/* akk.css */
			
		}
		
		img.sub {
				
			padding-left:8px;
				
		}
		
		h1 {
			
			font-family:VERDANA,sans-serif;
			font-size:1.6rem;
			font-weight: 500;
			color:#44aa00;
			
		}
		
		p { 
			
			margin-top: 1rem; 	/* vorher em */
			font-size:1.2rem;	/* 1.4rem bis 20200225 */
			
		}
		
		div.sumo { 
				
			margin:2px 0 5px 0;
			line-height:2.7rem;
				
			height:3.0rem;
			overflow:hidden;
			
		}
		
		div.sum { 
				
			font-size:0.9rem;
			margin:3px 0 5px 0;
			line-height:2.2rem;
				
			height:2.7rem;
			overflow:hidden;

		}
		
		sub > p {
				
			font-style:italic;
			font-size:small;
				
		}
				
			/* d e t a i l s | s u m m a r y */
		
		details {
   
			padding: .25rem 0 .25rem 0; /* cr 20210213 3 x 0 */ 
			/*font: 1rem/1.2 sans-serif;*/
			font-size:1.2rem; /* vorher verdana 1.2rem */
			
		}

		details[open] summary::before {
   
			padding-right: .25rem;
			font-style: italic;
			/*content: '- ';*/ /* Instead of Triangle open */

		}

		details[open] summary {
			/*background: green;*/
			/*font-style: italic;*/
			border-radius: 3px 3px 0 0;
		}

		details > p {
				
			padding-left: 10px;
			font-size:0.9rem;
				
		}	
		
		details[open] summary.s0 {	/* menü ebene top */
				
			font-size:1.2rem;
			background-color:green;
				
		}
			
		details[open] > summary.s1 { /* menü ebene 2 */
				
			font-size:1.2rem;
			background-color:green;
			
		}	

		/* unused */ 
	
		.details-content {		/* ok 20210316 content */
   
			margin: 0;
			padding: .25rem 1rem;
			background-color: floralwhite;
			border-radius: 0 0 3px 3px;
			/*box-shadow: 0 1px 1px 1px rgba(0,0,0,0.5);*/
			color: steelblue;
		
		}
	
		.details-content p {	/* ok 20210316 content big */
   
			font: 2.125rem/1.5 sans-serif;
			color:green;

		}
		
		/* unused | ende */ 
	
			summary {
				
				font-size:1.0rem;
				
			}
				
			summary, .sum, .sumo {				/* test 20210310 */ 
   
				padding: .25rem 1rem;
				background-color: steelblue;
				font: 1.25rem/2 sans-serif;
				border: none;
				border-radius: 3px;
				/*box-shadow: 0 -1px 1px 1px rgba(0,0,0,0.5);*/
				color:floralwhite;
				cursor: pointer;
				/*list-style: none;*/ /* Triangle not shown */
			}

			summary:hover, .sum:hover, .sumo:hover {

				background: green;

			}

			summary.blank {				/* c 20210213 agb */
				
				margin: 0;
				box-shadow: none;
				padding: .75rem .0 .75rem 0.5rem; /* rem relative root | top r bottom l */
				border-radius: 0.15rem;
				background-color:white;
				font: 1.25rem/2 sans-serif;
				color:black;
				
			}

			/* Triangle not shown - Style for Webkit-Browser */
			/*summary::-webkit-details-marker {
				display: none;
			}*/
		
			summary::before {
   
				padding-right: .25rem;
				/*content: '+ ';*/  /* Instead of Triangle closed */

			}
			
			summary.s0 {
				
				font-size:1.3rem;
				
			}
							
									
			summary.d {
				
				background-color: grey;
					
			}
			
			summary::before {
					
				/*content: '+ ';*/  /* Instead of Triangle closed */
			}
			
			details[open] summary::before {
				
				/*content: '- ';*/ /* Instead of Triangle open */
				
			}

			details[open] summary {
				
				/*margin:2px 0 1px 6px;*/
				margin:2px 0 1px 0px;

			}
			
			summary a:link, summary a:visited {
				
				color:white;
				
			}

	
	
	/* W H I T E B O A R D */
	
	.simple {
  
		background-color: black;
		width: 5px;
		height: 5px;
		font-size: 0px;
		margin: 0px;
		padding: 0px;
		position: absolute; 
		z-index: 5;			/* vor: 1 */
			
	}
	
	#whiteboard {
  
		position:relative; 	/* test 20210316 */
		top:0px;			/* test 20210316 */
		left:0px;			/* test 20210316 */
		border: #999 1px solid;
		border-spacing: 0px;
		padding: 0px;
		width: 302px;	
		height: 302px;	
		
	}

	#status {
	
		position: relative;	
		left: 202px;		
		top: 2px;			
		color:#FFFFFF;
		background-color:#FF3300;
		font-family: helvetica, sans-serif;
		font-weight: bold;
		font-size:0.7rem;
		border: white 1px solid;
		border-spacing: 0px;
		padding: 0px;
		width: 100px;
		height: 15px;
		/*position: absolute;*/
		visibility: hidden;
		text-align: center;
		
	}
	
	#zeichnung {
	
		font-size:0.7rem;
		position:relative;	
		left:2px;top:-14px;	
		z-index:2;			
		
	}
	
	.input {
				
		padding:1px 5px 1px 5px;
		font-size:0.5rem;
		color:white;
		background-color:steelblue;
		width:5rem;
		height:1rem;
			
	}
			
	.input:hover {
				
		background-color:green; 			

	}		

	#farbwahl { /* test 20210316 */ 
	
		position:relative;
		top:-14px;
		left:4px;
		z-index: 3;
		text-align:center;
		
	}
			

	#sampleText {
	
		font-size:0.7rem;
		white-space: nowrap;
			
	}

		/* W H I T E B O A R D | E N D */

			/* S L I D E S H O W */
		
			.slide {display: none;}
				img {vertical-align: middle;}

				.slideshow-container {
					max-width: 100%;
					position: relative;
					margin: auto;
					
				}

				.prev, .next {
  
					cursor: pointer;
					position: absolute;
					top: 50%;
					width: auto;
					padding: 16px;
					margin-top: -22px;
					color: white;
					font-weight: bold;
					font-size: 18px;
					transition: 0.6s ease;
					border-radius: 0 3px 3px 0;
					user-select: none;
				}

				.next {
  
					right: 0;
					border-radius: 3px 0 0 3px;
				}

				.prev:hover, .next:hover {
  
					background-color: rgba(0,0,0,0.8);
				}

				.text {
				
					color: #f2f2f2;
					font-size: 15px;
					padding: 8px 12px;
					position: absolute;
					bottom: 8px;
					width: 100%;
					text-align: center;
				}

				.numbertext {
  
					color: #f2f2f2;
					font-size: 12px;
					padding: 8px 12px;
					position: absolute;
					top: 0;
				}

				.dot {
			
					cursor: pointer;
					height: 2.5rem;
					width: 2.5rem;
					margin: 0 5px;
					background-color: #bbb;
					border-radius: 50%;
					display: inline-block;
					transition: background-color 0.6s ease;
				}

				.active, .dot:hover {
  
					background-color: #717171;
				}

				.fade {
					
					-webkit-animation-name: fade;
					-webkit-animation-duration: 1.5s;
					animation-name: fade;
					animation-duration: 1.5s;
				}

				@-webkit-keyframes fade {
  
					from {opacity: .4} 
					to {opacity: 1}
				}

				@keyframes fade {
  
					from {opacity: .4} 
					to {opacity: 1}
				}
				
				/* S L I D E S H O W | E N D E   */
				
				/* TODO LIST */
			
		#box {
    
			width: 300px;
			background: #fff955;
			background: -moz-linear-gradient(top, #fefbb0, #fff955);
			background: -webkit-linear-gradient(top, #fefbb0, #fff955);
			background: -o-linear-gradient(top, #fefbb0, #fff955);
			background: -ms-linear-gradient(top, #fefbb0, #fff955);
			box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
			-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
			-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
			-o-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
			border-radius: 4px;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			-o-border-radius: 4px;
			font-size: 1.5em;
			padding: 0 25px 25px;
			margin-bottom: 12px;
		}

		#box h1 {
    
			margin: 0;
			padding-top: 10px;

		}

		#box ol {
    
			margin: 1em 0 0;
			padding: 0 0 0 25px;
    
		}

		#box ol li {
    
			font-size: 1em;
    
		}	
		
		a.button {
		
			padding:1px 5px 1px 5px;
			/*font-size:1.2em;*/
			color: white;
			background-color:grey;
			border-radius: 2px;
			-moz-border-radius: 2px;
			-webkit-border-radius: 2px;
			-o-border-radius: 2px;
		
		}
			
		a.button:hover {
				
			background-color:green; 			

		}		
		
		/* TODO LIST | ENDE */
		
				/* TODAY'S TODO'S */
			
			ul {
  
				margin: 0;
				padding: 0;
				
			}
			
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: none;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
  
  /* make the list items unselectable */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
  background: #f9f9f9;
}

/* Darker background-color on hover */
ul li:hover {
  background: #ddd;
}

/* When clicked on, add a background color and strike out text */
ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

/* Style the close button */
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #f44336;
  color: white;
}

.header {
  background-color: #f44336;
  /*background-color: grey;*/
  padding: 10px 10px 6px 10px;
  color: white;
  text-align: center;
}

/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the input */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
}

.addBtn:hover {
  background-color: #bbb;
}
		
			/* TODAY'S TODO'S | ENDE */
			
			/* S C R E E N */	
		
		@media only screen and (max-width: 300px) {
				
					.prev, .next,.text {font-size: 11px}
				}	
			
		@media only screen and (min-width:320px) {
			
			sw {
				color: green;
			}
		}

		@media only screen and (min-width:600px) {

			sw {
				color: grey;
			}
		}

		@media only screen and (min-width:900px) {

			sw {
				color: red;
			}
		}

		@media only screen and (min-width:1200px) {

			sw {
				color: blue;
			}
		}