@font-face {
    font-family: diabloFont;
    src: url('../assets/ui/font/ExocetLight.ttf');
}

@font-face {
    font-family: lotrFont;
    src: url('../assets/ui/font/lotrelvenfont.ttf');
}


body {
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	cursor:default;
	font-family:diabloFont;
}

#content {
	height:900px;
	width:1850px;
	text-align: center;
	position: relative;
	margin:0px auto;
}

canvas {
	position:relative;
	display: inline;
	border: 1px solid black;
	z-index:0;
}

h1 {
	text-align: left;
}

h2 {
	text-align: left;
}

ul {
	text-align: left;
}

td {
	width: 200px;
}

#loadingtext {
	position:absolute;
	top:-250px;
	left:150px;
	font-size:2em;
	color: white;
}

/* UI ELEMENTS */

#UIWrapper {
	height:100%;
	width:1000px;
}

#topBar {
	display:none;
	z-index:1;
	position:absolute;
	height:50px;
	width:400px;
	top:0px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	background-color:transparent;
}
#enemyHealthBar {
	
	/*display:none;*/
	
	width:400px;
	height:100%;
	margin:0px auto;
	background-color:white;
	border:3px solid red;
	
	
	border-radius:20px;
}
#enemyHealthBarPercentage {
	
	/*display:none;*/
	
	background-color:red;
	width:75%;
	height:100%;
	
	border-radius:15px;
	border-radius:15px;
}
#enemyHealthBarName {
	
	/*display:none;*/
	
	position:absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	font-weight:bold;
	font-size:26px;
	padding-top:10px;
}

/* BOTTOM BAR - ABILITIES */
#bottomBar {
	display:block;
	z-index:1;
	position:absolute;
	height:160px;
	width:100%;
	bottom:-1px;
	left: 0px;
	
}
#abilityBar {
	
	/*display:none;*/
	display:inline-block;
	/*background-image:url('assets/ui/abilityBarBackground.jpg');*/
	width:1530px;
	height:100%;
	margin:0px auto;
	background-image:url("../assets/ui/abilityBarBackground.jpg");
	z-index:1;

}

.abilityBox {
	float:left;
	display:inline;
	width:180px;
	margin-left:35px;
	height:50%;
	background-color:white;
	border:1px solid black;
	margin-top:40px;
}

.abilityCooldown {

	
	background-color:gray;
	width:0%;
	height:100%;
	
}
.abilityName {
	font-family:"Times New Roman";
	position:absolute;
	font-weight:bold;
	font-size:22px;
	padding-top:3px;
	color:skyblue;
	margin-left:-50px;
}

/* CENTER BAR - INVENTORY */
#inventoryBar {
	display:none;
	z-index:10;
	position:absolute;
	height:550px;
	width:550px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top:80px;
	background-color:transparent;
	border:4px solid gold;
	border-radius:10px;
}
.popupBox {
	
	/*display:none;*/
	
	height:100%;
	background-color:transparent;
	background: rgba(243,226,199,1);
background: -moz-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(193,158,103,1) 47%, rgba(182,141,76,1) 51%, rgba(233,212,179,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(243,226,199,1)), color-stop(47%, rgba(193,158,103,1)), color-stop(51%, rgba(182,141,76,1)), color-stop(100%, rgba(233,212,179,1)));
background: -webkit-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(193,158,103,1) 47%, rgba(182,141,76,1) 51%, rgba(233,212,179,1) 100%);
background: -o-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(193,158,103,1) 47%, rgba(182,141,76,1) 51%, rgba(233,212,179,1) 100%);
background: -ms-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(193,158,103,1) 47%, rgba(182,141,76,1) 51%, rgba(233,212,179,1) 100%);
}

#itemList {
	float:left;
	width:50%;
	height:100%;
	background-color:transparent;
	overflow-y: scroll;
	
}

.inventoryItem:hover {
	border-color:white !important;
	cursor:pointer !important;
}

.inventoryItem {
	border:3px solid black;
	margin:20px;
	height:50px;
	background-color:purple;
}

.itemImg {
	float:left;
	width:50px;
	height:50px;
}

.itemName {
	margin-left:10px;
	padding-top:4px;
	float:left;
	width:140px;
	height:50px;
}

#itemDescriptionWrapper {
	float:left;
	width:50%;
	height:100%;
	background-color:transparent;
	text-align:center;
}

.inventoryHeading {
	font-weight:bold;
	font-size:24;
}

#itemDescription {
	margin:10px;
	text-align:center;
}

#weaponRarity {
	font-weight:bold;
	font-size:18;
	font-style:italic;
}

#selectedWeaponName {
	line-height: 1.5em;
    height: 3em; 
}

