@import url('https://fonts.googleapis.com/css?family=Crimson+Text|Roboto|Roboto+Condensed');

	body, html {
		height: 100%;
	    background-color: rgb(255, 224, 102); 
		margin: 0;
	}
		   
	   
	main { background-color: rgb(255, 224, 102);
		width: 100% !important;
		}
	
	.wrapper { 
	margin-left: auto;
	margin-right: auto;
	overflow-x: auto;
	}
	
	.odd, .even {
		display: table-row;
	}
	
	.verbtablecell {
		display: table-cell;
	}
	
	.choicesrow {
		display: table;
		border-spacing: 20px;
	}
	
	.rightansodd, .rightanseven {
		display: none;
	}
	
	.instruction {
		margin-bottom: 20px;
	}
	
	#pointsmc {
		font-weight: bold;
		font-size: 2em;
	}
		
	.choices {
		display: table-cell;
	}
	
	.mcchoicetext {
		padding-left: 5px;
	}
	
	.mchint {
		font-weight: bold;
	}
	
	#feedbackmc {
		margin-left: 10px;
	}
	
	#inflabel1, #inflabel2, #inflabel3, #inflabel4, #inflabel5 {
		display: none;	
	}
	
	#finnish1, #finnish2, #finnish3, #finnish4, #finnish5 {
		font-size: 1.2em;
	}
	
	ul.navbar-nav {
		font-family: "Roboto";
		font-size: 13pt;
	}

	header {
		background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)), url("kansikuva.jpg");
		height: 60%;
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
		position: relative;
		min-width: 100%;
	}
		
	.title { font-family: "Roboto";
			padding: 1% 0 0 3%;
			font-size: 2.5em;
			color: white;
			text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
			}
			
	.slogan { font-family: "Roboto";
			padding: 0 1% 400px 3%;
			font-style: italic;
			font-size: 1.7em;
			color: white;
			text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
			}
		
	h1 { font-family: "Roboto";
		color: rgb(51, 51, 204);
		font-size: 2em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		margin-bottom: 1em;
		}

	h2 { font-family: "Roboto";
		color: rgb(51, 51, 204);
		font-size: 1.3em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		margin-top: 1.2em;
		margin-bottom: 1.2em;
		}

	h2.withborder { padding: 1%;
		font-family: "Roboto Condensed";
		color: white;
		text-shadow: none;
		background-color: rgb(51, 51, 204);
		text-align: center;
		margin-top: 2.2em;
		}
		 
	nav {
		margin-top: 25%;
		text-align: center;
		background-color: rgba(103, 103, 103,0.7);
		font-family: "Roboto";
		}

	article { 
		padding: 3%;
	}

	article p {
		font-family: "Crimson Text";
		font-size: 1.2em;
		}
		
	article ul {
		font-family: "Crimson Text";
		font-size: 1.2em;
		line-height: 1.5em;
		}
		
	article a:link { font-family: inherit;
			color: rgb(68,114,196);
			font-weight: bold;
			text-decoration: none;}
			
	article a:visited { font-family: inherit;
			color: rgb(68,114,196);
			font-weight: bold;
			text-decoration: none;
			}
			
	article a:hover { font-family: inherit;
			color: rgb(68,114,196);
			font-weight: bold;
			text-decoration: none;
			text-shadow: 2px 2px 2px white; }

	.box {display: block;}
			
	.text { font-family: "Crimson Text";
			  font-size: 1.2em;}
			  
	.cornerstones { position: relative;
				  float: left;
				  margin-bottom: 20px;
				  }

	.hideimage { padding-left: 0;
				   }
				   
	.hideimage img {
			float: left;
			max-width: 100%;
			height: auto;
			margin-bottom: 20px;
			margin-right: 30px;
			}
				   
	footer { padding: 1%;
			font-family: "Roboto Condensed";
			color: white;
			background-color: rgb(51, 51, 204);
			text-align: center;
			width: 100%;
			}
			
	footer a:link { 
			font-family: inherit;
			color: white;
			text-decoration: none; }
			
	footer a:visited { 
			font-family: inherit;
			color: white;
			text-decoration: none; }
			
	footer a:hover { 
			font-family: inherit;
			color: white;
			text-decoration: none;
			text-shadow: 2px 2px 2px rgb(69,92,145); }

	.table {
		max-width: 80%;
		margin: auto;
		border-spacing: 10px;
		border-collapse: separate;
		table-layout: fixed;
		}
		
	.cell {
		text-align: center;
		font-family: "Roboto";
		font-size: 1.7em;
		background-color: rgb(51, 51, 204);
		color: white;
		border:solid none 1px;
		border-radius: 8px;
		padding: 2%;
		overflow: visible;
		box-shadow: 2px 2px 2px rgb(69,92,145);
		width: 50%;
		}

	.entire-page-width { clear: both;
		}

	.cell:hover {
		background-color: rgb(69,92,145);
		}

	.cell-link:link {
		color: white;
		text-decoration: none;
		text-shadow: none;
		}	
		
	.cell-link:visited {
		color: white;
		text-decoration: none;
		text-shadow: none;
		}	
		
	.cell-link:hover {
		color: white;
		text-decoration: none;
		text-shadow: none;
		}	
		
	.cell-link:active {
		color: white;
		text-decoration: none;
		text-shadow: none;
		}	
		
