﻿/* DESKTOP */
@font-face {font-family: "Noto"; src: url(font/NotoSansCJKjp-DemiLight.otf);}
@font-face {font-family: "Noto Black"; src: url(font/NotoSansCJKjp-Black.otf);}
@font-face {font-family: "Source"; src: url(font/SourceSans3-Regular.ttf);}
@font-face {font-family: "Source Black"; src: url(font/SourceSans3-Black.ttf);}
@font-face {font-family: "Source Italic"; src: url(font/SourceSans3-Italic.ttf);}
@font-face {font-family: "Source Black Italic"; src: url(font/SourceSans3-BlackItalic.ttf);}

/* GLOBAL */

* {
	font-family: 'Source', 'Noto', sans-serif;
	font-weight: 400;
}
*:focus {
	outline: none;
}
body {
	margin: 0;
	background: #111;
	color: white;
}
a {
	color: white;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}
b {
	font-family: 'Source Black', 'Noto Black', 'sans-serif' !important;
}
sub {
	font-size: 10px;
	font-family: inherit !important;
	vertical-align: baseline !important;
}
sup {
	font-size: 10px;
	font-family: inherit !important;
	vertical-align: top !important;
}

/* MENU */

#menu {
	width: 170px;
	position: fixed;
	top: 55px;
	left: 15px;
	padding-bottom: 10px;
	background: #222;
	display: none;
	z-index: 2;
}
#menu.slide {
	display: inline;
}
h3 {
	margin: 15px 0px 2px 15px;
	font-family: 'Source Black', 'Noto Black', sans-serif;
	font-size: 16px;
	color: #999;
}
#menu a {
	width: 155px;
	height: 30px;
	line-height: 30px;
	display: block;
	padding-left: 15px;
	font-size: 16px;
	vertical-align: bottom;
}
#menu a:hover {
	background: #333;
	text-decoration: none;
}
#menu a.light:hover {
	background: #ccc;
	text-decoration: none;
}
#settingsButton {
	width: 24px;
	position: fixed;
	top: 20px;
	left: 20px;
	transition: .3s ease-in-out;
	cursor: pointer;
}
#settingsButton path {
	fill: white;
}
#settingsButton path.light {
	fill: black;
}
#settingsButton.slide {
	transform: rotate(90deg);
}
#lightTheme, #darkTheme {
	cursor: pointer;
}

/* HOMEPAGE */

#langs {
	max-width: fit-content;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	margin-top: 80px;
}
#lang1, #lang2 {
	display: inline-block;
	width: 400px;
}
h1 {
	font-size: 42px;
	font-family: 'Source Black', 'Noto Black', sans-serif;
}
h2 {
	font-size: 24px;
	font-family: 'Source Black', 'Noto Black', sans-serif;
	margin-top: 12px;
	margin-bottom: 4px;
	color: #999;
}
.langMenu {
	list-style-type: none;
	margin-left: 2ch;
	margin-top: 0;
}
.langMenu li {
	font-size: 18px;
	margin-bottom: 4px;
}

#newGlyph path {
	stroke-width: 1.65;
}
#newGlyph path.light {
	stroke-width: 1.25;
}
svg {
	overflow: visible;
}
path {
	stroke: white;
	fill: none;
	stroke-width: 1.45;
}
path.light {
	stroke: black;
	stroke-width: 1.05;
}

#lalLi1 {
	position: relative;
	top: -71px;
	left: 30px;
}
#lalLi2 {
	position: relative;
	top: -222px;
	left: 60px;
}
#lalLink1, #lalLink2 {
	display: inline-block;
	height: 1px;
}
#lalLine1, #lalLine2 {
	writing-mode: vertical-lr;
	text-decoration: underline;
	text-underline-position: right;
	color: rgba(255,255,255,0);
	text-decoration-color: white;
	position: relative;
	top: -75px;
	left: -1px;
	z-index: -10;
	user-select: none;
	visibility: hidden;
}

/* NONVOCAB */

#up {
	width: 40px;
	height: 40px;
	position: fixed;
	bottom: -40px;
	right: 20px;
	border-radius: 20px;
	background: rgba(0,0,0,0.5);
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	text-align: center;
	line-height: 35px;
	font-size: 40px;
	color: white;
	
}
#up:hover {
	background: black;
	text-decoration: none;
}
#up.slide {
	bottom: 20px;
}

#contentDiv {
	max-width: 1500px;
	margin: 100px auto 50px;
	padding: 8px;
}
#contentDiv * {
	font-family: 'Source', 'Noto', sans-serif;
	font-weight: 400;
	font-variant-numeric: proportional-nums;
}
#contentDiv p {
	margin-top: 24px;
	margin-bottom: 24px;
}
#contentDiv p.noSpace {
	margin-bottom: 0px;
}
#contentDiv h1 {
	display: inline-block;
	margin: 15px 0px;
	font-family: 'Source Black', 'Noto Black', sans-serif;
	font-size: 30px;
	/*color: #707070;*/
}
#contentDiv h2 {
	display: inline-block;
	margin: 0px 10px;
	font-family: 'Source Black', 'Noto Black', sans-serif;
	font-size: 20px;
	color: #999;
}
#contentDiv h4 {
	display: inline-block;
	margin: 15px 0px;
	font-family: 'Source Black', 'Noto Black', sans-serif;
	font-size: 20px;
	color: white;
}
#contentDiv h4 b {
	font-family: 'Source Black', 'Noto Black', sans-serif;
	font-size: 30px;
}
#contentDiv h5 {
	display: inline-block;
	margin: 15px 0px;
	font-family: 'Source Black', 'Noto Black', sans-serif;
	font-size: 16px;
	color: white;
}

