body {
	background-image: url(/_media/images/background.png);
	background-repeat: repeat;
}


/* ===================================================================== */
/* ============================== HEADER =============================== */
/* ===================================================================== */
.header-bar {
	position: fixed;
	width: 100%;
	height: 70px;
	background-color: #111111;
	overflow: hidden;
	min-width: 450px;
}

.header-logo-text {
	height: 100%;
	margin-left: 20%;
	display: flex;
	align-items: center;
	float: left;
}

#top-logo {
	height: 50px;
}

#top-title {
	font-family: 'Segoe UI', sans-serif;
	font-size: 40px;
	padding-left: 15px;
	color: #CCCCCC;
	margin-top: -5px;
}

.nav-bar {
	height: 100%;
	display: flex;
	float: right;
	margin-right: 20%;
	align-items: center;
}

.nav-button {
	width: 10vw;
	max-width: 125px;
	min-width: 50px;
	padding: 0 5px 0 5px;
	height: 30px;
	color: #CCCCCC;
	font-family: 'Segoe UI', sans-serif;
	font-size: 15px;
	text-decoration: none;
	display: table;
}

.left-nav-button {
	border-left: none;
}

.nav-button:hover {
	background-color: #181818;
}

#current-nav-button {
	background-color: #222222;
	border-radius: 5px;
}

.nav-button p {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}


/* ===================================================================== */
/* ============================ MAIN BODY ============================== */
/* ===================================================================== */
.page-content {
	width: 60%;
	margin: auto;
	z-index: -100;
}


/* ===================================================================== */
/* ============================== FOOTER =============================== */
/* ===================================================================== */
.copyright-box {
	position: fixed;
	bottom: 0;
	right: 0;
	background-color: #111111;
	padding: 4px;
}

.copyright-box p {
	color: #777777;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 10px;
}


/* ===================================================================== */
/* =============================== MEDIA =============================== */
/* ===================================================================== */
@media only screen and (max-width: 900px) {
	#top-title {
		display: none;
	}
}