@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,600,600i,700,700i');

body {
	font-family: Roboto, Arial, Helvetica, sans-serif;
	margin-top: 0px;
}

.wrapper {
	max-width: 1000px;
	margin: auto;
	background-color: white;
}

.header {
	display: flex;
	padding-top: 5px;
	margin-bottom: -7px;
}

.small-screen {
	display: none;
}

div#leftbox {
	display: grid;
	place-items: center;
	width: 25%;
}

.fsg-logo {
	hight:auto;
	width:100%;
}

div#middlebox {
	margin-right: auto;
	text-align: center;
	color: #66afd4;
	font-size: 30px;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
}

div#rightbox {
	display: grid;
	place-items: center;
	width: 10%;
	background-color: white;
}

.home-icon {
	hight:auto;
	width:30px;
	display: flex;
	align-items: center;
	background-color:red;
}

.content {
	width: 100%;
    display: flex;
    justify-content: center;
}


table, tr, td {
	border: 1px solid;
	border-collapse: collapse;
	padding: 7px 15px;
}

.word {
	min-width: 175px;
}

button {
	width: 150px;
}

.top-matter {
	position: sticky;
	top:0;
	background: white !important;
	padding-bottom: 15px;
	z-index: 1;
}

.abcnav {
	background-color:#66afd4;
	list-style-type: none;
	margin-bottom: 15px; 
	padding: 0;
	text-align: center; ;
}

.abcnav li {
	display: inline-block;
	padding: 10px 1px;
}

a.abc-menu {
	color: #666;
	display: inline-block;
	width: 20px;
	justify-content: center;
	text-decoration: none;
	color: #666;   
	padding: 4px;
    background-color: #f3f3f3;
	font-weight: bold;
	margin-right: 3px;
}

a.icon {
	background-color: white;
	padding: 0px;
}

li.xyz {
	padding-right: 20px;	
}

a.xyz {
	width: 100%;
	padding: 4px 1px;
}

li.letter-k {
	cursor: default;
}

a.abc-menu.active {
	background-color: #f2ba2f;
	color: white;
}
	
@media (hover: hover) {
	a.abc-menu:hover {
		background-color: #fae7b7; border-radius: 5px;
	}
}

audio {
	width: 125px; height:23px;
}

tr.top {
	color: white;
	background-color: #66afd4;
	font-weight: bold;
	text-align: center;
	td {
		border: 1px solid black;
		}
}

td:nth-child(2), td:nth-child(3) {
	text-align: center;
}

.flag {
	color:#66afd4;
}

.footer {
	margin-top: 20px;
}

hr {
	color: #66afd4;
}

.copyright-notice {
	font-size: 90%;
	color: darkgrey;
}

a.vu-style {
	color: #007ab8;
	text-decoration: none;
}


/* Begin of additional definitions for subsite without JavaScript */

.eng, .am {
	vertical-align: super;
	font-style: italic;
}

.js-warning {
	font-style: italic;
	background-color: #dff2fd;
	border: 1px solid #66afd4;
	padding: 7px;
}

/* End of additional definitions for subsite without JavaScript */


@media only screen and (max-width: 600px) {

	body {
		font-size: 1em;
	}

	.top-matter, .footer, .about {
		width: 90%;
		margin: auto;
	}

	div#leftbox {
		display: none;
	}

	.small-screen {
		display: block;
		width: 60%;
		margin-left: 10px;
		margin-top: 10px;
		margin-bottom: -5px;
	}
	
	div#middlebox {
		font-size: 20px;
	}

	.home-icon {
		width:25px;
	}

	.abcnav li {
		display: inline-block;
		padding: 7px 1px;
		a {
			width: 18px;
		}
	a.xyz {
		width: 100%;
		padding: 4px 0px;
		}
	}

	tr.top {
		display: none;
	}

	table {
		width: 90%;
		margin: auto;
		tr > td {
				display: block;
				border: 0px;
				border-top: 0px; 
				order-right: 0px;
				border-left: 0px;
				border-bottom: 1px solid black;}
	}
	
	.word {
		text-align: center;
	}
}