/* UNIFIED STYLE SHEET */

/* VARIABLES */
:root 
{ 
	/* page style */
	--bkgd-grad: linear-gradient(90deg, #E5E6DE 0px, #C5C9C7 25px, #A1A5AA 55px, #E3E4DE 100%);	
	--border-color: #999;
	
	--sidebar-grad: linear-gradient(90deg, #EEEBDC 0%, #EEEBDC 85%, #979797 100%);

	--content-grad:  linear-gradient(90deg, rgba(32,32,32,0.25) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 95%, rgba(32,32,32,0.25) 100%);
	--content-basecolor: #fff8e8; /* #fff1d8    #cce3ff; #A5BDDA; B7E1FC;   */
	
	--content-grad-orig:  linear-gradient(90deg, #92A9C6 0%, #A5BDDA 5%, #A5BDDA 95%, #97B0CF 100%);	
	
	--daring-fireball: #4A525A;
	--df-trans: #4A525A55;
	
	/*--headings: #b1572b; #fd712d; /*#FF3;*/
	--text-color: #35275e;
	--heading-text-color: #c38463;
	
	/*--han-grad: linear-gradient(345deg, #F90, #FC0);
	--pin-grad: linear-gradient(345deg, #CC0, #FF3);
	*/
	

	/* table cell shading */
	--head-grad: linear-gradient(180deg, #EEE, #BBB);
	--tool-grad: linear-gradient(180deg, #BBB, #AAA);
	--foot-grad: linear-gradient(0deg, #EEE, #BBB);

	--dig-grad: linear-gradient(345deg, #999, #FFF);
	--eng-grad: linear-gradient(345deg, #06F, #39C);
	--han-grad: linear-gradient(345deg, #F90, #FC0);
	--pin-grad: linear-gradient(345deg, #CC0, #FF3);
	--pin-grad2: linear-gradient(0deg, #AA0, #FF3 90%);

	--btn-grad: linear-gradient(180deg, #65A7F1, #2F66C0);
	--btn-grad2: linear-gradient(0deg, #65A7F1, #2F66C0);
	/*--butt-grad: linear-gradient(45deg, #999 0%, #ddd 10%, #ddd 90%, #999 100%);
	--butt-grad: radial-gradient(#DDD, #888);*/
	
	/* text styles */
	--hanzi-red-color: #ef4848;
	--hanzi-blu-color: #4e508b;
	
	--head-font-fam: Thonburi, "Trebuchet MS",, sans-serif;
	--dig-font-fam: Thonburi, "Trebuchet MS", sans-serif;
	--eng-font-fam: Thonburi, "Trebuchet MS", sans-serif;
	--han-font-fam: 'Noto Serif SC', serif;
	--pin-font-fam: 'Noto Serif SC', serif;
	
	--copyright-color: #deba97;
	
	--link-color: #44F;
	
	--dig-cell-color: #111;
	--eng-cell-color: #eee;
	--han-cell-color: #111;
	--pin-cell-color: #111;
}

@media (prefers-color-scheme: dark) 
{
  :root 
  {
		--content-basecolor: #2b2b31;
		--border-color: #666;
		
    --text-color: #EEE;
    --copyright-color: #7a6f24f;
 /*   --headings: #eebed1;*/
    --hanzi-red-color: #f85959;
		
		--dig-cell-color: #111;
		--eng-cell-color: #EEE;
		--han-cell-color: #111;
		--pin-cell-color: #111;
    
    --link-color: #bcc7e4;
  }
}




/* GENERAL PAGE STYLES */

/* 0730-0928 */


@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500&display=swap');


/* this isn't working yet (2020-07-30) */
/*
@viewport 
{
	width: device-width;
}
*/


html 
{	margin: 0px; 
	padding: 0px;
}
	
	
body 
{ 
	margin: 0px; 
	padding: 0px;

	background-color: var(--daring-fireball);
	font-family: Thonburi, Tahoma, sans-serif;
	font-size: 14pt;
}

@media only screen and (max-width: 480px) 
{
	body { font-size: 32pt; }
}
	
/*
@media only screen and (max-device-width: 480px)  
{ 
	body { font-size: 18px; }
}
*/
/*
	position: absolute;
*/



#page
{
	width: 980px;
	margin: 0;
	color: var(--text-color); 
	background-image: var(--content-grad);
	background-color: var(--content-basecolor);
}



.heading
{
	position: relative;
	margin-right: 5%;
	margin-left: 7%;
}


.section
{ 
	position: relative;
	margin-right: 5%;
	margin-left: 7%;
/*	margin-bottom: 75px; */
	padding-bottom: 50px;
	/*border-left: 1px solid #AAA;
	border-right: 1px solid #AAA;*/

}


.copyright
{
	color: var(--copyright-color);
	font-size: 12pt;
	padding-bottom: 25px;
}

@media only screen and (max-width: 480px) 
{
	.copyright {font-size: 22pt;}
}


.menubar
{
	display:flex; 
	justify-content: space-between; 
	font-family: Papyrus, 'Noto Serif SC';
	font-size: 20px;
	border-top: 1px solid var(--hanzi-red-color); 
	border-bottom: 1px solid var(--hanzi-red-color); 
	padding: 3px;
}



@media only screen and (max-width: 480px) 
{
	.menubar { font-size: 36px; }
}



.menuitem 
{
	text-decoration: none; 
	margin: 5px 5px 1px 5px;
}


.headerlink
{
	text-decoration: none; 
	font-size: x-large;
	color: var(--link-color);
}


.outertable
{
	border-collapse:separate;
	border-spacing: 0px;
}


.pagebottom
{
	/*min-height:1200px;*/
}


/*
.sidebar 
{ 
	display:inline-block;
	text-align:center;
 	border-collapse:separate;
	border-spacing: 0px; 
	margin-right: 0px;
	min-width: 50px;
	background-image: var(--sidebar-grad2);
}
*/

.sidebarColor
{
	background-image: var(--sidebar-grad);
/*	background-color: var(--daring-fireball); */
}




/* SIDEBAR */
.sideheading 	
{ 
	position: absolute;
	top: 0px; 
	left: -50pt;
	text-align:center;
/* 	border-collapse:separate;
	border-spacing: 0px;
	margin-bottom: 5px; 
	*/
}


.othersideheading 	
{ 
	position: absolute;
	top: 0px; 
	right: 0pt;
}




/* hanzi & pinyon in the sidebar */
.sh_hanzi 
{ 
	/*color: var(--hanzi-red-color);*/
	color: var(--hanzi-red-color);
	font-family: var(--han-font-fam);
	font-weight: 500;
	font-size: 34pt;
	padding: 0px 5px;
}

@media only screen and (max-width: 480px) 
{
	.sh_hanzi { font-size: 38pt; }
}

/* FONTS */
/* default */ 


.sh_pinyin 
{ 
	color:#35275e;
	font-family: ui-serif; 
	font-size: 17px;
	font-style: italic;
	padding: 0px;
	margin-top: -5px;
}




.centered
{
	text-align:center;
	margin: 15px 0px;
}


@media only screen and (min-width: 481px) 
{
	.shift-left
	{
		text-align:center;
		margin: 15px 0px;
	}
}
	
	
	
@media only screen and (max-width: 480px) 
{
	.shift-left
	{
		margin-left: 15 0 15 100px;
	}
}

.nudgeleft
{
	text-align:center;
	margin-left: -25px;
}


/* HTML TAGS */

header
{
	font-family: Papyrus, sans-serif; 
	color: var(--hanzi-red-color);
	margin: 0px;
	padding: 15px; 
	font-size: 42pt;
}

@media only screen and (max-width: 480px) 
{
	header { font-size: 40pt; }
}



h1 
{ 
	font-size: 26px;
	font-weight: bold;
	color: var(--text-color);
}


@media only screen and (max-width: 480px) 
{
	h1 
	{ 
		font-size: 26pt; 
	}
}



h2
{
	font-size: 22px;
	font-weight: bold;
	color: var(--text-color);
}


@media only screen and (max-width: 480px) 
{
	h2 { font-size: 22pt; }
}



h3 
{ 
	font-size: 20px;
	font-weight: bold;
/*	font-family: "Arial Narrow", sans-serif; */
	color: var(--text-color);
	
}

@media only screen and (max-width: 480px) 
{
	h3 { font-size: 20pt; }
}


h4 
{ 
	font-size:14pt;
	font-weight: normal;
	color:  var(--heading-text-color);

	margin-bottom: 3px;
}



p
{
	display:inline;	
	line-height:2;
/*	margin-block-start:10px;*/
}


a
{
	font-size: large;
	color: var(--link-color);
}

@media only screen and (max-width: 480px)
{
	a	{	font-size: xx-large; }
}


li 
{
	color: #77A;
	font-size: small;
	font-family: verdana;
}

@media only screen and (max-width: 480px)
{
li { font-size: x-large; }
}


span.lines 
{
	line-height:1.7;
}


li
{
  margin: 10px 0;
}


/* Draw a pill-shaped bi-colored rounded rect around a hanzi/pinyin couplet*/
.capsule	
{
	display:inline;
	border-collapse:separate;
	border-spacing: 0px;
	vertical-align: -30%;
	color: black;
	font-size: large;
}

@media only screen and (max-width: 480px)
{
.capsule { font-size: xx-large; }
}


.han
{
	font-family: var(--han-font-fam);
	font-weight: 400;
	background-image: var(--han-grad);
	padding: 0px 10px; 
	border-radius: 10px 0px 0px 10px;	
}

.pin
{
	font-family: var(--han-font-fam);
	font-weight: 400;
	background-image: var(--pin-grad);
	padding: 0px 10px; 
	border-radius: 0px 10px 10px 0px;	
}


@media only screen and (max-width: 480px) 
{
	.han { border-radius: 20px 0px 0px 20px; padding: 0px 20px; }	
	.pin  { border-radius: 0px 20px 20px 0px; padding: 0px 20px; }	
}





/*
	BIG SCRN:
	.sml { font-size: medium; }
	.med { font-size: large; }
	.big { font-size: xx-large; }

	SMALL SCRN:
 	.sml { font-size: x-large; }
	.med { font-size: xx-large; }
	.big { font-size: 42pt; }
*/


/* single element capsules (one color either han-only or pin-only)*/
.han-span
{
	font-family: var(--han-font-fam);
	font-weight: 400;
	font-size: large;
	padding:0px 10px; 
	border-radius: 5px;
	background-image: var(--han-grad);
	color: #111;
}

.pin-span
{
	font-family: var(--pin-font-fam);
	font-weight: 400;
	font-size: large;
	padding:0px 10px; 
	border-radius: 5px;
	background-image: var(--pin-grad);
	color: #111;
}

@media only screen and (max-width: 480px) 
{
	.han-span { font-size: 32pt ; border-radius: 15px; }
	.pin-span { font-size: x-large; border-radius: 15px; }
}


/* these two have to be last to override the normal gradients */
.xhan
{
   background-image: linear-gradient(to bottom right,  #FC0 calc(50% - 2px), red, #FC0 calc(50% + 2px)); 
}

.xpin
{
   background-image: linear-gradient(to bottom right,  #FF0 calc(50% - 2px), red, #FF0 calc(50% + 2px)); 
}



.appstoreicon
{
	width: 120px;
	height: 120px;
	border-radius: 10px; 
	margin-right: 10px;
}

.appstoreiconside
{
	width: 50px;
	height: 50px;
	border-radius: 5px;
	margin: 10px;
}


@media only screen and (max-width: 480px) 
{
	.appstoreiconside
	{
		width: 45px;
		height: 45px;
		border-radius: 7px;
		margin: 15px 5px;
	}
}

.appstorebadge
{
	display:inline-block; 		
	overflow:hidden;
	background:url(https://linkmaker.itunes.apple.com/en-us/badge-lrg.svg?releaseDate=2014-06-11&kind=iossoftware&bubble=ios_apps) no-repeat;
	width:135px;
	height:40px;
	/*background-size:135px 40px;*/
}


@media only screen and (max-width: 480px) 
{
	.appstorebadge 
	{ 
		width:270px;
		height:80px;
		background-size:270px 80px; 
	}
	
	.appstoreicon 
	{
		width: 160px;
		height: 160px;
		border-radius: 20px; 
	}
}


.banner
{
	width:600px; 
	margin:10px;
	border-radius: 5px; 
}

.screenshot
{
	width:200px; 
	margin:10px;
	border-radius: 5px; 
}


@media only screen and (max-width: 480px) 
{
	.screenshot
	{
		width: 90%;
		margin: 25px;
		border-radius: 15px; 
	}
	
	.banner
	{
		width: 90%;
		margin: 25px;
		border-radius: 15px; 
	}
}

/* DIAGNOSTIC STUFF */


/*
body {
  background-color: lightblue;
}

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

@media screen and (min-width: 720px) {
  body {
    background-color: lavender;
  }
}
*/


span.ts
{
	color: white;
	float: right;
}

#small { color: white; }
#large { color: blue; }

#diagnostic 
{ 
	background-color: blue; 
}

@media screen and (min-width: 480px) 	/* large screen */
{
   	#diagnostic { background-color: green; }
  	#small { color: green; }
	#large { color: white; }
}



/* TABLE STYLES */



table.xtable  
{ 
	display:inline-block;
	border-collapse:separate;
	border-spacing: 0px;
	margin: 25px 10px;
}



table.xtable thead
{
	position: relative;
	text-align: center;
	background-image: var(--head-grad);
	font-family: var(--head-font-fam);
}



table.xtable thead tr:first-child th
{
	color: black;
    border-top:1px solid var(--border-color);
}

table.xtable thead tr th:first-child
{
	border-left:1px solid var(--border-color);
}

table.xtable thead tr th:last-child
{
    border-right:1px solid var(--border-color);
}


table.xtable thead tr:not(first-child) th 
{
/*	font-size:small; */
	padding:5px; 
	color: #555;
}


@media only screen and (min-width: 480px) /* LARGE SCREENS */
{
	table.xtable thead tr:first-child th 
	{ 
		padding: 7px 15px;
		border-radius: 10px 10px 0px 0px; 
		font-size: large;
	}
}

@media only screen and (max-width: 480px)  /* SMALL SCREENS */
{
	table.xtable thead tr:first-child th 
	{ 
		padding: 13px; 
		border-radius: 20px 20px 0px 0px;
		font-size: xx-large;
	}
}


/* table outer border */
/*table.xtable tbody tr:first-child td { border-top: 1px solid var(--border-color); }*/
table.xtable tbody tr td:first-child { border-left: 1px solid var(--border-color); }
table.xtable tbody tr td:last-child { border-right: 1px solid var(--border-color); }
table.xtable tbody tr:last-child td { border-bottom: 1px solid var(--border-color); }

/* rounding on bottom corners */
table.xtable tbody tr:last-child td:last-child { border-bottom-right-radius: 10px; }
table.xtable tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }


@media only screen and (max-width: 480px) 
{
	table.xtable tbody tr:last-child td:last-child {  border-bottom-right-radius: 20px }
	table.xtable tbody tr:last-child td:first-child { border-bottom-left-radius: 20px; }
}


/* cell styles */
table td { text-align: center; padding: 10px; }

@media only screen and (max-width: 480px) { table.pad td { padding: 5px; } }

table.nopad td	{ padding: 0px }

table.nopad td.pad	{ padding: 7px }



table.rowline td { border-bottom: 2px solid var(--border-color); }

table td.crossed::after  /* red diagonal line thru the cell */
{
  position: absolute;
  content: "";
  left:0;
  right:0;
  top:0;
  bottom:0;
  background-image: linear-gradient(to bottom right,  transparent calc(50% - 1px), black, transparent calc(50% + 1px)); 
}


/* background styles for digit, english, han and pinyin cells */

/* used in tutorial pages */
.dig-cell	{ background-image: var(--dig-grad); font-family: var(--dig-font-fam); color: var(--dig-cell-color) }
.eng-cell	{ background-image: var(--eng-grad); font-family: var(--eng-font-fam); color: var(--eng-cell-color)  }
.han-cell	{ background-image: var(--han-grad); font-family: var(--han-font-fam); color: var(--han-cell-color) }
.pin-cell	{ background-image: var(--pin-grad); font-family: var(--pin-font-fam); color: var(--pin-cell-color) }
.pin2-cell	{ background-image: var(--pin-grad2); font-family: var(--pin-font-fam); color: var(--pin-cell-color) }

/* used in classifier pages */
.dig-style	{ background-image: var(--dig-grad); font-family: var(--dig-font-fam); color: var(--dig-cell-color) }
.eng-style	{ background-image: var(--eng-grad); font-family: var(--eng-font-fam); color: var(--eng-cell-color)}
.han-style	{ background-image: var(--han-grad); font-family: var(--han-font-fam); color: var(--han-cell-color)}
.pin-style	{ background-image: var(--pin-grad); font-family: var(--pin-font-fam); color: var(--pin-cell-color)}
.pin2-style	{ background-image: var(--pin-grad2); font-family: var(--pin-font-fam); color: var(--pin-cell-color) }



/* styles for other table elements */
/*.head		{ background-image: var(--head-grad); font-family: var(--head-font-fam); }*/
/*.tool		{ background-image: var(--tool-grad); font-family: var(--head-font-fam); }*/
.foot		{ background-image: var(--foot-grad); }

.spacer { display:flex; justify-content:space-between }

.pad { padding: 2px }

.h-pad { padding: 0px 3px}

.pin-pad { padding: 0px 3px 3px 3px }

.han-pad { padding: 0px 5px }

.wrap { max-width: 400px }

.left { text-align: left }
.right { text-align: right }



/* SMALL SCREEN */
@media only screen and (max-width: 480px) 
{
	.xtable thead tr th {font-size: xx-large; }
	.dig-cell { font-size: xx-large; }
	.eng-cell { font-size: x-large; }
	.han-cell { font-size: 42pt; }
	.pin-cell { font-size: xx-large; }

	.head { font-size: x-large; }
	.foot { font-size: xx-large; }
}


/* LARGE SCREEN */ 
@media only screen and (min-width: 481px) 
{
	.xtable thead tr th {font-size: large; }
	.dig-cell { font-size: large; }
	.eng-cell { font-size: large; }
	.han-cell { font-size: xx-large; }
	.pin-cell { font-size: x-large; }

	.head { font-size: large }
	.foot { font-size: large }
}




/* FONT SIZE modifiers */
.hug { font-size: 42pt; }
.big { font-size: 28pt; }
.med { font-size: 16pt; }
.sml { font-size: 12pt; }


@media only screen and (max-width: 480px) 
{
	.hug { font-size: 64pt; }
	.big { font-size: 52pt; }
	.med { font-size: 32pt; }
	.sml { font-size: 22pt; }
}




/* POPUP on mouseover */
.pup  
{
	display: none;

	position: absolute;
	top: 0px;	
	right: -285px;
	width: 275px;
	z-index: 10;

	border-radius: 5px;
	padding: 3px;
	
	/*color: black;*/
	text-align: left;
	background-color: var(--df-trans);
}

/* host should be rightmost td element */
.puphost
{
position: relative;
}


/* trigger is the tr element */ 
.puptrigger:hover .pup 
{
  display: block;
}



/*@media only screen and (min-width: 481px)*/



/* Controls */
.button 
{ 
	padding: 2px 5px;
	margin: 0px 5px;
	background-image: var(--btn-grad); 
	border: 1px solid #999;
	border-radius: 5px; 
	height: 10px;
	color: #DDD;
	font-weight: lighter;
	/*box-shadow: 2px 2px #ccc;
	text-shadow: 1px 1px 20px #000000;*/
	cursor: pointer;
}

.button:active
{
	background-image: var(--btn-grad2); 
}

.digitbutton 
{ 
	padding: 5px 10px;
	margin: 0px 0px;
	background-image: var(--btn-grad); 
	border: 1px solid #999;
	border-radius: 5px; 
	height: 15px;
	color: #DDD;
	font-size: 25pt;
	font-weight: lighter;
	/*box-shadow: 2px 2px #ccc;
	text-shadow: 1px 1px 20px #000000;*/
	cursor: pointer;
}

.digitbutton:active
{
	background-image: var(--btn-grad2); 
}

.nomargin
{
  padding: 3px 3px;
  margin: 0px 0px;
}


.dropdown 
{
/*	width: 120px;
	height: 30px; */
	padding: 2px 5px;
	border: 1px solid #999;
	font-size: 12px;
	color: #DDD;  /*color: #35275e; #1c87c9;*/
	background-image: var(--btn-grad); 
	border-radius: 5px;
	box-shadow: 2px 2px #ccc;
	margin: 0 4px;
}


/* digits practice */

.hanzi-field
{
	font-size: 75pt;
}

.pinyin-field
{
	font-size: 25pt;
}






/* SMALL SCREEN */
@media only screen and (max-width: 480px) 
{
	.dropdown { font-size: large};
}



/* borderless table */
table.ytable
{ 
	display:inline-block;
	border: 0px;
}


table.ytable td
{
	text-align:left;
}


table.bg tr
{
	background-color: var(--daring-fireball);
	background-image: var(--han-grad);
}


/* follow buttons in CSS */
.socialmedia-follow-button, .socialmedia-follow-button:visited 
{
	vertical-align: top;
    background-color: #1b69e0;
    color: #fff;
    border-radius: 25px;
	margin: 10px 10px 0px 10px;
    font-weight: 500;
    font-size: 15px;
    line-height: 38px;
    padding: 12px 10px 12px 10px;
    text-decoration: none;
    /*background-image: url('./image/f_logo_RGB-Blue_58.png');*/
    background-repeat: no-repeat;
    background-size: 16px 13px;
    background-position: 8px 10px;
}

.socialmedia-follow-button:hover 
{
    background-color: #2156a8;
}


.twitter-icon
{
	vertical-align:middle; 
	padding:0px 0px 3px 5px;
}

.facebook-icon
{
	vertical-align:middle; 
	padding:0px 0px 7px 0px;
}

.redwork-icon
{
	vertical-align:middle; 
	padding:0px 0px 3px 3px;
}


/* vertical-align:middle; padding:0px 0px 1px 5px; */



/* don't allow selection of text */
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}