#contentDiv h5 b {
	font-family: 'Source Black', 'Noto Black', sans-serif;
	font-size: 20px;
}
ul {
	margin-left: 18px;
	padding: 0;
}
table {
	margin: 24px 0px;
	border-collapse: collapse;
	text-align: center;
}
table td, table th {
	min-width: 30px;
	padding: 5px;
	border: 1px #111 solid;
	background: #333;
	white-space: nowrap;
}
table th {
	background: #222;
	font-family: 'Source Black', 'Noto Black', sans-serif;
}
span.blue {
	color: #09f;
}
span.green {
	color: #0c0;
}
span.gray {
	color: #999;
}
span.example {
	display: inline-block;
	margin-left: 20px;
}

.ph {
	font-family: 'Source', sans-serif !important;
	color: #6aa3ff;
}
.b {
	font-family: 'Source Black', sans-serif !important;
}
.ph b {
	font-family: 'Source Black', sans-serif !important;
}
.fr * {
	text-align: left;
	background: none !important;
}
.fr td, .fr th {
	padding: 2px 30px 2px 0px;
}

del {
	text-decoration: none;
	color: red;
}
rt {
	font-size: 10px;
}
.ipa {
	font-family: 'Source', sans-serif !important;
}
.split {
	height: 30px;
	line-height: 15px;
	position: relative;
	background: linear-gradient(to top right,#222 49.5%,#111 49.5%,#111 50.5%,#222 50.5%);
}
.split div {
	width: 60px;
}
.splitCol {
	text-align: right;
}
.splitRow {
	text-align: left;
}

/* NEW */

#contentDivNew {
	max-width: 1500px;
	margin: 100px auto 50px;
	padding: 8px;
}
#contentDivNew * {
	font-family: 'Source', sans-serif;
	font-variant-numeric: proportional-nums;
}
#contentDivNew p {
	margin-top: 24px;
	margin-bottom: 24px;
}
#contentDivNew h4, #contentDivNew h4 * {
	font-family: 'Source Black', sans-serif;
	font-size: 30px;
	margin: 5px 0px;
}
#contentDivNew h5, #contentDivNew h5 * {
	font-family: 'Source Black', sans-serif;
	font-size: 20px;
	margin: 5px 0px;
}
#contentDivNew h6 {
	font-family: 'Source Black', sans-serif;
	font-size: 16px;
	margin: 5px 0px;
}
#contentDivNew * i {
	font-family: 'Source Italic', sans-serif !important;
	font-style: inherit;
}
#contentDivNew * b {
	font-family: 'Source Black', sans-serif !important;
}
#contentDivNew i b {
	font-family: 'Source Black Italic', sans-serif !important;
	font-style: inherit;
}
.newUl {
	margin-top: 0px;
	list-style-type: none;
	margin-left: 2ch;
	margin-bottom: 24px;
}
.newUlNested {
	margin-top: 0px;
	list-style-type: none;
	margin-left: 2ch;
}
#contentDivNew p.noSpace {
	margin-bottom: 0px;
}
.tabNew * {
	text-align: left;
	vertical-align: baseline;
	background: none !important;
}
.tabNewTight * {
	text-align: left;
	vertical-align: baseline;
	background: none !important;
}
.tabNew td, .tabNew th {
	padding: 0px 3ch 0px 0px;
}
.tabNewTight td, .tabNewTight th {
	padding: 0px 1ch 0pc 0ch;
}
.tabNew th, .tabNewTight th {
	font-variant: small-caps;
	font-variant-numeric: proportional-nums;
}
#tabUml th, #tabUml td {
	min-width: auto;
	text-align: center;
	padding: 0px 2.5px;
}
span.grayNew {
	color: #999;
}
b span.grayNew {
	font-family: 'Source Black', sans-serif !important;
}
#TOC {
	margin-left: 0;
}
#TOC a, #TOC a .grayNew {
	font-family: 'Source Black', sans-serif;
}
#TOC .newUlNested a, #TOC .newUlNested a .grayNew {
	font-family: 'Source', sans-serif;
}
.glyphPos {
	font-size: 10px !important;
	font-family: 'Source Black', sans-serif !important;
	color: #999;
	margin-left: 2px;
	margin-right: 6px;
}
.headerRow td {
	padding-bottom: 5px;
}
.orth td, .orth th {
	text-align: center;
}

/*DICTIONARY*/
.waffle {
	margin: 100px auto 50px;
	padding: 8px;
	text-align: left;
}
.column-headers-background, .row-header, .freezebar-vertical-handle, .row-headers-background, .freezebar-cell, .freezebar-horizontal-handle {
	display: none;
}
.ritz td {
	background: #111;
}
.s0, .s1, .s2, .s3, .s4 {
	color: white;
	font-size: 16px !important;
	background: #111;
	padding: 2px 3px 2px 3px;
}
.s0 {
	padding-bottom: 5px !important;
	padding-right: 15px !important;
	font-variant: small-caps;
}
.s1 {
	font-family: 'Source Black', sans-serif !important;
}
.s2 {
	font-family: 'Source Italic', sans-serif !important;
}
.s0, .s3, .s4 {
	font-family: 'Source', sans-serif !important;
}
.s3 span, .s4 span {
	font-family: 'Source Black', sans-serif !important;
	font-weight: normal !important;
}
