/* Copyright (C) 2016 Sebastian Pipping <sebastian@pipping.org>
** Licensed under GNU GPL v3 or later
*/
body {
    margin: 0px;
    background-color: #fcfcfc;
}

.btn {
    font-weight: 400;
    padding-top: 1px;
    padding-right: 30px;
    padding-left: 30px;
}

.optionLabel {
    text-align: center;
}

td.person {
    text-align: right;
    padding-right: 0.3em !important;
}
#voterName {
    margin-bottom: 0 !important;
    min-width: 5em;
}

.vote {
    text-align: center;
    height: 26px;
}

.sumNonZero {
    font-weight: bold;
}

@media screen and (min-width:1120px) {
    #live {
        max-width: calc(100vw - 10px);
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        top: 10%;
        padding-bottom: 10%;
    }
}

#stage {
    display: inline-block;

}
@media screen and (max-width:1119px) {
    #stage {
        width: 100%;
    }
    #stage, #live {
        margin: 10px;
    }
}
@media screen and (min-width:1120px) {
    #stage {
        position: fixed;
        left: 10%;
        width: 80%;
        top: 10%;
        bottom: 0;
    }
}

#stage div label {
    display: block;
}

#setup {
    position: relative;
    display: inline-block;
}
@media screen and (max-width:1119px) {
    #setup {
        width: 100%;
        height: 24em;
    }
}
@media screen and (min-width:1120px) {
    #setup {
        width: 30%;
        height: 70%;
    }
}

#setup .card-panel {
    height: 100%;
}

#setup .card-panel form {
    height: 100%;
}

#setup .card-panel .input-field {
    position: absolute;
    display: inline-block;

    left: 20px;
    width: calc(100% - 40px);
    height: -webkit-calc(100% - 7.7em);
    height:    -moz-calc(100% - 7.7em);
    height:         calc(100% - 7.7em);
}

#setupButtons {
    position: absolute;
    bottom: 15px;
    right: 20px;
}

@media screen and (max-width:1119px) {
    #preview {
        display: inline-block;
        width: 100%;
    }
}
@media screen and (min-width:1120px) {
    #preview {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 32%;
        max-width: 68%;
    }
}

#config {
    height: 100%;
}

#resetButton {
    margin-right: 0.5em;
    float: right;
}
#createButton {
    float: right;
}

.wellformed {
    background-color: #efe !important;
}

.malformed {
    background-color: #fee !important;
}

#pollForm {
    overflow-y: auto;
}

#pollTable {
    border-spacing: 2px;
    border-collapse: separate;
}

#pollTable tr {
    padding: 0px 0px;
    margin: 0px;
}
#pollTable tr td {
    padding: 0px 0px;
    margin: 0px;
}
#pollTable tr td label span {
    margin: 10px -10px 0 5px;
}

.question {
    text-align: center;
}

.votedYes {
    background-color: #dfd;
}
.votedNo {
    background-color: #fdd;
}
.yetToVote {
    background-color: #dfdfdf;
}

[type="checkbox"]+label {
    display: inline-block !important;
    margin-top: 0.85em;
    padding: 0 !important;
    width: 1.3em;
}

#submitVote {
    margin-left: 1em;
}

tt, .monospace-text {
    font-family:
        /* Android */
        Noto Mono, Roboto Mono, Droid Sans Mono,

        /* Linux and friends */
        Liberation Mono,
            DejaVu Sans Mono, Bitstream Vera Sans Mono,
            Linux Libertine Mono O,
            Nimbus Mono L,
            CMU Typewriter Text,
            Source Code Pro,
            Inconsolata,
            Cousine,
            Oxygen Mono,
            Anonymous Pro,
            PT Mono,
            Ubuntu Mono,

        /* macOS */
        Consolas,

        /* Windows */
        Monaco, Lucida Console,

        /* Core fonts */
        Andale Mono, Courier New,

        /* fallback */
        monospace;
}


footer {
    margin: 0;
}
@media screen and (max-width:1119px) {
    footer {
        margin-top: 4%;
        width: 100%;
    }
}
@media screen and (min-width:1120px) {
    footer {
        z-index: 1;
        position: fixed;
        bottom: 0%;
        left: 0%;
        right: 0%;
    }
}
footer {
    background-color: #848484;
}
footer * {
    color: #ccc;
}
footer p {
    margin: 0;
    text-align: center;
}
footer {
    padding: 6px 20px 24px 20px;
}
footer a {
    color: #ddd;
    font-weight: bold;
}
footer #github-star-button {
    position: relative;
    top: 5px;
    margin-left: 10px;
    width: 90px;
}