/* font settings  -------------------------------------------------------------------- */
		body {
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 15px; 													/* default size, will be replaced by javascript */
			letter-spacing: 0.15em;
			color: transparent; 
			background-color: #000;
			-webkit-user-select: none; 											/* prevent copy paste for all elements */
			-webkit-touch-callout: none;										/* disables the default callout shown when you touch and hold a touch target */
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			-ms-hyphens: auto;
			-o-hyphens: auto;
			hyphens: auto; 
			}
			
		
		/* base font-size setting -----------------------------------------------------------*/
		#page {
			font-size: 2.8em;
			line-height: 1.238em;
			}
		p {
			margin: 0 0 1em 0;
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			-ms-hyphens: auto;
			-o-hyphens: auto;
			hyphens: auto; 
			}

		h1 {
			font-size: 1em;
			text-transform: uppercase;
			font-weight: bold;
			letter-spacing: 0.05em;
			margin-top: 0.62em;
			margin-bottom: 0.8em;
			-webkit-hyphens: none;
			-moz-hyphens: none;
			-ms-hyphens: none;
			-o-hyphens: none;
			hyphens: none;
			}
		
		.bu {																	/* caption - Bildunterschrift */
			font-size: 0.8em;
			line-height: 1.238em;
			margin-top: 0;
			margin-bottom: 1em;
			-webkit-hyphens: none;
			-moz-hyphens: none;
			-ms-hyphens: none;
			-o-hyphens: none;
			hyphens: none;
			}
		
		.nomargin {
			margin: 0;
			}
		.nomarginbottom {
			margin-bottom: 0;
			}
		.margintop {
			margin-top: 0.62em;
			}
		.bold {
			font-weight: bold;
			}
		.right {
			text-align: right;
			}
		.nohyphens {
			-webkit-hyphens: none;
			-moz-hyphens: none;
			-ms-hyphens: none;
			-o-hyphens: none;
			hyphens: none;	
		}
		a {																		/* link color */
			color: #fff;	
			text-decoration: underline;
			}
		
		a, img {
			outline: none;
			border: none;
			}
			
		
		/* static column layout -------------------------------------------------------------- */
		html, body {
			margin: 0;
			padding: 0;
			height: 100%; 			/* for leaflet maps */
			}	
		#page {
			max-width: 640px;
			margin-left: auto;
			margin-right: auto;
			height: 100%; 			/* for leaflet maps */                         
			}
		#page .row {
			clear: both;
			background-color: #151515;
			overflow: hidden;
			}		
			#page .column {
				float: left;
				margin: 1.5%;
				width: 17%;
				}
				
				#page .column.span2 { width: 47.5%; }	
				#page .column.span3 { width: 72.5%; }
				#page .column.span4 { width: 97.5%; }
						
				#page .column.blank {
					background-color: #303030;
					}
					#page .column .box {
						background-color: #444;
						padding: 0.1905em 0.1905em 0.1905em 0.1905em;
						}
					#page .column .box.buttoninbox {
						background-color: #555;
						padding: 0.38em 0.38em 0.1905em 48.75%; 
						}
					#page .column .box.textlinkinbox {
						background-color: #555;
						padding: 0.38em 0.38em 0.38em 0.1905em;
						}
					#page .column .box.textlinkinbox a {
						letter-spacing: 0.05em;	
						font-weight: bold;
						}
					#page .column .color {
						background-color: #444;
						}
					#page .column .box .color + img {
						padding-top: 0.83em;
						background-color: #444;
						}
							
			#page img { width: 100%; display: block; }
			
		/* maps -------------------------------------------------------------------------- */
		
		.maptable {
			width: 100%; 
			height: 100%;
			border-spacing: 0;
		}
		
		.buttontd {
			padding: 0;
			background-color: #151515;
		}
		
		.maptd {
			height: 100%; 
			padding: 1.25%;
			background-color: #151515;
		}
		#topbox {
			position: absolute;
			z-index: 2000; 
			background-color: #444; 
			width:96.25%; 
			padding: 0.1905em 0 0.1905em 0.1905em;
		}
		
		
		
		/* buttons (startscreen) ---------------------------------------------------------- */
		#page a.start{
			display: block;
			height: 2.5em;
			overflow: hidden;
			color: #FFF;
			text-decoration: none;
			line-height: 2.5em;										
			text-align: center;
			border-radius: 3.75% / 9.64%;
			background: #CE2825;
			}
		
				
		/* buttons ----------------------------------------------------------------------- */
		#page a.button {
			display: block;
			overflow: hidden;
			color: #FFF;
			text-decoration: none;
			background: #676767;
			
			/* round corners */	
			border-radius: 7.5% / 9.64%;
			
			/* default gradient */	
			background: #676767;
			}
			
			#page a.button.inbox {
				border-radius: 3.75% / 9.64%;
				line-height: 1em;	
				}
			#page a.column.span4.button {
			border-radius: 1.8% / 9.64%;
			}
			#page .column.span2 a.button {
			border-radius: 3.75% / 9.64%;
			}
		
			#page a.button.current{
				background: #55903D;
				}
					
				/* image-button (icon) */	
				#page .button img	 {
					display: block;
					width: 100%;
					border: none;
					}
				
				/* text-button */
				#page a.button.text {
					line-height: 2.5em;											/* vertical position of button-text depends on font base size! */
					text-align: center;
					}
				
				/* list-button */
				#page a.button.list {
					line-height: 1.25em;										/* vertical position of button-text depends on font base size! */
					display: inline-block;
					position: relative;
					}	
					/* list-button elements */
					#page a.button.list img {									/* button-image */
						width: 23.07692%;
						float: left;
						margin-right: 2.564102564%;
						}	
					#page a.button.list p {										/* button-text */
						padding: 0;
						margin: 0;
						padding-right: 10%;	/* space for abbr */
						-webkit-hyphens: none;
						-moz-hyphens: none;
						-ms-hyphens: none;
						-o-hyphens: none;
						hyphens: none;
						}
					#page a.button.list abbr {									/* number */
						position: absolute; 
						top: 0; 
						right: 1.1%;
						}	
			
				
		/* video/audio player ----------------------------------------------------------------------- */	
		/* hides empty controls-bars! */
		.mejs-container .mejs-controls { visibility: hidden !important; } 
		
		/* video/audio - progress bar */
		.progressbar {
			overflow: hidden;
			position: relative;
			padding-bottom: 17.4%;
			height: 0;
			}
		.progressbar .done {
			position: absolute;
			width: 0;
			left: 0;
			height: 100%;
			background-color: #bbce00;
			

			/* round corners */	
			border-radius: 12px; 												/* 12px - impossible to make relativ! */	

			
			/* default gradient */
			background: #55903D;
			}