* {
	box-sizing: border-box;
}

html {
	font: 16px/24px sans-serif;
}

body {
	background-color: var(--body-background-color);
	margin: 0;
}

h1, p {
	margin-top: 0;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1em;
	margin-bottom: .875rem;
}

h2, h3, h4, h5, h6 {
	margin-top: 2rem;
}

a {
	color: var(--menu-links);
	text-decoration: none;
}

a:hover {
	color: var(--menu-links-hover);
}

a.current {
	font-weight: bold
}

/* element spaces */
.mb0 {
	margin-bottom: 0;
}
.mt0 {
	margin-top: 0;
}

body>header {
	background-color: var(--body-header-color);
	color: #fff;
	height: 60px;
	left:0;
	line-height: 60px;
	padding: 0 26px;
	position: fixed;
	right: 0;
	top: 0;
}

body>nav {
	background-color: var(--body-nav-color);
	border-right: 1px solid var(--border-color);
	bottom: 0;
	padding: 1rem;
	position: fixed;
	top: 60px;
	width: 250px;
}

body>main {
	margin-left: 250px;
	margin-top: 60px;
	padding: 26px 26px 36px;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

nav ul li {
	border-bottom: 1px solid var(--border-color);
	font-size: 0.875rem;
	padding: 10px;
	text-transform: uppercase;
}

nav ul ul {
	border-top: none;
	margin: 0.5rem;
}

nav ul ul li {
	border-bottom: none;
	padding: 1px;
	text-transform: none;
}

.wrapper {
	margin: 0 auto;
	width: 90%
}

.clearfix {
   zoom: 1;
}
.clearfix:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

@media only screen and (max-width: 1260px) {
	.wrapper {
	}
}

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 480px) {
}

@media only screen and (max-width: 320px) {
}