@font-face {
    font-family: 'Doppio One';
    font-style: normal;
    font-weight: 400;
    src: local('Doppio One Regular'), local('DoppioOne-Regular'), url(../fonts/doppioone.woff) format('woff');
}

@font-face {
    font-family: 'Cloister Black';
    src: url(../fonts/cloisterblack.ttf);
}

@font-face {
    font-family: 'Britannian Runes';
    src: url('../fonts/britannian_runes_ii-webfont.eot');
    src: url('../fonts/britannian_runes_ii-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/britannian_runes_ii-webfont.woff') format('woff'),
         url('../fonts/britannian_runes_ii-webfont.ttf') format('truetype'),
         url('../fonts/britannian_runes_ii-webfont.svg#britannian_runes_iiregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Ophidean Runes';
    src: url('../fonts/ophidean_runes.eot');
    src: url('../fonts/ophidean_runes.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ophidean_runes.woff') format('woff'),
         url('../fonts/ophidean_runes.ttf') format('truetype'),
         url('../fonts/ophidean_runes.svg#ophidean_runesnormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    background: url(../images/u7background.jpg) no-repeat center center fixed;
    background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    font: normal normal 400 1em 'Doppio One', sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

h1 {
    color: #D7FFFD;
    font-size: 3em;
    font-family: "Comic Sans MS", cursive, sans-serif; /* how could you? */
    font-weight: 400;
    margin: 0;
    text-align: center;
    text-shadow: -1px -1px 0 #272727, 1px -1px 0 #272727, -1px 1px 0 #272727, 1px 1px 0 #272727;
}

h1 img {
    height: 1.5em;
}

h1 div {
    font-size: 0.75em;
    margin: -1em 0 0 0;
}

h2 {
    color: #EBEB00;
    font: 1.75em 'Cloister Black', serif;
    margin: 0;
    position: relative;
    text-shadow: 0.0625em 0.0625em #272727;
}

/* https://developer.mozilla.org/en-US/docs/Web/CSS/::after */
.tooltip:hover::after {
    background: #DDD;
    border: 1px solid #5A5A5A;
    border-radius: 5px;
    color: #181818;
    content: attr(help);
    font: 0.5em san-serif;
    left: 9em;
    padding: .25em;
    position: absolute;
    text-align: left;
    text-shadow: none;
    top: 2.5em;
    width: 15em;
    z-index: 10;
}

.grid {
    float: left;
    padding: 1em;
    width: 100%;
}

.half {
    float: left;
    width: 50%;
}

.inner-view {
    background: rgba(0, 0, 0, .6);
    border-radius: .75em;
    margin-bottom: 1em;
    padding: .75em;
    position: relative;
}


.btn {
    box-shadow: 1px 1px 2px #000;
    clear: left;
    margin: 1.125em;
    outline: none;
}

/** Default Buttons **/
.btn:active {
    position: relative;
    left: 1px;
    top: 1px;
}

.btn-red {
    background: #DE1327;
    border-top: 2px solid #FE374C;
    border-right: 2px solid #FE374C;
    border-bottom: 2px solid #8A030A;
    border-left: 2px solid #8A030A;
}

.btn-red:active {
    border-top: 2px solid #8A030A;
    border-right: 2px solid #8A030A;
    border-bottom: 2px solid #FE374C;
    border-left: 2px solid #FE374C;
}

.btn-green {
    background: #13DE13;
    border-top: 2px solid #37FE3F;
    border-right: 2px solid #37FE3F;
    border-bottom: 2px solid #038A13;
    border-left: 2px solid #038A13;
}

.btn-green:active {
    border-top: 2px solid #038A13;
    border-right: 2px solid #038A13;
    border-bottom: 2px solid #37FE3F;
    border-left: 2px solid #37FE3F;
}

.trained {
    color: #B2D6F2;
    text-shadow: 0 0 0.0625em #6DB2E6, 
                 0 0 0.0625em #6DB2E6, 
                 0 0 0.1875em #6DB2E6, 
                 0 0 0.1875em #348DDA, 
                 0 0 0.25em #348DDA, 
                 0 0 .5em #348DDA, 
                 0 0 .75em #348DDA, 
                 0 0 1em #348DDA
}

/** Specific Elements **/
#wrapper {
    background: url(../images/u7background-blured.jpg) no-repeat center center fixed;
    background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    height: 100%;
    margin: 0 auto;
    max-width: 65em;
    min-height: 1337px;
    min-width: 55em;
    width: 80vw;
}

#chooseMember .inner-view {
    padding: 0.5em;
    text-align: center;
}

#chooseMember h2 {
    display: inline;
}

