/* VARIABLES */
:root{
	/* the default colour of text */
	--text:  hsla(0, 0%, 0%, 1);
	
	/* non-activelinks  */
	--dead: grey;

	/*  the main font colour, */
	--highlight: hsla(222, 90%, 10%, 1);
/*	hsla(0, 0%, 18%, 1);*/
	
	/* the main background colour,*/
	--bgr:  hsla(228, 4%, 80%, 1); 
	
	/* the main background colour,*/
	--bgr2:  hsla(228, 4%, 70%, 1); 
	
	/* background of active links, */
	--hoover: hsla(220, 0%, 0%, 1);

	
	
	--avatar: 250; /*NOT USED - CHANGED BY JS IN INTRO.JS*/
	/*
		accessed by:
			var(--highlight); 	
			var(--bgr);
			var(--text); 	
		eg:
			background-color: var(--bgr); 
	*/
}

/* ultra */
#div_ultra{
	position: fixed;
	z-index: 24;
	padding: 10;
	/*top:0;
	bottom:0;
	*/
	color: black;
	background-color: white;
	display: none;
}


/* wardrobe */

#war_div_holder{
	display: flex;
	flex-direction: row;
	background-color: var(--bgr);
	
	
	/*background-color: white;*/
	height: 95vh;
	/*
	max-height: 100%; calc(100% - (5% + 30px) );
	*/
	
	/*for firefox*/
	scrollbar-width: auto;
	scrollbar-color: var(--highlight) var(--bgr2);  
		
}

#war_div_left{
	padding: 20px;
	
	display: flex;
	flex-direction: column;
	
	background-color: var(--bgr2); 
	
	margin-left: 10px;
	margin-right: 10px;

	/*overflow: none;*/
	overflow: auto;
}

#war_div_right{
	
	padding: 20px;
	
	
	display: flex;
	flex-direction: column;
	/*background-color: red;*/
	
	background-color: var(--bgr2); 
	margin-left: 10px;
	margin-right: 10px;

	/*height: 90%;*/
	overflow: auto;
}

#war_div_trade{

	
	padding: 20px;
	display: flex;
	flex-direction: column;
	/*background-color: cyan;*/
	
	background-color: var(--bgr2); 
	margin-left: 10px;
	margin-right: 10px;
	
	/*
	height: calc(100% - (5% + 30px) );
	max-height: 100%; */
	overflow: auto;
}

#war_div_mid{
	/*padding-top: 20px; 
	padding-bottom: 20px; */
	/*background-color: cyan;*/
	
	 
}

#war_div_confirm{
	/*color: green; */
}

#war_div_cancel{
	/*color: red; */
}

#war_div_men{
	width: 100%;
	padding-bottom: 20px; 
	row-gap: 10px;
  display: grid;
  justify-items: stretch;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: 
    "confirm confirm cancel cancel"
    "strip stripAll random randomAllowed"
    "sort sort sort sort"
	"imp imp imp imp";
	
}

.war_men_item{
	justify-self: stretch;
	 
	 padding: 5px;
	display: block;
	
	cursor:pointer;
	font-weight: bold;
}

#war_for_inp{
	grid-area: imp;
/*	margin-top: 10px; 
	margin-bottom: 10px; */
	margin-left: 5px; 
	width: 80%;
}

#war_for_sort{
	grid-area: sort;
	margin-top: 10px;  /*TODO - handles gap betwen 2nd and 3rd row of the menu*/
/*	margin-top: 10px; 
	margin-bottom: 10px; */
	margin-left: 5px; 
	width: 80%;
}


#war_div_bot{
	bottom: 0; 
/*	background-color: lime;*/
}

.war_item{
	padding: 5px;
	display: block;
	
	cursor:pointer;
	font-weight: bold;
}



.war_item:hover{
	color: var(--bgr);
	background-color: var(--highlight);
}
 


/* width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--bgr);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--highlight);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--highlight);
}

/*
::-webkit-scrollbar-button{
  background: var(--highlight);
  height: 12px; 
  color:  var(--bgr);
}
*/











body {
	/*font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;*/
	font-family: "Cambria", "Georgia", "Times New Roman", Times, serif;
	background-color: var(--bgr); 	
	 color: var(--text); 
}

hr {
	width: 70%;
}


/* everything is in main div */
	#div_main {
		position: relative;
	/*	width:95%; */
	/*	display: block; */
		min-height: 95%;
/*background-color: red;*/
		background-color: var(--bgr);  
		color: var(--text);
			
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

/*the main div on the left */
	#div_left {
		z-index: 1;
		flex-grow: 1;
		/*position: relative;  */
		width: var(--avatar); /* WIDTH RECALCULATED BY JS IN INTRO.JS*/
		max-width: var(--avatar); 		
		background-color: var(--bgr2); 	

	}
	
	/*div on the right for text */		
	#div_right{
		z-index: 3;
		flex-grow: 5;
		/*position: relative;*/
