/*** CSS base configuration for mobile devices ***/
	@import url('https://fonts.googleapis.com/css?family=Roboto');
	*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	html 		{ height: -webkit-fill-available;  }
	html>body	{ font-size: 100%; min-height: 100%; }
	body 		{ padding: 4rem 1rem 2rem 1rem; font-size: 11pt; font-family: 'Roboto',verdana,sans-serif; line-height: 125%; background: linear-gradient(90deg, #ffffff 10%, #80BAF3 110%); background-color: #f8f8ff; }
	h1 			{ font-size: 24pt; padding-bottom: 14pt; }
	li 		 	{ margin: 0; padding: 0;   }
	hr 			{ margin: 1rem 0; padding-top: 0.05rem; color: #04aa6d; background: #04aa6d; }
	hr.end		{ margin-bottom: 1.5rem !important; }
	hr.kopf		{ display: none; }

	.progressbarDiv		{ border: 0px solid #fff; height: 0.50rem; width: 100%; margin: 1.5rem 0; background-color: #fff; border-radius: 5px; box-shadow: 2px 2px 4px #787878; }
	.progressbarMeter	{ display: inline-block; background-color: #04aa6d; border-radius: 5px; height: inherit; max-width: 100%; }
	span		{ color: crimson; }
	p		 	{ line-height: 125%; font-size: 0.85rem; }
	p.question 	{ line-height: 140%; font-weight: bold; letter-spacing: 0.01rem; font-size: 0.88rem; }
	p.send 		{ padding-top: 0.25rem; }
	pre.db_throw{ text-align: center; margin: 1rem auto; color: #e2e2e2; font-size: 0.75rem; display: block; }
	.red		{ color: crimson; visibility: hidden; font-size: 0.88rem; }
	.green		{ color: #04aa6d; }
	.ctrl, 
	.ctrlx		{ display: none; }
	img.eb		{ border: 0px solid black; max-width: 62%; height: auto; }
	img.vbz		{ border: 0px solid black; max-width: 50%; height: auto; margin: 0.4rem; }
	.logo		{ position: absolute; top: 2.2rem; left: 1.5rem; }
	.del		{ position: absolute; top: 1.75rem; right: 1.5rem; text-align: right; }
	.dbline 	{ text-decoration-line: underline; text-decoration-style: double; }
	p#htmlMimeMailinfo { display: block; }
	
	form.quiz	{ font-size: 0.95rem; margin-left: 0.25rem; } 
	form.forms	{ display: block; }
	form.delete { margin: 0; padding: 0; }
	button.delete { margin: 0; }
	
	button.session 	{ display: none; }
	button.ahead, 
	button.gesamtaw,
	button.print,  
	a.ahead			{ font-family: verdana,sans-serif !important; font-size: 0.85rem; display: block; width: 100%; margin: 5pt auto; border: 1px solid #04aa6d;  border-radius: 20px !important; }
	
	input[type=image] 		{ max-width: 60%; }
	
	input[type=button], 
	input[type=submit], 
	button,  a.ahead		{ background-color: #04aa6d; border: 1px solid #04aa6d; border-radius: 20px; color: #fff; padding: 8pt 12pt; margin: 5pt auto; cursor: pointer; font-family: verdana,sans-serif !important; font-size: 0.85rem; font-weight: normal; text-decoration: none; letter-spacing: 1pt; display: inline-block; }
	
	input[type=text] 	 { width: 100%; max-width: 20rem; height: 1.4rem; font-size: 0.85rem; font-family: 'Roboto',verdana,sans-serif !important; vertical-align: bottom; border: 1px solid #cacaca; border-radius: 5px; line-height:1.25rem; margin-top: 5px; padding-left: 5px; }

	input[type=radio], 	 
	input[type=checkbox] 	{ margin-right: 0.75rem; width: 1rem; height: 1rem; vertical-align: bottom; }
	
	textarea		{ width: 98%; max-width: 40rem; padding: 0.25rem; text-align: left; font-size: 0.85rem; line-height: 1rem; font-family: 'Roboto',verdana,sans-serif !important; border: 1px solid #cacaca; border-radius: 0.75rem; box-shadow: 3px 3px 5px #454545; }
	
	.result 	{ width: 100%; margin: 1.7rem auto; padding: 0.25rem 1rem 0.5rem 1rem; font-family: 'Roboto',verdana,sans-serif; font-size: 0.8rem; text-align: center; line-height: 125%; border: 3px solid #fff; border-radius: 2rem; box-shadow: 3px 3px 15px #454545; background-color: #fff; }
	
	footer 		{ position: fixed; left: 0; bottom: 0; width:100%; color: #fff; background: #000; max-height: 2rem; text-align: center; padding: 0.5rem 0 1rem 0; opacity: 0.9; font-size: 0.75rem; line-height: 1.15rem; 	}

	footer a	{ text-decoration: none; color: #fff; }
	footer a:hover	{ text-decoration: underline; }
	



	@media screen and (min-width : 980px) 
	{
		body 	 		{ padding: 8rem 2rem 4rem 2rem; margin: auto 4.25rem; font-size: 1.15rem; }
		img.eb			{ width: 100%; max-width: 195px; }
		img.vbz			{ width: 100%; max-width: 216px; }
		hr 				{ margin: 1rem 0 2rem 0; padding-top: 0.1rem; }
		hr.weiss		{ margin-top: 2rem !important; }
		hr.end			{ margin-bottom: 2.5rem !important; }
		
		.progressbarDiv	{ margin: 1.5rem 0 2.5rem 0; }
		.progressbarMeter { }
		p		 		{ line-height: 2rem; font-size: 1.15rem; }
		p.question 		{ line-height: 175%; font-size: 1.15rem; margin: 1.25rem 0; }
		pre.db_throw	{ font-size: 0.8rem; }
		.logo			{ top: 2.8rem; left: 5.8rem; }
		.del			{ right: 6rem; top: 2.5rem; }
		.red			{ font-size: 1.15rem; }
		.ctrl 			{ display: none; font-size: 10pt; }
		.ctrlx			{ display: none; font-size: 10pt; }
		.result 		{ width:75%; max-width: 1280px; margin: 1rem auto; margin-bottom: 4rem; padding: 1.75rem 4rem; line-height: 150%; font-size: 1.15rem; }
		
		form.quiz		{ font-size: 1.15rem; margin-left: 0.3rem; }
		form.forms		{ display: inline; }
		form.session	{ float: right; }
		button.session 	{ float: right; display: block; }
		
		input[type=image] 		{ width: 100%; max-width: 216px; }
		
		input[type=button], 
		input[type=submit], 
		button.ahead, 
		button.print, 
		button,
		a.ahead			 	{ padding: 12pt 24pt; margin: 4pt 4pt; display: inline; font-size: 1.05rem; width: auto; border-radius: 5px !important; }
			
		button.start 		{ padding: 1.15rem 0.1rem 1.15rem 0.1rem; font-size: 1.08rem; width: 20%; min-width: 10rem; }
		
		input[type=text]  	{ height: 2rem; padding: 2pt 4pt; margin-left: 0.5rem; font-size: 1.15rem; }
		
		input[type=text]:focus 	{ border: 1px solid #f2f2f2; }
		
		input[type=radio],
		input[type=checkbox] { width: 1.5rem; height: 1.5rem; }
				
		textarea			 { padding: 0.5rem; font-size: 1.15rem; line-height: 1.5rem; }
		
		
		footer 				 { max-height: 3.5rem; padding: 1.25rem 0 1.75rem 0; opacity: 0.88; font-size: 0.85rem;  }
		
		.bg_body {
			background-color:		#f8f8ff; 
			background-image:		url(http://www.michaelster.ch/img/wp-overlay-body-bg.png); 
			background-repeat:		repeat-y; 
			background-position:	top left; 
			background-attachment: 	fixed; 
		}
		
	}
	
	
	@media print 
	{
		body 		{ padding: 0; margin: 0; background:linear-gradient(90deg, #fff 10%, #fff 110%); background-color:#fff !important; }
		img.eb		{ max-width: 80% !important; }
		.logo		{ top: 1.5rem; }
		img.vbz		{ max-width: 70% !important; }
		.del		{ top:1.4rem !important; right: 1.5rem; }
		.result		{ width: 90%; font-size: 0.9rem; border: 1px solid #dcdcdc; box-shadow: none; line-height: 125%; padding: 1rem 2rem 0 2rem; margin: 7rem auto 0.1rem !important; }
		hr 			{ margin: .5rem 0 1.5rem 0; padding-top: 0rem; color: #dcdcdc; background: #dcdcdc; }
		
		hr.weiss,
		.details,
		.ctrl,
		.ctrlx,
		.buttonRow,
		.thx_end,
		.feedback,
		pre.db_throw,
		p#htmlMimeMailinfo 	{ display: none !important; }
		
		form.forms,
		input[type=button], 
		input[type=submit],
		button,
		button.ahead,
		button.print, 
		button.session, 
		a.ahead 			{ display: none !important; }
		
		footer 				{ display: none !important; }
		
	}