/*nav style*/

h1{
	text-align: center;
	font-size: 4vh;
	margin: 0;
}

section.nav{
	width: 300px;
	max-height: 90vh;
	overflow: scroll;
	background-color: aqua;
	border-radius: 20px;
	position: fixed;
}

h2.navName{
	text-align: center;
}

ul#nav, ul#nav ul{
	list-style: none;
}


ul.functionUL{
	padding-inline-start: 25px;
}

	/*navList child opener*/
p.opener{
	display: inline-block;
	cursor: context-menu;
}

ul.navListChild{
	display: none;
	height: 0;
}

ul.navListChild.opened{
	display: block;
	height: auto;
}
	/*----------*/

div.border{
	height: 90vh;
	position: absolute;
	left: 310px;
	border-left: solid;
}

main{
	width: calc(100vw - 340px);
	left: 320px;
	position: relative;
}

/*basic style*/

article, div{
	margin-top: 20px;
}

article.parameters>ul{
	border: solid;
	width: 50%;
}

article.halfWidth, div.halfWidth{
	width: 50%;
}

img{
	max-width: 50%;
}

img.almost{
	max-width: 90%;
}/*directly make bigger*/

img.shortHeight{
	max-height: 50%;
}

video.sampleMovie{
	max-width: 90%;
}

p.alignCenter{
	text-align: center;
}

p.alignRight{
	text-align: right;
}
p.weightBold{
	font-weight: bold;
}

.twogrid>img, .twogrid>figure>img{
	max-width: 70%;
}

.flex>img, .flex>figure{
	max-width: 30%
}


.flex>figure>img{
	max-width: 80%;
}


ul.noDeco{
	list-style: none;
}

ul.hasGridLine{
	border: solid;
	border-width: 3px;
	border-bottom-width: 1px;
	border-right-width: 1px;
}

ul.hasGridLine>li{
	border-bottom: solid;
	border-bottom-width: 2px;
	border-right: solid;
	border-right-width: 2px;
}

div.innerStruct{
	width: 90%;
	border: dotted;
	border-width: 1px;
}

div.dottborder{
	border-bottom-style: dotted;
}/*for devide head and contents*/

div.dottlightborder{
	border-bottom-style: dotted;
	border-bottom-width: 1px;
}/*for devide commands or memos*/

div.flex, li.flex{
	display: flex;
	flex-wrap: wrap;
}

