@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 2fr 1fr;
	grid-template-rows:  minmax(10.5rem, auto) .4em 9rem minmax(60px, auto) minmax(4.4rem, auto);
	grid-template-areas: 
		". title search search ."
		". border border border ."
		". . nav nav ."
		". aboutContainer aboutContainer aboutContainer ."
		"footer footer footer footer footer";
}

.aboutContainer{
	grid-area: aboutContainer;
	display: grid;
	grid-template-rows: repeat(9, minmax(60px, auto));
	grid-template-areas: 
		". about about about ."
		". contents contents contents ."
		". entryInfo entryInfo entryInfo ."
		". parserInfo parserInfo parserInfo ."
		". tagsInfo tagsInfo tagsInfo ."
		". attachmentRules attachmentRules attachmentRules ."
		". methods methods methods ."
		". suggestions suggestions suggestions ."
		". references references references .";
}

.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;
}

.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;
}

.sectionHeader{
	font-size: 1.5rem;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: bold;
	margin-bottom: 1rem;
}

.section{
	padding-top: 1rem;
	padding-bottom: .5rem;
}

.sectionContent p, ul, li, a{
	margin-bottom: 1rem;
	margin-top: .5rem;
}

#citation_table{
	width: 100%;
}

th{
	height: 2.5rem;
	text-align: left;
	padding-right: 2rem;
}

td{
	text-align: left;
}

p {
	text-align: justify;
	text-justify: inter-word;
}

.about{
	grid-area: about;
}

.contents{
	grid-area: contents;
}
#contents{
	padding-left: 3rem;
	font-weight: bold;
}

.methods{
	grid-area: methods;
}

.parserInfo{
	grid-area: parserInfo;
}

.entryInfo{
	grid-area: entryInfo;
}

.wheel{
	display: flex;
	flex-direction: row;
}

.wheel p{
	padding-right: 5%;
}

.tagsInfo{
	grid-area: tagsInfo;
}

.attachmentRules{
	grid-area: attachmentRules;
}

.suggestions{
	grid-area: suggestions;
}

.references{
	grid-area: references;
}

.twoColumn{
	display: flex;
	flex-direction: row;
}

.taglist{
	display: flex;
	flex-direction: column;
	max-width: 100%;
	max-height: 30rem;
	flex-wrap: wrap;
}

.tgCell{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	max-width: 50%;
}

.tgCell p {
	margin-top: 0rem;
	padding-right: 1rem;
}

.tgCont{
	display: flex;
	flex-direction: column;
	align-items: start;
  	justify-content: start;
	min-width: 6.5rem;
}

.tag{
	font-weight: bold;
	border-radius: 6px;
	font-size: .7rem;
	padding: .1rem .6rem .1rem .6rem;
	color: #FFF;
	line-height: 1.9em;
	text-wrap: nowrap;
}

.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;
}

.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;
}

#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 */
}

/*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: 1300px) {
	
	.taglist{
		max-height: 40rem;
	}
}

@media only screen and (max-width: 1000px) {
	
	.taglist{
		max-height: 50rem;
	}
}

@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) 10rem .4em 9rem minmax(12.5rem, auto) minmax(12rem, auto);
		grid-template-areas: 
			"title title title title title"
			". search search search ."
			". border border border ."
			". nav nav nav ."
			". aboutContainer aboutContainer aboutContainer ."
			"footer footer footer footer footer";
	}

	.aboutContainer{
		grid-area: aboutContainer;
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: repeat(9, minmax(60px, auto));
		grid-template-areas: 
			"about"
			"contents"
			"entryInfo"
			"parserInfo"
			"tagsInfo"
			"attachmentRules"
			"methods"
			"suggestions"
			"references";
	}

	.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{
		flex-flow: column;
	}

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

	.bar_button{
		flex-flow: wrap;
	}

	#searchButton{
		margin-top: .5rem;
	}

	.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;
	}

	.taglist{
		max-height: fit-content;
		flex-wrap: nowrap;
	}

	.tgCell{
		max-width: 100%;
	}

	.wheel{
		display: flex;
		flex-direction: column;
	}
}