 /* Storyteller dice roller v0.0.10 */
 /* dice roller CSS */


 /* >>>> STRUCTURE <<<< */

 * {
     cursor: pointer;
 }

 .wrapper {
     background-color: white;
     min-width: 300px;
     max-width: 700px;
     z-index: -20;

 }

 .flex {
     display: flex;

 }

 .row {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;

 }

 .column {
     display: flex;
     flex-direction: column;
     /*    flex: 40%;*/
 }

 .column-right {
     display: flex;
     flex-direction: column;
     flex-grow: 2;

     /* background image */
     background-image: url('assets/WoDC_P_gina_085_Imagen_0003.png');
     padding: 10px;
     background-repeat: no-repeat;
     background-attachment: scroll;
     background-size: cover;
     max-width: 400px;
     height: auto;
     z-index: 0;

 }

 .column-left {
     display: flex;
     max-width: 200px;
     justify-content: space-between;
     margin-right: 20px;

 }

 .centre {
     display: flex;
     /* vertical alignment */crinos
     align-items: center;
     /* horizontal alignment */
     justify-content: center;

 }

 .centre-stack {
     display: flex;
     align-items: flex-start;
     justify-content: space-evenly;

 }

 #row2 {
     display: flex;
     flex-direction: row;

 }

 .side-menu-item {
     display: flex;
     margin-bottom: 10px;
     /* horizontal alignment */
     justify-content: flex-end;
     /* vertical alignment */
     align-items: center;

 }

