/* main css shortened!!!  @import url("SourceSansPro.css"); */

* 						{ box-sizing: border-box; /*vertical-align: baseline; <sup>/<sub> not working!!! */
								margin: 0; padding: 0; border: 0; }

body					{ -webkit-text-size-adjust: none;
								font: normal 300 18pt/1.65em 'Source Sans Pro', sans-serif;
								color: #000; background: #f0f4f4; vertical-align: baseline;	}

a 						{	color: inherit;	text-decoration: underline;
								-webkit-text-decoration-color: #ef8376;	text-decoration-color: #ef8376;
								transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; }

a:hover				{ color: #ef8376; text-decoration: none; }

h1, h2, h3, h4, h5, h6 { color: #f2000c; font-weight: 400; line-height: 1.25em; }

h1 						{ font-size: 3em;}
h2 						{ font-size: 2.75em;}
h3 						{ font-size: 1.25em; }

header 				{ margin: 0 0 1em 0; }

#header 			{	position: relative; margin: 0; padding: 3em 0 2em 0; cursor: default;
								text-align: center; color: #fff; background: #999; }

#header h1		{ color: #fff; line-height: 1em; }

#header h1 a	{ color: inherit; text-decoration: none; }




input, button, .button {-webkit-appearance: none;	-moz-appearance: none; appearance: none;
								display: inline-block; font-size: 14pt; border-radius: 3px; }

input					{	padding: .3em .3em; line-height: 130%;
								color: #33475b; background-color: #f5f8fa;
								border: 1px solid #cbd6e2;
								transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out; }

input[type="button"], input[type="submit"], input[type="reset"], button,
.button				{ /*position: relative;*/ padding: 5px 24px;
								line-height: 1.75em; font-weight: 700; text-align: center;
								color: #fff; background-color: #ff7a59;	cursor: pointer;
								border: 1px solid #ff7a59; border-radius: 3px;
								transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; }

input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover,
.button:hover { background-color: #ff8f73;border-color: #ff8f73; }

.wrapper			{ margin: 0 0 2em 0; padding: 6em 0 6em 0; background: #fff; text-align:center; }

.container		{ margin: 0 auto; width: 100%; max-width: 1400px; padding: 0 10px; }
@media screen and (max-width: 1680px) { .container { max-width: 1280px; } }


#footer 			{ position: relative; overflow: hidden; padding: 3em 0;
								color: #000; background: #fff; }
#footer .copyright { font-size: 0.8em; text-align: center;
								color: rgba(128, 128, 128, 0.75); cursor: default; }

#footer li		{ display: inline-block; }


/* quiz special */
form 					{ display: grid; width:100%;
   							grid: auto/100px auto; grid-gap: 2px 5px;
   							padding:0 50px;
  							text-align:left; }
/*form input,*/
form label 		{ text-align:left; font-size: 18pt; line-height: 1.5em; padding:2px 0; }
form div   		{ grid-column-start: 1; grid-column-end: -1; justify-self: left; text-align:left; }

.answer,
form button 	{ width:100px; }
@media screen and (max-width: 700px) {	
button 				{ width:100%; }	
}


input[type="radio"] { -webkit-appearance: radio; -moz-appearance: radio; appearance: radio;
								margin:12px; width:30px; height:20px; margin-left:70px; }

/*
#bar	{ width:80vw; height:20px; text-align:left; }	/ * 90vw * /

#bar, 												/ * FF: * /
#bar::-webkit-progress-bar {	/ * Webkit * /
	background-color: #fed;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
	}


#bar::-webkit-progress-value {
	background-image: -webkit-linear-gradient(left, #f00, #0f0);
	background-size: 80vw 100%;
	border-radius: 5px; 
	animation: none;
	}

#bar::-moz-progress-bar {
	background-image: -moz-linear-gradient(left, #f00, #0f0);
	background-size: 80vw 100%;
	border-radius:5px;   
	}
*/
	
.lcdstyle { font-size:30px; }
.lcdstyle span { font-size:16px; position:relative; top:0px; }



/* index special */

form[name='login'] { width:50%; grid: auto/160px auto; grid-gap: 5px 5px; }
@media screen and (max-width: 700px) {
form[name='login'] { grid: auto/auto; 	width:100%;}
form label		{ text-align:left; }
}