﻿body {
    background: #bf8040;
    color: white;
	 overflow: hidden;
}

.well {
    background: #86592d;
    border-radius: 32px;
    border: 2px solid brown;
}

.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open > .dropdown-toggle.btn-primary {
    background-color: #86592d;
    border-color: #86592d;
}

.btn-success.active, .btn-success.focus, .btn-success:active, .btn-success:focus, .btn-success:hover, .open > .dropdown-toggle.btn-success {
    color: #fff;
    background-color: #d2a679;
    border-color: #d2a679;
    border-radius: 18px;
    font-size: 26px;
}

.btn-success {
    color: #fff;
    background-color: #d2a679;
    border-color: #d2a679;
    border-radius: 18px;
    font-size: 26px;
}

.btn-danger {
    color: #fff;
    background-color: #d2a679;
    border-color: #d2a679;
    border-radius: 18px;
    font-size: 26px;
}

    .btn-danger.active, .btn-danger.focus, .btn-danger:active, .btn-danger:focus, .btn-danger:hover, .open > .dropdown-toggle.btn-danger {
        color: #fff;
        background-color: #d2a679;
        border-color: #d2a679;
        border-radius: 18px;
        font-size: 26px;
    }

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 2px solid brown;
}

.btn-primary {
    border-radius: 18px;
    font-size: 26px;
    background: #86592d;
    border: #86592d;
}

    .btn-primary.disabled, .btn-primary.disabled.active, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled], .btn-primary[disabled].active, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary.active, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
        border-radius: 18px;
        font-size: 26px;
        background: #86592d;
        border: #86592d;
        color: white;
    }

.btn-warning.active, .btn-warning.focus, .btn-warning:active, .btn-warning:focus, .btn-warning:hover, .open > .dropdown-toggle.btn-warning {
    background: #86592d;
    border: #86592d;
}

.btn-group-xs > .btn, .btn-xs {
    background: #86592d;
    border: #86592d;
    font-size: 21px;
    border-radius: 9px;
}

#stars-frame .glyphicon {
    margin: 0.2em;
    font-size: 1.82em;
}

#stars-frame, #answer-frame {
    width: 40%;
    float: left;
}

#button-frame {
    width: 20%;
    float: left;
    text-align: center;
    margin-top: 70px;
}

#stars-frame .well, #answer-frame .well {
    height: 200px;
    margin-top: 60px;
}

.h1, .h2, .h3, h1, h2, h3 {
    text-align: center;
}

#numbers-frame .number, #answer-frame .well span {
    display: inline-block;
    margin: 0.5em;
    background-color: #bf8040;
    width: 30px;
    text-align: center;
    font-size: 22px;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 13px;
    border-radius: 0px;
    color: white;
}

#numbers-frame .selected-true {
    background-color: #e8e8e8;
    color: #ddd;
    cursor: not-allowed;
}

#numbers-frame .used-true {
    background-color: #e0bf9f;
    color: black;
    cursor: pointer;
}

.popup {
    width: 332px;
    height: 296px;
    position: absolute;
    margin-top: 58px;
    margin-left: 518px;
    z-index: 1;
}

.winmsg {
    position: absolute;
    margin-top: -340px;
    margin-left: 632px;
    font-size: 23px;
    font-weight: bold;
    z-index: 2;
}

.star {
    width: 136px;
    height: 120px;
    position: absolute;
    margin-left: 610px;
    margin-top: 109px;
    z-index: 2;
}

.btn-default {
    position: absolute;
    margin-left: -63px;
    margin-top: -128px;
    font-size: 16px;
    background: red;
    color: white;
    font-weight: bold;
    border-radius: 16px;
    box-shadow: 9px 9px brown;
    border: red;
    z-index: 2;
}

@media screen and (max-width:1000px) {
    #stars-frame .well, #answer-frame .well {
        margin-top: 17px;
        height: 161px;
    }

    #stars-frame .glyphicon {
        font-size: 25px;
    }

    .popup {
        margin-left: 232px;
        margin-top: 42px;
        z-index: 1;
        height: 234px;
    }

    .star {
        margin-left: 328px;
        margin-top: 73px;
    }

    .winmsg {
        margin-top: -279px;
        margin-left: 345px;
        z-index: 1;
    }

    .btn-default {
        z-index: 1;
        margin-top: -103px;
        margin-left: -60px;
    }
}
