* {
margin: 0;
padding: 0;
border: 0;
}


html {height:100%; }

body {
  height:100%;
  padding: 0% 0 0;
  font-family:'Open Sans', Arial, sans-serif;
  font-size: 1em;
  }
  

input[type="checkbox" i] {cursor:pointer;}
/*PRINCIPAL LAYOUT*/
#header {height:6%; padding:0 3%; position:relative; display: table; width:94%;}  
#hcapt {display: table-cell; vertical-align: middle; color:#e8f0f6;  cursor:pointer; height:100%; width:90%; line-height: 100%; font-size:.9em; }

 
#listsheet, #listcard {height:84%; overflow:hidden;} #listsheet {background-color:#fafafa;}
#listcard {border-top:1px solid #356e95; border-bottom:1px solid #356e95; background-color:#4391ca; cursor:pointer; display:none;}
#listsheetfooter, #listcardfooter, #mmenufooter  {height:10%; color:#5aabe5;  }
#listcard, #listcardfooter {display:none;}

#fallingmenu { margin:0; position:absolute; z-index:9; color:#e8f0f6; font-size:0.8em; background-color: #3685bd;  border-top:1px solid #e8f0f6;  display:none;}
#fallingmenu ul li {display:block; padding:9px 10px 9px 11px; color:#8ab8da;} 
#fallingmenu ul li a {color: #e8f0f6; text-decoration:none; cursor:pointer;}
#fallingmenu ul li:hover {background-color:#3e98d9;}


#bluesheet { height:85%; text-align:center;color:#e8f1f7; border-top:1px solid #cfdde6; border-bottom:1px solid #cfdde6;}
.space7 {height:7%;}.space10 {height:10%;} .space15 {height:15%;}  .space20 { height:20%;}  .space30 {height:30%;}

  
#authorization{display:none; z-index:3;  position:absolute; top:26%; left:15%; width:60%; background-color:white; color:#222; font-size: 0.8em; padding:20px 10px; border-radius:3px; box-shadow: 0 0 3px rgba(0,0,0,0.5); }
#prompt, #fullblocker, #fullblockernoauth  {display:none; text-align:justify;  position:absolute; top:25%; left:10%; width:70%; background-color:white; color:#222; font-size: 0.8em; padding:20px 5%; border-radius:3px; box-shadow: 0 0 3px rgba(0,0,0,0.9); }
#fullblocker h3, #fullblockernoauth h3 {font-size: 1em; padding-bottom:5px;}
#selectpage { color:#fafafa; text-align:center;  }
#selectpage button  {padding:2px 3px; background-color:#3178ab; color:#fafafa; border:1px solid #fafafa; cursor:pointer; border-radius:2px; }

