/* Basic setup */

@font-face {
    font-family: 'DroidSerifRegular';
    src: url("/public/fonts/DroidSerif.woff2") format("woff2"),
        url("/public/fonts/DroidSerif.woff") format("woff"),
        url("/public/fonts/DroidSerif.ttf") format("truetype");
    font-weight: normal;
    font-style: normal; }

@font-face {
    font-family: 'DroidSerifItalic';
    src: url("/public/fonts/DroidSerif-Italic.woff2") format("woff2"),
        url("/public/fonts/DroidSerif-Italic.woff") format("woff"),
        url("/public/fonts/DroidSerif-Italic.ttf") format("truetype");
    font-weight: normal; font-style: italic; }

@font-face {
    font-family: 'DroidSerifBold'; src:
        url("/public/fonts/DroidSerif-Bold.woff2") format("woff2"),
        url("/public/fonts/DroidSerif-Bold.woff") format("woff"),
        url("/public/fonts/DroidSerif-Bold.ttf") format("truetype");
    font-weight: bold; font-style: normal;
}

html {
    height: 100%;
}

body {
    font-family: "Droid Serif", "DroidSerifRegular", Georgia, serif;
    height: 100%;
    color: #ddd;
}

body.adeptus-astartes {
    background: rgb(0, 0, 0) url("/public/images/background-adeptus-astartes.png") no-repeat top center;
    background-size: cover;
}

body.astra-militarum {
    background: rgb(0, 0, 0) url("/public/images/background-astra-militarum.png") no-repeat top center;
    background-size: cover;
}

body.craftworlds {
    background: rgb(0, 0, 0) url("/public/images/background-craftworlds.png") no-repeat top center;
    background-size: cover;
}

body.death-guard {
    background: rgb(0, 0, 0) url("/public/images/background-death-guard.png") no-repeat top center;
    background-size: cover;
}

body.necrons {
    background: rgb(0, 0, 0) url("/public/images/background-necrons.png") no-repeat top center;
    background-size: cover;
}

body.orks {
    background: rgb(0, 0, 0) url("/public/images/background-orks.png") no-repeat top center;
    background-size: cover;
}

body.tyranids {
    background: rgb(0, 0, 0) url("/public/images/background-tyranids.png") no-repeat top center;
    background-size: cover;
}

a {
    color: #000;
    text-decoration: none;
    transition: color 0.5s;
}

a:hover,
a:focus {
    color: rgba(228, 2, 45, 1);
    text-decoration: underline;
    transition: color 0.5s;
}

.width-container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

.text-nowrap {
    white-space: nowrap;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-capitalize {
    text-transform: capitalize;
}

.text-strikethrough {
    text-decoration: line-through;
}

.mobile,
.hidden {
    display: none !important;
}

#mobile-menu {
    display: none;
}

.btn,
ul.pagination li {
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0.3vmin;
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.75vmin 1.5vmin;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    transition: all 0.5s;
    font-size: 1.5vmin;
    background: rgba(166, 201, 179, 0.8);
}

.btn-info {

}

.btn-small {
    padding: 0.2vmin 0.5vmin;
}

.btn-info:hover {
    background: rgba(166, 201, 179, 0.4);
    border-color: rgba(255, 255, 255, 0.9);
    transition: all 0.5s;
}

/* Header & Navigation */

#main-navigation {
    background: rgba(255, 255, 255, 1);
    padding: 0.5%;
    border: 1px solid rgba(18, 117, 187, 1);
    border-width: 0 0 1px 0;
    height: 6.5vh;
    box-shadow: 0px 0px 0.5vmin 0.5vmin rgba(18, 117, 187, 0.3);
    clear: both;
}

.nav-left {
    width: 15%;
    float: left;
}

.nav-right {
    width: 85%;
    float: right;
    text-align: right;
}

#main-navigation h1 {
    font-size: 2vmin;
    margin: 0;
}

#main-navigation h1 img {
    height: 6.5vh;
}

#main-navigation ul {
    list-style-type: none;
    margin: 0.7vh 0 0 0;
    padding: 0;
    display: inline-block;
    font-size: 1.4vmin;
}

