/* addition to base template */
.display_control {  float: right; margin-right:20px;  }
.control_icon    {  padding: 0 10px; 
		cursor:pointer;  }
.icon_info { width:24px; height:24px}

	/* addition to Depth styles in ashton.css */
div.scrollholder_class.D960 { height:960px; }
div.scrollbar_side.D960 { height:960px; }

.sbs_dlg {
		display:inline-block; 
}

/*===================================================
	ADJUST MAIN BODY CONTAINER 
	now that the menu is in a <header role=banner> 
	with fixed positioning so need to come down by that depth
=====================================================*/
div.body-container { margin-top:15px; 
}
div.page_title { padding-bottom:0px; } /* tymos_styles sets it at 10px; */

/*===================================================
	STORY STYLES 
=====================================================*/
.mean   { font-style:italic;}
.neemo  { color:blue; font-size:1.1em; }

/*===================================================
	OVERRIDES OF TYMOS_STYLES
=====================================================*/

	/* this currently defined as display:block; with width: 100% but 
	that makes it wrap*/
.ip_control_inl { 
	display:inline-block;
    padding: 6px 4px;
    font-size: 16px;
    line-height: 1.0;
    color: #333333;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 0;
	}

/* ip_control_inl adapted for dialog inputs which are smaller 
	*/
.ip_dlg  { 
	width:100%;
	margin-bottom:4px; 
    font-size: 14px;
	}
.ip_dlg_c3  { 
	
}

table.list3k_row td.hanitem {
	padding : 20px; 
	padding-left: 30px; 
	padding-right: 30px; 
	
	border-spacing : 5px; 
	font-size:18pt;
}

table.list3k_row td.han-small{
	padding-top : 10px; 
	padding-left: 14px; 
	padding-right:14px; 
	
	border-spacing : 5px; 
	font-size:14pt;
}


/* first column used for a counter */
table.list3k_row td.counter	{ 
	padding:20px; padding-left: 10px; padding-right: 20px; 
	font-size:18pt;}
table.list3k_row td.counter-narrow	{ 
	padding:10px; padding-left: 10px; padding-right: 10px; }


/* override ashton_styles LL530 */

div.track_cursor{ 
	height:32px;
}

/*===============================================
    INDEX PAGE with ideas from Zen-Garden 
=================================================*/
/* 2021.01 make fixed so scrolling content disppears beneath it */
header[role=banner] {
	position: fixed;
	top:0;
	width:100%;
	z-index:10;
}
section { display: block;}

.page-wrapper {
    position: relative;
    max-width: 460px;
    padding: 30px 0 0;
    margin: 0 0 0 auto;
}
@media screen and (min-width: 581px){
	.page-wrapper {
		margin-left: 80px;
	}
}
.intro {
    /*padding: 96px 0 36px;*/
    position: relative;
    text-align: center;
}
header[role=vertical] {
    		/* get text to run vertically letter by letter */
	overflow-wrap:anywhere;
	left:580px; 
	height:4em; 
}

header > h1 {
    position: fixed;
    left: 0.1em;
    top: 60px;
    width: 0.6em;
    font-size: 60px;
	line-height: 1.0em;
    text-align: center;
    text-transform: uppercase;	
}

/* 	line-height: 2; */
header[role=site_content] {
   position: fixed;
	top: 3em;
	right: 3em;
	font-size: 1em;
	width: 18em;
	
	text-align: left;
	} 
}

@media screen and (min-width: 240px){
	header > h2 { 
	}
}
header > h2 {
    right: 0.1em;
    left: auto;
}

dl.site_home > dt {
	font-size:20px; 
	font-weight:800; 
}
dl.site_home dd {
	margin-left: 20px; 	
}

/*===============================================
    FONTS - SIZES, COLOURS 
=================================================*/
.myh1 {font-size:  2em; 
	font-weight: bold;
    margin-bottom: 10px;
	margin-right: 100px; 
}
.han16 { font-size:16pt;}
.han18 { font-size:18pt;}
/* tone marks */
.t1 {color: red; }
.t2 {color: orange; }
.t3 {color: green; }
.t4 {color: blue; }


/*===============================================
    PAGE STRUCTURE - HANZI list 
=================================================*/

.XXNIU_close_filter {
  margin-top: 20px;
  line-height: 60px;
  font-weight: bold;
  padding: 0 40px;
  background: salmon;
  border: none;
}

	/* change formatting if entry has a story ref 
	   khaki not bad or gold is darker	*/
td.story {
	color:blue; 
	background-color: khaki;
}
/*===============================================
    PAGE STRUCTURE - ABOUT page 
=================================================*/

.about_container { margin-left: -40px; }
.about { margin: 0 auto;
	width : 70%; 
	}
/* ===================================
    PAGE STRUCTURE - STROKES PAGE 
 ===================================== */
.stroke-container {  
	width:800px; 
	border:1px solid #ccc; padding:20px; }
.strokes {   margin:0 auto; 
	width:70%; 
 }
.stroke-image { width: 60px; height:60px; }


/*===============================================
    PAGE STRUCTURE - RHS BLOCK
=================================================*/


div.body_rhs.meaning { 
	width:400px; padding:10px 25px; 
	height:960px; 
	margin-top:40px; 
	border:1px solid #ccf; 
	border-radius:5px; 
	}
	
div.rhsMeaning { 
	margin-bottom:2px; 
}
	/* mod 2026 separate css for underline - 
	don't output a bottom margin if the element is empty
	*/
div.rhsDivider { 
	border-bottom: 1px solid #CCC; 
}
div.static, td.static {
	background: #AEA;
}

/* RHS formatting for Story content 
*/
div.story-container { 
	margin-top:60px; 
}
div.story_content { 
	width:600px;
	min-height:500px; 
	padding:20px; 
	border:1px solid #ccc;
}


/*===================================================================
        HANZI LIST EDIT DIALOG 
		Override tymos_styles from EMAIL DISPLAY / FORM
		+ add new he_ 
================================================================*/

div.top_filter { margin-left:40px; margin-right:20px;  }
.checkbox.sq25 { width:25px; height:25px;  }
.cb_valign  { vertical-align:middle }



div.hanziDlg_content   {width: 100%; padding-bottom:5px;}
div.hanziDlg_content .left  { display: table-cell; min-width:100px; }
div.hanziDlg_content .right { display: table-cell; width:80%; }

textarea.e_content {
    flex:1;
	min-height:100px; 
    height:100%;
    border: 1px solid #ccc;
    margin-left:60px;
    margin-right:10px;
    margin-top:5px;
    resize:  vertical; 
    background-color: #fff;
    overflow-y:auto;
}

/*===================================================================
        STORY  EDIT DIALOG 
		Override tymos_styles from EMAIL DISPLAY / FORM
		+ add new he_ 
================================================================*/

/* dialog fields 
bad: min-height:500px;
height:100%; no efekt 
flex:1; RED
*/
div.storyDlg_content { min-height:500px; }	
textarea.dlg_content { 
	width:90%; 
	height:600px; 
	 }

textarea.dlg_content {
    border: 1px solid #ccc;
    margin-left:20px;		/* change */
    margin-right:10px;
    margin-top:5px;
    resize:  vertical; 
    background-color: #fff;
    overflow-y:auto;
}

/*===================================================================
        NEW STORY  PAGE
====================================================================*/

textarea.ta_content_input { 
	border: 1px solid #ccc;
    margin-left:20px;		/* change */
    margin-right:10px;
	width:400px; 
	height:600px; 
}

.img_floatr {
    float: right;
    margin: 10px;
    border: 1px solid #ccc;
    padding-left: 10px;
}