.faded{
	position:relative;
	width:100%;
	height:100%;
}

.faded *{
	font-family: 'Fjord One', serif;
	font-size:1rem;
	font-weight:400;
	line-height:1.4rem;
	margin: 0;
	padding: 0;
}

.faded h1,h2,h3,h4,h5,h6{
	
}
.faded h1{
	font-size:1.4rem;
	line-height:1.7rem;
	margin:1.5rem 0 1rem;
}
.faded h2{
	font-size:1.2rem;
	line-height:1.4rem;
	margin:1rem 0 0.75rem;
}
.faded h3{
	font-size:1rem;
	line-height:1.2rem;
	margin:0.75rem 0 0.5rem;
}

.faded .view{
	position:relative;
	/*box-shadow: inset 0 0 10px rgba(0,0,0,0.2);*/
	background:#000;
	overflow:hidden;
}

.faded .movable,
.faded .pickup,
.faded .mapItem{
	position : absolute;
}

.faded .frame{
	display  : block;
	background:#000;
}

.faded{
	
}

.faded .single-text,
.faded .message-box.full-screen-message-box .single-text{
	margin-top:15%;
	text-align:center;
}
.faded .message-box.full-screen-message-box h1.faded-intro{
	margin-top:15%;
	text-align:center;
	text-transform: uppercase;
}
.faded .message-box.full-screen-message-box table.menu{
	width:100%;
	height:100%;
}
.faded .message-box.full-screen-message-box table.menu td,
.faded .message-box.full-screen-message-box table.menu td h2{
	text-align:center;
	vertical-align:middle;
}
.faded .message-box.full-screen-message-box table.menu td h2{
	cursor:pointer;
}
.faded ul,ol{
	margin-left:2rem;
}

.faded .healthbar{
	position :relative;
	display:table-cell;
	width : 40px;
	height : 150px;
	background : none;
	vertical-align:bottom;
}

