@import url(http://fonts.googleapis.com/earlyaccess/cwtexhei.css);

.ui-body-c, .ui-page-active, .ui-mobile-viewport
{
/*
background-position: right bottom!important;
background-repeat: no-repeat!important;
*/
background: transparent !important;
}

.ui-header,.ui-footer {
height: 45px!important;
}

input.ui-slider-input {
font-size: 140%!important;
}

.ui-page
{
/*
background-image: url("../images/bg0.png");
background-position: right bottom!important;
background-repeat: no-repeat!important;
*/
background: transparent !important;
}

.ui-overlay-c img.bgbase {
height:100%;
position: fixed; right: 0; bottom: 0;
}

.ui-overlay-c img.bgbr {
height: 60%;
position: fixed; right: 0; bottom: 0;
}

.ui-overlay-c img.bgbl {
height: 20%;
position: fixed; left: 0; bottom: 0;
}

.ui-btn-inner {
font-size: 14px!important;
/*padding: .3em 22px!important;*/
}

body .ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button, .ui-btn-text {
font-family:"Apple LiGothic","Hei","Heiti TC","Heiti SC","Microsoft JhengHei","微軟正黑體","cwTeXHei","Arial Unicode MS",Sans-serif!important;
}

h1 {
font-size: 100%!important;
}

/*
.ui-overlay-c {
background-image: url("../images/bg0.png")!important;
background-position: right bottom!important;
background-repeat: no-repeat!important;
font-family:'cwTeXHei',"Microsoft JhengHei","微軟正黑體","Arial Unicode MS",Sans-serif;
}
*/

div.settingdiv {
margin-bottom: 15px;
padding:10px 5px 10px 5px;
}

div.note {
padding-left: 10%;
font-size:140%;
width:70%;
}

div.intropanel {
margin:0px 10px 0px 10px;
padding:5px 10px 5px 10px;
background-color: rgba(240,248,255,0.8);
border-radius:30px;
font-size:100%;
overflow:scroll;
height:500px;
}

div.copyright {
position:absolute;
right:10px;
bottom:59px;
background-color:white;
border-radius:3px;
padding:3px;
font-size:10pt;
z-index:0;
}

span.result {
    font-size: 100%;
}

#hintAudio {
    display: none;
}

div.settingoption, legend.settingoption, label.settingoption {
    vertical-align: middle!important;
    color: darkblue!important;
    font-weight: bold!important;
    font-size: 180%!important;
    display: inline-block!important;
    margin-right: 30px!important;
    margin-left: 50px!important;
	float: left!important;
	clear: both!important;
}

div.wordhead {
    color: darkblue;
    font-weight: bold;
    font-size: 140%;
    display: inline;
}

div.wordInfo {
/*    border: 2px solid black;*/
    background-color: rgba(240,230,140,0.8);
    padding: 10px;
	font-size: 24pt;
}

div.wordInfo:hover {
cursor: pointer
}

div.purchaseprompt {
	color: red;
	display: inline;
}

div.purchaseprompt:hover {
cursor: pointer
}

img.oslogo {
height:50px;
vertical-align:middle;
}

div.finishnote {
	color: grey;
/*    background-color: rgba(240,248,255,0.8);*/
    font-size: 100%;
	display: inline;
}

div.finishnote:hover {
cursor: pointer
}

div.hintsound {
	color: grey;
    font-size: 80%;
    margin-right: 5px;
    white-space: nowrap;
    display: inline;
}

div.subhead {
    font-weight: bold;
    font-size: 110%;
	color: coral;
    margin-right: 5px;
    white-space: nowrap;
    display: inline;
}

div.puzzleMap {
    margin-left:auto;
    margin-right:auto;
    width: 90%;
}

button.reviewAnswer {
	position:float;
	left:5px;
	top:5px;
}

div.reviewAnswerDiv {
	display: none;
	top: 5px;
	left: 5px;
	float:left;
}

div.puzzleHint {
    padding: 5px;
    font-size: 120%;
    margin-left:auto;
    margin-right:auto;
    width: 90%;
}

