@charset "utf-8";
@media (prefers-reduced-motion: reduce) {
  .tooltip, .joyo { transition: none !important; }
  a, .nonoutline:link, .nonoutline:visited:active { transition: none !important; }
}
@viewport {
	width:device-width;
    zoom:auto;
	height: 100% !important;
}

/* Always use lowercase letters for the font URL */
/*
	@font-face {
	  font-family: 'PMingLiU';
	  src: url('/fonts/pmingliu.woff2') format('woff2');
	  font-display: swap;
	  font-weight: normal;
	  font-style: normal;
	}

	@font-face {
	  font-family: 'TakaoGothic';
	  src: url('/fonts/takaogothic.woff2') format('woff2');
	  font-display: swap;
	  font-weight: normal;
	  font-style: normal;
	}

	@font-face {
	  font-family: 'TakaoMincho';
	  src: url('/fonts/takaomincho.woff2') format('woff2');
	  font-display: swap;
	  font-weight: normal;
	  font-style: normal;
	}

	@font-face {
	  font-family: 'PMingLiU';
	  src:	local('pmingliu'),
	  	url('/fonts/pmngliu.ttf') format('truetype'),
	  	url('/fonts/pmingliu.wof2') format('woff2');
	  font-display: swap;
	  font-weight: normal;
	  font-style: normal;
	}

*/

.font_mingliu {
	font-family: "PMingLiU","STXihei","STHeiti","SimSun","华文细黑",serif;
	margin-left: 0.0em;
}

.font_mincho {
	font-family: "Hiragino Mincho","Yu Mincho Light","MS PMincho","RyuminL-KL","MS Mincho","Mincho",serif;
	margin-left: 0.2em;
	font-size: 5em;
}

.font_gothic {
	font-family: "PingFang TC","Yu Gothic UI Light","MS PGothic","Osaka","MS Gothic","ＭＳ Ｐゴシック","Gothic",sans-serif;
	margin-left: 0.2em;
	font-size: 5em;
}

.clearfix {
	clear: both;
}
/* start eu popup css */
.eupopup-container {
	background-color: rgba(25, 25, 25, 0.9);
	color: #efefef;
	padding: 5px 20px;
	font-size: 12px;
	line-height: 1.2em;
	text-align: center;
	display: none;
	z-index: 9999999;
}

.eupopup-container-top,
.eupopup-container-fixedtop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.eupopup-container-fixedtop {
	position: fixed;
}

.eupopup-container-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

.eupopup-container-bottomleft {
	position: fixed;
	bottom: 10px;
	left: 10px;
	width: 300px;
}

.eupopup-container-bottomright {
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 300px;
}

.eupopup-closebutton {
	font-size: 16px;
	font-weight: 100;
	line-height: 1;
	color: #a2a2a2;
	filter: alpha(opacity=20);
	opacity: 0.2;
	position: absolute;
	font-family: helvetica, arial, verdana, sans-serif;
	top: 0;
	right: 0;
	padding: 5px 10px;
}

.eupopup-closebutton:hover,
.eupopup-closebutton:active {
	color: #fff;
	text-decoration: none;
}

.eupopup-head {
	font-size: 1.2em;
	font-weight: bold;
	padding: 7px;
	color: #fff;
}

.eupopup-body {
	color: #a2a2a2;
}

.eupopup-buttons {
	padding: 7px 0 5px 0;
}

.eupopup-button_1 {
	color: yellow;
	font-weight: bold;
	font-size: 14px;
}

.eupopup-button_2 {
	color: yellow;
	font-weight: normal;
	font-size: 12px;
}

.eupopup-button {
	margin: 0 10px;
}

.eupopup-button:hover,
.eupopup-button:focus {
	text-decoration: underline;
	color: #f6a21d;
}

body .eupopup-color-inverse {
	color: #000;
	background-color: rgba(255, 255, 255, 0.9);
}

body .eupopup-color-inverse .eupopup-head {
	color: #000;
}

body .eupopup-style-compact {
	text-align: left;
	padding: 8px 30px 7px 20px;
	line-height: 15px;
}