#CrinosSwitchMove {
    transform: translateX(0px);

}

 .side-menu-item-label {
     font-family: "open sans", sans-serif;
     font-size: 0.95em;
     text-align: right;

 }

 .right-align {
     text-align: right;

 }

 .right-padding {
     margin-right: 15%;

 }




 /* >>>> UI CONFIGURATION <<<< */

 /* remove element */

 .remove {
     display: none;

 }

 /* hide element */
 .visible {
     visibility: hidden;

 }

 /* drop shadow */
 .shadow {
     box-shadow: 5px 5px 10px #BBB;
 }


 /* >>>>> TEXT STYLES <<<<< */

 p,
 a,
 td,
 li {
     color: black;
     font-family: "open-sans", sans-serif;
     font-weight: 400;
     font-style: normal;

 }

 p.bold,
 h2,
 h3,
     {
     font-weight: 700;

 }

 p.right {
     text-align: right;

 }

 td {
     margin: 1px;

 }

 .td.smaller {
     font-size: 0.9em;

 }

 .td.bold {
     font-size: 1.1em;
     font-weight: 700;

 }

 h2,
 h3 {
     margin-bottom: 0;

 }

 h3 {
     font-size: 1em;

 }

 h2 {
     font-size: 1.1em;

 }

 li {
     /*    list-style-type: none;*/
     margin-top: 0;

 }


 /* >>>> PAGE FURNITURE <<<< */

 /* ---- REGULAR BUTTONS ---- */

 button {
     background-color: white;
     border-radius: 2em;
     border: solid 2px black;
     color: black;
     display: inline-block;
     font-family: "trade-gothic-next", sans-serif;
     font-size: 0.9em;
     font-style: normal;
     font-weight: 400;
     padding: 5px;
     position: static;
     text-align: center;
     transition: all 0.3s;
     margin: 3px;

 }

 button:hover {
     background-color: black;
     border: solid 2px #999;
     color: white;
     font-style: normal;
     font-weight: 700;

 }

 button.topbutton {
     display: inline-block;
     font-size: 0.8em;
     padding: 5px;
     padding-left: 10px;
     padding-right: 10px;
     margin: 1px;
     margin-top: 0.3em;

 }

 button.topbutton:hover {
     border: solid 2px #999;
     color: white;
     font-style: normal;
     font-weight: 700;

 }


 /* ---- TEXT-ONLY CHECKBOX ---- */

 .switch {
     display: flex;
     position: relative;
     visibility: hidden;
     opacity: 0;

 }

 input[type=checkbox]+label {
     border: solid 2px #000;
     color: black;
     display: inline-block;
     font-family: "trade-gothic-next", sans-serif;
     font-size: 0.9em;
     font-style: normal;
     font-weight: 700;
     padding: 5px 5px 8px;
     text-align: center;
     transform: translate(-30px, 3px);
     transition: all 0.3s;
     width: 110px;
     height: 1.1em;
     background-color: white;
     margin-bottom: 5px;
     margin-top: 5px;
     box-shadow: 5px 5px 10px #BBB;

 }

 input[type=checkbox]:checked+label {
     background-color: black;
     color: white;
     font-weight: 700;
     border: solid 2px black;

 }

 input[type=checkbox]:hover+label {
     background-color: black;
     color: white;
     font-weight: 700;
     border: solid 2px #999;

 }


 /* ---- MENU ---- */

 .menu {
     border-radius: 2em;
     border: solid 2px black;
     color: black;
     display: inline-block;
     font-family: "trade-gothic-next", sans-serif;
     font-size: 0.9em;
     font-style: normal;
     font-weight: 700;
     padding-bottom: 5px;
     padding-left: 10px;
     padding-right: 10px;
     padding-top: 5px;
     text-align: center;
     transition: all 0.3s;
     width: 120px;

 }

 .menu option {
     text-align: center;

 }

 .menu:hover {
     background-color: black;
     border: solid 2px #999;
     color: white;
     font-style: normal;
     font-weight: 700;

 }


 /* ---- ROLL BUTTONS ---- */

 #RollButtonsContainer {
     display: flex;
     margin-top: 10px;
     flex-direction: column;

 }

 #RollButton {
     flex-direction: row;

 }

 #ReRollButtons {
     flex-direction: row;
     justify-content: space-between;

 }

 /* roll button */

 #roll {
     font-weight: 700;
     font-style: normal;
     width: 180px;
     font-size: 1.5em;
     vertical-align: middle;
     height: 2em;
     border-radius: 2em;

 }

 #roll label {
     padding-left: 37%;
     padding-right: 43%;
     padding-top: 10%;
     padding-bottom: 10%;

 }

 /* re-roll buttons */

 .reroll {
     background-color: white;
     font-weight: 700;
     font-style: normal;
     width: 90px;
     height: 2em;
     line-height: 70%;
     vertical-align: middle;
     font-size: 1em;
     margin: 3px;

 }

 .reroll label {
    align-self: center;
    justify-content: center;
/*     padding-left: 10%;*/
/*     padding-right: 23%*/
/*     padding-top: 10%;*/
/*     padding-bottom: 10%;*/

 }

 #reroll-adj {
     background-color: white;
     font-weight: 700;
     font-style: normal;
     width: 90px;
     height: 2em;
     line-height: 70%;
     vertical-align: middle;
     font-size: 0.9em;
     margin: 3px;

 }

 .reroll-adj label {
   align-self: center;
    justify-content: center;

/*     padding-left: 19%;
     padding-right: 23%;
     padding-top: 10%;
     padding-bottom: 10%;
*/
 }


 /* >>>>> SECTIONS <<<<< */

 /* ---- NAVIGATION BAR ---- */

 .topnav {
    display: flex;
    justify-content: space-between;
     overflow: hidden;
     background-color: #000000;
     max-height: 3em;

        left: 0;
        top: 0;
        width: 100%;

 }

 .topnav a {
     justify-self: flex-end;
     float: right;
     display: inline-block;
     color: #FFFFFF;
     text-align: center;
     padding-left: 5px;
     padding-right: 5px;
     padding-top: 5px;
     padding-bottom: 5px;
     margin: 0px;

 }

 .topnav a:hover {
     background-color: lightgrey;
     color: black;

 }

 .topnav button {
     display: inline-block;
     align-self: right;
     font-family: "trade-gothic-next", sans-serif;
     font-size: 0.9em;
     font-style: normal;
     font-weight: 400;
     padding: 5px;
     text-align: center;
     transform: translate(-20%, 15%);
     margin-left: 5px;
     margin-right: 5px;
     border-radius: 2em;

 }

 .topnav button:hover {
     background-color: black;
     color: white;
     font-weight: 700;
     border: solid 1px #999;

 }

 #title-topnav {
     color: white;
     font-family: "orpheus-pro-condensed", sans-serif;
     font-size: 1.2em;
     font-style: normal;
     font-weight: 700;
     padding-left: 0.75em;
     transform: translate(0%, -50%);

 }

 #HelpButton {
     border-radius: 2em;
     border: solid 2px black;
     color: black;
     display: inline-block;
     font-family: "trade-gothic-next", sans-serif;
     font-size: 0.8em;
     font-style: normal;
     font-weight: 400;
     padding-bottom: 4px;
     padding-left: 10px;
     padding-right: 10px;
     padding-top: 4px;
     text-align: center;
     transition: all 0.3s;
     width: 90px;
     margin: 3px;
     transform: translateY(4px);

 }

 #HelpButton label {
     padding-left: 40%;
     padding-right: 40%;
     padding-top: 10%;
     padding-bottom: 10%;

 }

 #HelpButton:hover {
     background-color: black;
     border: solid 2px #999;
     color: white;
     font-style: normal;
     font-weight: 700;

 }

