@CHARSET "utf-8";

iframe html{
	height: 100%;
}

body{
	margin: 1vh;
	height: 98vh;
}

iframe body{
	margin: 1vmin;
	height: 92vmin;
	padding: 3vmin;
}

@media all and (min-resolution:190dpi){
	body, .page{
		font-family: sans-serif;
		font-size:2.2vmax;
	}
	
	input[type=button], input[type=submit], button{
		font-size:2.2vmax;
		width: auto;
	}
	
	#login, #footer{
		font-size: 2.6vmax;
	}
	
	div#menu a{
		font-size: 3.2vmax;
	}
}

@media all and (max-width:500px){
	body, .page{
		font-family: sans-serif;
		font-size:3.2vmax;
	}
	
	input[type=button], input[type=submit], button{
		font-size:3.2vmax;
	}
	
	#login, #footer{
		font-size: 2.2vmax;
	}
	
	div#menu a{
		font-size: 2.8vmax;
	}
}

@media all and (min-width:801px){
	body, .page{
		font-family: sans-serif;
		font-size:1.2vmax;
	}
	
	input[type=button], input[type=submit], button{
		font-size:1.2vmax;
	}
	
	#login, #footer{
		font-size: 0.9vmax;
	}
	
	div#menu a{
		font-size: 1.5vmax;
	}
}
#page {
	/*font-size: 1.2vmax;*/
}

h1{
	margin-top: 0;
	padding-top: 2vh;
}

.page{
	padding: 2vmin;
	/*TODO: Platforms? - Should be solved with relative layouts*/
	width: 90%;
	margin: auto;
	height:95vh;
	display: flex;
	flex-direction: column;
}

#header, #footer{
	position: relative;
	text-align: center;
	background-color: lavender;
	border-style: solid;
	border-color: gray;
	border-width: 0.5vmin 0.5vmin 1vmin 0.5vmin;
}

.content{
	background-color: #e9e9fb;
	padding: 1.5vmax;
	margin: 0;
	border-style: solid;
	border-color: gray;
	border-width: 0 0.5vmin 0.5vmin 0.5vmin;
	flex-grow: 100;
}

.wrapper{
	padding: 1vmin;
	text-align: center;
	/*Chrome needs this - not anymore?*/
	/*height: 75vh;*/
}

iframe.content{
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
	padding: 0;
}

div#menu{
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	margin: 2vmin 0 1vmin 0;
	width: 100%;
}

div#menu a{
    background-color: navy;
    color: white;
    padding: 2vh 2vh;
    margin-bottom: 2vh;
    text-decoration: none;
    border-radius: 1vmin;
    display: inline-block;
    width: 20vw;
    font-family: sans-serif;
    margin: 2vmin;
}

div#menu a:hover{
	background-color: RoyalBlue;
}

#login{
	margin: 0;
	margin-right: 1vw;
	text-align: right;
	display: inline-block;
	float: right;
}

#login a{
	text-decoration: none;
	color: RoyalBlue;
}

#login a:hover{
	text-decoration: underline;
}

div.title{
	text-align: left;
	margin-top: 1vmin;
}

a.title{
	font-size: 2.5vmax;
	font-weight: bold;
	color: royalBlue;
	margin-left: 1vw;
	text-decoration: none;
}

input[type=text], input[type=email], input[type=password]{
	min-height: 4vmin;
	max-width: 60vw;	
}

input[type=button], input[type=submit], button{
	color: RoyalBlue;
	margin: 2vmin 0;
	padding: 0.5vmin 0; 
	background-color: Snow;
	border-radius: 1vmin; 
	cursor: pointer;
	border: 1vmin solid;
	height: auto;
	transition: all 0.2s;
	width: auto;
	padding: 2vmin;
	/*font-size: 1.2vmax;*/
}

input[type=button]:active, input[type=submit]:active, button:active{
	color: Snow;
	background-color: RoyalBlue;
	border-color: RoyalBlue;
}

input[type=button]:hover, input[type=submit]:hover, button:HOVER{
	box-shadow: 1px 1px 10px rgba(20,0,20,0.3);
}

input[type='checkbox'], input[type='radio']{
	width: 3vmin;
	height: 3vmin;
	margin: 1vmin;
}

input[type=text]{
	width: 20%;
}

.voc_input {
	display: flex;
	justify-content: space-around;
}

.voc_input div {
	text-align: left;
	display: inline-block;
	width: 45%;
	margin: 0;
	padding: 2vmin; 	
}

.voc_input .second{
	order:1;
}
.voc_input textarea{
	width: 100%;
	height: 30vh;
	font-family: Arial;
	font-size: 100%;
}