body .eupopup-style-compact .eupopup-head,
body .eupopup-style-compact .eupopup-body,
body .eupopup-style-compact .eupopup-buttons {
	display: inline;
	padding: 0;
	margin: 0;
}

body .eupopup-style-compact .eupopup-button {
	margin: 0 5px;
}
/* end eu popup css */
body {
	margin: 0em;
	padding: 0em;
	line-height: 1.5;
	font-family: "Tahoma", "Verdana", "Arial", "Helvetica", sans-serif;
	font-size: 80%;
	color: #000000;
	background-color: #f0f0f0;
    transition: padding-top 0.1s ease-in-out;
}

html {
}

/* Show a helpful cursor on items that trigger tooltips */
[rel~="tooltip"],
[rel~="joyo"] {
  cursor: help;
}

.tooltip {
	background: #333;
	background: linear-gradient(rgba(0, 0, 0, .9), rgba(0, 0, 0, 1));
	border-radius: 8px;
	border: 2px solid #f0f;
	box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
	color: #fff;
	font-family: sans-serif;
	font-size: 1.0em;
	line-height: 1.5;
	padding: 5px;
/*    text-align: center;  */
	text-shadow: 0 1px rgba(0, 0, 0, .5);
	z-index: 100;
	transition-delay: .0s; /* use javascript instead */
}

/* base */
.tooltip, .joyo {
  position: absolute;
  opacity: 0;
  /* no transform/transition here — JS controls timing */
}

[hidden]{display:none!important;}

/* shown/hidden states */
.tooltip.is-shown, .joyo.is-shown { opacity: 1; }
.tooltip.is-hiding, .joyo.is-hiding { opacity: 0; }


.joyo {
	background: #333;
	background: linear-gradient(rgba(200, 255, 255, 1), rgba(200, 255, 255, 1));
	border-radius: 8px;
	border: 2px solid #f0f;
	box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
	color: #000;
	font-family: sans-serif;
	font-size: 1.0em;
	line-height: 1.5;
	padding: 5px;
/*    text-align: center;  */
	text-shadow: 0 1px rgba(200, 255, 255, .5);
	z-index: 100;
	transition-delay: .0s; /* use javascript instead */
}

.jouyou {
	background-color: white;
	font-family: "PMingLiU","STXihei","STHeiti","SimSun","华文细黑",serif;
}

.jouyounon {
	background-color: #E1E1E1;
	font-family: "PMingLiU","STXihei","STHeiti","SimSun","华文细黑",serif;
}

br {
	display: block;
 /* makes it have a width */
	content: "";
 /* clears default height */
	margin-top: 0.5em;
 /* change this to whatever height you want */
}

p {
	margin-right: 1em;
	margin-left: 1em;
	padding-bottom: 1em;
}

p.nHsNormal, li.nHsNormal, div.nHsNormal {
	margin-top: 0em;
	margin-right: 0.2em;
	margin-left: 0.2em;
/*font-weight: lighter;*/
	line-height: 1.7;
/*font-family: "Calibri","Helvetica Neue",Helvetica,Arial,Utkal,sans-serif;*/
	font-size: 1.5em;
}

h1, h2 {
	page-break-after: avoid;
	font-family: "Cambria",serif;
	background-color: #F0F0F0;
	color: #365F91;
	margin-top: 2em;
	margin-right: 0em;
	margin-bottom: 1em;
	margin-left: 0em;
}

h1.nHsTitle, h2.nHsTitle, p.nHsTitle, li.nHsTitle, div.nHsTitle {
	text-align: center;
	margin-top: 0.5em;
	margin-right: 0em;
	margin-bottom: 0.3em;
	margin-left: 0em;
	border: none;
	padding: 0em;
	font-size: 2em;
	font-family: "Cambria",serif;
	background-color: #F0F0F0;
	color: #17365D;
}

p.nHsSubtitle, li.nHsSubtitle, div.nHsSubtitle {
	margin-left: 0.2em;
	line-height: 115%;
	font-size: 1.4em;
	font-family: "Cambria",serif;
	background-color: #F0F0F0;
	color: black;
	font-style: italic;
	padding: 0.3em;
}

