* {
	box-sizing: border-box;
}
.clear{
	clear:both;
}
.attribution {
	color:gray;
	padding:1em;
}
.copy {
	padding:1em;
}
html, body {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  min-width:320px;
}
body {
	overflow-y: scroll;
/*	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(auto, 1000px) minmax(0,1fr);
	grid-template-areas:
			"header header header"
			"left main right"
			"footer footer footer";*/
	background-color: #ffffd5;
	color:#000;
	font-size:14px;
	font-family:tahoma,helvetica,sans-serif;
	
}

/********Above is from regia.css********/


@font-face {
    font-family: klingon;
    /*src: url(http://regia.org/languages/kgn-klingon/klingon_font.ttf);*/
	src: url(../languages/kgn-klingon/klingon_font.ttf);
	unicode-range: U+F8E4, U+F8D7, U+F8DC, U+F8D0, U+F8DB, U+F8D6, U+F8DD, U+F8D9; /*the specific characters needed only - no other characters used here*/
}

@font-face {
    font-family: hungarian;
    /*src: url(http://regia.org/languages/hu-oldHungarian/OldHungarian.ttf);*/
	src: url(../languages/hu-oldHungarian/OldHungarian.ttf);
	unicode-range: U+10CA2, U+10CDB, U+10CEE, U+10CC1, U+10CE4, U+10CD1, U+10CE2, U+10CC1, U+10CE4; /*the specific characters needed only - no other characters used here*/
}

@font-face {
    font-family: runes;
    src: url(../languages/vr-vikingRunes/seguisym.ttf);
	unicode-range: U+16A0, U+16AC, U+16B1, U+16BE, U+16C1, U+16CB, U+16DA, U+16B4; /*the specific characters needed only - no other characters used here*/
}

@font-face {
    font-family: fraktur;
    src: url(../languages/de-german/TypographerFraktur-Medium.ttf);
	unicode-range: U+0044, U+0065, U+0075, U+0074, U+0073, U+0063, U+0068; /*the specific characters needed only - no other characters used here*/
}
@font-face {
    font-family: chunom;
    src: url(../languages/vcn-chunom/FZKTT--GB4-11.ttf);
	unicode-range: U+35c2, U+5583, U+8d8a, U+21a38; /*the specific characters needed only - no other characters used here*/
}

@font-face {
    font-family: irish;
    src: url(../languages/ga-irish/GlanchloGC.woff);
	unicode-range: U+0047, U+0061, U+0065, U+006C, U+0064, U+1E0B, U+0068, U+0069, U+0067; /*the specific characters for "Gaedhlige" needed only - no other characters used here (ḋ needed for Dinneen Irish, dh also included for this, but not really needed any more)*/
}

@font-face {
    font-family: anglosaxon;
	src: url(../languages/ang-oldEnglish/beowulf.ttf);
	unicode-range: U+0045, U+006E, U+0067, U+006C, U+0069, U+0073, U+0063; /*the specific characters needed only - no other characters used here*/
}

body{
	
	text-align:center;
}

p {
	padding:2px;
}

a {
	color:blue;
	text-decoration:none;
}
a:hover {
	color:deepskyblue;
}

#languageList {
	display:flex;
	flex-wrap:wrap;
	max-width:950px;
	justify-content:space-evenly;
	margin:0 auto;
	text-align:center;
}

#languageList .translationList {
	width:200px;
	max-width:100%;
}

header {
	background:linear-gradient(#000 85%,#ffffd5 100%);
	padding-bottom:15px;
	color:white;
	min-height:65px;
}
footer {
	padding:15px;
	color:white;
	background:linear-gradient(#ffffd5 0%,#000 15%);
}
footer a {
	color:lightskyblue;
}
footer a:hover {
	color:red;
}

div.languageEvent { /*div for an event instance*/
	display:inline-block;
	width:90%;
	margin:10px 0;
	border:2px solid;
	overflow:hidden;
	-moz-border-radius: 16px 8px 16px 8px;
	-khtml-border-radius: 16px 8px 16px 8px;
	-webkit-border-radius: 16px 8px 16px 8px;
	-o-border-radius: 16px 8px 16px 8px;
	border-radius: 16px 8px 16px 8px;
	text-align: center;
	margin: 12px 5%;
}

ul.languageBar {
	list-style:none;
	font-family:klingon,tahoma,verdana,helvetica,fangsong,Segoe UI Symbol,serif,runes;
	padding:0;
}

#German {
	font-family:fraktur;
}
#ChuNomVietnamese {
	font-family:chunom,chunomextra;
}
#IrishTraditional,
#Irish {
	font-family:irish;
	font-size:120%;
}
#OldEnglish {
	font-family:anglosaxon;
	font-size:130%;
}
#IrishTraditional .IrishTraditional,
#Irish .Irish,
#OldEnglish .OldEnglish {
	position:relative;
	top:-2px;
}

#Klingon {
	font-family:klingon;
}

#CommonKlingon {
	font-family:Serif;
}

#HungarianRovásírás {
	font-family:hungarian;
}

#RunicNorse {
	font-family:Segoe UI Symbol,runes;
}

.chinese {
	font-size:20px;
	font-family:FangSong,KaiTi,Times,serif;
}
.latin {
	font-family:garamond times serif;
}
.corean {
	font-size:20px;
	font-family:Gungsuh,Batang,Gulim,Dotum,Times,serif;
}
.latinizedKlingon {
	font-family:Verdana, Tahoma, Times New Roman, Courier New, serif;
}

