@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');


/* 
font-family: "Source Sans 3", sans-serif;
font-family: "Open Sans", sans-serif;
*/
body {background-color:#171e1d; color:#fff;}
body * {
    font-family: "Source Sans 3", sans-serif;
    color:#cccccc;
}
 .callout {
    background-color:#282828;
}
.callout .callout {
background-color:#3d3d3d;
}
.accordion-content .callout, .callout {
    background-color:#282828;
}



.button.toggle {
    padding: 5px;
    font-size: 0.8rem;
    float: right;
    border-radius: 4px;
    position: absolute;
    right: 0;
    top: 0;
}
.button.toggle.full-width {
    float:none;
    position:relative;
    width:100%;
    padding: 10px;
    font-size: 1.1rem;
}

#tactics .callout {
    border:1px solid white;
}
#tactics .callout.Destruction {
    border:1px solid green;
}
#tactics .callout.Death {
    border:1px solid purple;
}
#tactics .callout.Chaos {
    border:1px solid crimson;
}
#tactics .callout.Order{
    border:1px solid navy;
}

p.title {
    margin-bottom:0px; font-size:1.05rem;
}

.callout h5 {
    font-weight: bold;
    color:#3ba294;
    display: block;
    width: 100%;
    position: relative;
  }
h1, h2, h3, h4, h5, h6 {
    font-family: "Open Sans", sans-serif;
    color:white;
}   
.main-logo {
    max-height: 200px;
    margin-left: -10px;
}
h1 {
    font-size:2.4rem;
    font-weight:bold;
}
.button {
    background-color: #3ba294;
}
.button:hover {
    background-color:#73b9ae;
}
select {
    border:1px solid #3ba294;
    background-color:#747978;
    color:white;
}
select:focus {
    background-color:#747978;
    border:1px solid #fff;
}
select option {
    color:white;
}
legend {
    font-weight:600;
}

thead {
    background-color:#171e1d;
}
tbody {
    background-color:#282828;
}
tbody tr:nth-child(even) {
    background-color:#3d3d3d;
}

.accordion-content  h6 {
    font-weight:bold;
    font-size:1.1rem;
}
.accordion-title {
    color:white;
    font-size:1.4rem; 
    font-weight:bold;
}
.deployment-title {
    background-color:#1B1918;
}
.passive-title {
    background-color:#4C2D64;
}
.passive .accordion-content h6 {
    color:#5d317e;
}
.start-title {
    background-color:#1B1918;
}
.hero-title {
    background-color:#887224;
}
.hero .accordion-content h6 {
    color:#887224;
}
.movement-title {
    background-color:#646664;
}
.shooting-title {
    background-color:#004355;
}
.shooting .accordion-content h6 {
    color:#076781;
}
.charge-title {
    background-color:#A45519;
}
.charge .accordion-content h6 {
    color:#A45519;
}
.combat-title {
    background-color:#6D0010;
}
.combat .accordion-content h6 {
    color:#b50d25;
}
.end-title {
    background-color:#4C2D64;
}
.end .accordion-content h6 {
    color:#5d317e;
}

.accordion-content {
    background-color:#3d3d3d;
}

h3 a {
    float:right;
    margin-left:10px !important;
}

.button.top {
    border-radius: 4px;
    margin-bottom: 0;
    padding: 8px;
}


@media only screen and (max-width: 700px) {
    .button.top {
        font-size: 0.7rem;
        padding: 4px;
        margin-left:4px !important;
    }
}
@media only screen and (max-width: 500px) {
    .button.top.print {
        display:none;
    }
}


@media print {
    /* All your print styles go here */
    .hide-on-print {
        display: none;
    }
    .button, .accordion-title::before {
        display:none;
    }
    .accordion-title {
        background-color:lightslategray;
        font-size:14px !important;
    }
    .accordion-content {
        padding-top:5px;
        padding-bottom:0;
    }
    .callout {
        border-width:0px;
        padding-left:0;
        padding-right:0;
        margin-bottom:0;
    }
    body h5 {
        font-size:13px !important;
    }
    body h6 {
        font-size:12px !important;
    }
    body p, body table {
        font-size:10px !important;
    }
  }