/* don't allow copy-paste of content.  it messes up key capture */
* {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

canvas {
    margin: .5rem;
    margin-top: 1.1rem;
    display: block;
    height: calc(100% - 1rem);
    width: calc(100% - 1rem);
    border-width: 1px;
    border-color: gray;
    border-style: solid;
}

body {
    background-color: #222;
    color : #ccc;
    line-height: normal;
    height: 100%;
}

span {
    vertical-align: top;
}

* { 
    box-sizing: border-box;
    vertical-align: top;

    font-size : 14px;
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

}

.page {
    display: flex;
    flex-wrap: wrap;
}

.col {
    display: inline-block;
    vertical-align: top;
}
.col.primary {
    width: calc(min(500px,100% - 1rem));
    height: calc(min(500px,100% - 1rem));
}
.col.secondary {
    width: 30rem;
}

fieldset {
    /* padding: 0rem 0.75rem 0rem 1rem; */
    margin: .5rem;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: gray;
    min-height: 15em;
}

fieldset.hidden { border-width: 0 0 0 0; }

fieldset.mapview { text-align: -webkit-center; }

fieldset > legend {
    color: gray;
    font-size: larger;
    padding: 0px .5rem;
    margin-bottom: 0px;
    margin-left: 0rem;
    text-align: left;
}

#info-box {
    position: absolute;
    background-color: black;
    border: 1px solid gray;
    padding: 10px;
    display: none;
}

#info-box.show {
    display: block;
}

#welcome {
    height: calc(100% - 1rem);
}

#autosaved {
    position: fixed;
    bottom: 0;
    right: -300px;
    padding: 0.5rem;
    background-color: black;
    color: white;
    border: 1px solid gray;
    border-radius: 5px;
    margin: 0.5rem;
}

#autosaved.slidein {
    -webkit-animation: slidein 2.0s ease-out;
    -moz-animation: slidein 2.0s ease-out;
    animation: slidein 2.0s ease-out;
    display: inline-block;
}


/*-----------------------------------------------
            responsive sizing of columns 
-----------------------------------------------*/


@media only screen and (max-width: 1100px) {
    div.col.primary {width: calc(min(500px, 100%-1px));}
    div.col, div.col.secondary {width: 100%;}
    div.col.primary {-webkit-order:1;}
    div.col.secondary {-webkit-order:2;}    
    div.col.primary {order:1;}
    div.col.secondary {order:2;}
}


/*-----------------------------------------------
            specific column types 
-----------------------------------------------*/

.stats div>span:nth-child(1) {
    min-width: 15rem;
    width: 15rem;
    display: inline-block;
}

.stats div>span:nth-child(2) {
    min-width: 6rem;
    width: 6rem;
    text-align: right;
    display: inline-block;
    font-family: monospace;
}

.shakeable div.shake>span {
    -webkit-animation: bounce .5s ease-out;
    -moz-animation: bounce .5s ease-out;
    animation: bounce .5s ease-out;
    display: inline-block;
}


#messagelog div {
    -webkit-animation: bounce .5s ease-out;
    -moz-animation: bounce .5s ease-out;
    animation: bounce .5s ease-out;
}
#messagelog div:nth-child(n+10) { opacity:65%; }
#messagelog div:nth-child(n+13) { opacity:35%; }

.achievements { color: goldenrod; }


.hidden {
    visibility:hidden;
    display:none;
}


/*-----------------------------------------------
            clicking actions 
-----------------------------------------------*/
button {
    background-color: black;
    color: white;
    border: none;
    width: 12rem;
    height: 2.5rem;
    padding: 0.1rem;
    border-radius: 3px;
    border-style: solid;
    border-color: gray;
    border-width: 1px;
}

/* this is something weird that I don't understand why it is just in upgrades */
#upgrades button {
    margin: 0.15rem;
}

/* we want a css effect when the button is pressed */
button:active {
    /* make the button appear to be pressed by offsetting it*/
    position:relative;
    top: 5px;
    left: 5px;
}

/* we want a css effect when the button is pressed */
button:hover {
    background-color: darkgray;
    color: white
}

button[disabled] {
    color: gray;
}

p.insufficient {
    color: red;
}

/*-----------------------------------------------
            bounce effect for messages 
-----------------------------------------------*/

/* Webkit, Chrome and Safari */
@-webkit-keyframes bounce {
	0% {-webkit-transform:translateX(-1rem);}
	25% {-webkit-transform:translateX(1rem);}
	50% {-webkit-transform:translateX(-0.5rem);}
	75% {-webkit-transform:translateX(0.5rem);}
	100% {-webkit-transform:translateX(0);}
}

/* Mozilla Firefox 15 below */
@-moz-keyframes bounce {
	0% {-moz-transform:translateX(-1rem);}
	25% {-moz-transform:translateX(1rem);}
	50% {-moz-transform:translateX(-0.5rem);}
	75% {-moz-transform:translateX(0.5rem);}
	100% {-moz-transform:translateX(0);}
}

/* W3, Opera 12+, Firefox 16+ */
@keyframes bounce {
	0% {transform:translateX(-1rem);}
	25% {transform:translateX(1rem);}
	50% {transform:translateX(-0.5rem);}
	75% {transform:translateX(0.5rem);}
	100% {transform:translateX(0);}
}

/*-----------------------------------------------
            slide in effect for autosaved
-----------------------------------------------*/

@keyframes slidein {
    0% {right: -300px;}
    15% {right: 0;}
    85% {right: 0;}
    100% {right: -300px;}
}