div.translationList {
	display:inline-block; 
	padding:3px; 
	height:50px; 
	width:200px; 
	text-align:left;
	font-size:20px;
}

div.translationList a img {
	position:relative;
	top:3px;
}

ul.languageBar a {
	text-decoration:none;
	color:maroon;
}

ul.languageBar a:hover {
	color:blue;
}

ul.languageBar li {
	text-align:center;
	overflow:hidden;
	width:auto;
	min-width:120px;
	vertical-align:middle;
	margin:5px;
	padding:4px 4px 2px;
	color:maroon;
	border:darkred 3px solid;
	text-decoration:none;
	-moz-border-radius: 25px;
	-khtml-border-radius: 25px;
    -webkit-border-radius: 25px;
	-o-border-radius: 25px;
    border-radius: 25px;
}

ul.languageBar li:hover {
	border:blue 3px solid;
	background:#CDE9FC;
	color:blue;
}


ul.languageBarLeft{
	display:block;
	width:45%;
	float:left;
}
ul.languageBarRight {
	display:block;
	width:45%;
	float:right;
}
ul.languageBarBoth {
	display:none;
	width:100%;
}

ul.languageBarLeft li, 
ul.languageBarRight li, 
ul.languageBarBoth li {
	padding:10px 0;
	margin:20px 5px;
	width:100%;
	font-size:20px;
	text-align:left;
}

ul.languageBarLeft li div, 
ul.languageBarRight li div, 
ul.languageBarBoth li div {
	padding-left: 20px;
}

@media only screen and (max-aspect-ratio: 1/1) and (max-device-width: 769px)
{
	ul.languageBarLeft, ul.languageBarRight {
		display:none;
	}
	ul.languageBarBoth {
		display:block;
	}
}

.topMenuLogo {
	position:absolute;
	top:7px;
	white-space: nowrap;
}
@media screen and (min-width: 650px)  {
	.topMenuLogo {
		right: 50%;
		right: calc(50% - 250px);
		min-width: 500px;
		text-align: center;
	}
}
div.topMenuLogo a svg path {
	fill:rgb(255,221,0);
	stroke:none;
	stroke-width:0;
	stroke-linecap:round;
	stroke-miterlimit:4;
	stroke-dasharray:none;
	stroke-opacity:1
}

div.topMenuLogo a:hover svg path { /*logo image change when hover to correspond with link*/
	fill:#FFFF00;
}

/*below not the same as regia.css*/
.quicklink {
	text-align:center;
	display: flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	margin: 8px auto;
}
.quicklink a {
	display: inline-block;
	text-align: center;
	margin:12px 20px;
	padding: 1rem 1rem;
	border-radius: 25px;
	border: solid 4px;
	font-size: 19px;
	max-width:100%;
}

.quicklink img {
	display:none;
}
@media screen and (min-width: 450px)  {
	.quicklink img {
		height:1em;
		position:relative;
		display:inline;
		top:3px;
	}
}

.mobileShow {
	display:block;
}
#otherLang {
	display:none;
}
main#languages {
	margin:0 auto;
	max-width:1000px;
	display:grid;
	grid-template-areas: "title"
						 "lang"
						 "text"; 
}
.langMenuTop,
.languageTitle {
	grid-area:title;
}
#otherLang {
	font-family:tahoma,helvetica,sans-serif;
	grid-area:lang;
	font-size:14px;
}
.rtl #otherLang {
	grid-area:lang-right;
}
.langMenuContent,
#langText {
	grid-area:text;
	text-align:justify;
	padding:2%;
}

@media screen and (min-width: 650px)  {

	.mobileShow {
		display:none;
	}
		
	#otherLang {
		display:block;
	}
	main#languages {
		grid-template-areas: "title title title"
							 "lang text lang-right"; 
	}
}
@media screen and (max-width: 750px)  {
	.klingonScript {
		font-size:12px;
	}
}
@media screen and (max-width: 500px)  {
	.klingonScript {
		font-size:11.5px;
	}
}
@media screen and (max-width: 470px)  {
	.klingonScript {
		font-size:11px;
	}
}
@media screen and (max-width: 450px)  {
	.klingonScript {
		font-size:9px;
	}
}
@media screen and (max-width: 380px)  {
	.klingonScript {
		font-size:8px;
	}
}
@media screen and (max-width: 320px)  {
	.klingonScript {
		font-size:8px;
	}
}
@media screen and (max-width: 450px)  {
	.latinizedKlingon {
		font-size:13px;
	}
}
@media screen and (max-width: 400px)  {
	.latinizedKlingon {
		font-size:12px;
	}
}
@media screen and (max-width: 380px)  {
	.latinizedKlingon {
		font-size:11px;
	}
}
@media screen and (max-width: 350px)  {
	.latinizedKlingon {
		font-size:10px;
	}
}


img.trollStuart,
img.backwardStuart,
img.bigStuart {
	margin:0 auto;
	display: block;
	max-width:100%;
}
img.trollStuart,
img.backwardStuart {
	padding:10px 10px 2px;
}
img.backwardStuart {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	-ms-filter: "FlipH";
	filter: FlipH;
}

img.bigStuart {
	padding:10px;
	width:320px;
}

@media screen and (min-width: 650px)  {
	img.trollStuart {
		float:right;
	}
	img.backwardStuart {
		float:left;
	}
	img.bigStuart {
		padding:10px;
		width:initial;
	}

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE-only styles here. Works for IE10 & IE11*/
	ul.languageBar a{
		display:inline-block;
	}
}