@charset "utf-8";

* {
	margin: 0px;
	padding: 0px;
	font-family: 'muli', sans-serif;
}

*:focus{
	outline: none;
}
.main{
	display: grid;
	min-height: 100%;
	grid-template-columns: 1fr 3fr 2fr 230px 1fr;
	grid-template-rows:  minmax(10.5rem, auto) .4em 9rem minmax(60px, auto) minmax(300px, auto) minmax(4.4rem, auto);
	grid-template-areas: 
		". title search search ."
		". border border border ."
		". . nav nav ."
		". parse parse parse ."
		". results results results ."
		"footer footer footer footer footer";
}

.title{
	grid-area: title;
	display: flex;	
}

.title a img{
	padding: 60px 0px 0px 0px;
	position: relative;
}

.titleText{
	display: flex;
	flex-direction: column;
	background: none;
	padding: 4.5rem 2rem 1rem 1.5rem;
}

.titleText h1{
	font-family: 'Josefin Sans', sans-serif;
	font-size: 2rem;
}

.titleText h2{
	font-size: 1.1rem;
}

h3{
	font-size: 1.1rem;
}

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

.border{
	grid-area: border;
	border-bottom: 2px solid #999999;
}

.border::after{
	content: '';
	display: block;
	height: .4em;
	width: 7em;
	position: relative;
	background: #EF9D87;
	bottom: 0em;
	right: 0em;
	z-index: 99999;
}

.nav{
	grid-area: nav;
	display: flex;
	flex-direction: row;
	float: left;
	justify-content: flex-end;
}

.navRow{
	display: flex;
	justify-content: flex-start;
	align-items: start;		
}

.nav a{
	margin: 20px 20px 0px 0px;
}

#row2 a:last-child{
	margin-top: 17.5px;
}

.search{
	grid-area: search;
	display: flex;
	flex-direction: column;
	justify-content: end;
    align-content: flex-end;
	flex-wrap: nowrap;
    padding-bottom: 15px;
}

.bar_button{
	display: flex;
	flex-direction: row;
	justify-content: end;
	flex-wrap: nowrap;
}

input[type=text]{
    height: 38px;
    width: 400px;
    font-size: 18px;
    font-weight: lighter;
	color: #4c4f53;
    padding-top: 3px;
	border: none;
    border-bottom: 2px solid #666666;
}

::placeholder{
	color: #A9A9A9;
}

input[type=button]{
    border: none;
    height: 43px;
    min-width: 115px;
    background: #4c4f53;
    font-size: 18px;
    font-weight: lighter;
    color: #FFF;
	transition: all 0.2s ease;
	margin-left: 10px;
	cursor: pointer;
}

input[type=button]:hover{
	background: #ef9d87;
}

.radios{
	display: flex;
	flex-direction: row;
	margin-top: 1rem;
	padding-left: 10%;
}

.radiolabel{
	cursor: pointer;
	margin: 0 1rem 0 1rem;
}

input[type='radio'] {
	box-sizing: border-box;
	appearance: none;
	background: white;
	outline: 2px solid #333;
	border: 3px solid white;
	width: 12px;
	height: 12px;
	cursor: pointer;
}
  
input[type='radio']:checked {
	background: #ef9d87;
}

