@import url(http://fonts.googleapis.com/css?family=Bitter);

html { box-sizing: border-box; }
body { font-family: 'Bitter', serif, "Courier New", Courier, monospace; font-size: 100%;  line-height: 2; color: #fff; background-color: #000; -webkit-font-smoothing: antialiased; }
.one_third { width: 33%;}
.one_third li { max-width: 84% }
ol, ul { padding: 0; list-style-type: circle; list-style-position: inside; }
#content { width: 80%; padding: 10px 20px; margin: 0 auto 0 auto; }
p { text-align: justify; }
p a { color: #999; }
.full_width, .one_half, .one_third, .two_third, .one_fourth, .three_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { float: left; }
.clear_column { clear: both; display: block; font-size: 0; height: 0; line-height: 0; width: 100%; overflow: hidden; }
#logo { background-image: url(images/banner.png); width: 452px; height: 312px; background-position-y: 0px; display: block; margin: 0 auto 0 auto; overflow: hidden; background-repeat: no-repeat;}
h2 a, a {font weight: bold; color: #333; text-decoration: none;}
h2 a:hover, a:hover { text-decoration: underline; }
.social { position: absolute; top: 255px; }
.social li { display: inline; float: left; padding: 0 0 0 20px; }

*, *:before, *:after { box-sizing: inherit; }
ul { list-style-type: none; margin: 0; padding: 0; }
ul:after { /* to clearfix your ul list */
  content: "";
  display: table;
  clear: both;
}
ul li {
  display: block; /* inline-block have an extra 4px margin wich makes it harder to use in this situation */
  width: 10%; /* You get it (100/3) but use exact number */
  padding: 10px 5px;
  float: left; /* if you use block elements you have to float them */
  text-align: center;
}
figure { margin: 0; /* to normalize figure element */ }
figure img { max-width: 100%; max-height: 100%; }