.quoter {
	max-width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 1.4em;
	margin-left: 1em;
	margin-right: 1em;
}

.photocontain {
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
	float: none;
}

.photocaption {
	max-width: 100%;
	font: bold 90% Arial, Helvetica, sans-serif;
	line-height: 1.5;
	text-align: center;
	font-size: 1em;
	padding-bottom: 3em;
	margin-left: 3em;
	margin-right: 3em;
}

img {
	max-width: 100%;
	height: auto;
}

img.bonoboleft {
	max-width: 50%;
	min-width: 100px;
	height: auto;
	margin-right: 10px;
	float: left;
}

img.bonoboright {
	max-width: 50%;
	min-width: 100px;
	height: auto;
	margin-left: 10px;
	float: right;
}

a img {
	border: none;
}
.glyphs {
	font-size: 2.2em;
/* DO NOT INCLUDE	font-family: "PMingLiU","STXihei","STHeiti","SimSun",serif; */
	margin: 0.2em;
	padding-top: 0em;
	padding-bottom: 0em;
/*cursor: pointer;*/
/*cursor: none;*/
}

.glyphspict {
	font-size: 3.0em;
	font-family: "PMingLiU","STXihei","STHeiti","SimSun","华文细黑",serif;
	margin: 0.2em;
	padding-top: 0em;
	padding-bottom: 0em;
}

.cssButton, .cssButtonHover {
	background-color: #F4F4F4;
	color: #000000;
	border: 2px outset #F4F4F4;
	font-family: "Tahoma", "Verdana", "Arial", "Helvetica", sans-serif;
/*font-size: 1.1em;*/
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	font-weight: bold;
	padding: 0.3em;
/*border-spacing: 1px;*/
/*margin: 0.3em;*/
/*display: block;*/
/*vertical-align: top;*/
/*line-height: 130%;*/
/*cursor: pointer;*/
}

.cssButtonHover {
	color: red;
	border-style: inset;
	text-decoration: none;
}

.cssButtonGlyph, .cssButtonHoverGlyph {
	font-size: 2.2em;
	font-family: "PMingLiU","STXihei","STHeiti","SimSun","华文细黑",serif;
	background-color: #F4F4F4;
	color: #000000;
	border: 2px outset #F4F4F4;
	text-align: center;
	text-decoration: none;
}

.cssButtonHoverGlyph {
	color: red;
	border-style: inset;
	text-decoration: none;
}

a:visited, a:link, ul, li, a {
	margin: 0px auto;
	list-style-type: none;
	text-decoration: none;
	list-style: none;
	padding-inline-start: 1px;
}

a.glyphs:visited, a.itemTitle:visited {
	background-color: #F4F4F4;
}

a:hover, #navMain li a:hover, #navSupp li a:hover {
	color: #FF0000;
	position: relative;
/*	background-color: #F4F4F4; */
}

a:active {
	color: #0000FF;
}

span.pseudolink {
	text-decoration: underline;
}

h4, h5, h6, label, h4.optionName, address, .sideBoxContent, .larger {
	font-size: 1.1em;
}

.listingDescription {
	font-size: 1.2em;
	color: #000000;
	background-color: #f2fafe;
	margin-top: 0.1em;
	margin-bottom: 0.1em;
	padding-top: 0em;
	padding-bottom: 0em;
	vertical-align: baseline;
}

.itemtitle {
	padding-top: 0em;
	padding-bottom: 0em;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0.3em 0;
	text-rendering: optimizeLegibility;
}

h3.pseudolink, h4.pseudolink, div.pseudolink {
	color: #164796;
	padding-top: 0.1em;
}

h3.pseudolink, h4.pseudolink {
	background: #F0F0F0;
}

h3.pseudolink:hover, h4.pseudolink:hover, div.pseudolink:hover {
/* yellow fade out after release hover */
	background-color: #FFFF00;
	color: red;
}

input[type='submit'] {
	appearance: none;
}

