/*default styles */
html {
  height:100%;
  width:100%;
}
body {
  background-color:#999999;
  width:100%;
  padding:0;
  margin:0;
}
h1 {
  font-size:45px;
  text-align:center;
  margin:0;
}
p {
  text-align:left;
  font-size:18px;
  margin:5px;
}
div {
  margin:0;
}
pre {
  text-align:left;
  margin:5px;
  background-color:#000000;
  color:#ffffff;
  overflow:auto;
}
code {
  overflow: auto;
  display: block;
}
h2 {
  text-align:left;
  font-size:25px;
  margin:5px;
}
h3 {
  text-align:left;
  font-size:18px;
  margin:5px;

}
#wrapper {
  background-color:#dddd99;
}
#header {
  background-color:#aaaaff;
  float:none;
}
#navigation {
  background-color:#ffaaff;
}
#content {
}
#guide-navigation {
  text-align: center;
  display: block;
  padding-bottom: 10px;
}
/* small shit */
@media only screen and (max-width: 550px) {
body {
  min-height:calc( 100% - 46px );
  height:auto;
  position:relative;
}
.link {
  display:inline;
}
div {
  float:none;
  width:100%;
}
code {
  max-width: 100%;
}
#wrapper {
  min-height:calc( 100vh - 46px);
  height:100%;
}
#navigation {
  position:absolute;
  height:46px;
  bottom:-46px;
}
#content {
}
#guide-navigation {
}
}
/* as stuff gets bigger */
@media only screen and (min-width: 550px) {
body {
  height:100%;
}
p {
  margin-bottom:15px;
}
h2 {
  margin-bottom:15px;
}
div {
  display:table-cell;
}
code {
  max-width:calc( 100vw - 105px );
}
#wrapper {
  height:100vh;
}
#header {
  min-height:55px;
  display:block;
}
#layout {
  display:table;
  height:calc( 100% - 55px );
}
#navigation {
  width:95px;
}
#content {
  width:calc( 100% - 95px );
}
#guide-navigation {
  width:calc( 100vw - 95px );
}
}
/* as stuff gets really big */
@media only screen and (min-width: 1200px) {
code {
  max-width: 905px;
}
#wrapper {
  width:1000px;
  margin:auto;
  display:table;
}
#content {
  width: 905px;
}
#guide-navigation {
  width: 905px;
}
}
h1 {color: #000000}
h2 {color: #000000}
a:link {color: #001133}
a:visited {color: #001133}
a:hover {color: #0000aa}
a:active {color: #001133}
p {color: #000000}
form {font-size: 18px}
img {border: 0;padding-left:5px;padding-right:5px;display:block;margin-left:auto;margin-right:auto}