.thai {font-size: 200%; font-weight: normal;}
h2 .thai  {font-size: 120%;}

.ipa {font-size: 125%; font-weight: 500; white-space:nowrap;}

.centered, .center {text-align:center;}
.centered td {width: 100%; text-align: center; margin-top:  20px; margin-bottom: 30px;}

.gwt-HTML {display: inline-block;}

.grid {
        display: grid;
        grid-template-columns: 170px auto;
}
canvas {
        width: 150px;
        height: 150px;
}

/* Popup */

  .flexContainer {height: 100%; display: flex; flex-direction: column;}
  
  .header {}
  .body {flex-grow: 100;}
  .footer {}

/* Click */

.clickContainer {display: flex; justify-content: space-between;}
.clickLeftPanel {display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between;}
.clickRightPanel {display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between;}


/* TABLE */
table.minimal {
	border-collapse: collapse;
	border-bottom: solid 1px;
	margin-top:  20px;
	margin-bottom:  30px;
}
tr.minimal{
	border-bottom: solid 1px;
}
table.minimal td, table.minimal th {
	padding-right: 20px;
}
.minimal td {vertical-align: baseline;}
.minimal th {vertical-align: baseline; text-align: left;}

.minimal.firstcol th:first-child, .minimal.firstcol td:first-child {border-right: solid 1px; margin-right: 20px;}

.minimal .textaligncenter {text-align: center;}


.hoverreveal td {opacity: 0.0;}
.hoverreveal:hover td {opacity: 1.0;}

/* Game */

.popupContent td {padding: 0;}
.popupContent table {margin-bottom: 0;}

.flexcontainer {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
}

.flexitem {}

.reveal gwt-HTML, .pick gwt-HTML {display: inline;}
.reveal td {vertical-align: middle;}
.reveal .thai {font-size:  25px;}

.click .thai {font-size:  25px;}

*, canvas {outline-style:none;}

.token {
    display: inline;    
}

.hidden {
	visibility:  hidden;
}

.listen label {font-weight: normal;}

.wordlist td {vertical-align: baseline;}
.wordlist {overflow-y: scroll !important;}

.gwt-TabLayoutPanelContent {width: 100%;}
.gwt-TabLayoutPanelTabs {line-height: 1}

.gwt-DecoratedPopupPanel td {border-bottom: none; padding: 0;}

.gwt-DecoratedPopupPanel .popupMiddleCenter {
  padding: 3px;
  background: #ffffff;
  line-height: 1;
}

.gwt-DecoratedPopupPanel button {	
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  margin-bottom: 20px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }

/* SENTENCES */
.sentencereader {
	width: 750px;
	height: 600px;
}

.scroller {
	overflow-x: auto;
	overflow-y: auto;
}

.sentencepanel .gwt-HTML {
	display: inline-block;
	font-size: 150%;
}

.sentencepanel .gwt-HTML:hover {color: #7a42f4;}

.definitionpanel td {
	vertical-align: bottom;
	min-width: 100px;
}

.sentencepanel {
	width: 750px;
	height: 180px;
}

.definitionpanel {
	width: 750px;
	height: 370px;
}


#printFrame {
    position: fixed;
    bottom: -10000px;
    right: -10000px;
}



/* NAVIGATION */
table.nav {width:100%; margin-left:10px; margin-right:10px;}

. nav .left, nav .center, nav .right {vertical-align:top;}
.nav .linkWrap {font-size: 4em;}

.right {text-align:right;}
    
.linkDesc, .linkDescC {visibility: hidden; opacity: 0; font-size: 0.25em;}

.linkDesc{display:inline-block;}
.linkDescC{display:block;}

.linkWrap {opacity: 0.3;}

.linkWrap:hover, .linkWrap:hover .linkDesc, .linkWrap:hover .linkDescC {
  visibility: visible;
  opacity: 1;
  transition: opacity .95s ease-in-out;
   -moz-transition: opacity .95s ease-in-out;
   -webkit-transition: opacity .95s ease-in-out;
   text-decoration: none;
}

 hr {
        height: 2px;
        background: #33C3F0;
        margin-left: 150px;
        margin-right: 150px;
        text-align: center;
        border-top: none;
}

hr:after {
        content: "๏";
        display: inline-block;
        position: relative;
        top: -.87em;
        font-size: 2.5em;
        background: white;
        color: #33c3f0;
}

h4 {
    margin-top: 5rem;
}
ul {
  list-style: none;
}

ul li::before {
  content: "๏";
  color:  #0b2dc1;
  display: inline-block;
  width: 1.5em;
    margin-left: -1em;
}

ul > ul > li::before {
    color: #33c3f0;
}

.nav {
    border-top: 2px solid #33c3f0;
    margin-top: 80px;
    padding-top: 35px;
    margin-bottom: 45px;
}

hr {margin-top: 4rem;}