select#lesson{
	width:20vw;
	/*	needed? */
	font-size:100%; 
}

[class*=result]{
	text-align: center;
	padding: 5vmin 7vmin;
	width: 40%;
	margin:auto;
	border: 2vmin solid;
	border-radius: 2vmin;
}

.result-negative{
	border-color: red;
}

.result-positive{
	border-color: MediumTurquoise;
}

div#options{
    display: flex;
    flex-flow: column nowrap;
    height: 98vh;
}

/*Learning specific media queries*/
@media all and (orientation: landscape){
	.card_wrapper{
		display: flex;
		flex-flow: row wrap;
		height: 50vh;
	}
	
	.card{
		border: 0.5vmin solid grey;
		display: flex;
		height: 50vh;
		margin: auto;
		text-align: center;
		width: 30vw;
		align-items: center;
		justify-content: center;
		box-shadow: 0 3px 10px rgba(20,0,20,0.6);
		min-width: 200px;
		font-family: sans-serif;
		font-size: 150%;
		padding: 1vmin;
	}
	
	.learn{
		font-size: 1.2vmax;
		width: 20%;
		padding: 0;
	}
	
	.learn#check, .learn#wrong{
		position: relative;
		left: 10.5vw;
		order: 3;
	}

	.learn#wrong{
		order: 2;
	}
	
	.learn#right{
		order: 1;
	}
	
	.button-wrapper::AFTER {
		order: 1;
	}
	
	/*use place*/
	.status_bar #lesson_name{
		margin-left: 5vmin;
		padding-left: 5vmin;
	}
	
	.step{
		width: 5vmin;
	}
	
	#change_voc{
		font-size: 0.9vmax;
	}
	
	#result_table{
		width: 30vw;
	}
}

@media all and (orientation: portrait){
	.card_wrapper{
	display: flex;
	flex-flow: column;
	height: 70vh;
	}
	
	.card{
		border: 0.5vmin solid grey;
		display: flex;
		height: 30vh;
		margin: auto;
		text-align: center;
		width: 70vw;
		align-items: center;
		justify-content: center;
		box-shadow: 0 3px 10px rgba(20,0,20,0.6);
		min-width: 200px;
		font-family: sans-serif;
		font-size: 170%;
		padding: 1vmin;
	}
	
	.learn{
		font-size: 2.8vmax;
		width: 30vw;
	}
	
	.learn#check, .learn#wrong{
		order: 2;
	}

	.learn#wrong{
		border-color: rgb(242, 109, 0);
		order: 1;
	}
	
	.learn#right{
		border-color: rgb(51, 204, 0);
		order: 3;
	}
	
	.button-wrapper::AFTER {
		order: 4;
	}
	
	/*save place!!!*/
	.status_bar #lesson_name{
		margin-left: 0.5vmin;
		padding-left: 1vmin;
	}
	
	.step{
		width: auto;
	}
	
	#change_voc{
		font-size: 1.5vmax;
	}
	
	#result_table{
		width: 95vw;
	}
}

#lesson_box{
	display: inline-block;
	height: 63vh;
	width: 45vw;
	overflow: auto;
	border: 0.5vmin solid grey;
}

#other_options{
	display: inline-block;
	width: 45vw;
	padding: 3vmin;
	border: 0.5vmin solid grey;
}

.radio_wrapper{
	padding-left: 1.5em;
	text-indent: -1.5em;
}

.hidden{
	visibility: collapse;
	width: 0;
	min-width: 0;
	opacity: 0;
	min-height: 0;
	height: 0;
	font-size: 0;
}

span.hidden{
	font-size: 0;
}

.learn_body{
	display: flex;
	flex-flow: column nowrap;
	height:97vh;
	margin: 0;
}

.own{
	background-color: rgb(255,230,202);
	transition: all 0.2s;
}

.foreign{
	background-color: rgb(208,255,210);
}

/*Learn Buttons
	Orientation specific content under media above!
*/
.learn{
	height: 10vh;
	max-height: 100px;
	font-family: sans-serif;
	transition: all 0.3s;
	margin: 0.5vw;
	padding: 1vmin;
}


.learn#wrong{
	border-color: rgb(242, 109, 0);
}

/*Maybe override hover for learning buttons and use js classes completely*/

.learn#check.active{
	background-color: RoyalBlue;
	color: snow;
}

.learn:active{
	/*empty, use classes to animate key listener!*/
}

.learn#wrong.active{
	background-color: rgb(242, 109, 0);
	color: snow;
}

.learn#wrong:active{
	background-color: rgb(242, 109, 0);
	color: snow;
}

.learn#right{
	border-color: rgb(51, 204, 0);
}

