@font-face {font-family: "TerraIgnotaW01-Regular"; src: url("//db.onlinewebfonts.com/t/76da46bd9cc48e5fdf6fe3674323905d.eot"); src: url("//db.onlinewebfonts.com/t/76da46bd9cc48e5fdf6fe3674323905d.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/76da46bd9cc48e5fdf6fe3674323905d.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/76da46bd9cc48e5fdf6fe3674323905d.woff") format("woff"), url("//db.onlinewebfonts.com/t/76da46bd9cc48e5fdf6fe3674323905d.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/76da46bd9cc48e5fdf6fe3674323905d.svg#TerraIgnotaW01-Regular") format("svg"); }


/* pure-css is used as a starting point*/
h1 {
    font-size:inherit;
}
td {
    text-align:right;
}

/* assorted effects */
#battles td {
    text-align:left;
    vertical-align: top;
}
.dice {
    display:block;
    padding-top:5px;
    font-size:larger;
}
.dice .hit {
    font-size:larger;
    color:red;
}
tr.hover {
    background-color:#eee;
    cursor:pointer;
}
tr.clicked {
    background-color:#ddd;
}

/* power colour scheme */

.power {
    border-radius: 20px;
    color:white;
    white-space:nowrap;
    padding:5px 5px 5px 30px ;
    background-size:27px;
    background-repeat:no-repeat;
    background-position-y: center;
    font-family:sans-serif;
    font-size:small;
}
.power.ottoman {
    background-color:#019D4C;
    background-image:url(ottoman.png);
}
.power.pope {
    background-color:#7B4D96;
    background-image:url(pope.png);
}
.power.england {
    background-color:#E54640;
    background-image:url(england.png);
}
.power.hapsburg {
    background-color:#FCE75A;
    color:black;
    background-image:url(hapsburg.png);

}
.power.protestant {
    background-color: #A2583D;
    background-image:url(protestant.png);
}
.power.france {
    background-color: #0090CF;
    background-image:url(france.png);
}
.power.independent {
    background-color: #C4C4C6;
    color:black;
    background-image:url(independent.png);
}
.power.total {
    color:black;
}


/* overall structure: flexbox stuff */

html, body, #outer {
    height:100%;
}

.flex-col {
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.flex-row {
    display:flex;
    flex-direction:row;
    overflow:hidden;
}
.row-flexi {
    flex:1;
    overflow:auto;
}
.col-flexi {
    flex:1;
    overflow:auto;
}
#stats-selector {
    align-items: center;
}
#stats-selector span {
    display:inline-block;
}
#stats-selector span.turn-selector {
    padding:8px;
    background-color:#eee;
    border-width:2px;
    cursor:pointer;
    border-color:black;
    border-style:solid;
}
#stats-selector span.turn-selector:hover {
    background-color:#ddd;
}
#stats-selector span.turn-selector.selected {
    background-color:#ccc;
    border-color:red;
}
#gameselector button {
    padding:8px;
    background-color:#eee;
    border-width:2px;
    cursor:pointer;
    border-color:black;
    border-style:solid;
}

#stats-selector button:hover {
    background-color:#ddd;
}
#gameselector button.selected {
    background-color:#ccc;
    border-color:red;
}
#stats tr.selected {
    background-color:#ccc;
}

#left {
    max-width:200px;
    flex:1;
    overflow:hidden;
    white-space:pre;
}
@media screen and (max-width:1400px) {
    #right {
        font-size:1.2vw;
    }
}
@media screen and (max-width:1000px) {
    .power {
        background-size:2.6vw;
        border-radius: 1vw;
        padding:.5vw .5vw .5vw 3vw ;
        background-repeat:no-repeat;
        background-position-y: center;
    }
}
#right table {
    max-width:100%;
}


/*
 * timeline table header
 */
#timeline th {
    position: sticky;
    top: -1px;
    z-index:2;
    background-color:#e0e0e0;
}

.power::after {
    transition: transform .2s;
    display: inline-block;
    margin-left: .2em;
}
.power:hover::after {
    transform: scale(3);
}

/*
 * winner highlight
 */
.winner::after {
    content: '🏆';
}

.first::after {
    content: '🥇';
}

.second::after {
    content: '🥈';
}

.third::after {
    content: '🥉';
}

.sixth::after {
    content: '🥄';
}

.ref-location {
    margin:-0.07vw;
    padding:0.15vw;
}


.ref-location.success {
    font-weight:bold;
}

.ref-location.germany {
    background-color:#DCC6A1;
}
.ref-location.france {
    background-color:#CBDEDC;
}
.ref-location.england {
    background-color:#EFB88F;
}
#log-toggle.show::after {
    content: '▶️';
}
#log-toggle.hide::after {
    content: '◀️';
}
.dice-chart-container {
    height: 20px;
}
#timeline td .dice-chart-container {
    padding-top:.2vw;
}
#timeline td .dice-stack svg.die {
    background-color:inherit;
}
#timeline .dice-chart-container {
    height:inherit;
    max-height: 200px;
}
#timeline .dice-stack.padding {
    order:5
}
.stats-row .dice-chart-container:hover {
    transition: transform .2s;
    transform-origin: bottom left;
    transform: scaleX(2) scaleY(2);
}
#battles {
    font-family: TerraIgnotaW01-Regular;
    font-size:x-large;
}