gamesheet.css

@font-face { font-family: Lato; src: url('./fonts/Lato-Light.ttf'); }
@font-face { font-family: Lato; font-weight: bold; src: url('./fonts/Lato-Semibold.ttf');}

body {
	background-image: radial-gradient(circle at 50% 50%, rgba(35,35,60,1) 0%, rgba(30,30,30,1) 90% );
	font-family: Lato;
	overflow-x: hidden;
	margin:0px;
	height:100vh;
	width:100vw;
}

#statCanvas {
/*	box-sizing: border-box; */
/*	-moz-box-sizing: border-box; */
/*	-webkit-box-sizing: border-box; */
/*	border:1px solid #000000; */
	background-color: #d9d9d9;
	/*width: 820px;  */
	width: 620px;
	height: 240px;
}

#centerTest {
	position:absolute;
	width:10px;
	left:-5px;
	top:-5px;
	height:10px;
	background-color:blue;
	border-radius:180px;
	z-index:20000;
}

#gameContainer canvas {
	width:1024px;
	height:768px;	
	cursor:crosshair;
} 

#overallStatistics {
	Width:calc(20% - 10px);
	margin-left:10px;
	height:40%;
	float:left;
}

.smallTextForUtilities {
    position:relative;
    top:-8px;
		font-size:11px;
		font-weight: bold;
    color:dimgray;
    text-align:center;
    width:100%;
}

#overallContainer {
  	height:768px;
	width:1024px;
	/*height:600px;
	width:800px; */
	/* margin:15px auto; */
	position: absolute;
  top: calc(50% - 35px);
  left: 50%;
  transform: translate(-50%, -50%);
}

.specificGunStat {
	margin-top:10px;
	width:18%;
	margin-left:1%;
	margin-right:1%;
	float:left;
	height:200px;
	font-size:16px;
	text-align:center;
}

.selectedGunShow {
	border: 1px solid black !important;
}

.specificGunStat.notUsed {
	color:#d9d9d9;
}

#restartGameFromStats {
	position:absolute;
	width:200px;
	height:25px;
	text-align:center;
	line-height:25px;
	color:black;
	border: 1px black solid;
	border-radius:90px;
	/*top:725px;
	left:390px; */
	top: 680px;
	left: calc(512px - 100px);
	display:block;
	cursor:pointer;
}

#gameStatistics {
	display:none;
	background-color:white;
	position:absolute;
	height:768px;
	width:1024px;
	/*height:600px;
	width:800px; */
}

.inventoryColorActive {
	color:white !important;
}

.inventoryColorNotActive {
	opacity:0.7;
	color:#d1d1d1 !important;
}

#gameContainer {
	width: 1024px;
	height:768px;
	/*width: 800px;
	height:600px; */
	background-color:green;
}

#gameVision {
	float:left;
	position:relative;
  width:1024px;
	height:35px;
	background-color:white;
}

#gameClip {
    padding-top:5px;
	height:35px;
	width:70px;
	float:left;
	text-align:center;
}

#gameInventory {
    padding-top:5px;
	cursor:pointer;
	height:35px;
	width:105px;
	float:right;
	text-align:center;
}

.pickedUp {
	border:1px solid black !important;
}

#pickUp {
	width:15px;
	height:15px;
	line-height:15px;
	text-align:center;
	position:absolute;
	margin-top:2px;
	margin-left:1px;
	font-size: 10px;
	color:red;
	display:inline;
	border:0px solid black;
	border-radius: 90px;
}

#pickUpS {
	width:15px;
	height:15px;
	line-height:15px;
	text-align:center;
	position:absolute;
	margin-top:2px;
	margin-left:1px;
	font-size: 10px;
	color:red;
	display:inline;
	border:0px solid black;
	border-radius: 90px;
}

#gameSchematics {
    padding-top:5px;
	height:35px;
	width:95px;
	float:right;
	text-align:center;
	cursor:pointer;
}

#inventoryBackpack {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding:15px;
	border: 1px solid black;
	position:relative;
	width:250px;
	font-size: 14px;
	background-color:rgba(255,255,255,0.2);
	/* left: 37.8%; */
	left:34.4%;
	margin:0 auto;
	height:400px;
	top:-400px;
    z-index:0;
	cursor:crosshair;
	pointer-events: all;
}

