@font-face{
	font-family:"AvQest";
    src: url('https://chazu.arkku.net/files/font/AvQest.ttf');	
}


*, *:before, *:after {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	zoom: reset;
    touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.hidden {
	display:none!important;
}

body{
	font-family: "AvQest", Arial;
	background-color:#242424;
	background-color:#151515;
	cursor: default;
	display:flex;
    justify-content: center;
	align-items:center;
}

#content {

}

#waypoint-selector {
	xborder: 1px solid #dcbf7d;
	position:relative;
	xoverflow:hidden;
	max-width:600px;
	width:100%;
	height:90vh;
	min-height: 600px;
	padding:0px 5px 0px 5px;

	xmargin-left:auto;
	xmargin-right:auto;
	width:420px;
	background-image:url("../img/arreat_background2.jpg");
	user-select:none;
	box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.8),
				0px 0px 10px 0px rgba(0, 0, 0, 0.8),
				inset 0px 0px 10px 10px rgba(0, 0, 0, 0.8);
	



	display:flex;
	flex-direction:column;
	align-items: center;
	justify-content: start;
}

#act-tabs {	
	margin-top: 10px;
	font-size:2em;
	xline-height:2em;	
	width:100%;
	font-weight:bold;
	text-align:center;
	text-shadow: -1px 1px 2px #666666;
	position:relative;
	display:flex;
    justify-content: center;
	justify-content: space-evenly;
}


.act-tab {
	xborder:1px solid red;
	width:18%;
	height:40px;
	border: 2px solid #dcbf7d;
	box-shadow: inset 0 0 30px #000000;	
	cursor:pointer;
	background-color:rgba(0, 0, 0, 0.3);
}

.act-tab:hover {
	box-shadow: inset 0 0 10px #000000;	

	xbackground-color:rgba(0, 0, 0, 0.3);
}

.act-tab.selected {
	xborder:1px solid lime;
	border-bottom:none;
	box-shadow:none;
	background-color:rgba(0, 0, 0, 0.0);
}

#act-tabs > .mini-line {
	xborder:1px solid red;
	height:100%;
	flex:1;
	border-bottom: 2px solid #dcbf7d;
}


#middle-label {
	xborder:1px solid lime;
	width:100%;
	xheight:7%;
	color: #e2e9e4;
	text-shadow: 0px 2px 3px #000000, 2px 2px 0px rgba(0, 0, 0, 0.817);
	padding: 5px 5px 10px 5px;
	xtext-align:center;
	font-size: 1.5em;
	xline-height:50px;
	box-shadow: inset 0 -10px 10px 0px rgba(0, 0, 0, 0.5);
	display:flex;
	align-items: center;
	justify-content: center;


}

#wp-list-container {
	outline: 1px solid #dcbf7d;
	outline: 1px solid #a99360;
	border-radius:0px;
	width:100%;
	xheight:90%;
	xflex:1;
	xmax-height:480px;
	
	display:inline-flex;
	flex-direction: column;
	align-items: start;
	justify-content: start;
	color: #e2e9e4;
	text-shadow: 0px 2px 3px #000000;
	background-image:url("../img/dark_stone4.jpg");
	xpadding:10px;	


	border-style: solid;
	border-image-source: url('../img/border_simple.png');
	border-image-slice: 150;
	border-image-width: 3em 0em;
	border-image-outset: 1;
	border-image-repeat: stretch;

	box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.8),
				0px -5px 5px 0px rgba(0, 0, 0, 0.5),
				0px 5px 5px 2px rgba(0, 0, 0, 0.8);
}

.wp-list {
	xborder:1px solid lime;
	xmargin-top: 10px;
	font-size: 1.3em;
	width:100%;
	margin: 10px 0px 10px 10px;
}

.wp-list > .item {
	xborder:1px solid red;
	width:100%;
	xline-height: 50px;
	height:50px;
	cursor:pointer;
	position:relative;
	display:flex;
	align-items: center;
	justify-content: start;
}

.wp-list > .item:hover {
	background-color:rgba(0, 0, 0, 0.3);
}

.wp-list > .item.selected {
	xborder:1px solid lime;
	color: #ff8000;
	color: #a79a6d;
	xoutline: 5px double grey;
	z-index:1;
	background-color:rgba(0, 0, 0, 0.7);
}

.wp-list > .item.selected  > .icon  {
	xbackground-image:url("../img/icon_pressed.jpg");	
}



.wp-list > .item:active > .icon {
	background-image:url("../img/icon_pressed.jpg");	
}

.wp-list > .item:active {
	color: #5555ce;
}

.wp-list > .item > .icon {
	width:50px;
	height:50px;
	margin-right:25px;
	border: 1px solid #dcbf7d;
	pointer-events:none;

	border-bottom:none;
	background-image:url('../img/icon.jpg');
	background-size:contain;
	background-position: center;
	background-repeat:no-repeat;
	
	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.8),
	5px 5px 5px 0px rgba(0, 0, 0, 0.5);
}

.wp-list > .item > .icon:last-of-type {
	border-bottom: 1px solid #dcbf7d;	
}

.wp-list > .item > .name {
	pointer-events:none;
	xborder:1px solid grey;
}


#waypoint-selector > .bottom-area  {
	height:20%;
}