/* 	v.1.0_2021.02.10
		v.1.1_2021.02.13
		v.1.2_2021.03.12 */
	
	
		@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;*/				
			
		}
		
		a:link {
			
			text-decoration: none;
			color:#44aa00;
			
		}
		
		img {
		
			max-width: 100%; 	/* akk.css */
			
		}
		
		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 */
			
			}
		
		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;*/
			
		}
		
		audio, video {
				
			width:100%;
			display:block;
				
		}
		
		/* 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}
				}
		
		/* d e t a i l s | s u m m a r y */
		
		.details-wrapper {				/* wo ? */
   width: 75vw;
   margin: 0 auto;
   background-color: #E5E5E5;
   box-shadow:0 0 1px 2px #BFBFBF;
}
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 */
}

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 */
}
details[open] summary::before {
   padding-right: .25rem;
   font-style: italic;
   /*content: '- ';*/ /* Instead of Triangle open */
}

/* Styling the summary in case of open 'details' */
details[open] summary {
	/*background: green;*/
   /*font-style: italic;*/
   border-radius: 3px 3px 0 0;
}

.details-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 {
   font: 2.125rem/1.5 sans-serif;
   color:green;
}

		
		/* 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;
    
		}	
		
		/* WHITEBOARD */
		
			.simple {
  
				background-color: black;
				width: 5px;
				height: 5px;
				font-size: 0px;
				margin: 0px;
				padding: 0px;
				position: absolute;
				z-index: 1
			}

			
			#status {
				
				position: relative;
				left: 202px;
				top: 2px;
				color:#FFFFFF;
				background-color:#FF3300;
				font-family: helvetica, sans-serif;
				/*font-weight: bold;*/
				border: white 1px solid;
				border-spacing: 0px;
				padding: 0px;
				width: 100px;
				height: 15px;
				
				visibility: hidden;
				text-align: center;
			}

			#whiteboard {
  
				position: relative;
				/*left: 187px;*/
				top: -15px;
				margin-left:2px; /* test */
				border: #999 1px solid;
				border-spacing: 0px;
				padding: 0px;
				width: 302px;
				height: 302px;
				/*position: absolute;*/
			}
					
			#farbwahl {
	
				position:relative;
				top:-14px;
				left:4px;
				z-index: 3;
				text-align:center;
			}
			
			#zeichnung {
		
				position:relative;
				left:3px;top:-14px;
				z-index:4;
			}
			
			.input:hover {
				
				background-color:green; /* test: no 20210313 */				

			}
			
			.input {
				
				padding:1px 5px 1px 5px;
				font-size:0.5rem;
				color:white;
				background-color:steelblue;
				width:110px;
				height:10px;
			
			}
			
			#sampleText {
			
				white-space: nowrap;
				
			}
			
			/* 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;
}
							
	
		/* 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;
			}
		}