/* For assistive technology versions of MS books */

/*************VARIABLES**************************************/
:root{
  --fs:1.1;     /*font size*/
  --tc:black; /*text colour */
  --bg:white; /*background colour */
  --lh:1.2;     /*line height */
  --ls:normal;  /*letter spacing */
  --ll:30em;    /*line length */
  --sm:inherit; /*speech marks */
}
#bow,#bow>a{
  color:var(--bg);
  background-color:var(--tc);
}  
  
/*  From PefStdDoc.css  */
/* RESET */

body, div, span, p, img, form, table, tbody, tfoot, thead, tr, th, td, iframe,
h1, h2, h3, h4, h5, h6,  blockquote, pre, a, code,
dl, dt, dd, ol, ul, li, fieldset, applet,font, a
, strong, label, legend {
	vertical-align: baseline;
  color:var(--tc);
  line-height:var(--lh);
	font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-size: var(--fs);
    letter-spacing:var(--ls);
	outline: 0;
  padding: 0;
  margin: 0;
  border: 0;
  letter-spacing:var(--ls);
}

td, tr, th { vertical-align: top;}



/* These are customised with css because normally the layout engine will
   allow extra line height which puts an unsightly gap in the text.  */
sup {position:relative; top:-5px; vertical-align:top; font-size:80%;}
sub {position:relative; bottom:-3px; vertical-align:bottom; font-size:80%;}

p {margin-top:1em;}
div {margin-top:2px;}
.hidden{display:none;}
body {background-color: var(--bg);
  padding: 0px 1em 0px 30px;
  }

/* USING SPACE HORIZONTALLY */
.m1 {margin-left:1em !important;}
.m2 {margin-left:2em !important;}
.m3 {margin-left:3em !important;}

.bold {
  font-weight:bold;
}
.italic {
  font-style: italic;
}

