@charset "utf-8";

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

*:focus{
	outline: none;
}
.main{
	display: grid;
	min-height: 100%;
	min-width: 100%;
	grid-template-columns: 1fr 3fr 3fr 1fr;
	grid-template-rows: minmax(10.5rem, auto) .4em 9rem 6.25rem 6rem 6rem minmax(6.25rem, auto) minmax(12.5rem, auto) 8rem;
	grid-template-areas: 
		". title title title"
		". border border ."
		".  . nav ."
		". search search ."
		". wod wod ."
		". cats cats ."
		". parse parse ."
		". results results ."
		"footer footer footer footer";
}

div#banner_notice { 
	display: none;
	position: absolute; 
	top: 0; 
	left: 0; 
	background-color: #ea8d0c; 
	width: 100%; 
}

div#banner_content { 
	width: 100%; 
	margin: 0 auto; 
	padding: 10px 0px 10px 0px; 
	
}

#banner_content a{
	text-decoration: none;
	color: #FFFFFF;
	font-weight: bold;
	justify-content: center;
	text-align: center;
	display: flex;
	text-wrap: wrap;
}

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

.title a img{
	width: 7rem;
	height: 4.5rem;
	padding: 3.75rem 0rem 0rem 0rem;
	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;
}

.wod{
	grid-area: wod;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}

#wod_container{
	padding-left: 2rem;
	width: 100%;
}

.cats{
	grid-area: cats;
	display: flex;
	justify-content: flex-start;
}


#cats_container{
	padding-left: 2rem;
	padding-top: .5rem;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

#cats_content{
	padding-top: .5rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.search{
	grid-area: search;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
}

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

input[type=text]{
    height: 2.375rem;
	min-width: 40vw;
	max-width: 50vw;
    font-size: 1.1rem;
    font-weight: lighter;
	color: #4c4f53;
    padding-top: 3px;
	border: none;
    border-bottom: 2px solid #666666;
}

::placeholder{
	color: #A9A9A9;
}

input[type=button]{
    border: none;
    height: 2.6rem;
    width: 7.2rem;
    background: #4c4f53;
    font-size: 1.1rem;
    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;
	justify-content: center;
}

.radiolabel{
	cursor: pointer;
	margin: 0 1rem 0 1rem;
	padding-left: .5rem;
}

input[type='radio'] {
	box-sizing: border-box;
	appearance: none;
	background: white;
	outline: .125em solid #333;
	border: 3px solid white;
	width: .75rem;
	height: .75rem;
	cursor: pointer;
	margin-right: .3rem;
  }
  
input[type='radio']:checked {
	background: #ef9d87;
}
  
.parse{
	grid-area: parse;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin: 1rem 0 2rem 0;
}

.parseTag {
  	width: 5rem;
  	height: 2.8rem;
  	position: relative;
	display: flex;
  	color: #FFF;
	font-size: 1.1rem;
	align-items: center;
	justify-content: center;
 	background: #b0e0e6;
	font-weight: bold;
}

.morphs{
	display:flex;
	flex-direction: row;
	font-size: 1.5rem;
	font-weight: bold;
	padding-top: 1rem;
}

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

.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;
	/*box-shadow: .125em .125em .375em .06em #ccc;*/
	font-size: 1.1rem;
	color: #2f3235;
	padding: 10px 20px 10px 20px;
	overflow: hidden;
	/*border-bottom: #2f3235 solid 1px;*/
}

.result:hover{
	background: #f6f4f4;
}

.tag{
	font-weight: bold;
	border-radius: 6px;
	font-size: .7rem;
	padding: .25rem .6rem .25rem .6rem;
	margin-right: .25rem;
	color: #FFF;
	line-height: 1.9em;
	cursor: pointer;
}

.category{
	display: block;
	margin: .25rem;
	background: #4c4f53
}

.category:hover{
	cursor: pointer;
	background: #ef9d87;
}

.ChukotkanTag{
	background: #4c4f53;
}

.commonTag{
	background: #4c4f53;
}

.demonstrativeTag{
	background: #4c4f53;
}

.nounTag{
	background: #0E7C7B;
}

.verbTag{
	background: #4B1D3F;
}

.postbaseTag{
	background: #4c4f53;
}

.propernounTag{
	background: #5d737e;
}

.pronounTag{
	background: #5d737e;
}

.rootTag{
	background: #902923;
}

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

.particleTag{
	background: #4c4f53;
}

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

.gambellWord, .savoongaWord{
	background: #b0e0e6;
}

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

.headwordlink{
	text-decoration: none;
	color:inherit;
}

.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, i{
	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;
}

#scrollBtn {
	display: none; /* Hidden by default */
	position: fixed; /* Fixed/sticky position */
	bottom: 20px; /* Place the button at the bottom of the page */
	right: 30px; /* Place the button 30px from the right */
	z-index: 99; /* Make sure it does not overlap */
	border: none; /* Remove borders */
	outline: none; /* Remove outline */
	background-color: #4c4f53; /* Set a background color */
	color: white; /* Text color */
	cursor: pointer; /* Add a mouse pointer on hover */
	padding: 15px; /* Some padding */
	border-radius: 40px; /* Rounded corners */
	font-size: 18px; /* Increase font size */
}
	
#scrollBtn:hover {
	background-color: #ef9d87; /* Add a dark-grey background on hover */
}

/*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(12rem, auto) .4em minmax(10rem, auto) 8rem 6rem 6rem minmax(6.25rem, auto) minmax(12.5rem, auto) 8rem;
		grid-template-areas: 
			"title title title title title"
			". border border border ."
			". nav nav nav ."
			". search search search ."
			". wod wod wod ."
			". cats cats cats."
			". 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 0 2rem;
	}
	
	.titleText h1{
		font-family: 'Josefin Sans', sans-serif;
		font-size: 1.5rem;
	}
	
	.titleText h3{
		font-size: .8rem;
	}

	.nav{
		flex-flow: column;
	}

	.navRow{
		display: flex;
		justify-content: center;
		flex-grow: 1;
	}

	.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;
		bottom: 4rem;
	}

	.morphs{
		flex-wrap: wrap;
	}

	.morpheme{
		flex-shrink: 1;
	}

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