@charset "utf-8";

/*Main style sheet for listenmongolian folder*/

body {width:100%;
    padding: 0;
    margin: 0;
	background-color: #FFFFFF; 
	color: #333;
	line-height: 140%;}

body {
	font-family: Optima, sans-serif;
	font-size: 1em;
}

header {position:absolute;
    min-height: 100px;
    left:0px;
    top:0px;
	width:100%;
	background-color:#fafaef;
}

header h1 {position:relative;
  font-size: 140%;
	left: 10px;
	top: 10px;
	line-height: 113%;
}

.tooltip {color:#41A317;}

nav {position:absolute;
     left:10px;
	 top:100px;
	 font-size:65%;
	 width:100%;}
	 
.contact {position:absolute;
     right:20px;
	 top:2px;
	 font-size:65%;}

footer {width:100%;
background-color:#fafaef;
}


.mongolcontent {
    float:right;
	position: relative;
	right:5px;
	top: 120px;
	border:1px solid black;
}

.content {
	width: 97%;
	position: absolute;
	left: 5px;
	top: 180px;
	visibility: visible;
	z-index: 0;
	padding: 5px;
}



.content h1 {
    font-size: 140%;
	line-height: 130%;
}


h2 {
    font-size: 112%;
	font-weight:800;
}

.wrapdiv {
padding: 0.5em;
min-height:50px;
width:95%;
margin:0;
}

.lastscene
{   float: left;
    position: absolute;
    left: 10px;
    bottom:30px;
	font-size: 1.1em;
	text-transform: uppercase;
	line-height:200%;
	overflow: auto;
}

.nextscene
{   float: right;
    position: absolute;
	right: 30px;
	bottom:30px;
	font-size: 1.1em;
	text-transform: uppercase;
	line-height:200%;
	overflow: auto;
}


.gloss {
	font-size: 92%;
}

:lang(zh-Hant) 	{font-family: 儷黑 Pro, Apple LiGothic Medium;}
:lang(zh-Hans) 	{font-family: 华文黑体, Hei;}
:lang(ja) {font-family: : 平成角ゴシック, ＭＳ ゴシック;}
:lang(vi) {font-family:Arial, Helvetica, sans-serif;}



td,th  {
	font-family: Optima, sans-serif;
}



.ima {
	border-right-style:dotted;
	background-color: #FFFFE9;
}

.imb  {
	border-left-style:dotted;
	background-color: #E6F2FF;
}



.style2 {font-size: 11px;
         line-height:1.3;
         font-style:italic;}
.style3 {font-style: italic}
.style4 {font-size: 13px}


.brown {
	color: #666600;
	font-family: Arial, Helvetica, sans-serif;
	font-size:90%;
}

.mnspell {
	color: #008000;
	font-family: Courier;
	font-size:95%;
}


.text {
	color: #000000;
	line-height: normal;
	font-size: 100%;
	font-style: normal;
}


.top {
	position: absolute;
	left: 0px;
	top: 0px;
	visibility: visible;
	padding: 0px;
	}



.photo {
	position: absolute;
	left: 20px;
	top: 245px;
	padding: 5px;
	z-index: 50;	
}


.title1 {
	font-size: x-large;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
}


.toptitle {
	font-size: x-large;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
	color: #00007F;}

/*css for read more*/

.read-more-state {
  display: none;
}

.read-more-target {
  clear: both;
  opacity: 0;
  max-height: 0;
  font-size: 0;
  line-height:0.5;
  background-color: #FFFFE9;
  line-width: 20em;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Show Dialogue';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Hide Dialogue';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0.5em;
  margin: 0.5em;
  color: #666;
  font-size: .9em;
  line-height: 1.5;
  border: 1px solid #ddd;
  border-radius: .25em;
}

/*end of css for read more*/


.yugo {min-height: 200px;
	   width:100%;
       margin:15px;
	   padding:10px;
	   background-color:#FFFFE9;
	   border-radius:7%;
	   clear:right;}
	   
.yellowquote {width:100%;
       min-height: 80px;
       margin-top:20px;
	   margin-left:5px;
	   margin-right:5px;
	   margin-bottom:30px;
	   padding-top:20px;
	   padding-bottom:10px;
	   padding-left:10px;
	   padding-right:10px;
	   background-color:#FFFFE9;
	   border-radius:7%;
	   clear:right;}

.lbluequote {background-color: #DEF4FF;
             margin-top:-30px;
			 margin-left:-20px;
			 margin-bottom:10px;
             min-height:40px;
			 padding:5px;
			 bottom-margin:-20px;}

.verticalchja {
	height:300px;
	float:right;
	font-size : 106%;
	margin-top:-20px;
	margin-right:25px;
	margin-left:15px;
	margin-bottom:30px;
	padding:4px;
	background-color: #DEF4FF;
	-moz-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: tb-rl;
	-moz-writing-mode: upright;
	writing-mode: upright;
	-webkit-writing-mode: upright;
	-o-writing-mode: upright;
	-ms-writing-mode: upright;
	/* Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 */
    text-justify: inter-ideograph;
	text-align:justify;
}


.bichig {
	margin: 4px;
	padding: 4px;
	font-family: 'Mongolian White', Serif, 'Noto Sans', Sans-serif;
	font-size : 23px;
	-moz-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	-webkit-writing-mode: vertical-lr;
	-o-writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: tb-lr;
	-webkit-text-orientation: sideways-right;
	/* Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 */
	/* Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.104 Safari/537.36 */
	text-justify: inter-ideograph;
	text-align:justify;
}

.bichigs {
	margin: 0px;
	padding: 0px;
	font-family: 'Mongolian White';
	font-size : 106%;
	-moz-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	-webkit-writing-mode: vertical-lr;
	-o-writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: tb-lr;
	-webkit-text-orientation: sideways-right;
	/* Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 */
	text-justify: inter-ideograph;
	text-align:justify;
}

.lblue {background-color: #DEF4FF;}

.double {
  border-bottom: double 3px;
}

.cyriltitle {position:absolute;
    left:20px;
    top:65px;
	width:100%;
	font-size: 75%;
}

.example {font-family: Courier;}

.pale {color: #E8E8E8;}

.centre {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.bordered {
border: 0px!important;
border-style:solid;
border-color:#999999;}

.bordery {
	border-style: solid;
    border-color: #FFE4E1;
}


div.floatleft
{
float:left;
background: white;
margin: 0 1em 0 0;
padding: 10px;
font-size: 80%;
text-align:center;
}

	
div.floatright
{
float:right;
background: white;
margin: 0 1em 0 0;
padding: 10px;
font-size: 80%;
text-align:center;
}

div.centre
{
background: white;
margin: auto;
width: 100%;
font-size: 80%;
text-align:center;
}


figure {
	width: 100%;}
	
figcaption {
  width: 100%;
  font-size:88%;
  margin-left: auto;
  margin-right: auto;
}


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

img.centre {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

img.left {
  float: left; 
  margin: 0px 5px 5px 0px;
}

img.right {
  float: right; 
  margin: 0px 5px 5px 0px;
}

div.floatleft
{
float:left;
background: white;
margin: 0 1em 0 0;
padding: 10px;
font-size: 80%;
text-align:center;
}

#floatleft
{
float:left;
background: white;
margin: 0 1em 0 0;
padding: 10px;
font-size: 80%;
text-align:center;
}
	
div.floatright
{
float:right;
background: white;
margin: 0 1em 0 0;
padding: 10px;
font-size: 80%;
text-align:center;
}

.large {
     font-size: 120%;
}

.table td {padding:5px;
       background-color: #E6F2FF;
          }

.table td whiteback {background-color: white;}

.redback {
    background-color: #FFCC99;
}

.yelloback {
    background-color: #FFFF99;
}

.blueback {
	background-color: #E6F2FF;
}

.greyback {
    background-color: #808080;
}

.inset {
    background-color: #E5E4E2;
}

.whiteback {
   background-color: #FFFFFF;
}	

.peachback {
   background-color: #FFE4E1;
}


.paleback {
	 background-color: #FFFFE9;
}

.pink {background-color: #FFF3FF;}

.grey {font-style: normal;
	font-weight: bold;
	color: #BCBCBC;}	

.red {
	font-style: normal;
	font-weight: bold;
	color: #FF0000;
}

.blue {
	font-style: normal;
	font-weight: bold;
	color: #0000FF;
}

.green {font-style: normal;
	font-weight: bold;
	color: #4AA02C;
}

u.double { /* -- double underline -- */
	border-bottom: 1px solid;
}
.altdouble { /* alternate double */
	border-bottom: 3px double;
	line-height: 1.7em;
}
u.triple { /* -- triple threat -- */
	border-bottom: 3px double;
	line-height: 1.9em;
}


.toolie {display:none;
        font-size:0.75em; /* 16x0.7=11.2 */}
		
a:link {text-decoration:none;color:#00007f;}
a:visited {text-decoration:none;color:#00007f;}
a:active {text-decoration:none;color:#ff0000;}
a:hover {text-decoration:none;color:#ff0000;}

/*For tooltip target element that has set class="tooltip" */
.tooltip {
  cursor: pointer;
  display: inline-block;
  padding: 0.5em;
  margin: 0.5em;
  color: #666;
  font-size: .9em;
  line-height: 1.5;
  border: 1px solid #ddd;
  border-radius: .25em;
}

/*For tooltip box*/
div#mcTooltip 
{
    line-height:16px;
    border-width: 1px;   
    color:#333; 
    border-color:#BBBBBB;
    padding:20px;
    font-size: 12px;
    font-family: Verdana, Arial;
    border-radius:6px; /*Rounded corners. N/A for IE 8 and below.*/
    box-shadow: 0 1px 4px #AAAAAA; /*Drop shadow. N/A for IE 8 and below.*/
}

div#mcTooltip, div.mcTooltipInner 
{
    background-color:#EAECF0;
}

/* For hyperlink within tooltip */
div#mcTooltip a { color:#36c; }

/*Close button. Available when sticky or overlay has been set to true, or is on iPhone, iPad, Android, BlackBerry, or IEMobile devices. */
div#mcttCloseButton 
{
    width:14px;height:14px;position:absolute;background-image:url(closeBtn.gif);cursor:pointer; overflow:hidden;
    top:12px; right:12px; left:auto;
}

	
/*Give the close button a bigger size in smaller devices*/
    div#mcttCloseButton 
    {
        width:24px;height:24px;background-size:cover;
    }
	
/* Only applies when overlay has been set to true or 1 */
div#mcOverlay 
{
    background-color: white;
    opacity:0.8; filter: alpha(opacity=80); 
    display:none;top:0;left:0;width:100%;height: 100%;overflow:visible;z-index:4; 
}


/*The settings below should remain unchanged*/
div#mcTooltipWrapper {position:absolute;visibility:hidden;overflow:visible;z-index:9999999999;top:0px;}
div#mcTooltip {float:left;border-style:solid;position:relative;overflow:hidden;}
div.mcTooltipInner {float:left;position:relative;width:auto;height:auto;}
div#mcttCo {position:absolute;text-align:left;}
div#mcttCo em, div#mcttCo b {display:block; width:0; height:0;overflow:hidden;}

/*workable with bootstrap*/
div#mcTooltip, div#mcTooltip div {
     -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
     box-sizing:content-box;
}



<!--Ruby-->
/* Ruby text*/
body.notIE ruby {
    display: inline-table;
    text-align: center;
    border-collapse: collapse;
	border: none;
    /* border collapse mechanism
     will be used to adjust vertical alignment */
    vertical-align: middle;
    /* if ruby text contains text only
     and there are two ruby annotations
     (one placed above the base and one below)
     then vertical centering roughly aligns baseline of
     base with baseline of parent */
    border-bottom: solid 0.75em transparent;
    /* 0.75em is height of ruby text (0.5000d7 1.2em = 0.6em)
     plus space between baseline and text-bottom (about 0.15em)
     this extra border is counter-weight used
     to restore vertical centering broken
     by presence of ruby text
     (in case if there is only one ruby annotation,
     if there are two annotations
     then counter-weight is no longer
     necessary and can be annihilated
     using border collapse mechanism) */
}

/* Fixed problem with IE8 and the rtc tag */
body.ie8 ruby rtc {
	display: ruby-text;
	border: solid 1px black;
}


body.notIE  ruby > rt, body.notIE rtc {
    display: table-header-group;
}

/* used to move first ruby
 container above the base */
body.notIE ruby > rb, body.notIE rbc, ruby > rt + rt, body.notIE rtc + rtc {
    display: table-row;
}

/* base and second ruby
 are formatted as table-rows */
body.notIE ruby > rt + rt, body.notIE rtc + rtc {
    border-bottom: hidden;
}

/* if there are two annotations then extra
 border is no longer necessary
 and can be annihilated
 using border collapse mechanism */
body.notIE rb, rbc, body.notIE rt, rtc {
    white-space: nowrap;
}

/* prohibits line breaks inside ruby text */
body.notIE rtc > rt, body.notIE rbc > rb {
    display: table-cell;
}

/* used to distribute annotations
 in table like manner */
body.notIE rtc > rt[rbspan] {
    column-span: attr(rbspan);
}

/* ruby text may span several cells */
body.notIE ruby > rt, body.notIE rtc {
    font-size: 0.5em;
    line-height: 1.2em;
}

/* font-size of ruby text is reduced */
body.notIE rp {
    display: none;
}

/* Addition to add english rbc */
ruby.syllables rbc rb {
	
}

ruby.syllables rbc rb:after {
	content: "·"
}

ruby.syllables rbc rb:last-child:after {
	content: "";
}

ruby.syllables rtc rt {
	padding-right: 0.5em;
}

ruby.syllables rtc rt:last-child {
	padding-right: 0;
}


/* Ensure text is readable by using a unicode */
body, ruby.unicodeRubyText rt, ruby.unicodeRubyBase rb {
	font-family: "Arial MS Unicode", sans-serif;
}


ruby {
	ruby-align: center;
}


<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)]><body class="modern"> <![endif]-->
<!--[!(IE)]><!-->  <body class="notIE modern"> <!--<![endif]-->

body.ie6 ruby rt.small,
body.ie7 ruby rt.small {
	
	padding: 0 1em;
}


@media (min-width: 400px)

{

.cyriltitle {position:absolute;
    left:170px;
    top:65px;
	width:100%;
	font-size: 75%;
}

.wrapdiv {
padding: 0.5em;
min-height:50px;
width:95%;
margin:0;
}

.lastscene
{   float: right;
    position: absolute;
    left: 10px;
    bottom:30px;
	font-size: 1.1em;
	text-transform: uppercase;
	text-align: left;
	line-height:200%;
	overflow: auto;
}

.nextscene
{   float: left;
    position: absolute;
    right: 30px;
    bottom:30px;
	font-size: 1.1em;
	text-transform: uppercase;
	text-align: right;
	line-height:200%;
	overflow: auto;
}


	
body {position:relative;
	margin-left:auto;
    margin-right:auto;
    width:100%;}


.yugo {min-height: 200px;
       width:100%;
       margin:15px;
	   padding:10px;
	   background-color:#FFFFE9;
	   border-radius:7%;
	   clear:right;}
	   
.verticalchja {
	height:240px;
	float:right;
	font-size : 106%;
	margin-top:-20px;
	margin-right:25px;
	margin-left:15px;
	margin-bottom:30px;
	padding:4px;
	background-color: #DEF4FF;
	-moz-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: tb-rl;
	-moz-writing-mode: upright;
	writing-mode: upright;
	-webkit-writing-mode: upright;
	-o-writing-mode: upright;
	-ms-writing-mode: upright;
	/* Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 */
    text-justify: inter-ideograph;
	text-align:justify;
}
	   
.moonlight {position:relative;
	        left: 173px;
	        top: -38px;
	        font-size: 17px;
            font-style:italic;}
							
nav {position:absolute;
     left:10px;
	 top:100px;
	 font-size:65%;
	 width:100%;}
	 
.mongolcontent {
    float:right;
	position: relative;
	right:5px;
	top: 120px;
	border:1px solid black;
}

.content {
	position: absolute;
	left: 10px;
	top: 190px;
	visibility: visible;
	z-index: 3;
	padding: 5px;
}

header h1 {position:relative;
  font-size: 180%;
	left: 10px;
	top: 0px;
	line-height: 113%;
}

.content h1 {
    font-size: 198%;
	line-height: 130%;
}



	}
	
@media (min-width: 750px)

{
.cyriltitle {position:absolute;
    left:290px;
    top:65px;
	width:100%;
	font-size: 75%;}
	
body {position:relative;
	margin-left:auto;
    margin-right:auto;
    width:750px;}
	
.moonlight {position:relative;
	        left: 453px;
	        top: -38px;
	        font-size: 17px;
            font-style:italic;}
							
}