.story_maincontainer{
	width:100%;
}

.story_maincontainer2{
	display:grid;
	grid-template-columns:1fr 2fr;
}

#storymap{
	/*display:none;
	right:25%;
	bottom:25%;
	position:fixed;
	max-width:50%;
	max-height:50%;*/
	
	display:none;
	margin-bottom:1rem;
}

/*.storymap_section{
	display:none;
	margin-bottom:1rem;
	width:100%;
}*/

#storymap img{
	max-width:500px;
	max-height:500px;
	display:inline;
	margin-left:1rem;
}

/*.storymap_section img{ 
	max-width:500px;
	max-height:500px;
	display:inline;
	margin-left:1rem;
}*/

.story_subcontainer{
	margin-right:1rem;
	margin-bottom:1rem;
	margin-left:2rem;
	width:90%;
	float:left;
}

.storysteps{
	margin-left:1rem;
	margin-bottom: 1rem;
	width:90%;
	float:left;
}

.story_sub_half{
	width:45%;
	float:left;
	margin-top:1rem;
	margin-right:1rem;
	margin-left:1rem;
}

.story_sub_half img{
	/*max-width:320px;
	max-height:240px;*/
	width:100%;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:1rem;
	display:block;
}

.story_subcontainer .image p{
	text-align:center;
}

.story_sub_full{
	width:90%;
	margin-top:1rem;
	float:left;
}

.story_sidecontent{
	margin:1rem;
	background-color: RGB(250,239,123);
}

.story_sidecontent h1{
	color:black;
	font-weight:bold;
	font-size:1.5rem;
	margin-left:1rem;
	margin-bottom:0;
}

.story_sidecontent h2{
	color:black;
	font-weight:bold;
	font-size:1rem;
	margin-left:1rem;
	margin-bottom:0;
}

.story_sidecontent p{
	color:#313131;
	margin:1rem;
}

.story_sub_table{
	width:100%;
	float:left;
	border-spacing:0;
}

.story_sub_table td{
	padding:0;
}

.story_sub_table td:nth-child(1){
	width:100px;
}

.story_sub_table_mod{
	background-color:#313131;
	border: thin solid black;
}

.storysteps_table{
	border-spacing: 0;
}

.storysteps_table td{
	border: thin solid black;
	padding:0.3rem;
	transition: all 0s;
}

.storysteps_table td:nth-child(1){
	background-color:RGB(150,150,200);
	text-align:center;
	min-width:60px;
}

.storysteps_table td:nth-child(2), .storysteps_table td:nth-child(3){
	background-color:beige;
}

.storysteps_table td:nth-child(4), .storysteps_table td:nth-child(5){
	background-color: RGB(220,220,220);
}

.storysteps_table .step_detail{
	position:relative;
	transition: all 0.3s ease-in-out;
	left:0;
}

.storysteps_table .fight td:nth-child(4), .storysteps_table .fight td:nth-child(5){
	background-color:RGB(200,65,49);
	color:white;
}

.story_sub_table .story_head_prog{
	font-size:1.4rem;
	padding-left:0.5rem;
	padding-right:0.5rem;
	background-color:royalblue;
	color:white;
	font-weight:bold;
	display:block;
	text-align:center;
}

.story_sub_table .story_head{
	font-size:1.4rem;
	color:white;
	font-weight:bold;
	display:block;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	background-color: RGB(50,50,100);
}

.story_sub_table .sub_alt_end{
	font-size:1.4rem;
	text-align:center;
	color:white;
	font-weight:bold;
	display:block;
	background-color: red;
}

.story_sub_table .story_substory_prog{
	font-size:1.4rem;
	padding-left:0.5rem;
	padding-right:0.5rem;
	background-color:RGB(130,49,43);
	color:white;
	font-weight:bold;
	display:block;
	text-align:center;
}

.story_sub_table .story_subhead_prog{
	padding-left:0.5rem;
	padding-right:0.5rem;
	background-color:#313131;
	color:white;
	font-weight:bold;
	display:block;
	text-align:center;
	border:thin solid black;
}

.story_sub_table .story_subhead{
	color:#313131;
	font-weight:bold;
	display:block;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	background-color: #C0C0C0;
	border:thin solid black;
}

.story_sub_full a{
	text-decoration: none;
	color:#313131;
	transition: all 0.3s linear;
}

.story_sub_full a:hover{
	color:RGB(120,120,120);
}

.battlefield_item{
	border-radius:1rem;
	padding-left:0.5rem;
	padding-right:0.5rem;
	background-color:red;
	color:white;
	font-weight:bold;
	display:inline;
}

.battlefield_heat{
	padding-left:0.5rem;
	padding-right:0.5rem;
	background-color:green;
	color:black;
	display:inline;
}

#userselection{
	display:block;
	margin-left:auto;
	margin-right:auto;
	width:50px;
	text-align:center;
	font-size:1.2rem;
}

#userselectbutton{
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:0.2rem;
}

.substory_notes{
	border: medium black solid;
	background-color:yellow;
	color:black;
	font-weight:bold;
	padding:0.2rem;
}

.substory_notes_head{
	display:block;
	background-color:darkred;
	color:white;
	text-align:center;
	margin:0;
}


@media (min-width:1600px){
	.storysteps_table .step_detail{
	position:relative;
	}
	
	.storysteps_table .step_detail:hover{
	left:10px;
	cursor: pointer;
	}

.storysteps_table .step_detail:hover td{
	background-color:#FFEE59;
	color:#313131;
	}
	
	.storysteps_table .step_detail:active td{
	background-color:white;
	color:#313131;
	}
}

@media (max-width:1600px){
	
	.story_maincontainer2{
	display:block;
}
	
	.storysteps_table .step_detail{
	position:inherit;
	}
	
		.story_subcontainer{
		margin-right:0;
	margin-left:0;
	width:100%;
	}

.storysteps{
	margin-left:0;
	width:100%;
	}
}


@media (max-width:700px){
	.story_sub_half{
	width:100%;
	margin-right:0;
	margin-left:0;
	}
}

.hidden{
	display:none;
}