body {
	  margin: 0;
	  font-family: "Crimson Text";
	  font-size: 1.2em;
	  background-color: rgb(216,228,255); 
	}

	/* link color */
	.navbar-custom .navbar-nav .nav-link {
		color: white;
		}
	  
	/* active & hover link color */
	.navbar-custom .nav-item.active .nav-link, .navbar-custom .navbar-brand:hover, .navbar-custom .nav-item:hover .nav-link {
		color: rgb(92,186,138);
	}

	.navbar-custom {
		 padding-left:2%;
	}

	.navbar-custom .navbar-brand {
		 margin-right: 19%;
	}

.login_label { 	width: 200px; }

.resultstable {
	text-align: center;
	padding: 6px;
	margin: auto;
}

.verblisttableheader {
	font-family: "Roboto";
	color: white;
	background-color: rgb(51, 51, 204);
	padding: 6px;
	text-align: center;
}

/*.verbtable {
	display: table;
	}*/

.verbtableheader {
	font-family: "Roboto";
	color: white;
	background-color: rgb(51, 51, 204);
	padding: 6px;
}

.verbtablehint {
	font-family: "Roboto";
	font-size: 0.9em;
	color: white;
	background-color: rgb(51, 51, 204);
	display: none;
}

.resultstableheader {
	text-align: left;
	font-family: "Roboto";
	color: white;
	background-color: rgb(92,186,138);
}

.resultstableheadercell {
	padding: 10px;
}

.verbtableheader th, .odd td, .even td {
	padding: 6px;
	vertical-align: bottom;
}

.odd, .odd1, .odd2, .odd3, .odd4, .odd5, .odd6 {
	background-color: inherit;
}

.even, .even1, .even2, .even3, .even4, .even5, .even6 {
	background-color: rgb(179, 209, 255);
	text-shadow: none;
}

.hidecellbuttonodd, .hidecellbuttonodd1, .hidecellbuttonodd2, .hidecellbuttonodd3, .hidecellbuttonodd4, .hidecellbuttonodd5, .hidecellbuttonodd6 {
	background-color: inherit;
	max-width: 30px;
}

.hidecellbuttoneven, .hidecellbuttoneven1, .hidecellbuttoneven2, .hidecellbuttoneven3, .hidecellbuttoneven4, .hidecellbuttoneven5, .hidecellbuttoneven6 {
	background-color: rgb(149,176,236);
	text-shadow: none;
	max-width: 40px;
}