.learn#right.active{
	background-color: rgb(51, 204, 0);
	color: snow;
}

.learn#right:active{
	background-color: rgb(51, 204, 0);
	color: snow;
}

.learn:disabled{
	cursor: not-allowed;
	opacity: 0.6;
	color: rgb(153, 153, 153) !important;
	border-color: rgb(153, 153, 153) !important;
}

.learn#right:disabled:hover, .learn#wrong:disabled:hover,
.learn#wrong:disabled:active, .learn#right:disabled:active{
	background-color: Snow;
	box-shadow: none;
}

.button-wrapper{
	text-align: center;
	margin-top: auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: center
}

.button-wrapper::AFTER{
	content: "";
	width: 100%;
}

@keyframes loading{
	0% {background-color: SteelBlue;}
	50% {background-color: LightBlue;}
	100% {background-color: SteelBlue;}
}

@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

.loading{
	animation-name: loading;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-delay: 1s;
}

.status_bar{
	padding: 1vmin;
	background-color: steelBlue;
	margin-bottom: 3vh; 
	color: snow;
}

.step{
    border: 0.2vmin solid Snow;
    display: inline-block;
    font-family: Arial monospace;
    padding: 0 1vmin;
    text-align: center;
    transition: all 0.1s;
}

.current{
	background-color: yellow;
	color: black;
}

.status_bar #max{
	border-right: 0.2vmin solid snow;
	padding-right: 2vmin;
}

.status_bar #lesson_name{
	border-left: 0.2vmin solid snow;
}

#change_voc{
	border-color: snow;
    margin: 0;
    padding: 0 1vw;
    width: auto;	
}

/*The result page*/
#results{
	text-align: center;
}

#result_table{
	text-align: center;
	margin: auto;
	table-layout: fixed;
	margin-top: 10vh;
	border-collapse: separate;
	border-spacing: 2vmin 0px;
}

#result_table td{
	padding: 2vmin;
}

#result_table td:nth-child(1) {
	background-color: rgb(208,255,210);
}

#result_table td:nth-child(2) {
	background-color: rgb(255,230,202);
}

#result_table td:nth-child(3) {
	background-color: LightBlue;
}

.bottom_line{
	padding: 0;
	margin-top: auto;
	text-align: center;
}

/*Managing styles*/

caption{
	font-size: 2.8vmax;
	font-weight: bold;
	margin: 2vmax;
}

table.manage {
    margin: auto;
    margin-bottom: 5vmin;
    width: 80%;
    border-collapse: collapse;
    border: 1vmin solid grey;
}

table#lesson_table td:first-child {
    text-align: center;
    width: 2vw;
}

table#lesson_table td:nth-child(2) {
    padding: 2vmin;
    width: 80%;
}

table#lesson_table td:nth-child(3) {
    text-align: center;
}

table#lesson_table td:nth-child(4) {
    text-align: center;
}

table.manage th, .manage td {
    border-collapse: collapse;
    border-color: grey;
    border-image: none;
    border-style: solid;
    border-width: 0 0.5vmin;
}
table.manage tr:nth-child(2n) {
    background-color: rgb(250, 250, 250);
}
table.manage thead{
	background-color: white;
}

table.manage button{
	width: auto;
	margin: 0;
	border-width: 0.3vmin;
}

table.manage td a{
	text-decoration: none;
	cursor: pointer;
	color: black;
	display: block;
}

/*
*
*	Vocables table section
*
*/

/*Checkboxes*/
table#vocable_table td:first-child {
    text-align: center;
    width: 2vw;
}

/*own language*/
table#vocable_table td:nth-child(2) {
    padding: 2vmin;
    width: 44%;
}

/*foreign language*/
table#vocable_table td:nth-child(3) {
    padding: 2vmin;
    width: 44%;
}

/*step*/
table#vocable_table td:nth-child(4) {
	text-align: center;
}

/*buttons*/
table#vocable_table td:nth-child(5) {
	text-align: center;
}

.manage_box{
	display: inline-flex;
	text-align: center;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	padding: 3vmin;
	background-color: rgb(242, 242, 253);
}

.manage_box button{
	min-width: 10vw;
}

/*Tooltips*/

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 0.5vmin dotted black; /* If you want dots under the hoverable text */
    margin: 0 3vmin;
    font-size: 80%;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 30vw;
    background-color: Navy;
    color: Snow;
    text-align: center;
    padding: 1vmin 2vmin;
    border-radius: 2vmin;
 
    /* Position the tooltip text - see examples below!*/
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -15vw;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext, .tooltip:active .tooltiptext, .tooltip:focus .tooltiptext{
    visibility: visible;
}