@font-face {font-family:'klee'; src:url('Klee.woff2') format('woff2'); font-weight:normal; font-style:normal;}

/* Naval race */

#blueship {position:absolute; width:20.31%; height:25%; background-image:url(images/blueship.png); left:1.04%; top:0.78%; background-repeat:no-repeat; background-size:contain; background-position:center; background-origin:content-box;}
#redship {position:absolute; width:20.31%; height:25%; background-image:url(images/redship.png); left:1.04%; bottom:5.16%; background-repeat:no-repeat; background-size:contain; background-position:center; background-origin:content-box;}
#topwave {position:absolute; width:100%; height:7.81%; left:0; top:22.66%; background-image:url(images/waves.png); background-repeat:repeat; background-size:contain; fill:center; background-origin:content-box;}
#bottomwave {position:absolute; width:100%; height:7.81%; left:0; bottom:0; background-image:url(images/waves.png); background-repeat:repeat; background-size:contain; background-position:center; background-origin:content-box;}
#navalgame {font-family:'klee'; font-size:1em; width:100%; height:100%; border:1px solid #888; background-color:#DEEAFF;}
#scroll {position:absolute; margin:0 auto; left:3.12%; top:17.2%; width:92%; height:75%; background-image:url(images/scroll.png); background-repeat:no-repeat; background-size:100% 100%; fill:center; background-origin:content-box;}
#questionbox {position:absolute; top:33%; left:16.67%; width:67.71%; height:43.75%;}
.centered {text-align:center;}
.answerbox {text-align:left; margin:1.09% 0 1.25% 10.42%; width:70%; padding:.2em .2em .2em .8em; border:2px solid #888; border-radius:.75em; cursor:pointer;}
.correctanswer {text-align:left; margin:1.09% 0 1.25% 10.42%; width:70%; padding:.2em .2em .2em .8em; border:2px solid #888; border-radius:.75em; cursor:pointer; color:#080; background-color:rgba(255,255,255,.5);}
.wronganswer {text-align:left; margin:1.09% 0 1.25% 10.42%; width:70%; padding:.2em .2em .2em .8em; border:2px solid #888; border-radius:.75em; cursor:pointer; color:#c00; background-color:rgba(255,255,255,.5);}
.latin {color:#EE5737;font-weight:bold;}
.arrownext {font-size:4em; color:#EE5737; position:absolute; top:28%; right:8.52%; font-weight:bold; cursor:pointer; padding:10% 1%;}
.arrowno {font-size:4em; color:#EE5737; position:absolute; top:62.5%; right:10.42%; font-weight:bold; display:none;}
.winnerhide {display:none;}
.winnershowblue {display:block; color:#EE5737; position:absolute; width:67.71%; left:18.75%; height:6.25%; top:10%; text-align:center; font-size:1.3em;}
.winnershowred {display:block; color:#EE5737; position:absolute; width:67.71%; left:18.75%; height:6.25%; top:85%; text-align:center; font-size:1.3em;}
.startno {display:none;}
.startshow {position:absolute; top:70%; width:100%; left:0; color:#EE5737; padding:0; cursor:pointer; text-align:center;}

/* Pairs */

#pairstitle {text-align:center; font-size:2em; color:#04c; padding-top:.5em;}
#gamebox {top:0; left:0; width:100%; height:100%; border:1px solid #888; background-color:#def; font-family:'klee';}
#pairsgame {text-align:center;}
.flipcountno {display:none;}
.flipcountshow {text-align:center;}
.feedbackno {display:none;}
.feedbackshow {text-align:center; position:absolute; top:25%; left:0; width:100%;}
.instructionsshow {text-align:center; margin:1em 0em;}
.instructionsno {display:none;}
#newgame {text-align:center; padding:.5em; background-color:rgba(255,255,255,.5); border:solid 1px #888; cursor:pointer; display:inline-block; width:25%;}
#red {display:inline-block; float:left; padding:0 1em;}
#redscore {display:inline-block; float:left;}
#blue {display:inline-block; float:right; padding-right:1em;}
#bluescore {display:inline-block; float:right; padding-right:1em;}
.gameno {display:none;}
.gameshow {display:block;}
.welcomeshow {text-align:center;}
.welcomeno {display:none;}
.pairsstartno {display:none;}
.pairsstartshow {color:#a0a; margin-top:1em; padding:1em; cursor:pointer; text-align:center;}
#team {position:absolute; left:1.5%; width:15%; font-size:.9em;}
#doubles {display:none;}
#scoringbox {position:relative; width:100%; height:2em; bottom:1em;}
#choosemascot {text-align:center; padding-top:5%;}

/* Categories */

#categtitle {text-align:center; font-size:2em; color:#04c; padding-top:.1em;}
#catgamebox {font-family:'klee'; font-size:1.5em; width:100%; height:100%; border:1px solid #888; background-color:#def; text-align:center;}
#categtable {width:100%; text-align:center; border-collapse:separate; border-spacing:4em 0;}
#startbutton {position:absolute; top:70%; width:100%; text-align:center; color:#a0a; padding:1em; cursor:pointer;}
#categoriesbox {visibility:hidden; padding-top:1em;}
#catrow {cursor:pointer;}
#answerrow {vertical-align:top;}
#curwordbox {display:inline-block; visibility:hidden; text-align:center; font-size:1.5em; color:#a0a; border:2px solid #888; border-radius:.75em; background-color:hsla(0, 0%, 100%, 0.5); padding:.2em 1em; margin:0 auto;}
.catimg2 {width:60%;}
.catimg3 {width:100%;}
.categbutton {text-align:left; margin:0; width:70%; padding:.2em .5em; border:2px solid #888; border-radius:.75em; cursor:pointer; background-color:hsla(0, 0%, 100%, 0.5);}
.correct {color:#4c9900;}
.correcta {color:#4c9900; text-shadow:1px 1px 4px #8e8;}
.incorrect {color:#c00;}
.incorrecta {color:#c00; text-shadow:1px 1px 4px #e88;}
#feedbackbox {visibility:hidden; text-align:center; position:absolute; font-size:3em; top:30%; left:0; width:100%;background-color:hsla(0, 0%, 100%, 0.7);}
#endfeedbackbox {visibility:hidden; text-align:center; position:absolute; font-size:1.5em; top:40%; left:0; width:100%; height:25%; background-color:hsla(0, 0%, 100%, 0.9);}
#newcatgame {text-align:center; padding:.1em .5em; background-color: #04c; border:solid 1px #888; border-radius:.75em; cursor:pointer; margin:.25em auto; width:40%;color:#fff;}
#nextarrow {visibility:hidden; text-align:center; color:#a0a; font-size:2.5em; cursor:pointer;}

/* General */

* {margin:0; padding:0;}
*,*:before,*:after {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
html {height:100%; overflow:hidden;}
body {font-family:'klee', sanserif; font-size:16px; margin:0; padding:0; text-align:center; background-color:#fff; height:100%; overflow:hidden;}
#box {position:relative; border:1px solid #ccc; margin:0 auto; text-align:left;}
#next {position:absolute; border:1px solid #888; background-color:#888; color:#fff; cursor:pointer; border-radius:.2em; opacity:0.7; padding:0 .5%; bottom:2.5%; right:.2%;}
#prev {position:absolute; border:1px solid #888; background-color:#888; color:#fff; cursor:pointer; border-radius:.2em; opacity:0.7; padding:0 .5%; bottom:2.5%; left:.2%;}
#home {position:absolute; border:1px solid #888; background-color:#888; color:#fff; cursor:pointer; border-radius:.2em; opacity:0.7; padding:0 .5%; top:.13%; left:.2%;}
#menu {position:absolute; border:1px solid #888; background-color:#888; color:#fff; cursor:pointer; border-radius:.2em; opacity:0.7; padding:0 .5%; top:.13%; right:.2%;}
#jump {position:absolute; border:1px solid #888; background-color:#888; color:#fff; cursor:pointer; border-radius:.2em; opacity:0.7; padding:0 .5%; top:.13%; right:.2%;}
#full {position:absolute; border:1px solid #888; background-color:#888; color:#fff; cursor:pointer; border-radius:.2em; opacity:0.7; padding:0 .5%; top:.13%; right:8%;}
#slidebtn {position:absolute; border:1px solid #888; background-color:#888; color:#fff; cursor:pointer; border-radius:.2em; opacity:0.7; padding:0 .5%; top:.13%; left:.2%;}
#blowupbtn {position:absolute; border:1px solid #888; background-color:#888; color:#fff; cursor:pointer; border-radius:.2em; opacity:0.7; padding:0 .5%; top:.13%; left:.2%;}
#jumppic {position:absolute; top:4%; left:0%; width:100%; cursor:pointer; display:none;}
#tubeline {position:absolute; border:solid 0.5vw; background-color:#ccc; bottom:3.5%; left:0; width:50%; color:#ccc;}
#audiobox {position:absolute; bottom:11%; left:1%; cursor:pointer;}
#controlbox {background-color:#fff; border:solid 1px #000; border-radius:.3em; font-size:.8em; position:absolute; bottom:1%; left:0.5%; display:block;}
.w {cursor:pointer;}
.option {display:inline-block; width:10em;}
.bubble {cursor:pointer; background-color:#eee; padding:.1em .5em; border:2px solid #ccc; border-radius:.3em; color:#333; display:none; font-size:1.4em; font-family:'klee';position:relative;}
.bubble:after,.bubble:before {border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid #eee; bottom:-10px; content:''; left:50%; margin-left:-10px; position:absolute;}
.bubble:before {border-left:13px solid transparent; border-right:13px solid transparent; border-top:13px solid; border-top-color:inherit; bottom:-13px; margin-left:-13px;}
.brnarrow {display:block; content:''; margin-top:.7em;}
.circle {cursor:pointer; position:absolute; border-radius:6vw; padding:0; border:solid 0.4em; width:4.6%; height:6.9%; background-color:#fff; bottom:1%; color:#ccc;}
.interactivelabel {cursor:pointer; background-color:#eee; padding:.1em .5em; border:2px solid #ccc; border-radius:.3em; color:#333; display:none; font:1em sans-serif; position:relative;}
.diamond {cursor:pointer; position:absolute; height:4%; width:9%; background-image:url(chapter1/images/diamond_purple.png); background-repeat:no-repeat; background-size:contain; background-position:center; background-origin:content-box;}
.blowbtn {display:inline-block; width:1.3em; height:1.2em; background-color:#888; color:#fff; cursor:pointer; opacity:0.7; margin:2px; padding:.2em; text-align:center;}
.button {width:30%;}
.game {width:50%;padding:100px 50px 0 50px;}
.text {margin:0.5em;}
.pseudolink {color:#00f; text-decoration:underline;}