.faded .healthbar .healthbar-top{
	width : 40px;
	height : 40px;
	background:url('images/CandleHealth_Top.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .healthbar .healthbar-top {
	background:url('images/CandleHealth_Top.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .healthbar .healthbar-top.flicker{
	background:url('images/CandleHealth2_Top.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .healthbar .healthbar-middle{
	width : 40px;
	background:url('images/CandleHealth_Middle.svg');
	background-repeat:repeat-y;
	background-size:40px 40px;
}
.faded .healthbar .healthbar-bottom{
	width : 40px;
	height : 40px;
	background:url('images/CandleHealth_Bottom.svg');
	background-repeat:no-repeat;
	background-size:contain;
}

.faded .character{
	display  : inline-block;
}

.faded .grid table{
	border-collapse:collapse;
	width:100%;
	height:100%;
}

.faded .grid.map td{
	background:#000;
}

.faded .grid.map td.walkable{
	background:#444;
}

.faded .frame.grid.mask{
	position:relative;
	background:transparent;
	z-index:1005;
}
.faded .grid.mask td{
	background:rgba(0,0,0,1);
	opacity:0;
}

.faded .player{
	width : 40px;
	height : 40px;
}
.faded .player.sprite1.here,
.faded .player.sprite1.north,
.faded .player.sprite1.south{
	background:url('images/Player_N_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .player.sprite2.here,
.faded .player.sprite2.north,
.faded .player.sprite2.south{
	background:url('images/Player_N_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .player.sprite1.northeast{
	background:url('images/Player_NE_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .player.sprite2.northeast{
	background:url('images/Player_NE_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .player.sprite1.east{
	background:url('images/Player_E_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .player.sprite2.east{
	background:url('images/Player_E_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .player.sprite1.southeast{
	background:url('images/Player_SE_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .player.sprite2.southeast{
	background:url('images/Player_SE_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .player.sprite1.south{
	background:url('images/Player_S_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .player.sprite2.south{
	background:url('images/Player_S_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .player.sprite1.southwest{
	background:url('images/Player_SW_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .player.sprite2.southwest{
	background:url('images/Player_SW_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .player.sprite1.west{
	background:url('images/Player_W_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .player.sprite2.west{
	background:url('images/Player_W_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .player.sprite1.northwest{
	background:url('images/Player_NW_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .player.sprite2.northwest{
	background:url('images/Player_NW_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}

.faded .zombie{
	width : 40px;
	height : 40px;
}
.faded .zombie.sprite1.here,
.faded .zombie.sprite1.north,
.faded .zombie.sprite1.south{
	background:url('images/Zombie_N_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .zombie.sprite2.here,
.faded .zombie.sprite2.north,
.faded .zombie.sprite2.south{
	background:url('images/Zombie_N_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .zombie.sprite1.northeast{
	background:url('images/Zombie_NE_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .zombie.sprite2.northeast{
	background:url('images/Zombie_NE_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .zombie.sprite1.east{
	background:url('images/Zombie_E_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .zombie.sprite2.east{
	background:url('images/Zombie_E_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .zombie.sprite1.southeast{
	background:url('images/Zombie_SE_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .zombie.sprite2.southeast{
	background:url('images/Zombie_SE_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .zombie.sprite1.south{
	background:url('images/Zombie_S_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .zombie.sprite2.south{
	background:url('images/Zombie_S_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .zombie.sprite1.southwest{
	background:url('images/Zombie_SW_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .zombie.sprite2.southwest{
	background:url('images/Zombie_SW_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .zombie.sprite1.west{
	background:url('images/Zombie_W_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .zombie.sprite2.west{
	background:url('images/Zombie_W_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .zombie.sprite1.northwest{
	background:url('images/Zombie_NW_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .zombie.sprite2.northwest{
	background:url('images/Zombie_NW_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}

.faded .noble{
	width : 40px;
	height : 40px;
}
.faded .noble.sprite1.here,
.faded .noble.sprite1.north,
.faded .noble.sprite1.south{
	background:url('images/Noble_N_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .noble.sprite2.here,
.faded .noble.sprite2.north,
.faded .noble.sprite2.south{
	background:url('images/Noble_N_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .noble.sprite1.northeast{
	background:url('images/Noble_NE_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .noble.sprite2.northeast{
	background:url('images/Noble_NE_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .noble.sprite1.east{
	background:url('images/Noble_E_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .noble.sprite2.east{
	background:url('images/Noble_E_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .noble.sprite1.southeast{
	background:url('images/Noble_SE_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .noble.sprite2.southeast{
	background:url('images/Noble_SE_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .noble.sprite1.south{
	background:url('images/Noble_S_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .noble.sprite2.south{
	background:url('images/Noble_S_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .noble.sprite1.southwest{
	background:url('images/Noble_SW_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .noble.sprite2.southwest{
	background:url('images/Noble_SW_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .noble.sprite1.west{
	background:url('images/Noble_W_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .noble.sprite2.west{
	background:url('images/Noble_W_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .noble.sprite1.northwest{
	background:url('images/Noble_NW_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .noble.sprite2.northwest{
	background:url('images/Noble_NW_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}

.faded .ghost{
	width : 40px;
	height : 40px;
	border:80px solid rgba(255, 255, 255, 0.1);
	border-radius:50%;
	-webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
.faded .ghost.sprite1.here,
.faded .ghost.sprite1.north,
.faded .ghost.sprite1.south{
	background:url('images/Ghost_N_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .ghost.sprite2.here,
.faded .ghost.sprite2.north,
.faded .ghost.sprite2.south{
	background:url('images/Ghost_N_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .ghost.sprite1.northeast{
	background:url('images/Ghost_NE_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .ghost.sprite2.northeast{
	background:url('images/Ghost_NE_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .ghost.sprite1.east{
	background:url('images/Ghost_E_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .ghost.sprite2.east{
	background:url('images/Ghost_E_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .ghost.sprite1.southeast{
	background:url('images/Ghost_SE_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .ghost.sprite2.southeast{
	background:url('images/Ghost_SE_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .ghost.sprite1.south{
	background:url('images/Ghost_S_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .ghost.sprite2.south{
	background:url('images/Ghost_S_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .ghost.sprite1.southwest{
	background:url('images/Ghost_SW_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .ghost.sprite2.southwest{
	background:url('images/Ghost_SW_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .ghost.sprite1.west{
	background:url('images/Ghost_W_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .ghost.sprite2.west{
	background:url('images/Ghost_W_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .ghost.sprite1.northwest{
	background:url('images/Ghost_NW_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .ghost.sprite2.northwest{
	background:url('images/Ghost_NW_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}

.faded .ghost.borderless{
	border:none;
	border-radius:0%;
}

.faded .steward{
	width : 80px;
	height : 80px;
}
.faded .steward.sprite1.here,
.faded .steward.sprite1.north,
.faded .steward.sprite1.south{
	background:url('images/Noble_N_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .steward.sprite2.here,
.faded .steward.sprite2.north,
.faded .steward.sprite2.south{
	background:url('images/Noble_N_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .steward.sprite1.northeast{
	background:url('images/Noble_NE_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .steward.sprite2.northeast{
	background:url('images/Noble_NE_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .steward.sprite1.east{
	background:url('images/Noble_E_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .steward.sprite2.east{
	background:url('images/Noble_E_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .steward.sprite1.southeast{
	background:url('images/Noble_SE_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .steward.sprite2.southeast{
	background:url('images/Noble_SE_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .steward.sprite1.south{
	background:url('images/Noble_S_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .steward.sprite2.south{
	background:url('images/Noble_S_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .steward.sprite1.southwest{
	background:url('images/Noble_SW_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .steward.sprite2.southwest{
	background:url('images/Noble_SW_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .steward.sprite1.west{
	background:url('images/Noble_W_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .steward.sprite2.west{
	background:url('images/Noble_W_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .steward.sprite1.northwest{
	background:url('images/Noble_NW_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .steward.sprite2.northwest{
	background:url('images/Noble_NW_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}

.faded .candle{
	width : 40px;
	height : 40px;
}
.faded .candle {
	background:url('images/Candle_1.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .candle.flicker{
	background:url('images/Candle_2.svg');
	background-repeat:no-repeat;
	background-size:contain;
}

.faded .exit{
	width : 40px;
	height : 40px;
	background:url('images/Exit.svg');
}

.faded .paper{
	width : 40px;
	height : 40px;
	background:url('images/Paper.svg');
}

.faded .throne{
	width : 80px;
	height : 80px;
}

.faded .throne.bloodstone{
	background:url('images/Throne_Bloodstone.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .throne.damned{
	background:url('images/Throne_Damned.svg');
	background-repeat:no-repeat;
	background-size:contain;
}
.faded .throne.malachite{
	background:url('images/Throne_Malachite.svg');
}
.faded .throne.opal{
	background:url('images/Throne_Opal.svg');
}
.faded .throne.silver{
	background:url('images/Throne_Silver.svg');
}

.faded .message-box button.message-box-button{
	position:absolute;
	bottom:1rem;
	background:transparent;
	cursor:pointer;
}
.faded .message-box button.message-box-button:not(.reverse){
	right:1rem;
	text-align:right;
}
.faded .message-box button.message-box-button.reverse{
	left:1rem;
	text-align:left;
}

.faded .message-box.paper-message-box{
	position:absolute;
	width:calc(80% - 2rem);
	height:calc(80% - 2rem);
	margin: 10%;
	padding: 1rem;
	z-index:1010;
	background:#C7B299;
	
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.faded .message-box.paper-message-box *{
	color:#534741;
	text-align:left;
}
.faded .message-box.paper-message-box h1{
	font-size:1.4rem;
	margin-top:0;
}

.faded .message-box.screen-message-box{
	position:absolute;
	width:calc(100% - 4rem);
	height:calc(100% - 4rem);
	padding: 2rem;
	z-index:1015;
	background:rgba(0,0,0,0.9);
}
.faded .message-box.screen-message-box *{
	color:#FFF;
	text-align:left;
}
.faded .message-box.screen-message-box h1{
	font-size:1.4rem;
	margin-bottom:0.5rem;
}

.faded .message-box.full-screen-message-box{
	position:absolute;
	top:0;
	width:calc(100% - 4rem);
	height:calc(100% - 4rem);
	padding: 2rem;
	z-index:1015;
	background:#000;
}
.faded .message-box.full-screen-message-box *{
	color:#FFF;
	text-align:left;
}
.faded .message-box.full-screen-message-box h1{
	height:1.4rem;
	font-size:1.4rem;
	line-height:1.4rem;
	margin-bottom:0.5rem;
}
.faded .message-box/*.full-screen-message-box*/ .message-box-text{
	height:calc(100% - 4.9rem);/*1.9 title, 3? for button*/
	overflow:auto;
}



#explainer{
	width:100%;
	margin-top:1rem;
}
#explainer > thead th{
	font-size:1.2rem;
	line-height:1.4rem;
	padding-bottom:2rem;
}
#explainer table{
	width:100%;
}
#explainer th,td{
	vertical-align:top;
}
#explainer td.icons{
	min-width:60px;
	text-align:center;
}
#explainer table td{
	padding-bottom:2rem;
}
#explainer table tr:last-child td {
	padding-bottom:0;
}
#explainer table h2{
	font-size:1.2rem;
	line-height:1.4rem;
	margin:0;
}

#controls,
#controls > table{
	width: 100%;
	height: 100%;
}
#controls td{
	padding:1rem;
}
#controls #movements td{
	text-align:center;
	padding:0;
}
#controls h2{
	margin:0;
}