li.twogrid{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

li.tableHead.aqua{
	background-color: aqua;
}
li.tableHead.orange{
	background-color: orange;
}
li.tableHead.lime{
	background-color: lime;
}

li>p, p.inlist, div.inlist{
	padding-left: 20px;
	padding-right: 20px;
}

h4.relCommand, p.scriptCommand{
	margin-left: 10%;
}

section.column{
	margin-top: 50px;
	width: 80%;
	border: solid;
}

article.twogrid, div.twogrid{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/*span decoration*/
span.smaller{
	font-size: smaller;
}

span.larger{
	font-size: larger;
}

span.red{
	color: red;
}

span.blue{
	color: blue;
}

span.orange{
	color: orange;
}

		/*--------------each setting---------------*/
		/*index*/
		article.atfirst{
			width: 80%;
		}

		p.signature{
			text-align: right;
		}

		/*error*/
		div.mailTemplate{
			width: 80%;
			border: solid 2px black;
		}

		/*terms*/
		article.command, article.tag{
			display: grid;
			grid-template-columns: 1fr 1fr;
		}

		/*volume*/
		article.volumeOffset{
			display: grid;
			grid-template-areas: "volumeL upperArrow volumeUR"
								 "volumeL belowArrow volumeBR";
			place-items: center;
			width: 60%;
		}

			img.volumeL{
				grid-area: volumeL;
				max-width: 100%;
			}

			figure.upperArrow{
				grid-area: upperArrow;
			}

			figure.belowArrow{
				grid-area: belowArrow;
			}

			img.volumeUR{
				grid-area: volumeUR;
				max-width: 100%;
			}

			img.volumeBR{
				grid-area: volumeBR;
				max-width: 100%;
			}

		/*messageSpeed*/
		article.messageMaxmin{
			width: 90%;
		}

		/*trophy*/
		article.trophyGenre{
			display: grid;
			grid-template-areas: "leftCurve allTrophy rightCurve"
								 "AtypeTrophy . BtypeTrophy";
			width: 80%;
		}

			img.leftCurve{
				grid-area: leftCurve;
				place-self: end;
			}

			img.allTrophy{
				grid-area: allTrophy;
				max-width: 100%;
			}

			img.rightCurve{
				grid-area: rightCurve;
				align-self: end;
			}

			figure.AtypeTrophy{
				grid-area: AtypeTrophy;
				max-width: 100%;
			}

			figure.BtypeTrophy{
				grid-area: BtypeTrophy;
				max-width: 100%;
			}

			figure.AtypeTrophy>img, figure.BtypeTrophy>img{
				max-width: 100%;
			}

		/*buffer*/
		ul.buffGrid, ul.secondVariableGrid{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			padding: 0;
			width: 80%;
			margin-left: 10%;
			text-align: center;
		}

		div.criticalCalcType, div.guideHUDPosition{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
		}

		div.criticalCalcType>figure>img{
			max-width: 90%;
		}

		/*allocator*/
		div.costAllocator{
			width: 80%;
			border: solid;
		}

		/*playerMovme dayNight vehicles actionBase command*/
		ul.strideGrid, ul.dayNightGrid, ul.vehicleLocation, ul.frameRateGrid, ul.inputGrid{
			display: grid;
			grid-template-columns: 1fr 1fr;
			width: 80%;
			padding: 0;
			text-align: center;
		}

		ul.dayNightRgbgGrid{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
			width: 80%;
			padding: 0;
			text-align: center;
		}

		div.vehicleAreaList{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			width: 80%;
			border: solid;
			border-width: 2px;
		}

			div.vehicleAreaList>figure>img{
				max-width: 90%;
			}

		/*multiParty*/
		ul.swapParty{
			display: grid;
			grid-template-areas: "A B C D E F G H I"
								 "a b b d d d g h i";
			padding: 0;
			width: 80%;
			text-align: center;
		}

			li.A{grid-area: A;}
			li.B{grid-area: B;}
			li.C{grid-area: C;}
			li.D{grid-area: D;}
			li.E{grid-area: E;}
			li.F{grid-area: F;}
			li.G{grid-area: G;}
			li.H{grid-area: H;}
			li.I{grid-area: I;}
			li.a{grid-area: a;}
			li.b{grid-area: b;}
			li.d{grid-area: d;}
			li.g{grid-area: g;}
			li.h{grid-area: h;}
			li.i{grid-area: i;}

		/*searcher*/
		ul.searchGrid{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
			width: 80%;
			padding: 0;
			text-align: center;
		}

		/*rootCustom*/
		ul.jumpTypeGrid{
			display: grid;
			grid-template-columns: 1fr 6.5fr;
			width: 90%;
			padding: 0;
		}

		/*debugger*/
		div.debuggerGrid{
			display: grid;
			grid-template-columns: 2fr 1fr;
		}

		div.debuggerGrid figure{
			margin: 0;
		}

		/*statsWindow*/
		ul.unitGrid{
			display: grid;
			grid-template-columns: 1fr 3fr 2fr;
			width: 80%;
			padding: 0;
		}

		ul.traitGrid{
			display: grid;
			grid-template-columns: 1fr 1fr 5fr 5fr 3fr 3fr 2fr 3fr;
			width: 80%;
			padding: 0;
		}

		ul.traitInnerGrid{
			display: grid;
			grid-template-columns: 1fr 5fr;
			width: 90%;
			padding: 0;
		}

		ul.subEquipGrid{
			display: grid;
			grid-template-columns: 1fr 1.5fr;
			width: 90%;
			padding: 0;
		}

		ul.subEquipGrid li.rightList{
			text-align: right;
		}

		/*book*/
		ul.bookGrid{
			display: grid;
			grid-template-columns: 1fr 3fr;
			width: 80%;
			padding: 0;
		}

		div.enemyCategoryGrid{
			display: grid;
			grid-template-columns: 1fr 2fr;
		}
			
		ul.bookPhaseGrid, ul.rotateGrid{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			width: 80%;
			padding: 0;
		}

		/*equipHUD*/
		ul.itemThirdGrid{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
			width: 90%;
			padding: 0;
			text-align: center;
		}

		ul.itemThirdGrid li.listHead{
			background-color: aqua;
		}

		/*actionBase*/
		figure.actionBaseFigure{
			max-height: 50%;
		}

		/*command*/
		div.inputGrid{
			display: grid;
			grid-template-columns: 1fr 3fr;
			width: 80%;
			padding: 0;
		}
		div.inputGrid>img{
			justify-self: end;
		}

		/*reference*/
		ul.referenceGrid{
			display: grid;
			grid-template-areas: "emp refName refName refName refName refText refText refText refText refText"
								 "arg argText argText argText argText argText argText argText argText argText";
			padding: 0;
		}
			ul.referenceGrid li.emp{
				grid-area: emp;
			}

			ul.referenceGrid li.refName{
				grid-area: refName;
				background-color: aqua;
			}
				ul.referenceGrid li.refName:hover{
					cursor: pointer;
					background-color: aliceblue;
				}

			ul.referenceGrid li.refText{
				grid-area: refText;
			}

			ul.referenceGrid li.arg{
				grid-area: arg;
				writing-mode: vertical-rl;
				text-align: center;
			}

			ul.referenceGrid li.argText{
				grid-area: argText;
			}

		ul.argumentGrid{
			display: grid;
			grid-template-columns: 2fr 7fr;
			padding: 0;
			border-color: yellow;
		}

			li.argName{
				text-align: right;
				background-color: antiquewhite;
			}

		section.referenceExpart{
			border: 2px black solid;
			padding: 5px;
		}

		ul.expartGrid{
			display: grid;
			grid-template-columns: 1fr 4fr 2fr;
			padding: 0;
		}

			ul.expartGrid li.noRight{
				border-right: none;
				font-size: 0.8rem;
			}

			ul.expartGrid li.noLeft{
				border-left: none;
			}

			ul.expartGrid li.noRight, ul.expartGrid li.noLeft{
				background-color: cornsilk;
			}

			ul.expartGrid li.noLet{
				border-left: none;
			}


			li.refName{
				background-color: aqua;
			}
				li.refName:hover{
					cursor: pointer;
					background-color: aliceblue;
				}

			li.refText{
				font-size: 0.8rem;
			}

		/*recipe*/
		h3.recipeChapter{
			background: linear-gradient(90deg, orange, white);
		}

		ul.recipePageCommands{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
		}


		/*conflict faq*/
		ul.conflictList, ul.faq{
			display: grid;
			grid-template-columns: 1fr 2fr;
			border: solid;
			border-width: 4px;
			border-bottom-width: 2px;
			padding: 0;
		}

		ul.conflictList>li, ul.faq>li{
			border-bottom: solid;
			border-right: dotted;
			border-width: 2px;
			padding-left: 4px;
		}

		/*releaseNote*/
		ul.release{
			display: grid;
			grid-template-columns: 1fr 7fr;
		}

		ul.release>li{
			margin-top: 10px;
		}