:root{
	--bright-color: #d0d0d0;
	--dim-color: #000000;
}

body{
	width: 100%;
	height: 100vh;

	box-sizing: border-box;
	margin: 0;
	padding: 10px;

	display:flex;
	justify-content: center;
	/*align-items: center;*/

	background: var(--dim-color);
}

#mainsection{
	width: 780px;

	box-sizing: border-box;

	display:flex;
	flex-direction: column;
	gap: 2px;
}

#header{
	width: 100%;
	height: 120px;

	box-sizing: border-box;
	border: solid 2px var(--bright-color);
	padding: 8px;
	
	display:flex;
	justify-content: flex-end;
	align-items: flex-end;
}

#titletext{
	margin: 0;

	color: var(--bright-color);
}

#middle{
	width: 100%;
	height: 540px;
	
	display:flex;
	flex-direction: row;
	gap: 2px;

}

#sidesection{
	width: 20%;
	height: 100%;

	display:flex;
	flex-direction: column;
	gap: 2px;
}

#navigation{
	width: 100%;
	height: calc(30px*6 + 2px*5 + 4px);
	
	box-sizing: border-box;
	border: solid 2px var(--bright-color);
	
}

.spacer{
	width: 100%;
	height: 2px;
	background: var(--bright-color);
}

.nav_opt{
	height: 30px;
	
	background: #a0a0a030;
}

.active_opt{
	height: 30px;
	
	background: #a0a0a0ff;
}

.nav_opt:hover{
	/*background: #a0a0a0;*/
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.6) 90%);
}

.navlink{
	width: 100%;
	height: 100%;

	box-sizing: border-box;	
	padding: 0 8px 0 8px;

	display:flex;
	align-items: center;
		
	color: var(--bright-color);
	text-decoration: none;
}

.navlink:visited{
	color: var(--bright-color);
}

#updatesection{
	width: 100%;
	height: 180px;

	box-sizing: border-box;
	border: solid 2px var(--bright-color);

	display: flex;
	flex-direction: column;
	justify-content: space-between;

}

#updatestitle{
	width: 100%;
	height: 40px;
	
	box-sizing: border-box;
	margin: 0;
	padding: 0 8px 0 8px;

	display:flex;
	align-items: center;

	color: var(--bright-color);
}

#updates{
	width: 100%;
	height: 130px;

	box-sizing: border-box;
	border: solid 2px var(--bright-color);
}

.update_div{
}

#contentarea{
	width: 80%;
	height: 100%;
	
	box-sizing: border-box;
	border: solid 2px var(--bright-color);
}

.inline_link{
	color: var(--bright-color);
}
.inline_link:visited{
	color: var(--bright-color);
}

#footer{
	width: 100%;
	height: 36px;

	box-sizing: border-box;
	border: solid 2px var(--bright-color);
	padding: 0 12px 0 12px;	

	display: flex;
	justify-content: space-between;
	align-items: center;

	
}

.footertext{
	color: var(--bright-color);
	font-size: 13px;
}