/*background-color: cyan;*/
		background-color: var(--bgr);
		
		display: block;
/* WIDTH CALCULATED BY JS IN INTRO.JS*/
		padding: 5%; 
		padding-top: 0%; 
	}
	
	
	 
	#div_text{
		
	/*	max-width: 600px; */
	/*	padding-top:30px;*/
		padding-top: 8%;
		background-color: var(--bgr);
/*background-color:  green; */
	}		

	#div_subtext{
	/*	text-align: center; */
	/*	position:absolute;*/
		min-height: 80%;
		
		padding-top:30px;
		display: block;
/*background-color:  lime; */
background-color: var(--bgr); 

	}
	 
	 #div_potion{
		padding: 50px;
		padding-top:80px;
		z-index: 10;
		width: 100%;/*calc(100% - 500px);*/
		height: 100%; /*calc(100% - 130px);*/ 
/* TODO!!*/
		position: absolute;
	/*	max-width: 600px; */
	/*	padding-top:30px;*/
/*		background-color: red;*/
/*background-color:  green; */
background-color: var(--bgr); 
	}	
	
	
	/*
	calc(100% - 100px);
	*/
	
	#div_player{
		width: var(--avatar);
/*background-color:  navy; */
		background-color: var(--bgr2); 
	}

/* RESPONSIVE */
@media only screen and (max-width: 700px) {
    #div_main{
		display: flex;
		flex-direction: column
	}
	
	#div_left{
		order:2;
	}
	
	#div_player{
		width: 300px;
	}
}

/* MENU */

/* buttons in the main menu */
#div_main_menu{
	z-index: 6;
	padding-top: 5%;
	padding-bottom: 5%;
	margin: auto;
	text-align: center;
	max-width: 600px;
	background-color: var(--bgr);
}
	
.menu{
	/*display:block;*/
	color: var(--highlight);
	padding:15px;
	cursor:pointer;
	font-weight: bold;
	
	font-size:120%;
}
.menu:hover{
	color: var(--bgr);
	background-color: var(--highlight);
}




/* clickable things, like ahref, inline */
.click{
	display: inline;
	color: var(--highlight);
	
	/*padding:10px;*/
	cursor:pointer;
	font-weight: bold;
}
.click:hover{
	color: var(--bgr);
	background-color: var(--highlight);
}
.not_click{
	display: inline;
	color: var(--highlight);
	
	/*padding:10px;*/
	cursor: default;
	font-weight: bold;
}

#tab_attributes{
	margin: auto;
	font-weight: bold;
	color: var(--highlight);
	cursor:auto;
	padding: 3;
}





.div_attributes{
	display: none;
	color: var(--highlight);
	padding:10px; 
	text-align: center;
/*
	text-align: center;
	
	cursor:pointer;
	font-weight: bold;
	
	padding:10px; 
	text-align: center;
	*/
}

#hr_inventory{
	display: none;
}

/* buttons in side menu */
.button{
	display: block;
	color: var(--highlight);
	
	/*padding:10px;*/
	cursor:pointer;
	font-weight: bold;
	
	padding:10px; 
	text-align: center;
}
.button:hover{
	color: var(--bgr);
	background-color: var(--highlight);
}

.bold {
	font-weight: bold;
}

.imp {
	font-weight: bold;
	padding: 10px;
}

/* option you are picking in the game, block */
.link {
	cursor:pointer;
	font-weight: bold;
	display: block;
	width: auto;
	color: var(--highlight);

	padding:10px; 
}
.link:hover {
	color: var(--bgr);
	background-color: var(--highlight);
}

.link_dead{
	color: var(--dead); 	
	text-decoration: line-through;
}


.empty_link {
	
	display: block;
	width: auto;
	min-width: 8rem;
	
	padding:10px; 
}


.clickable {
	cursor:pointer;
	font-weight: bold;
	color: var(--highlight);
}
.clickable:hover {
	color: var(--bgr);
	background-color: var(--highlight);
}



/* headlines, titles, (currently name of version in changelon )*/
.title{
	text-decoration: underline;
	display:block;
	color: var(--highlight);
	
	padding:5px;
 	font-weight: bold;
	
	font-size:110%;
}

.slider_desc{
	display:block;
	color: var(--highlight);
	
	
	
	padding:5px;
 	font-weight: bold;
	
	font-size:105%;
}



.inp_system{
	display: inline;
	background: gray;
}



.choice{
	cursor:pointer;
	font-weight: bold;
	display: inline;
	color: var(--text); 	
	border:0;
	padding:0;
}
.choice_active{	
	border: 1px solid red;
	padding-left: 5px;
	padding-right: 5px;
}
.choice_dead{	
	color: var(--dead); 	
	text-decoration: line-through;
}




