body {
    font-family: 'Segoe UI', sans-serif;
    margin:0px;
    padding:0px;
    height:100%;    
}

/* ------------------------------------------------------------------------------------------------------------ */

.header {
	font-family: 'Maven Pro', sans-serif;
	font-size: 1em;	
	color: black;
	background: #00447f;
    height:30px;
    width:100%;    
}

.footer {
	font-family: 'Maven Pro', sans-serif;
	font-size: 0.8em;	
	color: #FFF;
	text-align: center;    
	padding: 10px;
	background: #00447f;
    width:100%;
}

.body {
    position:absolute;
    width:100%;
    top:30px;
    bottom:0px;
    overflow-x:hidden;
    overflow-y:scroll;
}

/* ------------------------------------------------------------------------------------------------------------ */

.root .game {
	background: white;
    padding:5px;
    width:96%;
    height:96%;
    margin:2%;

    border-radius:5px;
    border: 1px solid #00447f;
    box-shadow: 2px 2px 2px #00447f;    
}

.root .game img {
    height: 92px;
}


/* ------------------------------------------------------------------------------------------------------------ */

.dictionary table {
    table-layout: fixed;
    width:98%;
}
.dictionary td {
    text-align: center;
    vertical-align: top;
}

/* ------------------------------------------------------------------------------------------------------------ */

.word_square .main_table {
    table-layout: fixed;
    width:100%;
}

.word_square .square_table table {
    table-layout: fixed;
    width:100%;
}

.word_square .square_table .letter_button {
    background:white;
    opacity:0.5;
    font-size:50px;
    text-align:center;
    width:100%;    
    border-radius:5px;
    border: 1px solid #00447f;
    box-shadow: 2px 2px 2px #00447f;    
}

@media only screen and (max-device-width : 480px) {
    .word_square .square_table .letter_button {
        font-size: 30px;
    }
 }

.word_square pre {
    text-align:left;
    word-wrap:normal;
    word-break:normal;
}

/* ------------------------------------------------------------------------------------------------------------ */

.word_mix .main_table {
    table-layout: fixed;
    width:100%;
}

.word_mix .square_table table {
    table-layout: fixed;
    width:100%;
}

.word_mix .square_table .letter_button {
    background:white;
    opacity:0.5;
    font-size:30px;
    text-align:center;
    width:100%;    
    border-radius:5px;
    border: 1px solid #00447f;
    box-shadow: 2px 2px 2px #00447f;    
}

.word_mix .square_table .letter_button_used {
    background:grey;
    opacity:0.3;
    font-size:30px;
    text-align:center;
    width:100%;    
    border-radius:5px;
    border: 1px solid #00447f;
    box-shadow: 2px 2px 2px #00447f;    
}

@media only screen and (max-device-width : 480px) {
    .word_mix .square_table .letter_button {
        font-size: 20px;
    }

    .word_mix .square_table .letter_button_used {
        font-size: 20px;
    }
 }

.word_mix pre {
    text-align:left;
    word-wrap:normal;
    word-break:normal;
}

/* ------------------------------------------------------------------------------------------------------------ */

.vocabulator {
    font-size:20px;
}

.vocabulator button {
    width:128px;
    height:64px;
}


/* ------------------------------------------------------------------------------------------------------------ */
.haystack {
    font-size:20px;
}

.haystack .letter_button {
    background:white;
    opacity:0.5;
    font-size:30px;
    text-align:center;            
    border-radius:5px;
    border: 1px solid #00447f;
    box-shadow: 2px 2px 2px #00447f;    
}


/* ------------------------------------------------------------------------------------------------------------ *//* ------------------------------------------------------------------------------------------------------------ */

.categories .word_header {
    text-align:center;
    font-size:20px;
    color: gray;
}

.categories .letter_button {
    background:white;
    opacity:0.5;
    font-size:20px;
    text-align:center;            
    border-radius:5px;
    border: 1px solid #00447f;
    box-shadow: 2px 2px 2px #00447f;    
}


.categories .word_button {
    background:white;
    opacity:0.5;
    font-size:20px;
    text-align:center;
    width:100%;    
    border-radius:5px;
    border: 1px solid #00447f;
    box-shadow: 2px 2px 2px #00447f;    
}

.categories .word_button_correct {
    color:green;
    background:lightgreen;
    opacity:0.5;
    font-size:20px;
    text-align:center;
    width:100%;    
    border-radius:5px;
    border: 1px solid #00447f;
    box-shadow: 2px 2px 2px #00447f;    
}



/* ------------------------------------------------------------------------------------------------------------ */