.hidecellbuttonheader {
	max-width: 40px;
}

.result { padding-top: 1.5em; }

.logout {
	display: none;
}

.verbinput {
	width: 150px;
}

 /* The Modal (background) */
.modal {
    display: none; /* auto by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll !important if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	overflow-x: auto;
	overflow: auto;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 	5% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 40%; /* Could be more or less, depending on screen size */
	text-align: center;
	overflow-x: auto;
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
	text-align: right;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
} 

.placeholder {
	display: none;
}

.rightanswer {
	/*display: table-cell;*/
	color: red;
	text-align: right;
}

.specialcharacters {
	text-align: left;
}

#empty1, #empty3, #empty5 {
	display: table-cell;
}

#empty2, #empty4 {
	display: table-cell;
	background-color: rgb(216,228,255);
}

.spacer {
	display: none;
}

#logout, #userinfo {
	display: none;
}

.result {
	font-size: 1.5em;
}

#changepassword {
	display: none;
}

#verblist {
	display: inline-block;
	margin: auto;
	white-space: nowrap;
	overflow: auto;
}

.hideshowbutton {
	float: left;
	clear: both;
}

.hideshowbutton input {
	width: 250px;
	text-align: center;
}

.check {
	margin-top: 30px;
}

#showswedishbasic, #showfinnishbasic, #showswedishintermediate, #showfinnishintermediate, #showswedishmaster, #showfinnishmaster {
	display: none;
	margin: auto;
}

#hideswedishbasic, #hidefinnishbasic, #hideswedishintermediate, #hidefinnishintermediate, #hideswedishmaster, #hidefinnishmaster {
	margin: auto;
}


/* Galaxy S5 */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {

	header {
		background-image: none;
		background-color: rgb(149,176,236);
	}
	
	.title {
		font-size: 1.8em;
	}
	
	div.slogan {
		font-size: 1em;
	}
	
	h2.withborder { 
		font-size: 1.3em;
	}

	h1 { font-family: "Roboto";
		color: rgb(51, 51, 204);
		font-size: 2.5em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		 }
	  h2 { font-family: "Roboto";
		color: rgb(51, 51, 204);
		font-size: 2.2em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		 }
		 
	
	.choices {
		display: block;
		padding: 10px 0 10px 0;
	}
	
	.mcchoice {
		display: block;
		margin-top: 15px;
	}
	
	.choicesrow {
		display: block;
	}
		 
	.navbar-custom {
		 padding:0;
		 font-family: "Roboto";
	}

	.navbar-custom .navbar-brand {
		 margin-left: 0;
	}

	.navbar-collapse {
		position: relative;
		padding: 0;
		margin-right: 0;
		width: 100%;
	}
		 
	.wrapper { 
		margin-left: auto;
		margin-right: auto;
		overflow-x: auto;
		}
	
	.resultstableheadercell {
		display: block;
		text-align: center;
		padding: 0;
	}
	
	.resultstable .odd, .resultstable .even {
		display: block;
	}
	
	.verbtable {
		white-space: pre-line;
		min-width: 100%;
	}

	main { 
		width: 100%; 
	}
		
	article { 
		padding: 3% 2% 3% 2%;
	}
	 
	article p {
		font-family: "Crimson Text";
		font-size: 2.2em;
		}
	article ul {
		font-family: "Crimson Text";
		font-size: 2.2em;
		line-height: 1.5em;
		list-style-position: outside;
		}
		
	   a.active { background-color: rgba(103, 103, 103,0.4); }
		
		.phone {display: block;}
		
		.hide {display: none;}
		
		.table { position: relative;
					left: -15px;
					margin:auto; }
		
		.row {display: block;
			   margin-top: 15px;}
					
		.hideimage { display: block; }
		
		#verblistswedishbasic, #verblistswedishintermediate, #verblistswedishmaster {
			/*white-space: pre-line;*/
			/*width: 220px;*/
			float: left;
			clear: both;
			margin-bottom: 20px;
		}
		
		th {
			display: block;
		}
		
		.odd {
			display: block;
		}
		
		.even {
			display: block;
		}

	
		.odd1, .odd2 {
		height: initial;
		display: block;
		}
		
		.odd3, .odd4, .odd5, .odd6 {
		height: initial;
		display: block;
		}

		.even1, .even2 {
		height: initial;
		display: block;
		}
		
		.even3, .even4, .even5, .even6 {
		height: initial;
		display: block;
		}
		
		.modal {
			height: 100%;
			overflow: scroll !important;
			-webkit-overflow-scrolling: touch;
		}
		
		.modal-content {
			width: 95%;
			max-height: calc(100vh - 80px);
			overflow: scroll !important;
			-webkit-overflow-scrolling: touch;
		}
	
		#verblist {
			margin: 0;
			white-space: nowrap;
			max-height: calc(100vh - 80px);
			overflow: scroll !important;
			-webkit-overflow-scrolling: touch;
		}
						
		.verbtableheader {
			display: none;
		}
		
		td.verbtablehint {
			display: block;
		}
		
		td.placeholder {
			display: block;
		}
		
		.rightanswer {
			display: none;
		}
		
		.hideshowbutton {
			min-width: 100%;
		}
		
		.hideshowbutton > td {
			display: inline;
		}
}