#DarkPact-header {
    display: none;
}


 /* ---- MAIN TITLE ---- */

 .header {
     display: flex;
     background-color: #ddd;
     text-align: center;
     padding: 1px;
     flex-direction: column;
     justify-content: center;

 }

 .header h1,
 .header h3 {
     font-family: "orpheus-pro-condensed", sans-serif;
     font-style: normal;
     font-weight: 700;
     line-height: 1.2;

 }

 .header h1 {
     font-size: 2em;

 }

 .header h3 {
     font-size: 1.5em;

 }

 /* ---- ROLL TYPE BUTTONS ---- */

 #SkillButtonsDiv {
     margin-top: 10px;
     margin-bottom: 10px;
     justify-content: space-evenly;

 }

 .skillbuttons label {
     display: inline-block;
     border-radius: 2em;
     border: solid 1px black;
     background-color: white;
     color: black;
     font-family: "trade-gothic-next", sans-serif;
     font-style: normal;
     font-weight: 700;
     font-size: 0.9em;
     padding: 5px;
     text-align: center;
     transition: all 0.3s;
     width: 107px;
     margin: 3px;
     box-shadow: 5px 5px 10px #BBB;

 }

 .skillbuttons input[type="radio"] {
     display: none;

 }

 .skillbuttons input[type="radio"]:checked+label {
     background-color: black;
     color: white;

 }

 .skillbuttons input[type="radio"]:hover+label {
     background-color: black;
     color: white;
     border: solid 2px #999;

 }


 /* ---- DATA ENTRY ---- */

 #RollSettings {
     display: flex;
     flex-direction: column;
     justify-content: right;
     background-color: white;
 }

 #user-input-menu {
     display: inline-flex;
     justify-content: center;

 }

 /* number entry field */
 .number-entry {
     font-family: "open-sans", sans-serif;
     font-weight: 400;
     font-style: normal;
     font-size: 1.15em;
     text-align: right;
     border-radius: 2em;
     margin-left: 10px;
     max-height: 1.5em;

 }

 .number-entry-label {
     font-family: "open sans", sans-serif;
     font-size: 0.9em;
     font-weight: 400;
     text-align: right;

 }

 /* highlight required number field */
 .required {
     background-color: rgba(22, 78, 79, 0.12);
     font-weight: 700;

 }

 #SpecialisedSwitchBox {
     transform: translateX(18px);

 }

 #HealthLevelMenu {
     width: 150px;

 }


 /* ---- RESULTS WINDOW ---- */

#ResultsWindow {
    justify-content: center;
}

 .ResultDisplay {
     display: flex;
     flex-direction: column;
     text-align: center;
     background-color: white;
     box-shadow: 10px 10px 25px #BBB;
     margin-top: 10px;
     margin-bottom: 10px;
     padding: 10px;
     min-width: 250px;
     max-width: 300px;
     max-height: 200px;
     line-height: 1;
     margin-left: auto;
     margin-right: auto;
 }

 .frenzyred {
    background-color: rgb(255, 0, 0);

}

 /* --- roll result text ---- */

 /* success/failure line */

 .Results {
     display: flex;
     font-family: "trade-gothic-next", sans-serif;
     font-weight: 700;
     font-style: normal;
     font-size: 2em;
     align-content: space-between;
     justify-content: center;
     margin: 0;

 }

 /* dice rolls values */

 .Rolls {
     font-family: "trade-gothic-next", sans-serif;
     font-weight: 400;
     font-style: normal;
     font-size: 1em;
     text-align: center;

 }

 /* additional result info */

 .Rolls2 {
     font-family: "trade-gothic-next", sans-serif;
     font-weight: 400;
     font-style: normal;
     font-size: 1em;
     text-align: center;

 }

 /* roll options sub-menus */

 #stepsideways,
 #rageroll,
 #damageselect {
     display: inline-block;

 }

 #rageroll {
     transform: translateX(15px);
 }

 #GauntletMenu {
     width: 180px;

 }

 #DamageTypeMenu {
     width: 150px;

 }

 #CrinosSwitch {
     margin-left: 12px;

 }

.RageOptions {
    transform: translateX(-15px);
}

 .RollsResults {
     margin: 0px;

 }


 /* ---- FOOTER ---- */

 .footer {
     margin-top: 15px;
     overflow: hidden;
     background-color: #000000;
     max-height: 3em;
     justify-content: space-between;
     align-items: center;
     padding: 5px;
/*     max-width: 95%;*/

     position: fixed;
     left: 0;
        bottom: 0;
        width: 100%;
     max-width: 700px;
 }

 .footer p,
 .footer a {
     font-family: "trade-gothic-next", sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 0.8em;
     color: white;

 }

 .footer img {
     padding: 5px;

 }