/* TEXT RELATED STUFF */

.speech{
	display: block;
	padding:10px; 
	width:auto;
	/**/
}

.anj{
	color: var(--anj); 
}

.kat{
	color: var(--kat); 
}
.ayy{
	color:  var(--ayy); 
}

.qcc{
	color: var(--qcc);
}
.qbb{
	color: var(--qbb);
}
.qaa{
	color: var(--qaa);
}
.pet{
	color: var(--pet);
}

.eva{
	color: var(--eva);
}
.sas{
	color: var(--sas);
}

.mol{
	color: var(--mol);
}

.tom{
	color: var(--tom);
}
.zan{
	color: var(--zan);
}
.ven{
	color: var(--ven);
}
.jus{
	color: var(--jus);
}
.mol{
	color: var(--mol);
}
.tom{
	color: var(--tom);
}
.zan{
	color: var(--zan);
}
.ven{
	color: var(--ven);
}


.npc_1{
	color: var(--npc_1);  /*color: hsla(188, 80%, 10%, 1);*/
}
.npc_2{
	color: var(--npc_2); /*hsla(121, 80%, 56%, 1);*/
}
.npc_3{
	color: var(--npc_3); /*hsla(28, 80%, 56%, 1);*/
}

.npc_4{
	color: var(--npc_4); /* hsla(336, 82%, 42%, 1)*//* hsla(343, 80%, 56%, 1)*/;
}

.npc_5{
	color: var(--npc_5); /* hsla(336, 82%, 42%, 1)*//* hsla(343, 80%, 56%, 1)*/;
}

.npc_6{
	color: var(--npc_6);  /*color: hsla(188, 80%, 10%, 1);*/
}




.bloodletters{
	color: red; 
	font-weight: bold;
	font-size:200%;
}

.neutral{
	/*color: white;*/
	color: var(--text); 	
}

.spoiler{
	background-color: var(--text); 	
	color: var(--text); 	
}
.spoiler:hover {
	background-color: transparent;
}


.hint{
	/*color: white;*/
	color: var(--text); 	
	size: 90%; 
	font-style: italic;
}


/* STATS */

.stats_container{
	display: flex;
	flex-direction: row;
	background-color: var(--bgr);
	
	height:20px;
}

.stats_label{
	width: 100px;
	font-weight: bold;
	font-size: 120%;
}

.stats_bar{
	/*width: 400px;*/
	height:100%;
	/*background-color:cyan;*/
}


/* SAVE */
#div_save_gui{
	position:absolute;
	background-color: hsla(228, 4%, 80%, 1); 
	opacity: 1;
	z-index: 11;
	padding:30px;
}


#tab_saves{
	margin-top:10px;
	margin-bottom:10px;
	
}
#tab_saves td{
	
	padding:7px;
}

#div_save{
	margin: 20%;
	font-size:110%;
	display:none;
}

.savebutton {
	cursor:pointer;
	font-weight: bold;
	display: block;
	width: auto;
	color:hsla(0, 0%, 18%, 1);
	/*color:hsla(220, 80%, 35%, 1);*/
	width:auto;
	/**/
}
.savebutton:hover {
	background-color: hsla(220, 0%, 0%, 1);
	color:#f2eded;
}



/* LOADING */
/* covers the screen while the game is loading */

	/* TO DO - smaller responsive version */
	/* covers the screen */
	#div_intro{
		position: fixed;
		
		left: 0%; 
		right: 0%;
		top: 0%;
		bottom: 0%;
		
		z-index: 10; /*overkil. TO DO check z-indexes*/
		
		height: 100%;
		width: 100%;
		
		display: flex;
		flex-direction: column; 
		justify-content: center;
		align-items: center;
		
		background-color: var(--bgr); 	
	}

	/* The Name of Game */
	#div_intro_top{
		margin:10px;
		padding:10px;
		
		cursor:pointer;
		
		font-weight: bold;
		font-family: font-family:courier, courier new, serif;
		font-size: 600%;
		text-align: center;
		
		color:var(--highlight);
	}

	/* by Dahakma */
	#div_intro_bot{
		margin:10px;
		padding:10px;
		
		color:var(--text);
		
		font-size:150%;
		font-family: font-family:courier, courier new, serif;
	}

	/* container with dots showing progress */
	#div_intro_loading{
		position:absolute;
		
		bottom:50px;
		
		display: flex;
		flex-direction: row; 
		justify-content: center;
		align-items: center;
		
		
	}

	/* default dot */
	.div_intro_dot{
		margin-left:20px;
		margin-right:20px;
		width:10px;
		height:10px;
		border-radius: 5px;
		background-color: var(--text);
	}

	/* active dot */
	.div_intro_dot_active{
		background-color: var(--highlight);
	}