.parse{
	grid-area: parse;
	display: none;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.parseTag {
  	width: 80px;
  	height: 45px;
  	position: relative;
	display: flex;
  	color: #FFF;
	font-size: 18px;
	align-items: center;
	justify-content: center;
 	background: #b0e0e6;
	font-weight: bold;
}

.morphs{
	display:flex;
	flex-direction: row;
	font-size: 18px;
	font-weight: bold;
	font-size: 24px;
}

.base{
	color: #ef9d87;
	margin: 0 .5rem 0 2rem;
}

.morpheme{
	color: #4c4f53;
	margin: 0 .5rem 0 .5rem;
}

.results{
	grid-area: results;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.results_section{
	font-weight: bold;
	font-size: 1.1rem;
	margin: 1rem 0 1rem 1rem;
}

.result{
	height: auto;
	width: auto;
	display: flex;
	flex-direction: column;
	font-size: 1.1rem;
	color: #2f3235;
	padding: 10px 20px 10px 20px;
	overflow: hidden;
}

.result:hover{
	background: #f6f4f4;
}

.tag{
	border-radius: 6px;
	font-size: .65rem;
	padding: .25rem .5rem .25rem .5rem;
	margin-right: .25rem;
	color: #FFF;
	line-height: 25px
}

.ChukotkanTag{
	background: #4c4f53
}

.commonTag{
	background: #4c4f53
}

.demonstrativeTag{
	background: #4c4f53 
}

.nounTag{
	background: #0E7C7B
}

.verbTag{
	background: #4B1D3F
}

.postbaseTag{
	background: #4c4f53
}

.propernounTag{
	background: #5d737e
}

.rootTag{
	background: #902923
}

.emotionalTag, .posturalTag, .dimensionalTag{
	background: #4c4f53
}

.particleTag{
	background: #4c4f53
}

.exclamatoryTag, .conjunctiveTag, .interjectionalTag, .adverbialTag{
	background: #4c4f53
}

.entryHead{
	font-weight: bold;
	font-size: 1.3rem;
	color: #ef9d87;
	padding-right: 15px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: start;
}

.headwordCont{
	padding-right: 15px;
}

.entryCyr{
	font-family: 'Doulos SIL', serif;
	padding-right: 10px;
	font-size: 1.1rem;
	color:#4c4f53;
}

.entryipa{
	font-family: 'Doulos SIL', serif;
	padding-right: 10px;
}

.entryDef{
	font-style: italic;
}

.entryTop{
	padding-bottom: .5rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: start;
}

.entryOther{
	margin-top: 20px;
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.yupik_ex{
	margin-right: 20px;
	color: #ef9d87;
}

.english_ex{
	margin-bottom: 5px;
	font-style: italic;
}

.footer{
	grid-area: footer;
	display: flex;
	flex-direction: column;
	padding-top: 4rem;
	justify-content: center;
	font-size: .8rem;
}

#footer1{
	margin: auto;
	width: 50%;
	text-align: center;
}

#footer2{
	margin: auto;
	width: 50%;
	text-align: center;
	padding-top: 1rem;
	padding-bottom: 2rem;
}

a{
	text-decoration: none;
	background: none;
}

.entry a:hover{
	text-decoration: underline;
	text-decoration-color: #ef9d87;
}

h1, h2, h3, h4{
	font-family: 'muli', sans-serif;
	background: none;
}

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.05s ease 0.1s;
    visibility: visible;
}

[data-title]:after {
    content: attr(data-title);
    color: #4c4f53;
    font-size: 1rem;
	font-weight: bold;
    position: absolute;
    top: 3rem;
    left: 0%;
	max-width: 6rem;
    white-space: normal;
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
}

[data-title] {
    position: relative;
}

/*autocomplete styling*/
.autocomplete {
	position: relative;
}
.autocomplete-items {
	position: absolute;
	border: 1px solid #d4d4d4;
	border-bottom: none;
	border-top: none;
	z-index: 99;
	top: 100%;
	min-width: 40%;
	left: 19.5%;
}
.autocomplete-items div {
	padding: 10px;
	cursor: pointer;
	background-color: #fff;
	border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
	background-color: #ef9d87;
}
.autocomplete-active {
	background-color: #b0e0e6 !important;
	color: #ffffff;
}

/*display: grid;
	min-height: 100%;
	grid-template-columns: 1fr 3fr 2fr 230px 1fr;
	grid-template-rows: 170px 120px minmax(60px, auto) minmax(300px, auto) 70px;
	grid-template-areas: 
		"title title search search ."
		". . nav nav ."
		". parse parse . ."
		". results results results ."
		"footer footer footer footer footer";*/

/*media queries*/
@media only screen and (max-width: 750px) {
	.main{
		display: grid;
		min-height: 100%;
		grid-template-columns: 1fr 3fr 2fr 2fr 1fr;
		grid-template-rows: minmax(10.5rem, auto) 6.25rem .4em 9rem minmax(6.25rem, auto) minmax(12.5rem, auto) minmax(12rem, auto);
		grid-template-areas: 
			"title title title title title"
			". search search search ."
			". border border border ."
			". nav nav nav ."
			". parse parse parse ."
			". results results results ."
			"footer footer footer footer footer";
	}

	.title a img{
		padding: 3.75rem 0rem 0rem 3rem;
		width: 7rem;
		height: 4.5rem;
	}
	
	.titleText{
		padding: 4rem 2rem 0rem 2rem;
	}
	
	.titleText h1{
		font-family: 'Josefin Sans', sans-serif;
		font-size: 1.5rem;
	}
	
	.titleText h3{
		font-size: .8rem;
	}

	.nav a{
		margin: 20px 10px 0px 0px;
	}

	.nav a:last-child{
		margin-top: 17.5px;
	}
	
	.nav a img{
		transform: scale(0.85);
	}

	[data-title]:after {
		font-size: .8rem;
	}

	.morphs{
		flex-wrap: wrap;
	}

	.morpheme{
		flex-shrink: 1;
	}

	.radios{
		padding-left: 0rem;
		justify-content: flex-start;
	}

	.radiolabel{
		margin: 0 1rem 0 0;
		font-size: .9rem;
		padding-left: 1em;
	}

	.parse{
		flex-direction: column;
	}

	.parseTag{
		margin-bottom: 1rem;
	}
}