#manual{
	margin: 0 auto;
	margin-top: 1rem;
	width: calc(100% - 2rem);
	background-color: rgba(0,0,0, 0.2);
	border-radius: 1rem;
	text-align:center;
}

#manual_index{
	display:inline-block;
	width: 17rem;
	margin-left: -17rem;
	background-color: rgba(0,0,0, 0.4);
	text-align:center;
	border-radius: 0.5rem 0 0.5rem 1rem;
	font-size: 0.8rem;
	vertical-align:top;
}
#manual_index_toggle_btn{
	display:none;
	position:absolute;
	background-color: rgb(60,60,60);
	background-color: rgba(194,227,237, 0.2);
	padding: 0.4rem 1rem 0.4rem 1rem;
	border: 1px solid rgb(120,120,120);
	
	border-radius: 0.3rem;
	top: -2.4rem;
	left: 50%;
	transform: translateX(-50%);
	
}
#manual_index_toggle_btn::after{
	content: '\21C5';
	position:absolute;
	right: -2ch;
}
#manual_index_link_container{
	text-align:left;
	padding: 1rem;
	list-style:none;
	margin:0;
}
.manual-index-link{
	border-bottom: 1px solid rgba(0,0,0, 0);
	cursor: pointer;
}
.manual-index-link > a{
	display:block;
	text-decoration:none;
	color: rgb(220,220,220);
	padding: 0.2rem;
	padding-left:1rem;
	background-color: rgba(120,120,120, 0.1);
	transition: background-color 0.3s;
}
.manual-index-link > a:hover{
	background-color: rgba(220,220,220, 0.12);
	outline: 1px solid #2e454d;
}




#manual_page_view{
	display:inline-block;
	background-color: rgba(255,255,255, 0.1);
	border-left: 0.5rem solid rgba(255,255,255, 0.1);
	color: rgb(240,240,240);
	width:40rem;
	font-size:1rem;
	text-align:left;
	line-height: 1.2rem;
}
#manual_page_container{
	padding: 0 1rem 1rem 1rem;
}

#manual_page_view h1{
	text-align: left;
	font-size: inherit;
	margin-top: 1rem;
}
#manual_page_view h2{
	font-size: 90%;
}
#manual_page_view p{
	font-size: 80%;
	color: rgb(200,200,200);
	text-shadow: 0 0 2px rgba(0,0,0, 0.5);
}
#manual_page_view strong{
	color: rgb(240,240,240);
}

#manual_page_view a{
	color: rgb(186, 172, 230);
	text-shadow:none;
	text-shadow: 0px 0px 2px rgb(74, 13, 54);
}
.hkl-item-bind-keytag{
	display:inline-block;
	border-radius:0.2rem;
	border-bottom: 1px solid rgba(0,0,0,0.5);
	padding:0.3rem;
	padding-top:0px;
	padding-bottom:0px;
	color:rgb(30,30,30);
	background-color:rgba(220,220,220, 0.8);
	transition: background-color 0.2s;
	text-shadow: none;
	font-weight:bold;
	box-shadow: 1px 1px 2px 2px rgba(0,0,0, 0.1);
}
#hk_list_item_container{
	font-size: 0.8rem;
	list-style:none;
	padding:0;
}
#hk_list_item_container li{
	width:100%;
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
}
.hkl-item {
	transition: background-color 0.2s;
	border-bottom:1px solid rgba(255,255,255, 0.2);
	padding-left: 0.2rem;
}
.hkl-item:hover{
	background-color: rgba(255,255,255, 0.1);
}
.hkl-item-action{
	display:inline-block;
	width:40%;
	vertical-align:top;
}
.hkl-item-bind-description{
	display:inline-block;
	padding-left:5%;
	width:55%;
}


/* MOBILE  Portrait */
@media screen and (max-width:768px), screen and (orientation: portrait), screen and (max-height: 768px),
only screen /* ipad & ipad pro */
  and (min-width: 700px) 
  and (max-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2)
{
	
	#manual{
		margin: 0 auto;
		width: auto;
	}
	#manual_index{
		width:100%;
		margin-left: 0;
		margin-top: 3rem;
		font-size: 1rem;
		border-radius: 0 0 1rem 1rem;
	}
	#manual_index_toggle_btn{
		display:inline-block;
	}
	.manual-index-link > a{
		padding: 1rem;
	}
	#manual_index_link_container{
		display:none;
	}
	
	#manual_page_view{
		width:auto;
		padding-top: 2rem;
		font-size: 1.1rem;
	}
	
}
/* mobile / tablet landscape */
@media screen and (max-height: 768px) and (orientation: landscape) and (min-width: 600px),
only screen 
  and (min-width: 700px) 
  and (max-width: 1366px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2)
{
	
	
	
	
}