#main-navigation ul:not(:first-child) {
    border: 1px solid rgba(0, 0, 0, 0.3);
    padding-right: 0;
    border-width: 0 0 0 1px;
}

#main-navigation ul li {
    display: inline-block;
}

#main-navigation ul li span {
    display: inline-block;
    padding: 1.5vmin 1.5vmin 1.5vmin 4vmin;
}

#main-navigation ul li.pulldown span {
    padding-left: 6vmin;
}

#main-navigation .dropdownContent {
    display: none;
    position: absolute;
    background-color: rgba(255, 255, 255, 1);
    min-width: 15vmin;
    box-shadow: 0 0.5vmin 0.5vmin 0 rgba(0, 0, 0, 0.2);
    z-index: 1;
}

#main-navigation ul li a,
#main-navigation span {
    color: rgb(89, 2, 19);
    display: inline-block;
    padding: 1vmin 1vmin 1vmin 5vmin;
    border: 1px solid rgba(0, 0, 0, 0);
    border-width: 1px 1px 0 1px;
}

#main-navigation span.selected {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-width: 1px 1px 0 1px;
    border-radius: 0.3vmin 0.3vmin 0 0;
    box-shadow: 0 0.5vmin 0.5vmin 0 rgba(0, 0, 0, 0.2);
}

#main-navigation ul.dropdownContent {
    border: 1px solid rgba(0, 0, 0, 0.75);
    border-radius: 0 0.3vmin 0.3vmin 0.3vmin;
    text-align: left;
}

#main-navigation ul.dropdownContent {
    margin: 0;
    padding: 0;
}

#main-navigation ul.dropdownContent li {
    display: block;
    font-size: 1.4vmin;
    min-height: unset;
    padding: 0;
    margin: 0;
}

#main-navigation ul.dropdownContent li.spacer {
    color: rgb(0, 80, 38);
    background: rgba(0, 175, 77, 0.1);
    margin: 0;
    padding: 1.5vmin;
}

#main-navigation ul li.search {
    background: url(/public/images/search-55.png);
}

#main-navigation ul li.mathshammer {
    background: url(/public/images/hammer-55.png);
}

#main-navigation ul li.codex {
    background: url(/public/images/data-55.png);
}

#main-navigation ul li.your-stuff {
    background: url(/public/images/list-55.png);
}

#main-navigation ul li.user {
    background: url(/public/images/user-55.png);
}

#main-navigation ul li.admin {
    background: url(/public/images/exclamation-mark-55.png);
}

#main-navigation ul li.logout {
    background: url(/public/images/down-arrow-55.png);
}

#main-navigation ul li.search,
#main-navigation ul li.mathshammer,
#main-navigation ul li.codex,
#main-navigation ul li.your-stuff,
#main-navigation ul li.user,
#main-navigation ul li.admin,
#main-navigation ul li.logout {
    background-repeat: no-repeat;
    background-position: 0.5vmin center;
    background-size: auto 90%;
}

#main-navigation ul.dropdownContent li.damage-calculator {
    background: url(/public/images/dice-55.png);
}
#main-navigation ul.dropdownContent li.dashboard {
    background: url(/public/images/dashboard-55.png);
}
#main-navigation ul.dropdownContent li.user {
    background: url(/public/images/user-55.png);
}
#main-navigation ul.dropdownContent li.logout {
    background: url(/public/images/down-arrow-55.png);
}

#main-navigation ul.dropdownContent li.mathshammer,
#main-navigation ul.dropdownContent li.user,
#main-navigation ul.dropdownContent li.dashboard,
#main-navigation ul.dropdownContent li.logout {
    padding-left: 4.5vmin;
    background-color: rgba(18, 117, 187, 0.1);
    background-repeat: no-repeat;
    background-position: 0.5vmin center;
    background-size: auto 70%;
}

#main-navigation ul.dropdownContent li a {
    display: inline-block;
    padding: 1.5vmin;
    transition: all 0.5s;
    color: rgb(89, 2, 19);
    text-decoration: none;
    min-width: 15vmin;
}

#main-navigation ul.dropdownContent li a:hover,
#main-navigation ul.dropdownContent li a:focus {
    color: #a81212;
    text-decoration: underline;
    background: rgba(0, 0, 0, 0.1);
    transition: all 0.5s;
}