#inventoryBackpack.closedInventory {
	z-index:-1;
	pointer-events: none;
}

.craftSchematicContainer {
	color:white;
	display: inline;
}

.closedInventory {
	opacity: 0;
	transition: opacity .1s ease-in-out;
	-moz-transition: opacity .1s ease-in-out;
	-webkit-transition: opacity .1s ease-in-out;

}

.unselect {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.openInventory {
	opacity: 0.4;
	transition: opacity .1s;
	-moz-transition: opacity .1s ease-in-out;
	-webkit-transition: opacity .1s ease-in-out;
}

.inventoryInsideEmpty {
	color:grey;
}

.inventoryInsideAvailable {
	color:black;
}

.gameItem {
	width:60px;
	height:35px;
	float:left;
    padding-top:5px;
	border: 0px solid grey;
	border-style: none solid none solid;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	cursor:pointer;
	background-repeat: no-repeat;
	background-position: center;
	text-align:center;
	color:black;
	font-style: bold;
	opacity:0.3;
}

.gameItemDivider {
	width:0px;
	height:25px;
	float:left;
}

#returnToSchematics {
	box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
	margin-top:20px;
	float:right;
	width:48%;
	color:white;
	margin-left:2%;
	height:25px;
	border: 1px solid white;
	text-align:center;
	cursor:pointer;
	transition: all .1s linear;
}

#obtainedSchematics p {
	color:white;
}

#notObtainedSchematics p {
	color:white;
}

#returnToSchematics:hover {
	background-color:white;
	color:black;
	border: 1px solid black;
	transition: all .1s linear;
}

#craftSchematic {
	box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
	float:left;
	width:48%;
	margin-top:20px;
	margin-right:2%;
	height:25px;
	color:white;
	border: 1px solid white;
	text-align:center;
}

.active:hover {
	background-color:white;
	color:black !important;
	border: 1px solid black;
	transition: all .1s linear;
}

.obtained {
	font-weight: bold;
	opacity: 1;
}

#weaponMachete {
	background-image: url("./graphics/weapons/machete.png");
	background-size: 50px 30px;
}

#weaponPistol {
	background-image: url("./graphics/weapons/pistol.png");
	background-size: 50px 30px;
}

#weaponShotgun {
	background-image: url("./graphics/weapons/shotgun.png");
	background-size: 50px 30px;
}

#weaponMachinegun {
	background-image: url("./graphics/weapons/machinegun.png");
	background-size: 50px 30px;
}

#weaponFlamethrower {
	background-image: url("./graphics/weapons/flamethrower.png");
	background-size: 40px 20px;
}

.schematic {
	margin-bottom:-5px;
	width:100%;
	height:25px;
}

.schematicNotObtained {
	color:#d1d1d1 !important;
}

.schematicObtained {
	box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
	color:white;
	cursor:pointer;
}

.exitInventory {
	color:white;
	width:15px;
	height:15px;
	position:relative;
	top:-15px;
	left:207px;
	text-align:center;
	cursor:pointer;
}

.schematicObtained:hover {
	-webkit-transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
	cursor:pointer;
	color:#d6d4d3;
}

#testbutton {
    width: 200px;
    height:auto;
    min-height: 100px;
    position: absolute;
    background-color:blue;
}

#missionProgressContainer h4 {
	margin-top:5px;
}

#missionProgressContainer .amountDisplay {
	font-size:12px;
	float:right !important;
	font-weight:none;
	min-width:20px;
	display: table-cell;
}

.missionContentSpan {
	margin-left: -5px;
	margin-top:-10px;
	margin-bottom:-10px;
}

#missionProgressContainer {
    webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    width: 230px;
    height: auto;
    padding:5px;
    opacity:0.4;
    position: absolute;
    font-size: 12px;
    background-color:rgba(255,255,255,0.2);
    border: 1px solid black;
    top: 50px;
    overflow:hidden;
    color:white;
}

#unpause {
	margin-top:-15px;
	width:100vw;
	height:100vh;
	position:fixed;
	z-index:99999;
	background-color: rgba(30,30,30,0.8)
}