/* iPhone 5 */
@media (device-height: 568px) 
   and (device-width: 320px) 
   and (-webkit-min-device-pixel-ratio: 2) {
		
	header {
		background-image: none;
		background-color: rgb(149,176,236);
	}
	
	#empty1, #empty2, #empty3, #empty4, #empty5 {
		display: none;
	}
	
	.title {
		font-size: 1.8em;
	}
	
	div.slogan {
		font-size: 1em;
	}
	
	h2.withborder { 
		font-size: 1.3em;
	}

	h1 { font-family: "Roboto";
		color: rgb(51, 51, 204);
		font-size: 2.5em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		 }
	  h2 { font-family: "Roboto";
		color: rgb(51, 51, 204);
		font-size: 2.2em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		 }
		 
	
	.choices {
		display: block;
		padding: 10px 0 10px 0;
	}
	
	.mcchoice {
		display: block;
		margin-top: 15px;
	}
	
	.choicesrow {
		display: block;
	}
		 
	.navbar-custom {
		 padding:0;
		 font-family: "Roboto";
	}

	.navbar-custom .navbar-brand {
		 margin-left: 0;
	}

	.navbar-collapse {
		position: relative;
		padding: 0;
		margin-right: 0;
		width: 100%;
	}
		 
	.wrapper { 
		margin-left: auto;
		margin-right: auto;
		overflow-x: auto;
		}
	
	.resultstableheadercell {
		display: block;
		text-align: center;
		padding: 0;
	}
	
	.resultstable .odd, .resultstable .even {
		display: block;
	}
	
	.verbtable {
		white-space: pre-line;
		min-width: 100%;
	}

	main { 
		width: 100%; 
	}
		
	article { 
		padding: 3% 2% 3% 2%; 
	}
	 
	article p {
		font-family: "Crimson Text";
		font-size: 2.2em;
		}
	article ul {
		font-family: "Crimson Text";
		font-size: 2.2em;
		line-height: 1.5em;
		list-style-position: outside;
		}
		
	   a.active { background-color: rgba(103, 103, 103,0.4); }
		
		.phone {display: block;}
		
		.hide {display: none;}
		
		.table { position: relative;
					left: -15px;
					margin:auto; }
		
		.row {display: block;
			   margin-top: 15px;}
					
		.hideimage { display: block; }
		
		#verblistswedishbasic, #verblistswedishintermediate, #verblistswedishmaster {
			/*white-space: pre-line;*/
			/*width: 220px;*/
			float: left;
			clear: both;
			margin-bottom: 20px;
		}
		
		th {
			display: block;
		}
		
		.odd {
			display: table-row;
		}
		
		.even {
			display: table-row;
		}

	
		.odd1, .odd2 {
		height: initial;
		display: block;
		}
		
		.odd3, .odd4, .odd5, .odd6 {
		height: initial;
		display: block;
		}

		.even1, .even2 {
		height: initial;
		display: block;
		}
		
		.even3, .even4, .even5, .even6 {
		height: initial;
		display: block;
		}
		
		.modal {
			height: 100%;
			overflow: scroll !important;
			-webkit-overflow-scrolling: touch;
		}
		
		.modal-content {
			width: 95%;
			max-height: calc(100vh - 80px);
			overflow: scroll !important;
			-webkit-overflow-scrolling: touch;
		}
	
		#verblist {
			margin: 0;
			white-space: nowrap;
			max-height: calc(100vh - 80px);
			overflow: scroll !important;
			-webkit-overflow-scrolling: touch;
		}
						
		.verbtableheader {
			display: none;
		}
		
		td.verbtablehint {
			display: inline;
		}
		
		td.placeholder {
			display: block;
		}
		
		.rightanswer {
			display: none;
		}
		
		.hideshowbutton {
			min-width: 100%;
		}
		
		.hideshowbutton > td {
			display: inline;
		}
				
		.rightansodd {
			border: 1px solid grey;
		}
		
		.rightanseven {
			border: 1px solid grey;
		}
		
}



