button {
    width: 128px;
    height: 32px;
}

body {
    margin: 4px;
}

.div_game_area {
    width: 100%;
    height: 580px;
}

.div_progress_red_line {
    width: 100%;
    height: 4px;
    background-color: red;
    position: absolute;
    top: 0px;
}
.div_progress_green_line {
    width: 75%;
    height: 4px;
    background-color: green;
    position: absolute;
    top: 0px;
}

.button_main_menu {
    background-image: url( '../img/icons/main_menu.png' );
    background-repeat: no-repeat;
    height: 64px;
    width: 64px;
    border: none;
}


.button_help {
    background-image: url( '../img/icons/help.png' );
    border: none;
    background-repeat: no-repeat;
    height: 64px;
    width: 64px;
}


.button_play_again {
    background-image: url( '../img/icons/play_again.png' );
    border: none;
    background-repeat: no-repeat;
    height: 64px;
    width: 64px;
}


select {
    width: 160px;
    height: 40px;
}

.game_animation {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}


.game_field {
    width: 100%;
    height: 580px;
    background-color: rgb(236, 131, 33)
}


/*  main menu */
.main_menu_back {
    background-color:white;
   
}

.div_image_big {
    width: 98%;
    height: 412px;
    margin: 0 auto;
}

.div_image_medium {
    width: 300px;
    height: 300px;
    margin: auto;
    margin-bottom: 8px;
}

.img_image_big {
    width: 100%;
    height: 100%;

}

.div_text_wide_small {
    background-color: rgb(228, 226, 226);
    text-align: center;
    color: black;
    width: 98%;
    height: 64px;
    line-height: 64px;/*align text vertically*/
    font-size: 32px;
    margin: 0 auto;
    border-radius: 4px;
}

.div_choose_word_select_area {
    width: 98%;
    height: 100px;
    margin-left: 1%;
}

.div_choice_small {
    background-color: rgb(228, 226, 226);
    text-align: center;
    color: black;
    width: 49%;
    height: 64px;
    line-height: 64px;/*align text vertically*/
    font-size: 32px;
    border-radius: 4px;
}

.div_text_wide_big {
    background-color: rgb(228, 226, 226);
    text-align: center;
    color: black;
    width: 98%;
    height: 96px;
    line-height: 96px;/*align text vertically*/
    font-size: 32px;
    margin: 0 auto;
    border-radius: 4px;
}

.div_small_empty_space {
    clear: both;
    height: 4px;
}

.div_medium_empty_space{
    clear: both;
    height: 16px;
}


/*Find image game*/
.div_find_image_field {
    width: 98%;
    height: 480px;
    margin: 0 auto;
}


.div_find_image_choice {
    display: table;
    background-color: white;
    border-radius: 6px;
    width: 49%;
    height: 49%;
    margin-top: 16px;
}

.div_find_image_choice_cell {
    display: table-cell; 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle; 
    text-align: center; 
    font-size: 32px;
    word-break: break-all;
}


.div_find_image_bottom_word {
    text-align: center;
    color: white;
    width: 98%;
    height: 96px;
    line-height: 96px;
    font-size: 32px;
    margin: 0 auto;
}


/* Match words game*/
.div_match_words_field {
    width: 98%;
    height: 100%;
    margin: 0 auto;
}


.div_match_words_choice {
    display: table;
    background-color: white;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}


.div_match_words_choice p {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    font-size: 24px;
    color: black;
    border-radius: 4px;
}


.div_match_words_left {
    padding-top: 4px;
    padding-bottom: 4px;
    width: 49%;
    height: 64px;
    float: left;
}

.div_match_words_right {
    padding-top: 4px;
    padding-bottom: 4px;
    width: 49%;
    height: 64px;
    float: right;
}

/* Listen and choose */
.div_listen_choose_choice {
    background-color: white;
    border-radius: 6px;
    width: 48%;
    height: 46%;
    margin-top: 12px;
    margin-left: 2px;
    margin-right: 2px;
}
.div_listen_choose_choice_table {
    display: table;
    width:100%;
    height:85%;
    vertical-align: top;
}

.div_listen_choose_choice_table img {
    width: 100%;
    height: 100%;
    display: table-cell; 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.div_listen_choose_choice p {
    width: 100%;
    height: 28px;
    background-color: rgb(228, 226, 226);
    vertical-align: bottom; 
    text-align: center;
    font-size: 24px;
}

/* Type a word*/
.div_type_word_buttons {
    width: 98%;
    height: 128px;
    /*background-color: white;*/
    margin: 0 auto;
    margin-top: 8px;
}

.div_type_word_button {
    float: left;
    width: 50px;
    height: 50px;
    background-color: white;
    text-align: center;
    font-size: 32px;
    line-height: 50px;/*align text vertically*/
}

.div_type_word_button_divider {
    float: left;
    width: 10px;
    height: 10px;
}