body {
    color:#000; padding:0; margin:0; 
    font-size:16px;
    text-align: center;
    background-color:#e6ccb3;
    font-family: "Arial, Helvetica, sans-serif";
}


@media screen and (min-width: 1200px) and (max-width:1600px) {
    body {
        font-size:14px;
    }
}

@media screen and (min-width: 800px) and (max-width:1200px) {
    body {
        font-size:12px;
    }
}

@media screen and (max-width: 800px)  {
    body {
        font-size:11px;
    }
}
h2 {
    display: block;
    font-size: 1.4em;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

#board {
    width: 90%; height: 90vh; z-index: 4;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.05);
    background-attachment: fixed;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url('./board-bg.jpg');
    overflow: hidden;
    position: relative;
    margin-left: auto; margin-right: auto;
    box-shadow: 1px 1px 12px rgba(50,50,50,0.7);
    margin-bottom: 45px; margin-top: 0.5em;
    border-radius: 8px;
}

.board-numbers {
    color:#000;
    box-sizing: border-box;
    position:absolute;
    font-weight:bold;
    padding:0px;
    min-width:1.3em;
    min-height:1.2em;
    border:1px #888 solid;
    border-radius: 4px;
    background-color:rgba(255,255,255,0.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    cursor : pointer;

    text-align:center; vertical-align: middle;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none;   /* Chrome/Safari/Opera */
        -khtml-user-select: none;    /* Konqueror */
        -moz-user-select: none;      /* Firefox */
        -ms-user-select: none;       /* Internet Explorer/Edge */
        user-select: none;   


    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #e5e5e5 0%, #ffffff 10%, #c5c5c5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #e5e5e5 0%, #ffffff 10%,#c5c5c5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #e5e5e5 0%, #ffffff 25%,#c5c5c5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c5c5c5',GradientType=0 ); /* IE6-9 */

}

.board-numbers.shined {
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
}

.board-numbers.clicked {
    opacity:0;
}

.board-numbers:not(.clicked):hover {
    background-color:#FFF;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
    z-index:100;
}

.quadrant {
    position: absolute; display: none;
    width:33.3%; height:33.3%; 
    border:1px rgba(150,150,150,0.6) dotted; 
    z-index:-2;
}

.flashing-quadrant {
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: flashingquadrantanimation;

}

@keyframes flashingquadrantanimation {
	0% {
        border: 1px transparent dotted;
        background-color: transparent;
	}
	50% {
        border: 1px red dotted;
        background-color: rgba(255, 0, 0, 0.05);
    }
    100% {
        border: 1px transparent dotted;
        background-color: transparent;
    }
  }

.board-instruction {
    font-size:1.2em;
}
/**************** Buttons *****************/

.btn {
	-moz-box-shadow:inset 0px 1px 0px 0px #9acc85;
	-webkit-box-shadow:inset 0px 1px 0px 0px #9acc85;
	box-shadow:inset 0px 1px 0px 0px #9acc85;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b));
	background:-moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:-webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:-o-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:-ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74ad5a', endColorstr='#68a54b',GradientType=0);
	background-color:#74ad5a;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
	border:1px solid #3b6e22;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
    font-size:1.4em;
	font-weight:bold;
	padding:6px 12px;
	text-decoration:none;
}
.btn:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a));
	background:-moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
	background:-webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
	background:-o-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
	background:-ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
	background:linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a54b', endColorstr='#74ad5a',GradientType=0);
	background-color:#68a54b;
}



/***** Progress Bar *****/

#progressBarContainer {
    margin-left:auto; margin-right:auto; 
    width:500px; 
    text-align:center;
}

#progressBar {
    margin-left: auto; margin-right:auto;
    margin-top:0.8em;
    width: 400px;
    height: 20px;
    visibility:hidden;

}

#progressBar div {
    height: 100%;
    color: #fff;
    text-align: right;
    font-size: 12px;
    line-height: 22px;
    width: 0;
}

