/* Font */
@font-face {
    font-family: "mono";
    src: url("3rd-party/SourceCodePro-Regular.ttf.woff") format('woff');
}

@font-face {
    font-family: "mono";
    src: url("3rd-party/SourceCodePro-Bold.ttf.woff") format('woff');
    font-weight: bold;
}


.explored {
    color: #b3b3b3;
    background-color: black;
    font-weight:bold;
    /* Add border to mitigate offsets with border-style cursor */
    border-style: solid;
    border-width: 2px;
    border-color: black;
}

.normal {
    /*color: white; */
    background-color: black;
    font-weight:bold;
    /* Add border to mitigate offsets with border-style cursor */
    border-style: solid;
    border-width: 2px;
    border-color: black;
}

.cursor {
    /*background-color: blue; */
    border-color: blue;
    border-style: solid;
    border-width: 2px;
    color: white;
}

/* Run the gamut from red to cyan for faction markers*/
.hostile {
    background-color: red;
}

.unfriendly {
    background-color: orange;
}

.neutral {
    background-color: yellow;
}

.friendly {
    background-color: skyblue;
}

.helpful {
    background-color: cyan;
}

/*https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div */

/*
*  position: relative gives a new position context
*/

#output {
    position: relative;
}

/*
*  Position the keypad element using the top-left
*  of the wrapper element
*/

.keypad {
    position: absolute;
    top: 2px;
    left: 2px;
}

/* Only hides the keypad if we're not a touch device */
.no-touch .keypad {
    opacity: 0 /* hide... */
}

/* Checks for no_touch anywhere in the DOM tree */
.no-touch .keypad:hover {
    opacity: 1; /* unless hovered */
}


.keypad_btn {
    /*background-color: transparent; */
    background-color: black;
    opacity: 0.6;
    color: #42D6CA;
}

.no-touch .keypad_btn {
    opacity: 0.85; /* almost completely opaque since we disappear when not hovered */
}

/* Styling for modal */

.modal {
    position: fixed; /* Stay in place */
    z-index: 99; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
.modal-content {
    background-color: #fefefe;
    /*margin: 15% auto; */ /* 15% from the top and centered */
    /*padding: 20px; */
    border: 1px solid cyan;
    width: 380px;
    position: relative; /* To make top and left work */
    top: 30px;
    left: 5px;
}