select, input {
	display: inline;
	background-color: #F4F4F4;
	font-size: 1em;
	padding:0em 0.2em 0em 0.2em;
}

input[type=text], input[type=password] {
	padding: 0.8em;
}

input[type=checkbox] {
	transform: scale(1.5);
}

form {
	font-size: 1em;
	display: inline;
}

textarea {
	margin: auto;
	display: block;
	width: 95%;
}

input:focus, select:focus, textarea:focus {
	background: #E4FEF5;
}

fieldset {
	padding: 0.5em;
	margin: 0.5em;
	border: 0.1em solid #cccccc;
}

legend {
	font-weight: bold;
	padding: 0.3em;
	color: black;
}

label.checkboxLabel {
	margin: 0.5em 0.3em;
}

label.inputLabel {
	width: 9em;
	float: left;
	margin-top: 1em;
}

.clearBoth {
	clear: both;
}

hr {
	height: 0.1em;
	margin-top: 0.5em;
	border: none;
	border-bottom: 0.25em solid #9a9a9a;
}

.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
	line-height: 1.8em;
	padding: 0.2em;
	text-align: center;
	margin: 1em;
	border: 0.1em solid #9a9a9a;
}

.messageStackWarning, .messageStackError {
	background-color: #FFFF66;
	color: #000000;
}

.messageStackSuccess {
	background-color: #99FF99;
	color: #000000;
}

.messageStackCaution {
	background-color: #FFFF66;
	color: #000000;
}

#mainWrapper {
	height: auto;
	background-color: #f0f0f0;
	text-align: left;
/*	max-width: 750px; */
/*	min-width: 512px; */
	vertical-align: top;
/*	border: 0.1em solid #9a9a9a; */
}

#headerWrapper {
	margin-left: auto;
	margin-right: auto;
	font-weight: bold;
	display: inline;
	text-align: left;
}

#contentMainWrapper {
/*	max-width: 950px; */
	margin: 0px auto;
	background: none repeat scroll 0% 0% #FFF;
	padding: 0em;
}

.onyomi, .kunyomi, #productsPronunciationOnyomi, #productsPronunciationKunyomi {
	font-weight: bold;
	font-size: 2em;
}

option, select {
	padding: 0.1em 1em 0.5em 0.5em;
	font-size: 1.2em;
}

#navSuppWrapper {
	padding: 0em 0em;
	color: #000000;
	background-color: #f0f0f0;
	width: 100%;
/*	max-width: 950px; */
	margin: 0px auto;
}

.buttonRow {
	margin: 0.5em;
}

#contentColumnMain, .alert, .centerBoxContents {
	vertical-align: top;
}

#productDescription {
	/*font-size: 1.2em;*/
	padding: 0.5em;
}

.alert {
	color: #FF0000;
	margin-left: 0.5em;
}

.important {
	font-weight: bold;
}

.centerColumn {
	height: 100% !important;
	margin-top: 3em;
	padding: 0.5em;
}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
	font-size: 0.9em;
}

.legalCopyright {
	margin-bottom: 15em;
}

.rmj, .smallKana {
	font-size: 0.6em;
	display: none;
}

#studyLevelDisplay {
	display: block;
	padding: 0.5em;
}

#cartAdd01, #cartAdd02 {
	font-size: 70%;
	float: left;
	width: 12em;
	text-align: left;
	margin: 0.5em;
	border: 0px solid #000000;
	padding: 0em;
	list-style: none;
}

#cartAdd01below, #glfdata {
	text-align: left;
	float: left;
	margin: 0em;
	border: 0px solid #000000;
	padding: 0em;
}

#productDetailsList, #productDetailsListBelow {
	margin: 1em;
	padding: 0em 0.5em 0em 1.0em;
}

.css_table {
	display: table;
	margin-top: 1em;
}

.css_table_row {
	display: table-row;
}

.css_table_cell {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding-left: 0.1em;
}

table.studyList {
	padding-left: 0%;
	padding-right: 4%;
	background-color: LightGray;
}

