* {
	font-family: "Lucida Console", Monaco, monospace;
	color: white;
}

form {
	background: black;
	display: flex;
}

textarea {
    flex: 1;
	border: 0px solid;
	background: black;
	font-size: 125%;
}

select {
    flex: 1;
	border: 0px solid;
	background: black;
	font-size: 125%;
}

input[type=text] {
    flex: 1;
	border: 0px solid;
	background: black;
	font-size: 125%;
}

input[type=submit] {
    display:none;
}

body {
	background:#333333;
	/*background-image: url("images/bg.jpg");*/
}

img.icon {
	margin-bottom: -2px;
}

.content {
  overflow: auto;
  position: relative;
}

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -2;

  display: block;
  background-image: url('images/bg.jpg');
  background-size:cover;
  width: 100%;
  height: 100%;

  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
}


#turnphase {
	padding-top: 3px;
	font-size: 105%;
	margin-right: 5px;
}

.error {
	color: red;
}
.subtle {
	color: grey;
}
.debug {
	color: #0094FF;
}

.card {
	color: orange;
}
.rezzed {
	font-weight: bold;
	color: yellow;
}

.advancement {
	color: #7FC9FF;
}

canvas {
	padding: 0;
	margin: 0;
	overflow: hidden;
	position:fixed;
	top:0;
	left:0;
	z-index: 0; /*-1*/
}

#footer {
 z-index:2;
 position:fixed;
 bottom:0;
 left:0;
 height:65px;
 background:#77777799;
 width:430px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-top-right-radius: 5px;
}

#header {
 position:fixed;
 top:0;
 right:0;
 height:65px;
 background:#77777799;
 width:430px;
 float:right;
 display: flex;
 align-items: center;
 justify-content: center;
 padding-left: 10px;
 border-bottom-left-radius: 5px;
}

#menubar {
 position:fixed;
 top:0;
 left:0;
 height:76px;
 background:#77777799;
 width:76px;
 float:left;
 display: flex;
 align-items: left;
 justify-content: left;
 padding: 5px;
 border-bottom-right-radius: 5px;
}

/* unfortunately the css spec doesn't allow y scroll with x overflow visible...*/
/* e.g. https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue */
/* my approach, since we only need to see that while hovering the history entry, is to temporarily expand the left padding and margin (toggle from 100% and -100% to 0) in javascript*/
#history-wrapper {
 position:fixed;
 top:65px;
 right:0;
 width:56px;
 height:100%;
 float:right;
 line-height: 50%;
 overflow-y: auto;
 overflow-x: visible;
 scrollbar-width: thin;
 scrollbar-color: #7F8387 #5B6063;
}

/* chrome desktop doesn't yet support thin scrollbar so we need all this */
*::-webkit-scrollbar {
  width: 10px;
}
*::-webkit-scrollbar-track {
  background: #5B6063; 
}
*::-webkit-scrollbar-thumb {
  background: #7F8387; 
}
*::-webkit-scrollbar-thumb:hover {
  background: #66696C; 
}

#history {
 width:56px;
 display:grid;
 background:#77777799;
 border-bottom-left-radius: 15px;
}

.historyentry-corp {
	background-image: url("images/history_corp.png");
	height: 50px;
	width: 50px;
}
.historyentry-runner {
	background-image: url("images/history_runner.png");
	height: 50px;
	width: 50px;
}
.historyentry-corp-small {
	background-image: url("images/history_corp_small.png");
	height: 50px;
	width: 50px;
}
.historyentry-runner-small {
	background-image: url("images/history_runner_small.png");
	height: 50px;
	width: 50px;
}
.historyentry-runner-run {
	background-image: url("images/history_runner_run.png");
	height: 50px;
	width: 50px;
}

.historycontents {
	height: 50px;
	width: 50px;
	display: grid;
	align-items: center;
	justify-content: center;
	margin:0;
	padding:0;
	font-size: 50%;
	text-shadow: 0px 0px 5px black, 0px 0px 5px black;
	-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Safari */
		 -khtml-user-select: none; /* Konqueror HTML */
			 -moz-user-select: none; /* Firefox */
				-ms-user-select: none; /* Internet Explorer/Edge */
						user-select: none; /* Non-prefixed version, currently
																	supported by Chrome and Opera */
}