#chooseMember select {
    background: transparent;
    border: none;
    color: #EBEB00;
    font: 1.75em 'Cloister Black', serif;
    text-shadow: 0.0625em 0.0625em #000;
}

#chooseMember option {
    background: #C0C0C0;
    color: #222;
}

#member .portrait {
    float: left;
    width: 5.25em;
}

#member #reset {
    float: left;
}

#member .statbox {
    background: #754404;
    border-radius: 0.1875em;
    font-size: 1.5em;
    margin: 0 0 0 4em;
    padding: 0.25em;
}

#member .statbox .stat {
    background: #7D6559;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    min-height: 1.4em;
    padding: 0 0.625em;
    position: relative;
}

#member .statbox .stat:first-of-type {
    border-top: 1px solid #333;
}

#member .statbox .stat:last-of-type {
    border-bottom: 1px solid #333;
}

#member .statbox .break {
    border-bottom: 1px solid #333;
    margin-bottom: 0.25em;
}

#member .statbox .break + .stat  {
    border-top: 1px solid #333;
}

#member .statbox .valueChanger {
    position: absolute;
    right: 0.5em;
    user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        -webkit-user-select: none;
}

#member .statbox .valueChanger input {
    background: inherit;
    border: none;
    font: inherit;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 3em;
}

#member .statbox .valueChanger span {
    cursor: pointer;
    cursor: hand;
}

#member .statbox .valueChanger span:hover {
    color: #EBEB00;
}

#member .statbox .valueChanger .disabled {
    color: #7D6559;
}

#member .statbox .valueChanger .disabled:hover {
    color: #7D6559;
    cursor: default;
}

#currentParty {
    text-align: center;
}

#currentParty img {
    cursor: alias;
}

#currentParty img:first-of-type {
    padding: 4px 0 0 0;
}

#selectTrainer {
text-align: center;
}

#selectTrainer #trainers {
    background: #754404;
    border-radius: 0.1875em;
    padding: 0.5em;
}

#selectTrainer table {
    border-collapse: collapse;
    width: 100%;
}

#selectTrainer thead th {
    cursor: pointer;
}

#selectTrainer tbody tr {
    background: #8B7366;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    cursor: alias;
}

#selectTrainer tbody tr:nth-child(odd) {
    background: #7D6559;
    border: 1px solid #333;
}

#selectTrainer tbody tr:last-of-type {
    border-bottom: 1px solid #333;
}

#selectTrainer tbody tr:hover {
    background: rgba(255, 255, 255, 0.50);
}

#selectTrainer td {
    border-right: 1px solid #333;
    min-width: 2.1em;
    padding: 0.125em 0.25em;
    text-align: center;
}

#selectTrainer td:nth-child(1),
#selectTrainer th:nth-child(1) {
    text-align: left;
}

#trainerChecklist h2 {
    text-align: center;
}

#trainerChecklist p {
    color: #DFDFDF;
    margin: 0;
    text-align: right;
}

#trainerChecklist dl {
    background: #754404;
    border-radius: 0.1875em;
    font-size: 1.1em;
    padding: 0.5em 0.5em 0 0.5em;
}

#trainerChecklist dl dt {
    background: #7D6559;
    border: 1px solid #333;
    border-bottom: none;
    font-size: 1.25em;
    padding: 0 0.625em;
}

#trainerChecklist dl dd {
    background: #8B7366;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    padding: 0 0.625em 0 1.5em;
    margin: 0;
}

#trainerChecklist .break {
    border-top: 1px solid #333;
    height: 0.5em;
}

#trainerChecklist .light {
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.8em;
}

#map {
    text-align: center;
}

#map #locater {
    position: relative;
}

#map img {
    width: 100%;
}

#map canvas {
    left: 0;
    position: absolute;
    top: 0;
}

footer {
    background: #3B2DE4;
    border-radius: .75em;
    color: #DFDFDF;
    text-align: center;
}

footer a:link,
footer a:visited {
    color: #DFDFDF;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}