body { position: absolute; width: 100%; height: 100%; margin: 0; font-family: "Lato"; }

h1, h2, h3, p { margin: 0; }

a { color: #2980B9; text-decoration: none; font-weight: bold; }
a:hover { color: #2e8ece; }

header { position: relative; background: #2980B9; height: 100px; z-index: 2; padding-left: 20px; color: white; box-shadow: 0 1px 1px #333; }
header h1 { position: absolute; bottom: 10px; font-size: 52px; font-family: "Georgia"; font-weight: normal; }

nav { position: relative; top: -100px; z-index: 1; float: left; background: #333; height: 100%; box-sizing: border-box; padding-top: 100px; width: 300px; font: 18px; }
nav ul { padding: 0; list-style: none; }
nav ul li { position: relative; padding: 0; }
nav ul li.active a { color: #000; background: #fcfcfc; }
nav ul li.active ul { border: 1px solid #bcbcbc; }
nav ul li.active ul li { padding: 5px; padding-left: 40px; color: inherit; background: #e3e3e3; cursor: default; }
nav ul li.active ul li:hover { background: #d6d6d6; }
nav ul li:not(.active):hover { background: #444; }
nav ul a { display: block; padding: 5px 20px; box-sizing: border-box; width: 100%; color: #ddd; text-decoration: none; font-weight: normal; }
nav ul a:hover { color: #ddd; }

.content { position: absolute; top: 0; left: 0; padding: 20px; padding-top: 110px; padding-left: 330px; box-sizing: border-box; height: 100%; width: 100%; overflow: scroll; font-size: 16px; background: #fcfcfc; }
.content h1, .content h2, .content h3 { margin-top: 15px; font-family: "Garamond"; }
.content pre, .content code { background: #efefef; }
.content pre { margin: 10px 40px 0; display: inline-block; }
.content ul { list-style: none; margin: 0; }
.content ul li { margin-bottom: 5px; }