body { background-color: black; color: white;}

 header > h1{ float: left;}

div.label {
    display: block;
    font-size: 0.6em;
    font-weight: bold;
}
/* Table grid */
table.table {margin-bottom: 0; }
table.table.h { table-layout: fixed }
table.table.v { table-layout: auto }
tr.header th {
    font-size: 0.9em;
    font-weight: bold;
}
th:nth-child(1) {
    font-size: 0.9em;
    font-weight: bold;
}
table.table td,
th {
    border: 1px solid #ffffff;
    font-size: 0.8em;
    text-align: center;
}

/* CrossOut table cells */
.empty {
    background: -webkit-linear-gradient(to top left,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 48%,rgba(255,255,255, 1) 50%,rgba(0,0,0,0) 52%,rgba(0,0,0,0) 100%);
    background: -moz-linear-gradient(to top left,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 48%,rgba(255,255,255, 1) 50%,rgba(0,0,0,0) 52%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(to top left,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 48%,rgba(255,255,255, 1) 50%,rgba(0,0,0,0) 52%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(to top left,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 48%,rgba(255,255,255, 1) 50%,rgba(0,0,0,0) 52%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to top left,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 48%,rgba(255,255,255, 1) 50%,rgba(0,0,0,0) 52%,rgba(0,0,0,0) 100%);
    /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFFFF', endColorstr='#FFFFFFFF',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ 
}
/* Tooltip customization */
table.table.table-condensed td.pinyin { padding: 0 }
table td.pinyin div { padding: 5px }
td.pinyin div + .tooltip { font-size: 1.8em }
td.pinyin div + .tooltip .tooltip-arrow {
    background-position: center center;
    background-repeat: no-repeat;
    border: none; 
}
@media all and (min-width: 321px){
  div.audio button {
      width: 100%;
      height: 4em;
  }
}
@media all and (max-width: 320px){
  div.audio button {
    height: 2em;
  }
  div.audio button.btn.btn-default{
    font-size: 1.2em !important;
  }
  div.playall.audio button div.icon{
    background-size: 50% !important;
    background-position-y: 25%  !important;
  }
  div#modalPlayer button.close{
    left: 0 !important;
    top: -1.8em !important;
  }
}


div.audio { margin: 1em }
div#modalPlayer button.close {
    height: 1.2em;
    left: 1em;
    position: relative;
    font-size: 3em;
    top: -1em;
    width: 1em;
    border: none;
}
div#modalPlayer button.close:hover,
div#modalPlayer button.close:focus { outline: 0 }
/*************************************************************/
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
/*************************************************************/
div#modalPlayer{
 	background-repeat: no-repeat;
	background-size: 100% 82%;
	padding: 160px 20px 20px;
	overflow: hidden;
	height: 652px;
}
.modalPlayer {
    z-index: 1;
    outline: 0;
}
.no-close .ui-dialog-titlebar-close { display: none }
.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
}
div.row.extra {
    top: 5em;
    position: relative;
}
div.row.extra div { text-align: center }
/* CUrsor */
table td.pinyin {
    cursor: pointer;
    cursor: hand;
}
/*Header and footer*/
div.ads{ text-align: center;}
header div.title { white-space: nowrap;  height: 98px; }
header div.text { 
	width: 20em;
	text-align: left;
	display: inline-block;
}
header div.logo{
	background-image: url('../../_asset/Icon.png');
	height: 7em;
	background-repeat: no-repeat;
	background-position: 50%;
	width: 7em;
	display: inline-block;
}

header div.banner{
	background-image: url('../../_asset/banner.png');
	cursor: auto;
	background-size: 728px;
	background-position: 50%;
	height: auto;
	position: relative;
}
@media all and (max-width: 992px){
	header > div {
		text-align: center;
	}
	footer {
	  text-align: center;
	}
  header div.title {
    display: inherit;
  }
  header div.text {
    position: relative;
    top: -1.5em;
  }
  header div.banner{
    top: 5px;
  }
  

}
@media all and (min-width: 992px){ 
  header div.title {
    display: inline-flex;
  }
  header div.banner{
    top: 8px;
  }
}