table.learnedList {
	padding-left: 0%;
	padding-right: 4%;
	background-color: DimGray;
}

table.block {
	width: 9em;
	margin: 0;
 /* do NOT delete, do NOT place below the TABLE description that follows */
}

table {
	width: 100%;
	margin: auto;
}

.tableHeading th {
	border-bottom: 0.1em solid #9a9a9a;
}

.tableHeading {
	background-color: #e9e9e9;
}

tr.tableHeading {
	background-color: #cacaca;
	height: 2em;
}

.tableRow, .tableHeading {
	height: 2.2em;
}

.cartRemoveItemDisplay, .cartLearnedUpdate {
	padding: 1.0em 0.5em;
	width: 3.5em;
	vertical-align: top;
	text-align: center;
}

.cartProductDisplay {
	padding: 0.5em;
}

#scProductsHeading, #sfl_scProductsHeading {
	text-align: center;
}

#scMove, #sfl_scMove, #scRemoveHeading, #sfl_scRemoveHeading {
	width: 2em;
}

/*list box contents*/
.centerBoxContents {
	margin: 1em 0em;
}

.centerBoxWrapper {
	border: 0.1em solid #9a9a9a;
	height: 1%;
	margin: 1.1em 0;
}

h2.centerBoxHeading {
	font-size: 1.3em;
	color: #000000;
}

.centeredContent, th, #cartEmptyText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .centerBoxHeading, .productListing-data, .centerBoxContents {
	vertical-align: middle;
	text-align: center;
}

#siteinfoIP {
	padding-top: 8em;
}

.bigpad {
	padding-top: 8em;
}

.back {
	float: left;
}

.forward, #pictolistDefault #PPECbutton {
 /* DO NOT EDIT OR ADD COMMAS! */
	float: right;
	margin-right: 0.3em;
}

.glyph_no {
	display: none;
	padding-left: 1em;
}

.bold {
	font-weight: bold;
}

.rowOdd {
	background-color: #E8E8E8;
	height: 1.5em;
	vertical-align: top;
}

.rowEven {
	background-color: #FFF;
	height: 1.5em;
	vertical-align: top;
}

.hiddenField {
	display: none;
}

.visibleField {
	display: inline;
}

.productListing-rowheading {
	background-color: #abbbd3;
	height: 2em;
	color: #000000;
}

.siteMapList, .siteMapList.li {
	line-height: 3em;
	float: left;
}

label#textAreaReviews {
	font-weight: normal;
	margin: 1em 0em;
}

div.flashcardinline {
	display: inline-block;
	background: #F0F0F0;
}

div.flashcardinline div.question {
	padding: 0em 0em;
	z-index: 600;
}

div.flashcardinline div.answer {
	font-weight: bold;
	display: none;
	margin-left: 1em;
	margin-right: 1em;
	padding: 0em 1em;
}

div.flashcard div.answer {
/*	font-weight: bold; */
	display: none;
}

/* must keep these resizing classes below the glyphs classes */
.bigger .biggerText {
	font-size: 1.5em;
	padding: 0.5em 1.5em;
}

.fs2 {
	font-family: "PMingLiU","STXihei","STHeiti","SimSun","华文细黑",serif;
	font-size: 1.7em;
}

.fs4 {
	font-size: 4em;
	line-height: 1.5em;
}

.fs7 {
/* unused apparently */
	font-family: "PMingLiU","STXihei","STHeiti","SimSun","华文细黑",serif;
	font-size: 7em;
}

span.searchspacer {
	float: left;
	padding-left: 1em;
	padding-top: 1em;
	margin: 0.5em;
}

.input-prompt {
	position: absolute;
	display: inline;
	font-style: italic;
	color: #aaa;
	margin: 0.2em 0 0 0.5em;
}


:link:focus, div.pseudolink:focus {
	outline: 0.0em solid #164796;
	transition-property: background-color, outline-width;
	transition-delay: .5s;
	transition-duration: .5s;
	transition-timing-function: ease-out;
}