a.foot {
  vertical-align:super;
  font-size:80%;
  font-weight:bold;
  padding:0px 2px;
  color:blue;
  background-color:yellow;
  text-decoration:none;
  display:inline-block;
  border:1px solid blue;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.altFont{
  color:red;
  font-style:italic;
}  
  
h1{
  font-size:300%;
  font-weight:bold;
  background-color:white;
  color:blue;
  /*padding:0em 2em .1em 2em;*/
  text-align:center;
  margin:2em 1em;
}
h2{
  font-size:150%;
  font-weight:bold;
  border: 1px solid black;
  border-radius:5px;
  background-color:white;
  color:rgb(10, 10, 121);
  text-align:center;
  margin:2em 1em;
}
h2.section {
  color:yellow;
  font-weight:bold;
  font-size:200%;
  background-color:black;
  width:9em;
  padding:.5em 1em .5em 1em;
}
h3{
  font-size:110%;
  font-weight:bold;
  border-radius:5px;
  border:1px black solid;
  background-color:white;
  color:rgb(151, 40, 12);
  text-align:center;
  padding:0.3em;
  margin:50px 2em;
  display:inline;
}

/*  restrict the line width */
div.novelText{
  max-width:var(--ll);
}

img{
  background-color:rgba(128, 128, 128, 0.199);
  border:1px solid #cccccc;
  margin:.5em 1em;
}  


.strike{
  text-decoration-color: red;
  text-decoration-thickness: 2px;
}

/*     ====== FRAMES ============================ 
 (.frame is not used by css but possibly by other processing )
 .aside,.authNote,.chant,.endNotes,.form,.handwriting,.headline,.letter,.notice,
 .poem,.preface,.poetry,.printing,.quote,.scrawl,.screen,.script,.song,.telegram
*/

 .aside,.authNote,.chant,.endNotes,.form,.glossary,.handwriting,.headline,.letter,.newspaper,.note,.notice,.opener,
 .poem,.preface,.poetry,.postscript,.printing,.quote,.scrawl,.screen,.script,.song,.story,.telegram,.typing
{  display:inline-block; 
   padding:.5em 2em .5em 2em;
   background-color:white;
}

 .aside,.authNote,.chant,.endNotes,.glossary,.handwriting,.opener,
 .poem,.preface,.poetry,.postscript,.quote,.scrawl,.screen,.script,.song,.story
{  border-radius:1em; }

 .aside,.authNote,.chant,.endNotes,.form,.headline,.letter,.newspaper,.note,.notice,.opener,
 .poem,.preface,.poetry,.postscript,.printing,.quote,.report,.scrawl,.screen,.script,.song,.telegram,.typing
{  border: 2px solid black;}

.newspaper
 {width:25em;text-align:justify;padding:0.8em;}


div.glossary,.postscript,.story
{  border: 1px solid black;}

.postscript 
{color:blue;}

 .chant,.handwriting,.letter,.opener,.reminiscing,
 .poem,.poetry,.quote,.report,.scrawl,.song,.story
{  font-style:italic; }

.reminiscing
 {  background-color:white;}

 

.authNote,.aside,.preface{background-color:rgb(248, 248, 152);}
.authNote>span:first-child{font-size:120%;}
.endNotes{background-color:#ddd;}
.form{background-color:rgb(252, 226, 212);}
.handwriting{color:rgb(36, 83, 155);  border:1px solid #cccccc;}
.headline{font-size:160%;}
.opener{font-size:160%;font-weight:light;width:30em;margin-top:1em;}
.poem,.poetry{color:rgb(68, 8, 8);}
.printing{background-color:rgb(252, 226, 212);}
.quote{font-size:110%;}

.scrawl{color:olive;font-size:120%;font-weight:33%;border: 5px solid grey;}
.telegram{color:black;background-color:rgb(252, 226, 212);letter-spacing:120%}

.screen {  /* computer screen (Earth in space)*/
  border:3px solid #eb8;
  margin-top:5px;
  border-radius: 6px;
  background-color:#555;
  padding: 5px;
  color:#4e4;
  font-family:monospace;
  font-size:95%;
  line-height:120%;
  white-space : pre;
  overflow-x:auto;
  width:45em;
}

/* frame-script */
 /*@@@@ needs VARing*/
div.sDesc{
  background-color: #dddddd;
  margin-left:5em;
}
span.sSpeaker{  
  color:rgb(128, 65, 6);
  width:7.5em;
  display:inline-block;
  border-bottom:2px dotted red;
} 
div.sSpeech{
  margin-top:.8em;
}
div.sSpeechBody {
  color:black;
  background-color:#eeeeee;
  margin-left:8em;
  position:relative;
  margin-top:-1em;
}  

h4.sAction{
  color:rgb(90, 90, 5);
  border: 1px solid black;
  border-radius:5px;
  padding-left:1em;
  font-weight:bold;
  background-color:#fff;
  line-height:1.5em;
}  

span.sActionInSpeech{
  color:red;
}

/* ============ QUOTED SPEECH ========== */

.speech{overflow-y:clip;}

.smBold{
  font-weight:bold;
  font-size:200%;/*background-color:yellow;*/
  position:relative;top:10px;
  line-height:33%;  
  font-weight:bold;
}  

.smRed{
  color:red;
}


/* ============= CONTROLS AND SETTINGS ==========*/

span.email:before {content:"techSupport";}
span.email:after  {content:"merlinsmallbone.shop";}
div.aboutItem     {margin:0.6em 1em;}

.menuTitle{
  font-weight:bold;
  color: red;/* black; */
  background-color:white;/*rgb(209, 233, 209);*/
  padding:3px 1.5em;
  border-radius:5px 5px 0 0;
}
.buts{
  line-height:200%;
}    
input[type="button"]{
  font-size:inherit;
  color:olive;
  background-color:white;/*rgb(209, 233, 209);*/
}  
input:focus{
  color:white;
  font-weight:bold;
  background-color:black;
}  

.dialogue{
  display:inline-block;
}  

input{
  cursor:pointer;
}  

/* ============= PREVIEW ===========================*/
/*.previewEnd{
  background-color:rgb(94, 176, 214);
  color:white;
  font-weight:bold;
} 

#menuButton{
  z-index: 10;
  position:fixed;
  top:0;
  right:0;
}


.button {
  margin : 0 5px 0 0;
  padding: 0 3px;
  border : 1px outset #999;
  background-color : #dadada;
  white-space : pre;
  text-decoration : none;
  color : #08f;
  font-weight : normal;
  -moz-border-radius: 3px;
  border-radius: 3px;
  cursor:pointer;
  display:inline-block;
  
  box-shadow: 1px 1px 1px #777;
}
.button:hover {color: black;}


.button.disabled {
  color:#ccc;
  background-color:white;
  cursor:default;
  border : 1px dotted #ccc;
}

.button.disabled:hover {color: #888;}

a.link {
  color : #08f;
  background-color:white;
  background-image : none;
  padding : 0 2px;
  margin : 0 2px;
  text-decoration : none;
  white-space : nowrap;
  border-style:none;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border:1px solid #D7E4F7;
}
a.link:hover {
  color: #800000;
  border:1px solid #800000;
}
.f200 { font-size:200% !important;}


.thumb{
  height:240;
  width:168;
}
  */