/**
 * (c) 2017 Hebrew Podcasts, All Rights Reserved
 */
/**
 * games like flashcards, have a fixed width, so we can't make the page
 * as small as the viewport
 */ 
body.game {
    min-width: 550px;
}

.links {
    margin-bottom: 10px;
}

.previous_lesson, .next_lesson, .drill_cards_link {
    float: left;
    margin-right: 16px;
}

.icon_file {
    float: right;
}

.icon_file img {
    width: 100px;
    height: 100px;
}

.title {
    font-style: italic;
    font-weight: bold;
    font-size: 18px;
    color: #435986;
    margin-right: 4px 0 8px 0;
}

hr {
    clear: both;
    padding: 0;
    margin: 2px 0;
    height: 0;
    border-top: 1px solid #808080;
}

.fifty_fifty_left {
    box-sizing: border-box;
    width: 100%;
    padding: 2px;
    text-align: center;
}

.fifty_fifty_right {
    padding: 2px;
}

video {
    width: 290px;
    height: 193px;
}

@media ( min-width : 360px) {
    video {
        width: 350px;
        height: 233px;
    }
}

@media ( min-width : 375px) {
    video {
        width: 360px;
        height: 240px;
    }
}

@media ( min-width : 490px) {
    video {
        width: 480px;
        height: 360px;
    }
}

/**
 * two columns
 */
@media ( min-width : 960px) {
    .fifty_fifty_left {
        width: 52%;
        float: left;
    }
    .fifty_fifty_right {
        box-sizing: border-box;
        float: right;
        width: 48%;
    }
    video {
        width: 480px;
        height: 320px;
    }
}

.download_block {
    clear: both;
}

iframe.flashcard_etc {
    border: none;
    width: 552px;
    height: 402px;
    background-color: #eeeeee;
}

iframe.memory {
    border: none;
    width: 607px;
    height: 488px;
    background-color: #eeeeee;
}

iframe.hangman {
    border: none;
    width: 615px;
    height: 465px;
    background-color: #eeeeee;
}

/**
 * two columns game (flashcards, etc.)
 */
@media ( min-width : 960px) {
    .fifty_fifty_left.game {
        width: 60%;
        float: left;
    }
    .fifty_fifty_right.game {
        box-sizing: border-box;
        float: right;
        width: 40%;
    }
}

/**
 * two columns memory game
 */
@media ( min-width : 960px) {
    .fifty_fifty_left.memory {
        width: 64%;
        float: left;
    }
    .fifty_fifty_right.memory {
        box-sizing: border-box;
        float: right;
        width: 36%;
    }
}

/**
 * two columns memory game
 */
@media ( min-width : 960px) {
    .fifty_fifty_left.hangman {
        width: 65%;
        float: left;
    }
    .fifty_fifty_right.hangman {
        box-sizing: border-box;
        float: right;
        width: 35%;
    }
}