#unpauseButton {
	color: white;
	font-size: 150%;
	text-align: center;
	margin-top: 400px;
	width: 120px;
	position: relative;
	height: 35px;
	margin-left: calc(50% - 60px);
	font-weight: bold;
	cursor: pointer;

}

#unpauseButton span {
	font-size: 40%;
}

#missionInteractionContainer {
    z-index: 1;
    font-size:14px;
    webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
    width: 450px;
    height: auto;
    position: absolute;
    background-color: rgba(255,255,255,0.2);
    border: 1px solid black;
		top: 615px;
		margin-left: calc(512px - 225px);
    color:white;
}

#missionInteractionContainer p {
    padding: 15px;
    margin-top: -5px;
}

#missionInteractionContainerExit {
    color:white;
	width:15px;
	height:15px;
	position:absolute;
	top:-3px;
	left:436px;
	text-align:center;
	cursor:pointer;
    z-index: 50;
	padding-bottom: 2px;
    padding-left: 2px;
}

.progressActive {
   opacity:0.4;
}

.progressNotActive {
   opacity:0;
}

.inventoryNameDisplay {
    display: table-cell;
    min-width: 180px;
    font-weight: bold;
    text-align: left;
}

.inventoryCountDisplay {
    font-weight: bold;
    display: table-cell;
    min-width: 20px;
}

#inventoryBackpack h4 {
	color:white;
	border-bottom:1px solid white;
	padding-bottom:7px;
	margin-top:-25px;
	margin-bottom: 15px;
}

#gameHealth {
	height:35px;
    padding-top:5px;
	width:50px;
	float:left;
	text-align:center;
	color:black;
    font-weight: bolder;
}

#gameWonButton {
    position: absolute;
    background-color: rgba(255,255,255,0.2);
    opacity: 0.4;
    color: white;
    border: 1px solid black;
    height: 50px;
    width: 300px;
    padding: 5px;
    text-align: center;
    top: calc(50% - 70px);
    cursor: pointer;
    left: calc(50% - 150px);
}

#gameHealth.lowHealth {
	color:red;
}

#maskCanvas {
	position:absolute;
	top:8px;
	left:8px;
}

.gameAbilityContainer {
  padding-left:5px;
  padding-top:2px;
  padding-bottom:2px;
  width:200px;
  overflow:hidden;
  height:30px;
  pointer-events:none;
}

.gameAbility {
  z-index:100;
  float:left;
  width:25px;
  height:25px;
  border-radius:90px;
  display:inline-block;
  pointer-events:auto;
}

.activated {
    text-align:center;
    color:white;
    font-size:10px;
    line-height:24px;
    cursor:pointer;
    border: 1px solid white;
}

.deactivated {
  border: 1px solid grey;
}

.deactivatedName {
  color: grey !important;
}

.highlightMission {
    animation: highlights 1s infinite;
}

@keyframes highlights {
    0% {
        -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
    }
    50% {
        -webkit-box-shadow: 0px 0px 35px 0px rgba(255,255,255,1);
        -moz-box-shadow: 0px 0px 35px 0px rgba(255,255,255,1);
        box-shadow: 0px 0px 35px 0px rgba(255,255,255,1);
    }
    100% {
        -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
    }

}

#gameAbilityOverallContainer {
    position: absolute;
	top: 300px;
	margin-left:5px;
	pointer-events:none;
}

.gameAbilityName {
  display:inline-block;
  line-height:27px;
  overflow:hidden;
  font-size:12px;
  height:30px;
  padding-left:5px;
	opacity:0;
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color:white;
  -webkit-transition: all 200ms linear 0s;
  -moz-transition: all 200ms linear 0s;
  -o-transition: all 200ms linear 0s;
  transition: all 200ms linear 0s;
}

.gameAbility:hover ~ .gameAbilityName {
		opacity:1;
		
}

.abilityKey {
	width: 35px;
	color: rgba(255,255,255,0.3);
	display: inline-block;
	line-height: 27px;
	overflow: hidden;
	font-size: 10px;
	height: 30px;
	padding-left: 5px;
}	

/* index.html styles  */