/*LIST*/
.word {height:10%; border-bottom:1px solid gray; box-sizing: border-box; padding:0 3%; cursor:pointer;}
.word:hover {background-color:#f2f4f8;}
.wordcontainer {height:80%; line-height:1.1em;}
.word:last-child {border-bottom:none;}              
 
/*CARD*/
#slides {width:300%;}  #slides2 {width:200%;}  #slides2 tr td {width:50%;}
.dem {border-radius: 2px; box-shadow: 0 0 3px rgba(0,0,0,0.7); box-shadow: 0 0 2px rgba(0,0,0,0.7); background-color:#fff; margin:0 3%; min-height:80%; text-align:left;}
.c_ew {font-size:1.3em; color:#296691;  text-align:center; cursor:pointer; }  
.c_rw {font-size:0.8em; text-align:center; padding: 15px 0 8px 0;  color:#444;}  
.pic {text-align:center;} .pic img {margin-top: 5%; width:94%; border:1px solid #ccc; cursor:pointer; }
.picsrc {font-size:0.6em; padding:2px 3%; text-align:left;  cursor:pointer;}    .picsrc a { color:#99a; text-decoration:none;}
.example {font-size:0.8em; min-height:2.1em; padding:3%; color:#444; cursor:pointer; } /*WTF 2.2em?*/
.cardnum {text-align:right; font-size:.6em;  color:#99a; padding:4px 5px;}
 
/*MAIN MENU*/
.menubigblock {vertical-align:baseline; font-size: .9em; border:1px solid #e8f1f7; height:15%; margin:0 7%;  padding:1em 0 1em 1em; text-align:left; cursor:pointer;}  .menubigblock img {float:left; height: 90%; padding-right:1em;}
#menupayblock {border:1px solid #e8f1f7;  margin:0 7%;  padding:1em; text-align:center;  cursor:pointer; display:none;}
#loginblock {border:1px solid #e8f1f7;  margin:0 7%;  padding:1em; text-align:center; display:none;}  
#msbcontainer { margin:0 7%;  height:10%; padding:3% 0;} #msbcontainer table {width:100%;}  #msbcontainer table tr td img {height:50px;}

#loginblock {font-size:.7em;}

/*CONTROLS*/
.controls {height:70%; margin:0 3%; }
.bookcontrols{height:100%;  }
.button4 {float:left; height:100%; width:30%; text-align:center; cursor:pointer;} 
.leftbutton {text-align:left;  width:20%;} 
.rightbutton {text-align:right; width:20%;} 
.midbutton {float:left; width:60%; height:100%;padding-top:0.8%; text-align:center; font-size:1em; color:#e7eff4; line-height:38px; cursor:pointer;}
.button4 img, .midbutton img {height:100%;} 
.timebutton {border-radius:2px; float:left; height:100%; text-align:center; font-size:1em; color:#fff; background-color:#3178ab; cursor:pointer;  width:54%; border:1px solid #fff;  box-sizing: border-box; cursor:pointer; vertical-align:middle;}
.timebutton:first-child { width:20%; margin-right:3%;}
.timebutton:last-child { width:20%; margin-left:3%;}
.transbutton {border-radius:3px; height:100%; text-align:center; font-size:0.9em;  background-color:#3178ab; color:#fff; cursor:pointer;  width:100%; border:1px solid #fff;  box-sizing: border-box;}
 

/*FRONTPAGE*/
#fpblue {height:100%; background-color:#327db5; padding:20px;  box-sizing: border-box;}
.fpframe {border-radius:5px; border: 1px solid #cfdde6; color:white; height: 1px;   min-height:100%; width:100%; text-align:center;  box-sizing: border-box; } .fpframe a {color:white;}
.fp70 {min-height:77%; } .fp20 {min-height:15%;}
#fpfr1 {}
#fpfr2 { padding:10px ;text-align:justify; font-size:.8em; }
.fpbutton {background-color:#f67f17; width:80%; padding:.8em; color:white; font-size:1.2em;  border-radius:3px; box-shadow: 0 0 3px rgba(0,0,0,0.5);  cursor:pointer;}
.sbutton {background-color:#3c97d5; width:60%; padding:.8em; color:white; font-size:1em;  border-radius:3px; box-shadow: 0 0 3px rgba(0,0,0,0.5);  cursor:pointer;}
 
#nomorewords{ background-color:#fcfcff; text-align:center; font-size:.9em; margin:30% 12%; padding:30px 15px; color:#222; border-radius:2px; box-shadow: 0 0 3px rgba(0,0,0,0.5); display:none;}
#nomorewords a {color:#4391ca; font-size:.9em;} 
#nomorewords button {width:70%; background-color:#4391ca; font-size:1em; padding: 8px 0; color:#fafafa; cursor:pointer; border-radius:3px;}
 
/*FONTS and IMAGES*/
.darkblue {color:#2e72a2;}  .almostwhite {color:#eef;} .lgray { color:#889;} .darkgray { color:#445;}
/*list*/
.line1, .line2 {overflow: hidden;  white-space: nowrap; }
.l_ew {font-weight:bold; font-size:0.8em; color:#296691; }  .l_rw {font-size:0.8em; color:#556; }  .l_txt {font-size:0.7em; color:#99a;}
.wordcontainer img {height:90%; min-width:20%; float:left; margin-right:0.5em; border:1px solid #eee;}   .card img {}

#simplesheet {background-color:white; color:#111; font-size:1em; padding:20px 40px; font-family: Arial;} #simplesheet a {color:#364550;}
#simplesheet h1 {font-size:150%; color:#105b91; padding:5px 0 20px 0;}  #simplesheet h2 {font-size:130%; color:#105b91;  padding:20px 0 12px 0; }

#simplesheet p {text-align:justify;} #simplesheet p img {padding-bottom:5px; max-width:100%;}
#simplesheet p a {color:#364550;}
#simplesheet ol {padding-left:30px; font-size:.9em;}
.bxbutton {height:40px; width:200px; background-color:#00d140; text-align:center; padding:2px; color:#fafafa; cursor:pointer; border-radius: 3px; }
.bxbutton:hover { background-color:#00ce3f;  -moz-box-shadow: 0 0 3px rgba(0,0,0,.8);	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.8); -box-shadow: 0 0 3px rgba(0,0,0,.8);}

#sheetmenu {background-color:#4391ca; color:#e8f1f7; padding:10px 40px;}
#sheetmenu table tr td {padding-right:20px; font-size:.9em; }
#sheetmenu a {color:#e8f1f7;}

/*.fas, .far, .fal, .fab {color: #e8f0f6; }*/


/*DESKTOP*/
@media screen and (min-width: 768px) {

body {  background-color:#3c4f5d; background-repeat: repeat-x; background-image:url('../buttons/nightcity.png  '); }

#container {height:580px;  width:350px; position:absolute; top:50%; left:50%; margin:-290px -175px;  box-shadow: 0 0 5px rgba(0,0,0,.8);  -moz-user-select: none;-webkit-user-select: none; background-color:#3178ab;}

#simplesheet {width:760px; margin:0 auto 10px auto; }
#sheetmenu {width:760px; margin:20px auto 0 auto;}
#simplesheet p{padding-bottom:15px;}
#example {font-size:0.8em; min-height:3.2em;} 
}

/*LANDSCAPE*/
@media screen and (orientation: landscape)  and (max-width: 767px) {
#container {height:580px; margin-top:10px;  max-width:350px;  }
}

/*MOBILE*/
@media screen and (orientation: portrait)  and (max-width: 767px) {
/*.l_txt {font-size:3vw; }    //DNW */


#container{height:100%; width:100%; } 
.wordcontainer {line-height:3.2vh;}  
.button-pagenum {line-height:7vh;}
#simplesheet {padding:10px;} 
#simplesheet p{padding-bottom:10px;}
#sheetmenu {padding:10px 10px;}
body {  background-color:#327db5;}

.helptable {max-width:100%; background-color:white;}
.helptable tr td {padding:5px 0;}
.helptable tr td:first-child {max-width:50%;}
.helptable tr td img {max-height:30px;}

}