#main-navigation .show {
    display: block;
}

/* Basic content */

.content {
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 1vmin;
    background:rgba(0,0,0,0.8);
    margin: 2vh auto 2vh auto;
    padding: 2vmin;
}

/* forms */

label {
    display: inline-block;
    width: 12vw;
    float: left;
    font-size: 1.5vmin;
    padding-top: 1vmin;
}

span.fakeLabel {
    display: inline-block;
    width: 12vw;
}

span.help-block {
    clear: left;
    display: block;
    margin-left: 12vw;
}

.input-margin {
    margin-left: 12vw;
}

div.input {
    margin: 0 0 1vmin 0;
}

legend {
    font-size: 1.8vmin;
    padding: 0.3vmin 0.8vmin;
    background-color: rgba(18, 117, 187, 0.1);
}

fieldset {
    border: 1px solid rgba(18, 117, 187, 0.3);
    border-radius: 0.3vmin;
}

fieldset.float {
    width: 48%;
}

fieldset.float-left {
    float: left;
}

fieldset.float-right {
    float: right;
}

.float-clear {
    clear: both;
}

input {
    display: inline-block;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=password],
input[type=number],
input[type=date],
input[type=datetime-local],
textarea,
select {
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 0.3vmin;
    padding: 1vmin;
    font-size: 1.5vmin;
}

input[type=checkbox],
input[type=radio] {
    margin: 1vmin 0;
}

textarea {
    height: 8vmin;
}

.input-wide input,
.input-wide textarea {
    width: 55vmin;
}

div.submit {
    margin: 1vmin 0;
    padding: 1vmin 0 0 12vw;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-width: 1px 0 0 0;
}

div.fieldset-submit {
    padding: 1vmin 0 0 12.675vw;
}

div.left-submit {
    padding: 1vmin 0 0 0vw;
}

/* Tables */

table {
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-collapse: collapse;
    margin-bottom: 1.5vmin;
}

table.full-width {
    width: 100%;
}

thead {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.35);
}

tr:nth-of-type(odd) {
    background: rgba(0, 0, 0, 0.04);
}

tr.error:nth-of-type(even) {
    background-color: rgba(255, 0, 0, 0.2);
}

tr.error:nth-of-type(odd) {
    background-color: rgba(255, 0, 0, 0.1);
}

tr.warning:nth-of-type(even) {
    background-color: rgba(255, 255, 0, 0.2);
}

tr.warning:nth-of-type(odd) {
    background-color: rgba(255, 255, 0, 0.1);
}

th {
    padding: 1vmin 0.5vmin;
    text-align: left;
}

th.action {
    width: 14vw;
}

td {
    padding: 0.5vmin;
}

td:first-of-type {
    text-align: left;
}

td.date,
td.action {
    text-align: center;
}

td.points, th.points {
    text-align: center;
    width: 5vmin;
}

/* unit-listing codex tables */

table.unit-listing {
    background: rgba(255,255,255,0.2);
}

table.unit-listing thead {
    background: rgba(0, 0, 0, 1);
    color: rgba(255,255,255,0.8);
}

table.unit-listing thead th {
    font-size: 1.5em;
    text-transform: uppercase;
}

table.unit-listing thead th {
    font-size: 1.5em;
    text-transform: uppercase;
}

table.unit-listing th.troop-listing {
    background: rgba(161, 234, 181, 0.3);
    font-size: 1em;
}

table.unit-listing th.troop-listing-choice {
    background: rgba(0, 0, 0, 0.2);
    font-size: 1em;
}

table.unit-listing th.troop-listing-choice {
    background: rgba(0, 0, 0, 0.2);
    font-size: 1em;
}

table tr.statline-header th {
    background: rgba(161, 234, 181, 0.2);
    font-size: 1em;
}

table tr.related {
    background: rgba(255, 255, 255, 0.2);
    font-size: 1em;
}

table.unit-listing tr.subheading th {
    font-size: 0.8em;
    padding-left: 3vw;
    width: 13vw;
}

table.unit-listing tr.subheading td  {
    font-size: 0.8em;
}

img.border {
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 1vmin;
}

img.scaled-50 {
    height: 50vh;
}