#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; height: 1000px; }
 
  .elements {  margin: 3px 3px 43px 3px; height: 250px; float:left; line-height:1.4em; display:flex; flex-direction:column; justify-content: space-between; overflow-y: hidden; font-family: Verdana; font-size:14px; padding:10px; cursor: move;}
  
  .smaller {   margin: 3px 3px 43px 3px; height: 110px; float:left; line-height:1.4em; display:flex; flex-direction:column; justify-content: space-between; overflow-x: hidden; overflow-y: hidden; font-family: Verdana; font-size:11px; padding:2px; cursor: move; }
  
  #tabs li { margin: 3px 3px 3px 3px; padding: 10px; float:left; text-align: center; }
  
  #innersortable { list-style-type: none; }
  
  #innersortable li { margin: 3px 3px 3px 3px; padding: 2px; float:left; text-align:left; line-height:1.3em; }

  	img {
		padding: 0;
		margin: 0;	
		width: 100%;  /* Bild passt sich an verfügbaren Raum im li an */
	}

	button {
		padding: 0.1em;
	}

	button:focus, 
	button:hover {
		background: #09c;
	}
  
  
.width400 { width: 400px; text-align: center;   }  
.width300 { width: 300px; text-align: center;   }
.width280 { width: 280px; text-align: center;   }
.width150 { width: 150px; text-align: center;  }
.width170 { width: 170px; text-align: center; }
.width140 { width: 140px;  }
.width130 { width: 130px;  }
.width80 { width: 80px;  }
.width70 { width: 70px; }
.width68 { width: 68px;  }
.width36 { width: 36px;  }
.width18 { width: 18px;  }

.forschleife { background-color: gray; color: white; background-image: linear-gradient( to bottom, hsla(200, 100%, 50%, 0), hsla(200, 100%, 50%, 0.2) ); }

.redgive_out, .redgive_out2, .redgive_out3 { background-color:red; color:white; }

.blue_deklar { background-color: #d6f9ff; color:blue; }

.blue_mem_var, .blue_mem_var2 { background-color: blue; color:white; }


.green { background-color: green; color:white; }

.klammer { width: 30px; height:267px; padding:1.5px; cursor: move; }
  
.klammerSmaller { width:17px; height:114px; cursor: move; }

.yellowopen, .yellowopen2 { background-image: url("images/Klammer_links.png"); background-repeat: no-repeat; background-size: contain;  float:left; text-align: center; margin: 3px 1px 43px 13px;}
.yellowclose, .yellowclose2 { background-image: url("images/Klammer_rechts.png"); background-repeat: no-repeat;  background-size: contain; float:left; text-align: center; margin: 3px 13px 43px 1px;}


.START { background-color: white; background-image: url("images/START.png"); background-repeat: no-repeat; background-size: contain; cursor:hand;}
.STOP  {  background-image: url("images/STOP.png"); background-repeat: no-repeat; background-size: cover; margin-right: 30px; }

.START:hover { transform: scale(1.02); }


#rahmen { width: 100%; height: 100%; padding: 5px; background-color: #dfdfdf; }


.tinyBegin { width: 80px; height: 100px; color: blue;font-size: 12px;     
	  background-color: #d6f9ff;  }

.tinyCondition { width: 80px; height: 100px; color:blue; font-size: 12px;	  
	  background-color: #fff7d9;  }
	  
.tinyHowmuch { width: 50px; height: 100px; color:blue; font-size: 12px;
	  background-color: #ffd2d9; }

#variable:hover { color:lightgray; }

#spinner, #spinner2, #spinner3 { width:100%; margin: 2px; align-self:flex-end; }


#halloweltTextarea, #halloweltTextarea2 { height: 120px; margin: 2px 15px 2px 2px;  padding: 10px; text-align:left; }

.JavascriptLabel1, .JavascriptLabel { font-family: monospace; font-size: 12px; color: white; text-align:left; margin-bottom:3px; line-height:1em; }

#for1, #for2, #for3 { color:white; font-size: 12px;}

#javascrTextarea, #javascrTextarea2 { color:white; font-size: 12px; font-family: monospace; align-self:flex-end; }

.labelAllgemein	{ text-align:left; padding: 5px; font-family: Verdana; }
.labelSpeziell {text-align:right; font-family: Verdana;font-size: 10px; margin-left:30px; }

 p { margin: 2px; line-height: 1.2em;}

.forschleifeValue	{ color:white; font-family: Verdana; text-align:right; }

.isBig	{  font-size:30px;  }
.isSmall	{ font-size:18px;  }

#greaterORsmaller	{ color:blue; border:none; Verdana; font-size:12px; }

#tabs a { padding:0px; }

#tabs-1, #tabs-2, #tabs-3, #tabs-4 { padding:0px; margin: 3px 1px 1px 1px;}

.big { font-size: 12px; }
.small { font-size: 10px; }

#custom-handle {
    width: 3em;
    height: 1.2em;
    top: 60%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.4em;
	font-size: 12px;
}

		
 .shadow2 {
		 	-moz-box-shadow: -2px -2px 2px #232323 inset , 2px 2px 3px #232323;
			-webkit-box-shadow: -2px -2px 2px #232323 inset , 2px 2px 3px #232323;
			box-shadow: -2px -2px 2px #232323 inset, 2px 2px 3px #232323;}
			
 .outertable { width:100%; background-color:#efefff; table-layout:fixed; }
 
 #Ausgabe { width:87%; height: 25%; margin: 1px 3px 3px 13px; font-family: Verdana; font-size: 24px; color:gray; padding:20px; border:3px solid gray; background-image: url("images/Ausgabe.png"); background-repeat: no-repeat; overflow-x: hidden; overflow-y: auto; }
 
 #Source { width:98%; height: 100%; margin: 3px 3px 3px 13px; font-family: monospace; font-size: 16px; color:white; border:3px solid gray; background-color: #afafaa; background-image: url("images/rad.png"); background-position: right 4px top 4px; background-repeat: no-repeat; overflow-x: auto; overflow-y: auto; }
 
 #Source span { border:2px solid #afafaa; line-height:1.4em; }
 
 .clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

  .positionable {
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
	padding:15px;
	border: 2px solid gray;
	background: white;
	z-index:100;
  }
  
  #positionable1 {
    width: 150px;
    height: 200px;
  }
  
  .marching {
  border: 1px solid transparent;
  border-image-source: url('images/e5bc19b03a.gif');
  border-image-slice: 1;
  border-image-repeat: repeat repeat;
}