@charset "utf-8";

/*Style sheet for mongolian lessons folder*/

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

body {background-color: #ffffff;
    font-size: 1em; 
	margin: 10px; 
	padding: 10px;
	color: #306754;
	line-height: 170%;}

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

 	
.formplace {
	position: absolute;
	top: 25px;
	left: 200px;
	border:0;
}


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

.nav {
	color: #333;
	line-height: 100%;
	font-size: 80%;
	font-style: normal;
}

h1 { font-size: 120%; 
	     line-height: 1.3;}
h2 { font-size: 110%;
	     line-height: 1.2;}
		 
h3 {color : #1C4B5B;
    font-size: 105%;
	line-height: 1.1;}
	
button {font-size: 105%;
         padding:4px;
         border: solid white 1px;
         border-radius: 4px;}
	
.classify {font-style: italic;
       position: relative;
       left: 30px;
       font-size: 80%;}
	
.small {
		font-size: 10px;
	}
	
.clear { clear: both; }

.super { vertical-align: super; }


.ajp {font-weight: normal;
         color: #000099;
    font-family: : 平成角ゴシック, ＭＳ ゴシック;
	text-decoration: none;}
		 
.asc {font-weight: normal;
         color: #000099;
    font-family: 华文黑体, Hei;
	text-decoration: none;}
		 
.nextscene
{   font-size: 1.1em;
	text-transform: uppercase;
	text-align: right;
	line-height:200%;
	overflow: auto;
}
		 
A.ajp:link {text-decoration:none;color:#00007f;}
A.ajp:visited {text-decoration:none;color:#00007f;}
A.ajp:active {text-decoration:none;color:#ff0000;}
A.ajp:hover {text-decoration:none;color:#ff0000;}

A.asc:link {text-decoration:none;color:#00007f;}
A.asc:visited {text-decoration:none;color:#00007f;}
A.asc:active {text-decoration:none;color:#ff0000;}
A.asc:hover {text-decoration:none;color:#ff0000;}

A.atc:link {text-decoration:none;color:#00007f;}
A.atc:visited {text-decoration:none;color:#00007f;}
A.atc:active {text-decoration:none;color:#ff0000;}
A.atc:hover {text-decoration:none;color:#ff0000;}

A:link {text-decoration:none;color:#2200CC;}
A:visited {text-decoration:none;color:#2A5DB0;}
A:active {text-decoration:none;color:#ff0000;}
A:hover {text-decoration:none;color:#ff0000;}

.popup:link{text-decoration:none;color:black;}
.popup:hover{text-decoration:none;color:#41A317;}

.underline-small{
  color:green;
  display:inline-block;
  position:relative;
  
}

.underline-small::after{
  content:'';
  height:2px;
  width:20%;
  background:#f24432;
  position:absolute;
  left:calc(50% - 10%);
  bottom:-5px;
/*   another way you can achieve this
  Check this link: 
  https://goo.gl/GgRdjz
  
  */
  
}
	
.smaller {font-size: 16px;}

.indented {text-indent: 2em;
        margin-left: 10px;
        max-width: 750px;
	    position: relative;
        font-size: 150%;
        line-height: 160%
        }
        

        
.bigger {margin-left: 10px;
        max-width: 750px;
	    position: relative;
        font-size: 150%;
        line-height: 160%
        }

 

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


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

/*Alternative, display:none*/

.space {max-width: 100%;}

.space td {height: 80px;
           font-size: 80%;}

.right {text-align:right;}

.up {position: relative; 
        bottom: 20px;}

	
.vocab {
  display: inline-flex; /* or inline-flex */
  flex-wrap: wrap;
  background: white;
}

.item {width: 120px;
  border: solid white 5px;
  padding: 4px;
  background: #FFFFE9;
  box-shadow: inset 0 0 10vw 1vw white;
}


.style2 {font-size: 9px;
		text-decoration: none;
         color: #000099}
.style1 {color: #000099}
.style3 {font-size: small;
		 text-decoration: none}
.aqua {font-size: 110%;
         font-weight: bold;
         color: #80AAFF;}

	

.title1 {
	font-size: 120%;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
}

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


figure {margin-left: 0px;
   margin-right: 0px;}



   
.bordered {
border-style:solid;
padding:5px;
border-width: 1px;
border-color:red;
border-radius: 10px}

/*text styles*/

.greytext {color: #C6C6C6;}

.blueyback {
  background-color: #E6F2FF;
  border-style: solid;
  border-color: yellow;
  border-width: 1px;
  border-radius: 4px;
  }
  
.greybound {
  background-color: white;
  border-style: solid;
  border-color: #cacaca;
  border-width: 2px 2px 2px 1px;
  border-radius: 4px;
  }
  
.pinkyback {
  background-color: #FFDEAD;
  border-style: solid;
  border-color: #cacaca;
  border-width: 2px 2px 2px 1px;
  border-radius: 4px;
  }
  
.blwyback {
  background-color: #E6F2FF;
  border-style: solid;
  border-color: #FFD700;
  border-width: 3px 1px;;
  border-radius: 4px;
  }

/*green*/

.greenseg {
 background-color: #DDEDE5;
 padding:2px;
 border-style: solid;
 border-width: 1px;
 border-color: #addfad;
 border-radius: 7px;}
 
 .greenfade {
        padding: 5px 0px 5px 5px;
        background-image: linear-gradient(to right, rgba(221,237,229,1), rgba(221,237,229,1), rgba(221,237,229,1), rgba(221,237,229,0));
        border-radius: 4px;}
        
    
.grsolid {
  padding: 1px;
  background-color: rgb(222,252,2219);
  border-style: solid;
  border-color: rgb(177,251,206);
  border-width: 3px;
  border-radius: 4px;}

.tightgreen {
        margin: 1px 1px 1px 2px;
        background-color: transparent;
        box-shadow: 0 0 3vw 3vw rgb(221,237,229,1);
        border-width: 2px;
        box-shadow: inset 0 0 3vw 3vw rgb(221,237,229,1);
        border-radius: 4px;}



/*gold*/  
  
.gldsolid {
  background-color: #FFD700;
  border-style: solid;
  border-color: #FFD700;
  border-width: 3px;
  border-radius: 4px;}
  
.goldback {
  background-color: #FFD700;
  }

.tightgold {margin: 1px 1px 1px 2px;
        background-color: transparent;
        box-shadow: 0 0 3vw 3vw #FFD700;
        border-width: 2px;
        box-shadow: inset 0 0 3vw 3vw #FFD700;
        border-radius: 4px; ;
}




/*yellow*/  
  
.yelloback {
  background-color: yellow;
  z-index:500;
  }
  
.dyelloback {
  background-color: rgb(228,228,228);
  }
  
.dyellofade {
        padding: 5px 0px 5px 5px;
        background-image: linear-gradient(to right, rgba(228,228,228,1), rgba(228,228,228,1), rgba(228,228,228,1), rgba(228,228,228,0));
        border-radius: 4px;}

  
  
  
.redback {
  background-color: #FFA550;
  }
  

.redpinkback {
background-color: #FFDEAD;
border-style: solid;
border-color: #FFD700;
border-width: 1px;
border-radius: 4px;
}


.mistyblold  {        
    background-color:#00BFFF;
	box-shadow: inset 0 0 0.5vw 0.5vw white;
	border-radius: 7px;
	}
	
.mistybl {
text-shadow: 0 0 10px #fff, 0 0 5px #fff, 0 0 5px #00BFFF, 0 0 5px #00BFFF, 0 0 10px #00BFFF, 0 0 10px #00BFFF, 0 0 10px #00BFFF;}

.mistyred {
text-shadow: 0 0 10px #fff, 0 0 5px #fff, 0 0 5px #F08080, 0 0 5px #F08080, 0 0 10px #F08080, 0 0 10px #F08080, 0 0 10px #F08080;}

.mistyorange {
text-shadow: 0 0 10px #fff, 0 0 5px #fff, 0 0 5px #ffc967, 0 0 5px #ffc967, 0 0 10px #ffc967, 0 0 10px #ffc967, 0 0 10px #ffc967;}

	
.mistyredold  {        
    background-color:#F08080;
	box-shadow: inset 0 0 0.5vw 0.5vw white;
	border-radius: 7px;
	}

.toplinepnk {
	-webkit-box-shadow: 0 -3px 3px 0px lawngreen;
	   -moz-box-shadow: 0 -3px 3px 0px lawngreen;
	        box-shadow: 0 -3px 3px 0px lawngreen;
}

.case {
  text-decoration-line: underline;
  text-decoration-style: double;
}


.cool {
padding: .1rem .3rem .2rem;
 border-radius: .2rem;
 background: #201b29;
background: -webkit-gradient(linear, left top, right top, from(#FFFFE0), to(#F6FFE5));
background: linear-gradient(to right, #FFFFE0, #F6FFE5);}

.line-highlight {
    position: absolute;
    left: 0;
    right: 0;
    line-height: inherit;
    padding: inherit 0;
    margin-top: 50px;
    background: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(255, 235, 59, .25)), to(rgba(255, 235, 59, 0)));
    background: linear-gradient(to right, rgba(255, 235, 59, .25) 50%, rgba(255, 235, 59, 0));
    pointer-events: none;
    white-space: pre;
    mix-blend-mode: color-dodge
}

.slightglow {
text-shadow: 0 0 10px #fff, 0 0 5px #fff, 0 0 5px #F599C7, 0 0 5px #F599C7, 0 0 10px #F599C7, 0 0 10px #F599C7, 0 0 10px #F599C7;}

    
    	
/*outlines*/


  
.aprcartouche {  
    padding: 9px; 
    background-color: transparent;
	border-style: solid;
  border-color: #ffeaab;
  border-width: 4px;
  border-radius: 4px;}
  
.bigdown {position: relative;
     font-size: 300%;
     top: 20px;
	 color: #6CCCFF;
}
  


/*blue*/

.blfade {
        padding: 5px 0px 5px 5px;
        background-image: linear-gradient(to right, rgba(205,229,255,1), rgba(205,229,255,1), rgba(205,229,255,1), rgba(205,229,255,0.7), rgba(205,229,255,0.6), rgba(205,229,255,0.5));
        border-radius: 4px;}

.tightblue {
  padding: 1px;
  background-color: transparent;
  border-style: solid;
  border-color: rgb(205,229,255);
  border-width: 3px;
  border-radius: 4px;}

.blsolid {
  padding: 1px;
  background-color: rgb(205,229,255);
  border-style: solid;
  border-color: rgb(205,229,255);
  border-width: 3px;
  border-radius: 4px;}
  
.ltbl {
  padding: 2px 0px 2px 2px;
  background-color: rgb(234,244,255);		
  border-style: solid;
  border-color: rgb(205,229,255);
  border-width: 3px;
  border-radius: 4px;}


.ulbl {        
  box-shadow: 0 10px 6px -6px blue;}

.bldash {border-bottom: 2px rgb(205,229,255) dashed;}

.bldot {border-bottom: 2px blue dotted;}

.blline {border-bottom: 2px blue solid;}

.thrsbldash {border-top: 2px rgb(205,229,255) dashed;
             border-right: 2px rgb(205,229,255) dashed;
             border-bottom: 2px rgb(205,229,255) dashed;
             border-left: 0px dashed;}

.blcartouche {
  padding: 9px;;
  background-color: transparent;
  border-style: solid;
  border-color: rgb(205,229,255);
  border-width: 3px;
  border-radius: 4px;}
  
.bigblcartouche {
  padding: 5px;
  background-color: transparent;
  border-style: solid;
  border-color: rgb(205,229,255);
  border-width: 3px;
  border-radius: 4px;}
  
.thblcartouche {
  padding: 1px;
  background-color: transparent;
  border-style: solid;
  border-color: rgb(205,229,255);
  border-width: 2px;
  border-radius: 4px;}
  
.blcartouchefore {
  padding: 1px 1px 1px 1px;
  background-color: transparent;
  border-style: solid;
  border-color: rgb(205,229,255);
  border-width: 3px 0px 3px 3px;
  border-radius: 4px;} 
  
.blcartoucheafter {
  padding: 1px 1px 1px 1px;
  background-color: transparent;
  border-style: solid;
  border-color: rgb(205,229,255);
  border-width: 3px 3px 3px 1px;
  border-radius: 4px;} 
  
.blcartoucheboth {
  padding: 1px 0px 1px 0px;
  background-color: transparent;
  border-style: solid;
  border-color: rgb(205,229,255);
  border-width: 3px 1px 3px 1px;
  border-radius: 4px;}  
  
/*white*/

.whcartouche {
  padding: 9px;;
  background-color: transparent;
  border-style: solid;
  border-color: white;
  border-width: 3px;
  border-radius: 4px;}  

/*red*/

.tightred {
  padding: 1px;
  background-color: transparent;
  border-style: solid;
  border-color: #ffb2ab;
  border-width: 3px;
  border-radius: 4px;}


.reddash {        
  border-bottom: 2px red dashed;
  z-index:1000;}
    
.reddot {        
  border-bottom: 2px red dotted;
  z-index:1000;}
 
 .ulred {        
  box-shadow: 0 10px 6px -6px red;}
  
.fuzzyred {text-shadow: 3px 3px 34px red;
}



 
  
/*pink*/

.pinkback {
background-color: #FFB6C1;
border-style: solid;
border-color: #FFD700;
border-width: 1px;
border-radius: 4px;
}


.pnkdash {border-bottom: 2px #ffdab3 dashed;}

             
.thrspnkdash {border-top: 3px #ffdab3 dashed;
             border-right: 3px #ffdab3 dashed;
             border-bottom: 3px #ffdab3 dashed;
             border-left: 0px dashed;}
            
.pnkcartouche {
  padding: 4px;
  background-color: transparent;
  border-style: solid;
  border-color: #ffdab3;
  border-width: 3px;
  border-radius: 4px;}
  
.pnkcartoucheaffix {
  padding: 1px 1px 1px 0px;
  background-color: transparent;
  border-style: solid;
  border-color: #ffdab3;
  border-width: 3px 3px 3px 1px;
  border-radius: 4px;}



  
ruby {
ruby-align: space-around;
distribute-space;} 
  

.bichig {
    max-height: 450px;
	margin: 4px;
	padding: 4px;
	border-radius:30%;
	font-family: 'Mongolian White', Serif, 'Noto Sans', Sans-serif;
	font-size : 19px;
	line-height:150%;
	-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;
	background-color: #E6F2FF;
	box-shadow: inset 0 0 0.5vw 0.5vw white;
}

.bichigs {
	margin-top: 30px; margin-right: 0px; margin-bottom:30px; margin-left:0px;
	padding: 0px;
	font-family: 'Mongolian White';
	font-size : 18px;
	line-height:150%;
	-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;
}

.title1 {
	font-size: 120%;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
}

.mongol {
	height:430px;
	width:200%;
	background-color: #E6F2FF;
	padding: 8px;
}

.mongol2 {
	width:200%;
	background-color: #E0EEE0;
}

.cyrillic {
	font-size:130%;
	max-width: 130%;
	background-color: #FFF2E6;
	border-radius:3%;
	padding: 8px;
}

.notes {
	width:100%;
}

.pale {color: #F5F5DC;}


.download {background-color: #F0F8FF;}

.blue {color:blue;}

.acc {color:red;}

.dat {color:red;}

.instr {color:red;}

.abl {color:red;}

.gen {color:red;}

.reflex {color:magenta;}

.gd {color:orange;}

.maar {color:purple;}

.caus {color:gray;}

.toolie {display:none;
        font-size:0.75em; /* 16x0.7=11.2 */}
		
.ipa {color: #666600;}

.cyr {
	  color: black;
	  border-radius: 5px;
      background-color: #fff2e6;
      box-shadow: inset 0 0 0.2vw 0.2vw white;
	  font-size: 130%;
	  line-height:160%;
	  max-width: 130px;
	  overflow: visible;
	  z-index: 800;
	 }
	  
.gloss {font-size: 90%; 
	color: #306754;
	line-height: 100%;}
		

.ch {color:black;}

.ziti {display:none;}

.translit {
	position: relative; 
	bottom: 10px;
	font-size: 11px;
	font-style:italic;
	}

/*flex*/

.flexwrapper {
  width: 100%;
  margin: 2px;
  padding: 2px;
align-items: flex-start
}

.flexrow {
  display: flex;

  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 60px;
  margin: 5px;
  padding: 10px;
}

.flexcolumn {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.flexcont {
  margin: auto;
}



@media (min-width: 500px)
{

figure {margin-left: 40px;
   margin-right: 40px;}
   
   
.nav {
	color: #333;
	line-height: 100%;
	font-size: 100%;
	font-style: normal;
}

h1 {
	line-height: 1.3;
	font-size: 120%;
     }
	 
h2 {
	line-height: 1.2;
	font-size: 110%;
}

.small {
	font-size: 12px;
	}
	
.ziti {display:inline;}

.formplace {
	position: absolute;
	top: 25px;
	left: 220px;
	border:0;
}



@media (max-height: 320px)
{
	
html
{-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */}

.mongol {
	height:310px;
	width:200%;
}

.translit {
	position: relative; 
	bottom: 12px;
	font-size: 14px;
	font-style:italic;
	}
	

}