/* HEALTH AND FURY UI */
#healthBox, #furyBox{
	width:150px;
	height:150px;
	border:5px solid silver;
	background-color:transaprent;
}
#healthBox {
	float:left;
}
#furyBox {
	float:right;
}

#furyPercentage, #healthPercentage {
	position:absolute;
	width:150px;
	bottom:5px;
	max-height:150px;
}

#furyPercentage {
	background-color:orange;
	height:0%;
	position:absolute;
	
}
#healthPercentage {
	background-color:red;
	height:100%;
	
}

#abilityWrapper {
	height:100%;
	width:700px;
	margin: 0px auto;
}
.boxText {
	font-weight:bold;
	font-size:18;
	position:absolute;
	z-index:10;
	text-align:center;
	width:155px;
	color:white;
	margin-top:45px;
}

#currentHP {
	left:0;
}
#currentFury {
	right:0;
}

#characterButtons {
	width:120px;
	height:100%;
	position:absolute;
	margin-left:60px;
}

#systemButtons {
	width:120px;
	height:100%;
	position:absolute;
	top:0;
	right:300px;
}

.uiButton:hover {
	color:gold;
	cursor:pointer;
}
.uiButton {
	margin-top:8px;
	background-image:url("../assets/ui/buttonBackground.png");
	height:70px;
	width:200px;
	background-size: 200px 70px;
	padding-top:20px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	font-weight:bold;
	color:white;
	text-align:center;
}

/* CHARACTER STATS BOX */
#characterBar {
	display:none;
	z-index:10;
	position:absolute;
	height:550px;
	width:550px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top:80px;
	background-color:transparent;
	border:4px solid gold;
	border-radius:10px;
}

.popupBoxWrapper {
	float:left;
	width:100%;
	text-align:center;
}

/* MENU BAR */
#menuBar {
	display:none;
	z-index:15;
	position:absolute;
	height:250px;
	width:400px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top:200px;
	background-color:transparent;
	border:4px solid gold;
	border-radius:10px;
}

/* HELP BAR */
#helpBar {
	display:none;
	z-index:15;
	position:absolute;
	height:650px;
	width:700px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top:80px;
	background-color:transparent;
	border:4px solid gold;
	border-radius:10px;
	font-family:"Times New Roman";
}

#helpBar .popupBox {
	width:700px;
}

/*
**************MENU STUFF*******************
*/

/*GAME OVER*/
#gameOverScreen {
	display:none;
	z-index:50;
	position:absolute;
	height:100%;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top:0;
	background-color:transparent;
	border:4px solid gold;
	border-radius:10px;
}
#gameOverScreen .popupBox {
	background-image:url('../assets/ui/gameOver.jpg');
	background-size:100% 100%;
}

#gameOverScreen .popupBox .popupBoxWrapper .uiButton {
	width:400px;
	height:150px;
	background-size: 400px 150px;
	padding-top:40px;
	font-size:36px;
}

/*MAIN MENU*/
#mainMenuScreen {
	display:block;
	z-index:50;
	position:absolute;
	height:100%;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top:0;
	background-color:transparent;
}
#mainMenuScreen .popupBox {
	background-image:url('../assets/ui/mainMenu.jpg');
	background-size: 100% 100%;
}

#howToPlayBtn:hover + #howToPlayDiv {
	display:block;
}

#howToPlayDiv {
	display:none;
	color:gold;
	font-weight:bold;
	font-family:"Times New Roman";
}

/* LOADING */

#loadingBar {
	display:block;
	border:4px solid gold;
	border-radius:10px;
}
#victoryBar {
	display:none;
}

#loadingBar, #victoryBar, #victoryText {
	z-index:100;
	position:absolute;
	height:100%;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top:0px;
	background-color:transparent;
}

#loadingBar .popupBox, #victoryBar .popupBox {
	width:100%;
	height:100%;
	background:black;
	color:white;
	font-size:64;
}

#victoryBar .popupBox {
	border-style:none;
}
#loadingBar .popupBox *, #victoryBar .popupBox *{
	text-align:center;
	width:100%;
	
}
#loadingBar .popupBox h3{
	font-size:58;
	font-family:lotrFont;
}

#victoryBar .popupBox h3 {
	font-size:58;
}

#victoryBar .popupBox h4 {
	font-size:38;
	font-family:lotrFont;
}

#victoryBar .popupBox .popupBoxWrapper .uiButton {
	width:400px;
	height:150px;
	background-size: 400px 150px;
	padding-top:40px;
	font-size:36px;
}

#victoryText .popupBox h3 {
	color:gold;
	font-size:58;
}

#victoryText {
	display:none;
}

#victoryText .popupBox {
	background:transparent;
	border-style:none;
}