style.css

/* This is a very rough stylesheet, it will be built on the HTML5 Boilerplate eventually, but I wanted to keep it simple in order to get it working first */
/*==|== Variables ============================================= */
/*==|== Mixins ================================================ */
/*==|== General =============================================== */
body, div {
  padding: 0;
  margin: 0; }

input {
  display: none !important;
  visibility: hidden; }

/*==|== Layout ================================================ */
.wrap {
  width: 97%;
  max-width: 960px;
  margin: 0 auto; }

header {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 55px;
  position: fixed; }
  header h1 {
    margin: auto 0; }

/* Toggle button */
label#navbuttontop {
  padding: 0;
  margin: 7px;
  float: left;
  /* This causes us to have to move one less thing when :checked, but pushes the header to the right and brings it off of center */
  width: 30%;
  height: 35px; }
  label#navbuttontop h6 {
    margin: auto 0; }

/* An invisible label that allows the user to return to the page by clicking anywhere outside of the navigational menu */
label#contentsideoverlay {
  position: fixed;
  left: 60%;
  top: 0;
  width: 40%;
  height: 100%; }

nav {
  position: fixed;
  overflow: hidden;
  width: 0;
  height: 100%;
  margin: 0;
  padding: 0; }
  nav ul, nav li {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0; }
  nav ul li a {
    display: block;
    float: right;
    margin: 0;
    width: 95%;
    padding: 2.5%; }
  nav ul li ul li a {
    width: 80%; }

/* Content area */
#content {
  position: fixed;
  overflow: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 55px;
  height: 100%;
  width: 100%;
  z-index: -1; }
  #content img {
    display: block;
    margin: 0 auto; }

/*==|== Appearance ============================================ */
header {
  background-color: #027f93;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 2px 0 rgba(250, 250, 250, 0.3) inset;
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 2px 0 rgba(250, 250, 250, 0.3) inset;
  -o-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 2px 0 rgba(250, 250, 250, 0.3) inset;
  -ms-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 2px 0 rgba(250, 250, 250, 0.3) inset;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5), 0 2px 0 rgba(250, 250, 250, 0.3) inset;
  text-align: center; }
  header h1 {
    font: 1.5em/55px arial;
    /* Change with $barheight */
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }

label#navbuttontop {
  text-align: center;
  border: 3px solid rgba(0, 0, 0, 0.15); }
  label#navbuttontop h6 {
    font: 1.2em/35px arial;
    /* Change with $navlabelheight */
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }

label#contentsideoverlay {
  visibility: hidden;
  opacity: 0; }

nav {
  background-color: #4e4e4e; }
  nav ul {
    list-style: none;
    background-color: #027f93; }
  nav li {
    border-top: 1px solid #dadada;
    border-bottom: 1px solid #4e4e4e; }
  nav ul li:first-child {
    border-top: 0; }
  nav ul li:last-child {
    border-bottom: 0; }
  nav li:hover, nav li:focus, nav li:active {
    background-color: #015461; }
  nav a {
    text-decoration: none;
    color: #fff;
    font: 1em/1.5em arial;
    text-shadow: 0 1px 0 black; }

#content {
  background-color: #03aac5;
  font: 1em/1.5em arial; }

/* Transitions */
header, nav, div {
  -webkit-transition-duration: 0.7s;
  -moz-transition-duration: 0.7s;
  -o-transition-duration: 0.7s;
  transition-duration: 0.7s; }

/*==|== Bugfixes ============================================== */
	/* The following code may be able to fix Android's mistreatment of the ~ combinator.  Needs testing.
	body { -webkit-animation: bugfix infinite 1s; }

  @-webkit-keyframes bugfix { 
    from { padding: 0; } 
    to { padding: 0; } 
  }
  */
label {
  cursor: pointer; }

/*==|== Sidebar Method Implementation ========================= */
/* All must be moved separately because of the fixed positioning */
input[id=nav]:checked + #page #content, input[id=nav]:checked + #page header {
  left: 60%;
  overflow: hidden; }

input[id=nav]:checked + #page nav {
  width: 60%;
  overflow: auto; }

input[id=nav]:checked + #page label#contentsideoverlay {
  visibility: visible; }