@charset "utf-8";

/*Main style sheet for Spicks folder*/

@font-face {
	font-family: 'Mongolian White';
    src:local('Mongolian White'), url('mnglwhiteotf.ttf') format('truetype');
}

body {background-color: #FEFEFA;
    box-shadow: inset 0 0 5vw 1vw white;
	margin: 10px; 
	padding: 10px;
	color: #333;
	line-height: 1.5;
	font-size: 1.2em;
	font-family: Optima, sans-serif;}

body.large {background-color: #FFFFFF;
    box-shadow: inset 0 0 5vw 1vw white;
	margin: 10px; 
	padding: 10px;
	color: #333;
	line-height: 4;
	font-size: 4em;
	}


header {position:absolute;
    left:0px;
    top:0px;
	width:100%;
	min-height: 70px;
	background-image: url("images/spicks10.jpg");
	background-repeat: repeat-x;
	}
	

.sitetitle {position:relative;
    font-size: 180%;
	left: 12px;
	top: 8px;
	line-height: 113%;
}

.contact {position:absolute;
     right:10px;
	 top:1px;
	 font-size:11px;}
	 
.moonlight {position:absolute;
    right:20px;
    top:46px;
	width:100%;
	font-size: 14px;
    font-style:italic;}


nav {position:absolute;
	 top:100px;
	 width:95%;}
	 
.nav {
	position: relative;
	float: left;
	left: 0px;
	font-size: 65%;
	line-height: 130%;
	width: 45%;
}
.navr {
	position: relative;
	float: right;
	text-align: right;
	margin-right: 10px;
	font-size: 65%;
	line-height: 130%;
	width: 45%;
}

.photo {
	position: absolute;
	right: -2px;
	top: 29px;
	padding: 5px;
	z-index: 50;	
}
	
.mongolcontent {
    position: relative;
    float:right;
	top: 135px;
	border:1px solid black;
}
  

footer {width:100%;
	background-image: url("images/spicks10.jpg");
	background-repeat: repeat-x;
}

audio {float:right;}



.content {
	position: relative;
	width:97%;
	left: 5px;
	top: 190px;
	visibility: visible;
	z-index: 3;
	padding: 15px;
}

/*Fonts and scripts*/

.bichig {
	overflow:auto;
	margin: 0px;
	padding: 2px;
	font-family: 'Mongolian White';
	font-size : 21px;
	line-height:130%;
	-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;
}

.bichiglarge {overflow:auto;
	margin: 0px;
	padding: 2px;
	font-family: 'Mongolian White';
	font-size : 100px;
	line-height:130%;
	-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;
	}

	.bichigwrit {overflow:auto;
	margin: 0px;
	padding: 2px;
	font-family: 'Mongolian Writing';
	font-size : 21px;
	line-height:130%;
	-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;
	}

.bichigwritlarge {overflow:auto;
	margin: 0px;
	padding: 2px;
	font-family: 'Mongolian Writing';
	font-size : 100px;
	line-height:130%;
	-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;
	}

.bichigband {
    box-shadow: inset 0 0 10vw1vw white;
    background-color: #E6F2FF;
    height:420px;
    width:100%;
    margin: 4px;
    padding: 4px;
    overflow: auto;
    scroll:auto;
}

.massive {font-size: 550%;
           line-height: 550%;}

.bichignos {
	overflow:auto;
	margin: 0px;
	padding: 2px;
	font-family: 'Mongolian White';
	font-size : 41px;
	line-height:130%;
	-moz-writing-mode: horizontal-lr;
	writing-mode: horizontal-lr;
	-webkit-writing-mode: horizontal-lr;
	-o-writing-mode: horizontal-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;
}

.bichigsquare {
	height:130px;
	float:right;
	clear:both;
	font-family: 'Mongolian White';
	font-size : 100%;
	margin-top:-25px;
	margin-left:15px;
	margin-bottom:30px;
	padding:3px;
	background-color: #fff2e6;
	-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 */
}


.bichigsflat {
	margin: 0px;
	padding: 0px;
	font-family: 'Mongolian White';
	font-size : 106%;
}

.verticalchja {
   border:0px;
    box-shadow: 0 0 10px 10px #DEF4FF;
	height: 240px;
	max-width:900px;
	font-size : 106%;
	margin-top: -10px;
	margin-left: auto;
	margin-right: auto;
	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;
}

.verticalplain { 
	-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;
}


*[lang="zh-Hant"] 	{font-family: 儷黑 Pro, Apple LiGothic Medium;}
*[lang="zh-Hans"] 	{font-family: 华文黑体, Hei; line-height: 150%;}
*[lang="ja"] {font-family: 平成角ゴシック, ＭＳ ゴシック;}
*[lang="vi"] {font-family:Arial, Helvetica, sans-serif;}

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


.section {clear:both;}



h1 {
    position:relative;
    font-size: 150%;
	line-height: 140%;
}


h2 {font-size:125%;
    line-height:125%;}

h3 {position:relative;
	left: 0px;
    font-size: 120%;
    line-height:120%;
}

h4 {position:relative;
	left: 0px;
    font-size: 115%;
    line-height:115%;
}

h5 {position:relative;
	left: 0px;
    font-size: 110%;
    line-height:110%;
}

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

figure {
    display: inline-block;
    margin: 20px; /* adjust as needed */
}
figure img {
    vertical-align: top;
}
figure figcaption {
    text-align: center;
}

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

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


ruby {ruby-align: center;
}

rt.big {font-size: 80%;
        margin-bottom: 1px;}

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

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

/*Moving*/

.up {position:fixed;
     right: 5px;
	 top: 33px;
	 z-index:500;
	 text-align: center;
     vertical-align: middle;
	 }
	 
.up2 {position:fixed;
    right: 10px;
	 top: 280px;
	 z-index:500;
	 text-align: center;
     vertical-align: middle;
	 }
	 
.up3 {position:fixed;
     right: 5px;
	 top: 140px;
	 z-index:0;
	 text-align: left;
     vertical-align: left;
     background-color: transparent;
	 }
	 	 
	 
.moveup {
	position: relative;
	bottom: 35px;
}

.moveup2 {position: relative; 
        bottom: 7px;}

.movedown {
	position: relative;
	top: 45px;
	right: 20px;
	}

.moveright {
	position: relative;
	right: -20px;
	}

.greybox  {padding: 1px;
		background-color: #FFF2F2;
		padding:1px;
		border-radius: 3px;
		border: 1px solid gray;}
    
.right {
position: absolute;
right: 0;
bottom: 0;
}

   
.marginbottom2 {
   margin-bottom: 17px;}      
      


.tocl {position: relative;
      width: 98%;
      font-size: 95%;
      line-height:130%;
      background-color: #CDE5FF;
      box-shadow: inset 0 0 5vw 1vw #FEFEFA;
      padding: 5px;
      margin: 3px;
      min-height:107px;}  

.toc {position: relative;
      width: 98%;
      font-size: 95%;
      line-height:130%;
      background-color: #fdf5e6;
      box-shadow: inset 0 0 5vw 1vw #FEFEFA;
      padding: 5px;
      margin: 3px;
      min-height:107px;}
      
.lh3 {line-height: 2.5;}

.blueside{
   background: #f4f9ff;
  border-left: 10px solid #cae1ff;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
    }
    
.greenside{
   background: #f0f4e8;
  border-left: 10px solid #D0F2D0;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
    }


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

td fixedw {
	 column-width:58px;
}


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

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

/*Font sizes and styles*/

.style2 {font-size: 15px;}

.style5 {font-size: 85%;
         line-height:150%;}
         
.style4 {font-size: 16px;}

.style6 {font-size: 12px;}

.gloss {font-size: 85%;}


.huge {font-size: 40px;}

            	 
.amn {font-weight: normal;
         color: #006600;
		 font-family: Arial, Helvetica, sans-serif;
		 lang:mn;}

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

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

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

.finetext {font-size: 93%;}

.largemono {
     font-size: 140%;
     font-family: "Courier New", "Courier", "Lucida Console", monospace;
}

.greybold {
     font-size: 110%;
     font-family: "Courier New", "Courier", "Lucida Console", monospace;
     font-weight: 550;
     color: gray;
}

/*stolen*/

.table-wrapper {
  margin: 15px;
  background-color: white;
  text-align: center;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: none;
  width: 100%;
  padding: 15px;
}

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

.columnnarrow {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 0.5;
}

.red-column {
  border-width: 4px;
  border-style:solid;
  border-color: white;
  border-radius: 45px;
  background-color: pink;
  height: 70px;
}

.yr {
  border-width: 4px;
  border-style:solid;
  border-color: white;
  background: linear-gradient(to right, pink 40%, #fdfd96 100%);
  border-radius: 25px;
  height: 70px;}

.yellowman {  
  border: solid white 5px;
  border-radius: 25px;
  padding: 1px;
  background: #fdfd96;
  height: 70px;}
  
.white {
  border-width: 4px;
  border-style:solid;
  border-color: white;
  border-radius:10px;
  background-color: white;
  height: 70px;}
  
.transp {
  border-width: 4px;
  background-color: transparent;
  height: 70px;}

.double-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 2
}

.einhalb-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1.5
}

.zweihalb-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 2.5
}


.three-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 3;
}

.rightalign {
 float: right;}
 



/*finish stolen*/



.caption {font-size: 13px;
          margin: auto;
          }
		  
figcaption {font-size: 70%;
          margin: auto;
          } 	   

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


header {
	width:100%;
	background-image: url("images/spicks10.jpg");
	background-repeat: repeat-x;
}


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



.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;}


.mono {font-family: "Courier New", Courier, "Lucida Console", monospace;
	font-style: normal;
	font-variant: normal;
	line-height: 135%;}
	
.example {font-family: Courier;}

.pale {color: #E8E8E8;}




u { /* -- single underline -- */
	border-bottom: 1px solid;
	text-decoration: none;
}

u.double { /* -- double underline -- */
	border-bottom: 1px solid;
}
u.dotted { /* -- dotted underline -- */
	border-bottom: 1px dotted #999;
  text-decoration: none;
}

u.dashed{ /* -- dashed underline -- */
  border-bottom: 1px dashed #999;
  text-decoration: none; 
}


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

.bluebot {width:92%;
       margin-top:25px;
	   margin-left:10px;
	   margin-right:8px;
	   margin-bottom:25px;
	   padding-top:20px;
	   padding-bottom:5px;
	   padding-left:10px;
	   padding-right:10px;
	   font-size:100%;
	   background-color:#DEF4FF;
	   border-radius:7%;
	   clear:right;}
	   
.yellowtop {background-color: #FFFFE9;
             width:95%;
             margin-top:-30px;
			 margin-left:-15px;
			 margin-right:3px;
			 margin-bottom:5px;
			 padding:5px;
			 bottom-margin:-20px;
			 font-size:100%;}


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

td.centre {
    text-align: center;
}

td.ten {width:10px;}
td.thirty {width:30px;}
td.forty {width:40px;}
td.fifty {width:50px;}

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

.borderwide {
	border-style: solid;
    border-color: #FFE4E1;
    padding-left:8px;
    padding-top:8px;
}


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

.borderdash {
    display: flex;
	border-style: dashed;
    border-color: black;
    border-width: 1.5px;
}

.border {
border: 1px;
padding: 5px;
margin:5px;
border-style:solid;
border-color:#999999;}



div.number {
  position: absolute;
  left: -20px;
}

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

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

.floatright {
	float: right;
	background: #FEFEFA;
	margin: 0 1em 0 0;
	padding: 10px;
	font-size: 80%;
	text-align: center;
	}
	
.figcaption {
  font-size:60%;
  margin-left: auto;
  margin-right: auto;
}

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

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

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

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



.table {border: 1;
        margin: 1}

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


.table td {border-style: solid
           border-width: thick;
           padding:5px;
           background-color: #FFF2E6;
          }

.blank td  {background-color:#FFFFFF;
           border-bottom-width: thin;
           border-bottom-style:dashed;
		   border-bottom-color:#999999;
		   border-top-width: thin;
           border-top-style:dashed;
		   border-top-color:#999999;
		   border-right-style:none;
		   border-left-style:none;}
          
.smallfont {font-size: 80%;
          }
          
.tinyfont {font-size: 60%
    }
          
.yellowquote {
    background-color: #FFFFE9;
	border-radius: 7%;
	box-shadow: inset 0 0 10vw 1.5vw #FEFEFA;
	width: 100%;
	margin-top: 20px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 30px;
	padding-top: 20px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	clear: right;
}


.greybounda {background-color: transparent;
             padding: 2px;
             border-style: solid;
              border-width: 3px;
              margin:1px;
              border-color: grey;
              border-radius: 25px;}
              
.dot {
	border-bottom: 1px dotted;
}
          
.textbox {padding:5px;
       background-color: #FFF2E6;
       box-shadow: 0 0 10px 10px #FFF2E6;
          }

.textboxbl {padding:5px;
       background-color: #E6F2FF;
       box-shadow: 0 0 10px 10px #FFF2E6;
          }

		  
.smfont {width:100%;
               font-size:80%;}

.table td pinkback {background-color: #FEFEFA;}

.table td blueback {background-color: #E6F2FF;}

.tablearray {display: inline-flex;
             padding: 5px;
             flex-wrap: wrap;}
             
.word {padding: 2px;
       text-align:center;
       background-color: #E6F2FF;
       border:1px solid black;
       margin: 6px;}
       
.wordm {padding: 2px;
       text-align:center;
       background-color: #E6F2FF;
       border:2.5px solid black;
       margin: 6px;}

.redback {
    background-color: #FFCC99;
}

.redcartouche {
 background-color: #F08080;
  border-style: solid;
  border-color: #FFCC99;
  border-width: 3px;
  border-radius: 4px;}
  
.paleredback {
background-color: #ffe6cc;
box-shadow: inset 0 0 10vw 1.5vw #FEFEFA;
}

.redshadow {text-shadow: 0 0 3px red;}

.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;}




.yelloback {
    background-color: #FFFF99;
}

.lyelloback {
    background-color: #FFFFE9;
}


.paleback {background-color: #FFFFE9;
}


.yugo {
	min-height: 120px;
	width: 95%;
	margin: 5px 5px 25px 5px;
	padding: 8px;
	background-color: #FFFFE9;
	border-radius: 7%;
}

.whugo {
	min-height: 120px;
	width: 95%;
	margin: 5px 5px 15px 5px;
	padding: 8px;
	background-color: transparent;
	border-radius: 7%;
}

.greyyugo {
	min-height: 120px;
	width: 95%;
	margin: 5px 5px 25px 5px;
	padding: 8px;
	background-color: transparent;
	box-shadow: 0 0 1vw 1vw #E8E8E8;
    border-width: 2px;
    box-shadow: inset 0 0 1vw 1vw #E8E8E8;
	border-radius: 7%;
}
        

.lgreenback {
   background-color: #D0F2D0;
   }
   
.palegreenback {
background-color: #e2fde2;
box-shadow: inset 0 0 10vw 1.5vw #FEFEFA;
}



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

.lgreenquote {
	background-color: #D0F2D0;
	box-shadow: inset 0 0 2vw 1vw #FEFEFA;
	margin-top: -10px;
	margin-left: -20px;
	margin-bottom: -10px;
	min-height: 40px;
	padding: 20px 20px 10px 20px;
}


.lbluequote {  
	background-color: #DEF4FF;
	box-shadow: inset 0 0 2vw 1vw #FEFEFA;
	margin-top: -10px;
	margin-left: -20px;
	margin-bottom: -10px;
	min-height: 40px;
	padding: 20px 20px 10px 20px;
}

.blueback {
	background-color: #E6F2FF;
}

.lblue {background-color: #DEF4FF;
        border-radius: 10px;}

.blsolid {
 background-color: #E6F2FF;
  border-style: solid;
  border-color: #E6F2FF;
  border-width: 3px;
  border-radius: 4px;}
  
.blcartouche {
  background-color: transparent;
  border-style: solid;
  border-color: #b4d8ff;
  border-width: 3px;
  border-radius: 4px;}
  
.greycartouche {
  background-color: transparent;
  border-style: solid;
  border-color: #DCDCDC;
  border-width: 3px;
  border-radius: 4px;}


.aprcartouche {  
    background-color: transparent;
	border-style: solid;
  border-color: #ffeaab;
  border-width: 3px;
  border-radius: 4px;}
  
  
.pnkcartouche {
  background-color: transparent;
  border-style: solid;
  border-color: #ffdab3;
  border-width: 3px;
  border-radius: 4px;}
  
.redcartouche {
 background-color: transparent;
  border-style: solid;
  border-color: #FF9999;
  border-width: 3px;
  border-radius: 4px;}
  

.paleblueback {
background-color: #DEF4FF;
box-shadow: inset 0 0 10vw 1.5vw #FEFEFA;
}

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



.greyback {
    background-color: #808080;
}

.lgreyback {background-color: #F8F8F8;
	        border: solid 1px;
            border-color: #DCDCDC;}


.greysolid {
 background-color: #C6C6C6;
  border-style: solid;
  border-color: #C6C6C6;
  border-width: 3px;
  border-radius: 4px;
  font-size: 90%;}


.lgrey {background-color: #C6C6C6;
        box-shadow:  2px 2px 4px 0 #C6C6C6;}

.pearlgrey {background-color: #dddddb;
          box-shadow:  2px 2px 4px 0 white;}

.lemon {background-color: #ffecc6;
          box-shadow:  2px 2px 4px 0 #C6C6C6;}

.iceblue {background-color: #aad4e5;
          box-shadow:  2px 2px 4px 0 #C6C6C6;}
        
div.lgreyground {
        padding: 15px 15px 15px 15px;
        background-color: transparent;
        box-shadow: 0 0 1vw 1vw #DCDCDC;
        border-width: 2px;
        box-shadow: inset 0 0 1vw 1vw #DCDCDC;}

.greytext {color: #6f6f6f;}

.lgreytext {color: #C6C6C6;}

.greenback {
    background-color: #CCFFCC;
}

.inset {
    background-color: #E5E4E2;
}

.whiteback {
   background-color: #FFFFFF;
}

.threesdash {border-top: 2px #cde5ff dashed;
             border-right: 2px #cde5ff dashed;
             border-bottom: 2px #cde5ff dashed;
             border-left: 0px dashed;}
	

.peachback {
   background-color: #FFE4E1;
}

.pink {
   background-color: #FFF3FF;
}

.circled {background-color: transparent;
	box-shadow:  inset 0 0 8px 4px #8ac6ff;
	border-radius: 10%;
}

.goldcircle {background-color: #ffeaab;
	box-shadow:  2px 2px 4px 0 red;
	border-radius: 10%;
}

.whiteback {
    background-color: white;
}

.subj {background-color: #9df99f;
	box-shadow:  2px 2px 4px 0 #f99df7;
	border-radius: 10%;
}

.underlinebl {        
        box-shadow: 0 10px 6px -6px blue;}
        
.ing {        
        background-color: #ffeaab;
	border-style: solid;
  border-color: #ffeaab;
  border-width: 2px;
  border-radius: 4px;}
  
.adv {font-style: normal;
	font-weight: bold;
	color: #BCBCBC;}
        
.uldash {border-bottom: 1px blue dashed;}

.ulred {        
  border-bottom: 2px red dotted;
  z-index:1000;}
  
.samesubold {  
        background-color: #9df99f;    
        box-shadow: 2px 2px 4px 0 red;
        border-radius: 10%;
        }
        
        
.samesub {background-color: #b3d7ff;
  border-style: solid;
  border-color: #b3d7ff;
  border-width: 2px;
  border-radius: 4px;}
        
.diffsub {  
    background-color: #ffeaab;
	border-style: solid;
  border-color: #ffeaab;
  border-width: 2px;
  border-radius: 4px;}

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

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

.purple {
	font-style: normal;
	font-weight: normal;
	color: #FF00FF;
}

.greyletter {font-style: normal;
	font-weight: normal;
	color: #A9A9A9;}

.greyletters {font-style: normal;
	font-weight: normal;
	font-size: 50%;
	color: #A9A9A9;}


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

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

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

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


/*showhide1*/
input#show, input#hide {
    display:none;
}

span#displayed {
    display:none;
}
input#show:checked ~ span#displayed {
  display:block;
}

input#hide:checked ~ span#displayed {
    display:none;
}

/*showhide2*/
input#show2, input#hide2 {
    display:none;
}

span#displayed2 {
    display:none;
}
input#show2:checked ~ span#displayed2 {
  display:block;
}

input#hide2:checked ~ span#displayed2 {
    display:none;
}

/*showhide3*/
input#show3, input#hide3 {
    display:none;
}

span#displayed3 {
    display:none;
}
input#show3:checked ~ span#displayed3 {
  display:block;
}

input#hide3:checked ~ span#displayed3 {
    display:none;
}

/*showhide4*/
input#show4, input#hide4 {
    display:none;
}

span#displayed4 {
    display:none;
}
input#show4:checked ~ span#displayed4 {
  display:block;
}

input#hide4:checked ~ span#displayed4 {
    display:none;
}

/*showhide5*/
input#show5, input#hide5 {
    display:none;
}

span#displayed5 {
    display:none;
}
input#show5:checked ~ span#displayed5 {
  display:block;
}

input#hide5:checked ~ span#displayed5 {
    display:none;
}

/*showhide6*/
input#show6, input#hide6 {
    display:none;
}

span#displayed6 {
    display:none;
}
input#show6:checked ~ span#displayed6 {
  display:block;
}

input#hide6:checked ~ span#displayed6 {
    display:none;
}

/*showhide7*/
input#show7, input#hide7 {
    display:none;
}

span#displayed7 {
    display:none;
}
input#show7:checked ~ span#displayed7 {
  display:block;
}

input#hide7:checked ~ span#displayed7 {
    display:none;
}

/*showhide8*/
input#show8, input#hide8 {
    display:none;
}

span#displayed8 {
    display:none;
}
input#show8:checked ~ span#displayed8 {
  display:block;
}

input#hide8:checked ~ span#displayed8 {
    display:none;
}

/*showhide9*/
input#show9, input#hide9 {
    display:none;
}

span#displayed9 {
    display:none;
}
input#show9:checked ~ span#displayed9 {
  display:block;
}

input#hide9:checked ~ span#displayed9 {
    display:none;
}

/*showhide10*/
input#show10, input#hide10 {
    display:none;
}

span#displayed10 {
    display:none;
}
input#show10:checked ~ span#displayed10 {
  display:block;
}

input#hide10:checked ~ span#displayed10 {
    display:none;
}

/*showhide11*/
input#show11, input#hide11 {
    display:none;
}

span#displayed11 {
    display:none;
}
input#show11:checked ~ span#displayed11 {
  display:block;
}

input#hide11:checked ~ span#displayed11 {
    display:none;
}

/*showhide12*/
input#show12, input#hide12 {
    display:none;
}

span#displayed12 {
    display:none;
}
input#show12:checked ~ span#displayed12 {
  display:block;
}

input#hide12:checked ~ span#displayed12 {
    display:none;
}

/*showhide13*/
input#show13, input#hide13 {
    display:none;
}

span#displayed13 {
    display:none;
}
input#show13:checked ~ span#displayed13 {
  display:block;
}

input#hide13:checked ~ span#displayed13 {
    display:none;
}

/*showhide14*/
input#show14, input#hide14 {
    display:none;
}

span#displayed14 {
    display:none;
}
input#show14:checked ~ span#displayed14 {
  display:block;
}

input#hide14:checked ~ span#displayed14 {
    display:none;
}

/*showhide15*/
input#show15, input#hide15 {
    display:none;
}

span#displayed15 {
    display:none;
}
input#show15:checked ~ span#displayed15 {
  display:block;
}

input#hide15:checked ~ span#displayed15 {
    display:none;
}

/*showhide16*/
input#show16, input#hide16 {
    display:none;
}

span#displayed16 {
    display:none;
}
input#show16:checked ~ span#displayed16 {
  display:block;
}

input#hide16:checked ~ span#displayed16 {
    display:none;
}

/*showhide17*/
input#show17, input#hide17 {
    display:none;
}

span#displayed17 {
    display:none;
}
input#show17:checked ~ span#displayed17 {
  display:block;
}

input#hide17:checked ~ span#displayed17 {
    display:none;
}

/*showhide18*/
input#show18, input#hide18 {
    display:none;
}

span#displayed18 {
    display:none;
}
input#show18:checked ~ span#displayed18 {
  display:block;
}

input#hide18:checked ~ span#displayed18 {
    display:none;
}

/*showhide19*/
input#show19, input#hide19 {
    display:none;
}

span#displayed19 {
    display:none;
}
input#show19:checked ~ span#displayed19 {
  display:block;
}

input#hide19:checked ~ span#displayed19 {
    display:none;
}

/*showhide20*/
input#show20, input#hide20 {
    display:none;
}

span#displayed20 {
    display:none;
}
input#show20:checked ~ span#displayed20 {
  display:block;
}

input#hide20:checked ~ span#displayed20 {
    display:none;
}

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

.wrapper { 
  border: none;
  overflow:hidden;
  background-color: none;
  display: flex;
  flex-wrap: wrap;
}

.wrapper div {
  width:90%;
   padding: 5px;
   box-shadow: inset 0 0 5vw 1vw #FEFEFA; 
   border:none;
   margin: 0 auto;
}

.wrapperwide { 
  border: none;
  overflow:hidden;
  background-color: none;
  display: flex;
  flex-wrap: wrap;
}

.wrapperwide div {
  width:100%;
   padding: 5px;
   box-shadow: inset 0 0 5vw 1vw #FEFEFA; 
   border:none;
   margin: 0 auto;
}

.one {
  background-color: #DFDFDF;
  border:none;
  border-radius: 10px;
  margin:10px;
  min-width:130px;
}

.two { 
  background-color: #DFDFDF; 
  margin:10px;
  border: none;
  border-radius: 10px;
  min-width:130px;
}

.three {
  background-color: #DFDFDF;
  overflow:hidden;
  float:left;
  margin:10px;
  border:none;
  border-radius: 10px;
  min-width:130px;
  max-width:500px;
}

.four {
  background-color: #FFE4E1;
  border:none;
  border-radius: 10px;
  padding:10px;
  margin:10px;
  min-width:130px;
  max-width:500px;
}

.five {
  background-color: #FFFFE9;
  border:none;
  border-radius: 10px;
  padding:10px;
  margin:10px;
  min-width:130px;
  max-width:400px;
}

.greywyello {
  background-color: #DFDFDF;
  border:1px;
  border-color:yellow;
  border-radius: 5px;
  margin:10px;
}
		

.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; ;
}

/*For tooltip target element that has set class="tooltip" */
a.tooltip {
  text-decoration: none;  
  outline: none; 
  cursor: pointer;
  display: inline-block;
  link:text-decoration:none;
  color:green;
  font-family:monospace;
  font-size: 130%;
  line-height: 1.5;
  margin:0 2px 0 0;
}

/*For tooltip box*/
div#mcTooltip 
{
    line-height:16px;
    border-width: 1px;   
    color:#333; 
    border-color:#BBBBBB;
    padding:20px;
    font-size: 18px;
    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: #FEFEFA;
    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;
}

.cyr {font-size:18px !important;}

@media (min-width: 430px)
{
	
body {
	line-height: 1.5;
	font-size: 1.2em;
	font-family: Optima, sans-serif;}

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

.moveupright {
	position: relative;
	bottom: 35px;
	left: 180px;
	}
	
.moveupsmall {
	position: relative;
	bottom: 7px;
	left: 1px;
	font-size: 70%;
}


.tocl {position: relative;
      width: 95%;
      font-size: 100%;
      line-height:140%;
      background-color: #CDE5FF;
      box-shadow: inset 0 0 5vw 1vw #FEFEFA;
      padding: 5px;
      margin: 3px;
      min-height:97px;}  

.toc {position: relative;
      width: 95%;
      font-size: 100%;
      line-height:140%;
      background-color: #fdf5e6;
      box-shadow: inset 0 0 5vw 1vw #FEFEFA;
      padding: 5px;
      margin: 3px;
      min-height:97px;}

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

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



.moonlight {font-size: 14px;
            font-style:italic;}
			
h1 {
    position:relative;
    font-size: 160%;
	line-height: 150%;
}

h2 {font-size:140%;
    line-height:138%;}
    
h3 {font-size:130%;
    line-height:128%;}
    
h4 {font-size:125%;
    line-height:123%;}    

h5 {font-size:120%;
    line-height:118%;}  

hr.grey {
    border-top: 3px solid lightgray;
}

hr.greystart {
	border-top:2px solid darkgray;
    border-bottom: 4px dotted lightgray;
    width:90%;
}

hr.greyend {
	border-bottom:2px solid darkgray;
    border-top: 4px dotted lightgray;
    width:90%;
}

hr.greyth {
    border-top: 1px solid #F2F2F2;
}

hr.lilac {
    border-top: 3px solid #c8a2c8;
}

hr.lgrn {
    border-top: 4px solid #00FF00;
}


td fixedw {
	 column-width:70px;
}





@media (min-width: 810px)

{

.smfont {width:100%;
         font-size:90%;}

body {position: relative;
	margin-left:auto;
    margin-right:auto;
    width:810px;}
							
}

img.centre {max-width: 98%;}

@media (min-width: 1240px)

{

.up {position:fixed;
     right: 150px;
	 top: 15px;
	 z-index:500;
	 text-align: center;
     vertical-align: middle;
	 }