.grid_container_1{
	display: grid;
	justify-content: start;
	
	grid-template-columns: repeat(1);  
	
	grid-column-gap: 10px;
	
}

.grid_container_2{
	display: grid;
	justify-content: start;
	grid-template-columns: repeat(2, auto);  
	grid-column-gap: 10px;
	
}


.grid_container_auto{
	width: 500px;
	
	display: grid;
	justify-content: start;

	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: auto;
  
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}


.dungeon_link {
	cursor:pointer;
	font-weight: bold;
	/*display: block;
	width: auto;*/
	color: var(--highlight);

	padding: 20px; 
}
.dungeon_link:hover {
	color: var(--bgr);
	background-color: var(--highlight);
}


#div_dungeon_attack{
	/*background-color: red;*/
	
	display: grid;
	justify-content: start;
	
	grid-template-columns: auto auto auto;
	grid-template-rows: auto;
	/*
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	*/
	/*
	grid-template-columns: repeat(2, auto);  
	grid-column-gap: 10px;
	*/
}




.subslut_container{
	/*position: relative;*/
	width: 150px;	
	height: 1rem;
	background-color: var(--highlight);
	margin: 5px;
}
.subslut_fill{
	position: absolute;
	width: calc(150 + 4px);  
	height:  calc(1rem - 4px);
	margin: 2px;
	
	background-color: var(--bgr);
}


.attributes{
	display: grid;
	justify-content: space-around;
	
/*	display: none;*/
	font-weight: bold;
	color: var(--highlight);
	padding:10px; 
	

/*
	text-align: center;
	
	cursor:pointer;
	font-weight: bold;
	
	padding:10px; 
	text-align: center;
	*/
}

	 
/* SLIDER */
input[type=range].slidy {
  -webkit-appearance: none;
  width: 100%;
  margin: 5.5px 0;
  background-color: var(--bgr);
}
input[type=range].slidy:focus {
  outline: none;
}
input[type=range].slidy::-webkit-slider-runnable-track {
  width: 100%;
  height: 9px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #b3b9c7;
  border-radius: 0px;
  border: 0px solid #8e835c;
}
input[type=range].slidy::-webkit-slider-thumb {
  box-shadow: 2.2px 2.2px 1px #000000, 0px 0px 2.2px #0d0d0d;
  border: 2px solid #000000;
  height: 20px;
  width: 24px;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5.5px;
}
input[type=range].slidy:focus::-webkit-slider-runnable-track {
  background: #c2c7d2;
}
input[type=range].slidy::-moz-range-track {
  width: 100%;
  height: 9px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #b3b9c7;
  border-radius: 0px;
  border: 0px solid #8e835c;
}
input[type=range].slidy::-moz-range-thumb {
  box-shadow: 2.2px 2.2px 1px #000000, 0px 0px 2.2px #0d0d0d;
  border: 2px solid #000000;
  height: 20px;
  width: 24px;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range].slidy::-ms-track {
  width: 100%;
  height: 9px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range].slidy::-ms-fill-lower {
  background: #a4abbc;
  border: 0px solid #8e835c;
  border-radius: 0px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range].slidy::-ms-fill-upper {
  background: #b3b9c7;
  border: 0px solid #8e835c;
  border-radius: 0px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range].slidy::-ms-thumb {
  box-shadow: 2.2px 2.2px 1px #000000, 0px 0px 2.2px #0d0d0d;
  border: 2px solid #000000;
  height: 20px;
  width: 24px;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
  height: 9px;
}
input[type=range].slidy:focus::-ms-fill-lower {
  background: #b3b9c7;
}
input[type=range].slidy:focus::-ms-fill-upper {
  background: #c2c7d2;
}



input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 9.95px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10.1px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #b3b9c7;
  border-radius: 0px;
  border: 0px solid #8e835c;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 2.2px 2.2px 1px #000000, 0px 0px 2.2px #0d0d0d;
  border: 2px solid #000000;
  height: 30px;
  width: 15px;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -9.95px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #c2c7d2;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 10.1px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #b3b9c7;
  border-radius: 0px;
  border: 0px solid #8e835c;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 2.2px 2.2px 1px #000000, 0px 0px 2.2px #0d0d0d;
  border: 2px solid #000000;
  height: 30px;
  width: 15px;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 10.1px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #a4abbc;
  border: 0px solid #8e835c;
  border-radius: 0px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #b3b9c7;
  border: 0px solid #8e835c;
  border-radius: 0px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 2.2px 2.2px 1px #000000, 0px 0px 2.2px #0d0d0d;
  border: 2px solid #000000;
  height: 30px;
  width: 15px;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  height: 10.1px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #b3b9c7;
}
input[type=range]:focus::-ms-fill-upper {
  background: #c2c7d2;
}