div.puzzleHintAudio {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

div.puzzleHintTextAlign {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

div.extraInfoBorder {
    border: none;
	border-radius:2px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

div.puzzleExtraInfo {
    text-align: left;
    font-size: 130%;
	overflow: scroll;
/*    width: 80%;*/
}
div.puzzleExtraInfo::-webkit-scrollbar { 
    display: none; 
}

div.puzzleHintText {
    text-align: left;
    font-size: 110%;
    width: 100%;
	display: inline;
}

div.puzzleHintText:hover {
cursor: pointer
}

table.puzzleMap {
    align: center;
    table-layout: fixed;
    width: 500px;
/*
    border: 2px solid blue;
*/
}

table.puzzleMap td {
    width: 60px;
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-size: 20pt;
    vertical-align: middle;
/*
    border: 2px solid cyan;
*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

table.puzzleMap td.puzzleCellEmpty {
	/*
    background-color: rgba(128,128,128,0.4);
	*/
}

table.puzzleMap td.puzzleCellChar {
    border: 2px solid lightblue;
color: blue;
background: -webkit-linear-gradient(135deg, white, lightblue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(135deg, white, lightblue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(135deg, white, lightblue); /* For Firefox 3.6 to 15 */
background: linear-gradient(135deg, white, lightblue); /* Standard syntax */
}

table.puzzleMap td.puzzleCellChar:hover {
cursor: pointer
}

table.puzzleMap td.puzzleHighlightWordCell {
border: 2px solid blue;
}

table.puzzleMap td.puzzleMapInputCell {
color: black;
}

table.puzzleMap td.puzzleHighlightCharCell {
animation: fade 3000ms infinite;
-webkit-animation:fade 3000ms infinite;
background: -webkit-linear-gradient(135deg, white, orange); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(135deg, white, orange); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(135deg, white, orange); /* For Firefox 3.6 to 15 */
background: linear-gradient(135deg, white, orange); /* Standard syntax */
border: 2px solid red;
}

div.puzzleHintTable {
font-size: 20pt;
}

table.puzzleHintTable {
    align: center;
    table-layout: fixed;
    width: 500px;
    border: 2px solid blue;
}

table.puzzleHintTable td {
    width: 50px;
    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-size: 24pt;
    vertical-align: middle;
    border: 1px solid cyan;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

table.puzzleHintTable td.puzzleHintCell {
background: -webkit-linear-gradient(135deg, white, lightgreen); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(135deg, white, lightgreen); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(135deg, white, lightgreen); /* For Firefox 3.6 to 15 */
background: linear-gradient(135deg, white, lightgreen); /* Standard syntax */
}


table.puzzleHintTable td.puzzleHintCell:hover {
cursor: pointer;
}

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

table.puzzleHintTable td.puzzleHintSelected {
font-weight: bold;
animation: fade 3000ms infinite;
-webkit-animation:fade 3000ms infinite;
background: -webkit-linear-gradient(135deg, white, orange); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(135deg, white, orange); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(135deg, white, orange); /* For Firefox 3.6 to 15 */
background: linear-gradient(135deg, white, orange); /* Standard syntax */
border: 2px solid red;
/*background: -webkit-linear-gradient(135deg, white, darkblue); /* For Safari 5.1 to 6.0 */
/*background: -o-linear-gradient(135deg, white, darkblue); /* For Opera 11.1 to 12.0 */
/*background: -moz-linear-gradient(135deg, white, darkblue); /* For Firefox 3.6 to 15 */
/*background: linear-gradient(135deg, white, darkblue); /* Standard syntax */
}


table.puzzleMap td.puzzleMapEmptyCell {
color: red;
background: ivory;
}

table.puzzleMap td.puzzleMapIncorrectCell {
color: red;
background: yellow;
}

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a:hover {
cursor: pointer
}

#mapCarousel .item img {
    display: block;
    width: 100%;
    height: auto;
    padding: 10px;
}

.btn {
display:inline-block;
text-align:center;
vertical-align:middle;
cursor:pointer;
background-image:none;
border:1px solid transparent;
white-space:nowrap;
border-radius:4px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
padding:3px 6px;
}

.ui-btn-text {
    font-size: 110%;
}

img.lens {
vertical-align: middle;
display: inline;
}

img.speaker {
width: 30px;
height: 30px;
vertical-align: top;
display: inline;
}

img.speakerbig {
width: 35px;
height: 35px;
margin-left:5px;
vertical-align: middle;
display: inline;
}

div.ui-slider {
width: 20%!important;
}

div.ui-slider {
width: 20%!important;
}

img.banner {
display: block;
left: 50px;
top: 10%;
width:60%;
position:absolute;
}

div.version {
z-index:99;
left:45%;
top:50%;
font-size:200%;
position:absolute;
}

div.buttons {
z-index:100;
left:10%;
height:10%;
top: 60%;
position:absolute;
width:400px;
white-space:nowrap;
}

div.frontpage {
margin:5%;
}

#divImageTrad {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
z-index: 1000;
}

#divImageSimp {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
z-index: 999;
display: none;
}

input.ui-slider-input#numPrefilled {
display: none!important;
}

label#descNumPrefilled {
font-size:140%;
}

.greeting {
position:absolute;
background-color: rgba(255,248,0,0.8);
right:0px;
left:0px;
bottom:0px;
text-align: center;
padding-top:5px;
padding-bottom:5px;
}

.solitaire {
position:absolute;
right: 20px;
top: -30px;
}