/*
File: yahtzeeStyles.css
Site: TNT
Date: 01/14/20
Author: KLP
Comments: Page level styles will be migrated here, soon!


*/

div#diceLayout {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    border-radius: 10px;
    padding: 10px;
}

div#diceLayout div#info {
    width: 40%;
    margin-bottom: 10px;
}

div#diceLayout div#info p {
    margin-bottom: 1px;
    text-align: right;
}

div#diceLayout div#info p span {
    margin-left: 20px;
    text-align: right;
}


div#diceLayout input {
    margin-top: 5px;
    float: right;
}

div#diceLayout table {
    width: 98%;
    margin-left: auto;
    margin-right: auto;
}

div#diceLayout table img {
    width: 100%;
    height: auto;
}

div#scoreCard {
    width: 98%;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF5BC;
    margin-top: 10px;
    border-radius: 10px;
    height: 350px;
    padding-left: 5px;
    padding-right: 5px;
}

div#scoreCard h2 {
    text-align: center;
    margin-bottom: 2px;
}

div#leftScore,
div#rightScore {
    border: 1px solid lightgray;
    border-radius: 10px;
    width: 45%;
    padding: 10px;
}

div#leftScore {
    float: left;
    margin-bottom: 10px;
}

div#rightScore {
    float: right;
    width: 50%;
}

/*eureka: use padding for columns, not margins for rows*/
div#leftScore table td,
div#rightScore table td {
    padding-bottom: 2px;
}


div#leftScore table tr td:first-child,
div#rightScore table tr td:first-child {
    text-align: right;
    font-weight: bold;
    padding-right: 2px;
}

div#leftScore table tr td:nth-child(2),
div#rightScore table tr td:nth-child(2) {
    background-color: white;
    width: 40%;
    text-align: right;
}

div#leftScore table tr td,
div#rightScore table tr td {
    margin-bottom: 5px;
    background-color: #f7e580;
}

div#leftScore table tr td.gap,
div#rightScore table tr td.gap {
    padding-bottom: 10px;
}

div#scoreCard h3#grandTotal {
    text-align: center;
    clear: both;
}

@media (min-width: 200px) {

    /*small phone*/
    div#scoreCard {
        font-size: .8em;
    }

}

@media (min-width: 400px) {

    /*black band*/
    div#scoreCard {
        font-size: 1em;
    }

}

@media (min-width: 500px) {

    div#diceLayout {
        width: 400px;
    }

    div#scoreCard {
        width: 480px;
    }

    div#leftScore table tr td:nth-child(2),
    div#rightScore table tr td:nth-child(2) {
        width: 55%;
    }

    div#diceLayout div#info p {
        font-size: 18px;
    }
}