.progressbar-green {
    position: relative;
    padding: 3px;
    height: 0.5em !important;
    background-image:-moz-linear-gradient(53% 13% -90deg,rgb(58,64,80) 0%,rgb(58,64,80) 47%,rgb(46,50,62) 48%,rgb(46,50,62) 100%);
    background-image:-webkit-gradient(linear,53% 13%,53% 79%,color-stop(0, rgb(58,64,80)),color-stop(0.47, rgb(58,64,80)),color-stop(0.48, rgb(46,50,62)),color-stop(1, rgb(46,50,62)));
    background-image:-webkit-linear-gradient(-90deg,rgb(58,64,80) 0%,rgb(58,64,80) 47%,rgb(46,50,62) 48%,rgb(46,50,62) 100%);
    background-image:linear-gradient(-180deg,rgb(58,64,80) 0%,rgb(58,64,80) 47%,rgb(46,50,62) 48%,rgb(46,50,62) 100%);
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Webkit */
    border-radius: 10px;
}

.progressbar-green div {
    font-family: arial;
    font-size: 3px;
    color: white;
    text-align: right;
    text-shadow: 0px 0px 2px #000;
    text-indent: 9999px;
    overflow: hidden;
    background-image:-webkit-gradient(linear,71% 25%,71% 69%,color-stop(0, rgb(118,177,1)),color-stop(0.47, rgb(118,177,1)),color-stop(0.48, rgb(102,153,0)),color-stop(1, rgb(102,153,0)));
    background-image:-webkit-linear-gradient(-90deg,rgb(118,177,1) 0%,rgb(118,177,1) 47%,rgb(102,153,0) 48%,rgb(102,153,0) 100%);
    background-image:-moz-linear-gradient(71% 25% -180deg,rgb(118,177,1) 0%,rgb(118,177,1) 47%,rgb(102,153,0) 48%,rgb(102,153,0) 100%);
    background-image:linear-gradient(-180deg,rgb(118,177,1) 0%,rgb(118,177,1) 47%,rgb(102,153,0) 48%,rgb(102,153,0) 100%);
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Webkit */
    border-radius: 10px;
}



/*********************** Dialog **********************/
#dialog-wrapper {
    position: absolute; 
    width:100%; height:100%; 
    background-color:rgba(250,250,250,0.99);; display:none;
    z-index:101;
    box-sizing: border-box; padding: 1em 2em;
    overflow-y:auto;
    font-size:1.2em;
    background-attachment: fixed;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url('./instructions-bg.jpg');
}

.dialog {
    position:fixed; display:none; 
}


.scorebox {
    border:0px; border-radius:8px; 
    margin-left:auto; margin-right:auto;
    width:50%;
    font-size:1.5em;
    background-color:#555; color:#fff;
    box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.25);
    margin-bottom:1em;
    padding:5px;
}

p>a {
    color:#777; 
    font-weight:bold; 
    text-decoration:none; 
}

p>a:hover {
    text-decoration:underline;
    color:#000;
}

#words-listing {
    width:23em; margin-left:auto; margin-right:auto; padding: 8px; list-style-type: none;
    text-align:left; border:1px #aaa solid; border-radius: 12px; font-size:0.8em;
    box-shadow: 0px 1px 0px 1px #888; background-color:#f5f5f5; 
}
#words-listing .japanese {
    width:5em; display:inline-block; font-weight: bold;
}
#words-listing .traduction {
    width:14em; display: inline-block;
}

/************************** SCORES *******************************/ 
.score-label {
    font-size:1.6em; font-weight:bold;
}

.score-table {
    margin-left:auto; margin-right:auto; font-size:0.8em; padding:10px;
    border:0px #eee solid; box-shadow: 0px 1px 6px rgba(0,0,0,0.2); border-radius:4px; background-color:#fefefe;
    width:50%;
}

.score-table td { 
     width:25%; padding: 0px 1.8em;  
}