body {
	background-color: #262626;
	color: #BCBCBC;
  
	font-size: 15px;
	font-family: 'Courier New', Courier, monospace, monospace;
}

a:link {
	color: #5F87AF;
}

a:visited {
	color: #5F5F87;
}

table, th, td {
  border: 1px solid #5F5F87;
}

#sidebarcontainer {
        order: 0;
	width: 15%;
	height: 100%;
        border: 7px solid #5F5F87;
	padding: 1%;
	overflow: auto
}

#main {
	order: 1;
	width: 80%;
	height: 90%;
	border: 7px solid #5F5F87;
	padding: 1%;
	overflow: auto
}

.flex {
	width: 100%;
	height: 100%;
	margin: auto;
	display: flex;
	flex-direction: row;
}

@media (orientation: landscape) {
	#sidebarcontainer {
		order: 0;
		width: 15%;
		height: 100%;
		margin-right: 1%;
		border: 7px solid #5F5F87;
		padding: 1%;
		overflow: auto
	}

	#main {
		order: 1;
		width: 80%;
		height: 90%;
		margin-left: 1%;
		border: 7px solid #5F5F87;
		padding: 1%;
		overflow: auto
	}
	.flex {
		width: 100%;
		height: 100%;
		margin: auto;
		display: flex;
		flex-direction: row;
	}
}


@media (orientation: portrait) {
	#sidebarcontainer {
		order: 0;
		min-width: 85%;
		max-width: 85%;
		height: 15%;
		margin-bottom: 1%;
		border: 7px solid #5F5F87;
		padding: 1%;
		overflow: auto
	}

	#main {
		order: 1;
		min-width: 85%;
		max-width: 85%;
		height: 85%;
		margin-top: 1%;
		border: 7px solid #5F5F87;
		padding: 1%;
		overflow: auto
	}
	.flex {
		width: 100%;
		height: 100%;
		margin: auto;
		display: flex;
		flex-direction: column;
	}
}