:visited:focus, div.pseudolink:focus {
	outline: 0.0em solid #831596;
	transition-property: background-color, outline-width;
	transition-duration: .5s;
	transition-timing-function: ease-out;
}

:link, div.pseudolink {
/* yellow fade in on hover and clear prior popped data */
/* do not set any color      	color: #164796;  */
	outline-width: 0;
	outline-offset: 0.1em;
	transition-property: background-color, outline-width;
	transition-duration: 9s;
	transition-timing-function: ease-out;
}

.nonoutline:link, .nonoutline:link:active, .nonoutline:visited:active {
	outline-width: 0;
	outline-offset: 0em;
	outline-radius: 0em;
	border-radius: 0em;
	outline-color: #F0F0F0;
	transition-property: background-color, outline-width;
	transition-duration: .5s;
	transition-timing-function: ease-out;
}

:visited {
/* do not set any color      	color: #831596;  */

}

:link:active {
	color: #687996;
	outline-color: #687996;
}

:visited:active {
	color: #8f6796;
	outline-color: #8f6796;
}

td {
	padding-left: 1em;
	padding-right: 1em;
}

td.tblcellright {
	text-align: right;
}

td.tblcellleft {
	text-align: left;
	padding-left: 1em;
}

.fader {
	animation: blinker 5s cubic-bezier(1,0,0.1,1) 1s infinite;
	text-align: center;
	padding-top: 5em;
	padding-bottom: 6em;
}

@keyframes blinker {
  
	80% {
		opacity: 0.3;
	}
}
/*
ul { 
	white-space:nowrap;
	color: #FF0000;
	position: -webkit-sticky;
	position: sticky;
}
*/
ul.navsticky {
	width: 100%;
    margin: 0px 0px 0px 0px;
	list-style-type: none;
	display: inline-block;
	white-space: nowrap;
	padding: 0;
	background-color: #333;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1;
	/* ADD THESE TRANSITIONS */
	transition: font-size 0.1s ease-in-out, padding 0.1s ease-in-out;
}

li.navsticky {
	line-height: 1.2em;
	display: inline-block;
	white-space: nowrap;
	position: -webkit-sticky;
	position: sticky;
	/* ADD THIS */
	transition: line-height 0.1s ease-in-out;
}

li.navsticky a {
	display: inline-block;
	color: white;
	text-align: center;
    padding: 0.5em 1em;
	text-decoration: none;
	white-space: nowrap;
	/* ADD THIS */
	transition: padding 0.1s ease-in-out;
}

li.vertcenter {
	padding: 1.6em 0em 0em 0em;
	/* ADD THIS */
	transition: padding 0.1s ease-in-out;
}

li.navsticky a:hover {
	background-color: #a6a6a6;
}

.active {
	background-color: #4CAF50;
}

.red {
	color: red;
}

sub, sup {
	float: left;
	white-space: normal;
	line-height: 1.5em;
	color: yellow;
	text-align: left;
	font-size: 150%;
	/* ADD THIS */
	transition: font-size 0.1s ease-in-out, line-height 0.1s ease-in-out;
}

#navbar {
  overflow: hidden;
  width: 100%;
  left:0;
  /* ADD THIS */
  transition: all 0.1s ease-in-out;
}

.sticky {
  z-index: 99999;
  width: 100%;
  position: fixed;
  top: 0;
  left:0;
  font-size: 80%;
}

/* ADD THIS - for smoother sticky transition on child elements */
.sticky ul.navsticky {
	font-size: 80%; /* inherit from parent or set explicitly */
}

.sticky li.vertcenter {
	padding: 1.0em 0em 0em 0em; /* reduced padding when sticky */
}

.sticky li.navsticky a {
	padding: 0.4em 0.8em; /* slightly reduced when sticky */
}

textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}

/* mws: tint the exact-match glyph row in search results */
.exactMatchGlyph {
    display: block;
    background-color: #fff4c2;
    padding: 0.5em 0.75em;
    border-left: 4px solid #e0a800;
    border-radius: 3px;
    margin: 0.25em 0;
}

.exactMatchGlyph p {
    margin: 0;
}