.fullscreen-button {
	position:fixed;
	top:0;
	right:0;
	margin-top:10px;
	margin-right:5px;
	width:44px;
	height:44px;
	background:url('images/fullscreen.png') center no-repeat; background-size: 100% 100%;
}

#fps {
 display:none;
 position:fixed;
 top:87px;
 left:0;
 float:left;
 text-shadow: 1px 1px 3px black, 1px 1px 3px black;
}

#footer h2, #header h2 {
	margin-right: 12%;
	font-size: 150%;
	text-shadow: 0px 0px 5px black, 0px 0px 5px black;
	-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Safari */
		 -khtml-user-select: none; /* Konqueror HTML */
			 -moz-user-select: none; /* Firefox */
				-ms-user-select: none; /* Internet Explorer/Edge */
						user-select: none; /* Non-prefixed version, currently
																	supported by Chrome and Opera */
}

.button {
    background-color: #f1f1f1;
    border: 1px solid grey;
    color: black;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
}

.button:hover {
    background-color: grey;
    color: white;
}

.button:disabled {
	background-color: #aaaaaa;
	color: #777777;
	cursor: default;
}

.close-cross {
	font-size: 150%;
	float: right;
}
.close-cross:hover {
    text-decoration: underline;
		cursor: pointer;
}
.close-cross:active {
		text-decoration: none;
		cursor: pointer;
}

#cmdform {
	display:none;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding: auto; /* Location of the box */
    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 */
	  align-items: center;
	  justify-content: center;
}

.modal-content {
		display: inline-block;
    background-color: #092630BB;
    margin: auto;
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 40px;
		padding-right: 40px;
    border: 1px solid #7C9396;
		color:#7C9396;
}

.modal-content p,
.modal-content span
 {
	 	font-weight: 550;
		color:#7C9396;
		-webkit-touch-callout: none; /* iOS Safari */
	    -webkit-user-select: none; /* Safari */
	     -khtml-user-select: none; /* Konqueror HTML */
	       -moz-user-select: none; /* Firefox */
	        -ms-user-select: none; /* Internet Explorer/Edge */
	            user-select: none; /* Non-prefixed version, currently
	                                  supported by Chrome and Opera */
}

.modal-content span {
	padding:20px;
	line-height: 4;
	font-size: 120%;
}

.modal-content p:hover,
.modal-content span:hover
 {
    text-decoration: underline;
		cursor: pointer;
}

.modal-content p:active,
.modal-content span:active,
 {
		text-decoration: none;
		background-color: black;
		cursor: pointer;
}

.modal-content span:hover {
	background-color: #FFFFFF33;
	border-radius: 10px;
}
.modal-content span:active {
	background-color: #FFFFFFBB;
	border-radius: 10px;
}

.modal-content-inactive {
		display: inline-block;
    background-color: #092630BB;
    margin: auto;
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 40px;
		padding-right: 40px;
    border: 1px solid #7C9396;
		color:#7C9396;
}
.modal-content-inactive p,
.modal-content-inactive span 
{
	 	font-weight: 550;
		color:#7C9396;
}
.modal-content-inactive a {
    text-decoration: none;
}
.modal-content-inactive a:hover {
    text-decoration: underline;
		cursor: pointer;
}
.modal-content-inactive a:active {
		text-decoration: none;
		cursor: pointer;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: right;
  vertical-align: center;
  border-radius: 6px;
  border: 1px solid white;
  padding: 5px;
  position: absolute;
  z-index: 1;
  top: -16px;
  right: 100%;
  line-height: 100%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

p.acknowledgements {
	font-size: 90%;
}

.acknowledgements em {
	color:#7C9396;
}

p.disclaimer {
	font-size: 80%;
}

div.options {
	display:inline-block;
	padding:15px;
}

#rewind-select {
	opacity:1;
	border:1px solid #7C9396;
}
#rewind-select:disabled {
	opacity:0.5;
}

#text-render-lists {
	margin-top:5%;
}
#text-render-lists div {
	border:1px solid grey;
	vertical-align: text-top;
	margin:1px;
	padding:1px;
	display:inline-block;
}
.text-card {
	display:block;
}