* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/** more normalize **/
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html, body { height: 100%; }

/*
Typography
==================================
*/
body { font-family: "Merriweather", "Georgia", "Times New Roman", serif; font-weight: 400; font-style: normal; line-height: 1.9em; }

header h1 { font-family: "Merriweather", "Georgia", "Times New Roman", serif; font-weight: normal; }

h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", Arial, sans-serif; }

h1 { margin-top: 0.8em; margin-bottom: 1em; font-size: 24pt; line-height: 1.3em; }

h2, h3, h4, h5, h6 { margin-top: 2em; line-height: 1.2em; }

h2:before, h3:before, h4:before, h5:before, h6:before { content: ''; display: block; position: relative; width: 0; height: 4em; margin-top: -4em; }

/** Table Structure */
table { border-collapse: collapse; border-spacing: 0; border: 1px solid black; }

td { text-align: left; font-weight: normal; vertical-align: middle; border: 1px solid black; padding: 5px; }

th { border: 1px solid black; padding: 5px; }

/** Overall structure, desktop and mobile */
header { background-color: #153E56; padding: 1.3em; color: #ffffff; position: fixed; height: 80px; width: 100%; z-index: 1; }
header h1 { margin: 0; font-size: 26pt; }
header h1 a, header h1 a:link, header h1 a:visited { color: #ffffff; border-bottom: 0px; }
header h1 a:hover { border-bottom: 1px solid #fff; }

aside { float: left; display: block; margin-right: 2.35765%; width: 25.36421%; margin-top: 80px; }
aside:last-child { margin-right: 0; }

article { margin-left: 2.13245%; float: left; display: block; margin-right: 2.35765%; width: 65.88078%; margin-bottom: 20px; margin-top: 80px; overflow: hidden; }
article:last-child { margin-right: 0; }

@media screen and (min-width: 600px) { .header_menu { float: right; } }
@media screen and (max-width: 600px) { header { padding: 20px 10px; height: 95px; }
  header h1 { font-size: 18pt; }
  aside { float: left; display: block; margin-right: 2.35765%; width: 100%; margin-top: 95px; }
  aside:last-child { margin-right: 0; }
  article { float: left; display: block; margin-right: 2.35765%; width: 100%; padding-left: 5px; padding-right: 10px; margin-top: 0px; }
  article:last-child { margin-right: 0; } }
@media screen and (max-width: 320px) { header h1 { font-size: 16pt; } }
/* todo: errrr */
img { width: 700px; }

/* Lists */
article ul { padding-left: 1.1em; }

article li { margin-bottom: 1em; }

li h3, li h4 { margin: 0; }

li p { margin-top: 0; }

/* Navigation */
aside p { padding-left: 15px; }
aside .sidebar-nav a { display: block; padding: 10px; -webkit-transition: .4s; transition: .4s; }
aside .sidebar-nav a, aside .sidebar-nav a:link, aside .sidebar-nav a:visited { border-bottom: none; color: #75787b; }
aside .sidebar-nav li:hover, aside .sidebar-nav .sidebar-nav-active { color: #75787b; border-left: 5px solid #153E56; background-color: transparent; border-bottom: 1px solid #babbbd; padding-left: 0; }
aside .sidebar-nav ul { margin: 0; padding: 0; }
aside .sidebar-nav li { list-style: none; border-bottom: 1px solid #babbbd; font-size: 1.125em; padding-left: 5px; }
aside .sidebar-nav li:last-child { border-bottom: none; }

p > code, li > code { padding: 2px 4px; background-color: #eaeaff; border: 1px solid #d5d5d5; font-size: 10pt; font-family: monospace; }

pre { max-width: 100%; font-size: 0.875em; overflow-y: scroll; background-color: #f1f2f2; padding: 10px; }

/* Links */
/* for hover effects */
a { -webkit-transition: .2s; -moz-transition: .2s; transition: .2s; }

a, a:link, a:visited { color: #0072ce; border-bottom: 1px dotted #0072ce; text-decoration: none; }

a:hover { border-bottom: 1px solid #7eb8dd; color: #7eb8dd; text-decoration: none; }

a:active { border-bottom: 1px solid #0072ce; color: #002d72; text-decoration: none; }

a:focus { border-bottom: 1px solid #0072ce; color: #0072ce; outline: thin dotted; text-decoration: none; }

a.skip-link { color: #0072ce; border-bottom: none; padding: .25em; }

a.skip-link:hover, a.skip-link:active, a.skip-link:focus { background-color: #0072ce; color: #ffffff; border-bottom: none; }

/* Helpers */
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }