styles.css

html{
  background-color: #eee;
  font-family: 'Roboto';
  font-size: 20pt;
}
body{
  display: block;
  margin: 0 auto;
  max-width: 960px;
  position: relative;
  background-color: #fff;
}
#mainpage{
  /*-webkit-box-shadow: 0 0 15px 2px #000;
  box-shadow: 0 0 15px 2px #000;
  border: 0px solid black;*/
  margin: 0px 0px;
  padding: 20px 20px;
  overflow: hidden;
}
section{
  float: right;
  width: 100%;
  margin: 0px 0px;
}
.embeddedimg{
  float: right;
  margin: 30px 30px;
}
code{
  font-family: 'Fira Mono', 'Courier New', monospace;
}
h1{
  font-size: 64px;
  margin: 30px auto;
}
h2{
  font-size: 40px;
  border-bottom: 1px solid #888888;
}
.testClass{
	float: right;
	background-color: blue;
	color: white;
}

/* micro clear fix -- http://nicolasgallagher.com/micro-clearfix-hack/ */
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}