/* iPhone 6 */
@media only screen and (min-device-width: 375px)
	and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
		
	header {
		background-image: none;
		background-color: rgb(149,176,236);
	}
	
	#empty1, #empty2, #empty3, #empty4, #empty5 {
		display: none;
	}
	
	.title {
		font-size: 1.8em;
	}
	
	div.slogan {
		font-size: 1em;
	}
	
	h2.withborder { 
		font-size: 1.3em;
	}

	h1 { font-family: "Roboto";
		color: rgb(51, 51, 204);
		font-size: 2.5em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		 }
	  h2 { font-family: "Roboto";
		color: rgb(51, 51, 204);
		font-size: 2.2em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		 }
		 
	
	.choices {
		display: block;
		padding: 10px 0 10px 0;
	}
	
	.mcchoice {
		display: block;
		margin-top: 15px;
	}
	
	.choicesrow {
		display: block;
	}
		 
	.navbar-custom {
		 padding:0;
		 font-family: "Roboto";
	}

	.navbar-custom .navbar-brand {
		 margin-left: 0;
	}

	.navbar-collapse {
		position: relative;
		padding: 0;
		margin-right: 0;
		width: 100%;
	}
		 
	.wrapper { 
		margin-left: auto;
		margin-right: auto;
		overflow-x: auto;
		}
	
	.resultstableheadercell {
		display: block;
		text-align: center;
		padding: 0;
	}
	
	.resultstable .odd, .resultstable .even {
		display: block;
	}
	
	.verbtable {
		white-space: pre-line;
		min-width: 100%;
	}

	main { 
		width: 100%; 
	}
		
	article { 
		padding: 3% 2% 3% 2%; 
	}
	 
	article p {
		font-family: "Crimson Text";
		font-size: 2.2em;
		}
	article ul {
		font-family: "Crimson Text";
		font-size: 2.2em;
		line-height: 1.5em;
		list-style-position: outside;
		}
		
	   a.active { background-color: rgba(103, 103, 103,0.4); }
		
		.phone {display: block;}
		
		.hide {display: none;}
		
		.table { position: relative;
					left: -15px;
					margin:auto; }
		
		.row {display: block;
			   margin-top: 15px;}
					
		.hideimage { display: block; }
		
		#verblistswedishbasic, #verblistswedishintermediate, #verblistswedishmaster {
			/*white-space: pre-line;*/
			/*width: 220px;*/
			float: left;
			clear: both;
			margin-bottom: 20px;
		}
		
		th {
			display: block;
		}
		
		.odd {
			display: table-row;
		}
		
		.even {
			display: table-row;
		}

	
		.odd1, .odd2 {
		height: initial;
		display: block;
		}
		
		.odd3, .odd4, .odd5, .odd6 {
		height: initial;
		display: block;
		}

		.even1, .even2 {
		height: initial;
		display: block;
		}
		
		.even3, .even4, .even5, .even6 {
		height: initial;
		display: block;
		}
		
		.modal {
			height: 100%;
			overflow: scroll !important;
			-webkit-overflow-scrolling: touch;
		}
		
		.modal-content {
			width: 95%;
			max-height: calc(100vh - 80px);
			overflow: scroll !important;
			-webkit-overflow-scrolling: touch;
		}
	
		#verblist {
			margin: 0;
			white-space: nowrap;
			max-height: calc(100vh - 80px);
			overflow: scroll !important;
			-webkit-overflow-scrolling: touch;
		}
						
		.verbtableheader {
			display: none;
		}
		
		td.verbtablehint {
			display: inline;
		}
		
		td.placeholder {
			display: block;
		}
		
		.rightanswer {
			display: none;
		}
		
		.hideshowbutton {
			min-width: 100%;
		}
		
		.hideshowbutton > td {
			display: inline;
		}
				
		.rightansodd {
			border: 1px solid grey;
		}
		
		.rightanseven {
			border: 1px solid grey;
		}
		
}

	@media only screen and (min-width: 1px)
	and (max-width: 992px) {
		
		#empty1, #empty2, #empty3, #empty4, #empty5 {
			display: none;
		}
		
		.wrapper {
			width: 95%;
			margin: auto;
			overflow-x: auto;
		}
		
		.choices {
			display: block;
		}
		
		.choicesrow {
			display: block;
		}
		
		.slogan { font-family: "Roboto";
			padding: 0 1% 1% 3%;
			font-style: italic;
			font-size: 1.7em;
			color: white;
			text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
			}
		
		.hideshowbutton input {
			display: block;
		}
		
		.verbtable {
			min-width: 70%;
		}

		/*.verblisttableheader > td {
			display: block;
		}*/
		
		.odd1, .odd2 {
		white-space: pre-line;
		background-color: inherit;
		vertical-align: top;
		font-size: 12pt;
		white-space: pre;
		display: block;
		}
		
		.odd3, .odd4, .odd5, .odd6 {
		white-space: pre-line;
		background-color: inherit;
		vertical-align: top;
		font-size: 12pt;
		white-space: pre;
		display: block;
		}

		.even1, .even2 {
		white-space: pre-line;
		background-color: rgb(149,176,236);
		text-shadow: none;
		vertical-align: top;
		font-size: 12pt;
		white-space: pre;
		display: block;
		}
		
		.even3, .even4, .even5, .even6 {
		white-space: pre-line;
		background-color: rgb(149,176,236);
		text-shadow: none;
		vertical-align: top;
		font-size: 12pt;
		white-space: pre;
		display: block;
		}
		
		#rightanseven2, #rightanseven4 {
			background-color: rgb(149,176,236);
		}
			
		#verblist {
			display: inline-block;
			white-space: nowrap;
			overflow-x: auto;	
		}
		
		main { width: 100%; }
		
		#verblistswedishbasic, #verblistswedishintermediate, #verblistswedishmaster {
			text-align: left;
			font-size: 12pt;
			float: left;
			clear: both;
			white-space: pre-line;
			margin-bottom: 30px;
		}
		
		th {
			display: block;
		}
		
		#inflabel1, #inflabel2, #inflabel3, #inflabel4, #inflabel5 {
			display: block;
			color: black;
			text-align: center;
		}
		
		#preslabel1, #preslabel2, #preslabel3, #preslabel4, #preslabel5 {
			display: block;
			color: black;
			text-align: center;
		}
		
		#pastlabel1, #pastlabel2, #pastlabel3, #pastlabel4, #pastlabel5 {
			display: block;
			color: black;
			text-align: center;
		}
		
		#supinelabel1, #supinelabel2, #supinelabel3, #supinelabel4, #supinelabel5 {
			display: block;
			color: black;
			text-align: center;
		}

		.odd {
			border: 1px solid grey;
			display: block;
		}
		
		.even {
			display: block;
			border: 1px solid grey;
		}
		
		.odd > td.vertablecell {
			display: block;
		}
		
		.even > td.vertablecell {
			display: block;
		}
		
		td.rightanswer {
			margin: 0;
			padding: 0;
			display: block;
			text-align: center;
		}
		
		td.verbtablehint {
			display: block;
		}

		.verbtableheader {
			display: none;
		}
		
		#empty1, #empty2, #empty3, #empty4, #empty5 {
			visibility: hidden;	
			background-color: transparent;
		}
		
		.resultstableheadercell {
			display: block;
			text-align: center;
			padding: 0;
		}
		
		.placeholder {
			display: none;
		}
		
		.rightanswer {
			display: none;
		}
	
	
	}
		
	@media screen and (min-width: 992px) {
	
		.wrapper {
			margin-left: auto;
			margin-right: auto;
			overflow-x: auto;
		}
	  
	  h1 { font-family: "Roboto";
		color: rgb(63,152,127);
		font-size: 2em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		}
	  h2 { font-family: "Roboto";
		color: rgb(51, 51, 204);
		font-size: 1.3em;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		 }
	  article p {
		font-family: "Crimson Text";
		font-size: 1.2em;
		}
	   article ul {
		font-family: "Crimson Text";
		font-size: 1.2em;
		line-height: 1.5em;
		}

		.phone {display: block;}
		
		.hide {display: none;}
		
		.verblisttableheader > td {
			display: table-cell;
		}
		
		.odd1, .odd2 {
		white-space: pre-line;
		background-color: inherit;
		height: initial;
		vertical-align: top;
		font-size: 14pt;
		display: table-cell;
		}
		
		.odd3, .odd4, .odd5, .odd6 {
		white-space: pre-line;
		background-color: inherit;
		height: initial;
		vertical-align: top;
		font-size: 14pt;
		display: table-cell;
		}

		.even1, .even2 {
		white-space: pre-line;
		background-color: rgb(149,176,236);
		text-shadow: none;
		height: initial;
		vertical-align: top;
		font-size: 14pt;
		display: table-cell;
		}
		
		.even3, .even4, .even5, .even6 {
		white-space: pre-line;
		background-color: rgb(149,176,236);
		text-shadow: none;
		height: initial;
		vertical-align: top;
		font-size: 14pt;
		display: table-cell;
		}
		
	
		#verblist {
			white-space: nowrap;
			overflow: auto;
		}
		
		.hideshowbutton {
			float: left;
			clear: both;
		}
		
		#verblistswedishbasic, #verblistswedishintermediate, #verblistswedishmaster {
			width: 90%;
			text-align: left;
			font-size: 12pt;
			float: left;
			clear: both;
			white-space: pre-line;
			margin-bottom: 30px;
		}

		}
		
		@media only screen and (min-width: 1200px) {
			
		.wrapper {
			margin-left: auto;
			margin-right: auto;
			overflow-x: auto;
		}
		
		#verblist {
			white-space: nowrap;
		}
		
		#verblistswedishbasic, #verblistswedishintermediate, #verblistswedishmaster {
			text-align: left;
			float: left;
			clear: both;
			white-space: pre-line;
			margin-bottom: 30px;
		}
		
		main { width: 100%; }
		
		}