/* 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, .sbs_dlg {
		display:inline-block; 
}
.posrel { position: relative; }

/*===================================================
	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; 
}
	/* adjust body_central_css to make it wider */
.hanzi_printable { width:600px; }

tbody.hanzi_print {
	border-spacing: 12px; 
	font-size:24pt; 
}

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  { 
	
}

	/* first column used for a counter 
	Was table class=list3k_row as output by HanziController
	*/
table.hanzi_table { 
	border: 1px solid #999; 
	border-collapse : collapse; 
}	
	
table.hanzi_table td.counter	{ 
	padding:20px; padding-left: 10px; padding-right: 20px; 
	font-size:18pt;}
table.hanzi_table td.counter-narrow	{ 
	padding:10px; padding-left: 10px; padding-right: 10px; }


	/*  margin:5px;XX No effect */
table.hanzi_table td.hanitem, td.hanitem {
	border: 1px solid #CCC; 
	border-spacing : 5px; 
	font-size:18pt;
	
}

table.hanzi_table td.han-small{
	border: 1px solid #CCC; 
	padding-top : 10px; 
	padding-left: 14px; 
	padding-right:14px; 
	border-spacing : 5px; 
	font-size:14pt;
}

	/* change formatting if entry has a story ref 
	   khaki not bad or gold is darker	*/
.has_story {
	color:blue; 
	background-color: khaki;
}

.item_box {
	width:60px; height:40px; 
	margin:2px; 
	/*border: 1px solid #66F; */
	padding:2px;
}
.item_hanzi { 
	margin-top: 15px;  
	text-align: center;
}
.tone_holder { position: absolute; top: 2px; right: 2px;   }
.item_tone { border-radius: 4px; }

	/* these are for the List display */
.tone_1 { 	width:10px;  height: 10px; background-color: red; }
.tone_2 {  width:10px; height:10px;  background-color: yellow; }
.tone_3 { 	width:10px; height:10px; background-color: green; }
.tone_4 { 	width:10px; height:10px; background-color: blue; }
.tone_5 { 	width:10px; height:10px; background-color: #CCC; }


/

/* 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 
	2026 WHY fixed? means height doesn't affect subsequent */
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;
}


.intro {
    /*padding: 96px 0 36px;*/
    position: relative;
    text-align: center;
}
header.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.main_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 */
.tone1 {color: red; }
.tone2 {color: orange; }
.tone3 {color: green; }
.tone4 {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;
}

.info_row {
	width: 100%
}
/* div at footer of display to render printable version */
.printable { 
	display: inline-block;
	margin-left : 200px;

}

/*===============================================
    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  SECTION
====================================================================*/

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;
}
.img_story {
	width:150px; height: 150px; 
}

.hanzi { font-size: 16pt; }
 
.hanzi_72 {   
	width:150px; 
	height: 150px; 
	font-size:72pt;
	vertical-align: top; 
	padding-left: 20px; /*padding-top: 10px; */
	border: 1px solid #CCC;
}

  /* some elements in tables */
td.w30 { width: 30px; } 

div.footnote {
	font-size: 0.8em; 	
}


/*===================================================================
        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;
}






/*=============================================

  LOGIN BLOCK - NOW INSIDE  MENU-WRAPPER DIV

================================================*/

    /* used by login box ; 2023.12 add width
	   all children are width 100%; 
	   add 40px top, bottom*/
.login_container {
	margin: 40px auto; 
	width: 350px; 
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05)
}


/*
* Mobile Styles Include here now 
*/ 


@media screen and (min-width: 581px){
	div.page-wrapper {
		margin-left: 80px;
	}

}

@media screen and (width <= 1024px ) { 

	div.page-wrapper {
		max-width:350px; 
	}
	header.main_content {
		width: 15em; 	
	}
	/* hanzi_list got to eliminate scrollbar; make whole page scroll but fix the 
	 * 	body_rhs_meaning to static or fixed
	 * see hanzi_mobile_scroll for css overrides to the scrolling table  
	 
	*/
	
		/* modifying tymos: 366; already has flex/ row */
	div#body_container.body-2col {
		align-items:flex-start; 	/* 2026.07 AI assist */
	}
	
	div#container_R2 { height:auto; /* 2026 overflow-y: scroll; */
	}
	
	
	
}



@media screen and (width <= 768px ) { 

	header.main_content {
		display:none;
	}


}


@media screen and (width <= 581px){
	
	header.vertical { 
		display:none;
	}
}




@media screen and (width <= 480px ) { 


}