.width-limiter {
  max-width: 900px;
  margin: auto;
  padding: 0 5%; }

[role=banner] {
  background-color: #fff;
  border-bottom: solid 1px gray;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
  margin-bottom: 1em; }

[role=banner] h1 {
  float: right; }

[role=navigation] {
  clear: both;
  font-size: 1.2em;
  line-height: 1.5em;
  margin-left: -2em;
  font-weight: bold; }

[role=navigation] li {
  display: inline-block;
  padding-left: 0; }

[role=navigation] a {
  color: inherit;
  text-decoration: none;
  padding: 0.5em 1em;
  display: block;
  border-bottom: solid 2px transparent;
  /*    -webkit-transition: all .3s;*/ }

[role=navigation] li.active a {
  /*    box-shadow: 0 -2px 0 #808080 inset;*/
  border-bottom: solid 2px gray; }

[role=navigation] li:hover a {
  color: #000;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); }

[role=main] .sub-menu {
  margin: 0;
  margin-bottom: 1.5em;
  margin-top: -1.8em;
  padding: 0;
  overflow: hidden;
  border-bottom: solid 1px rgba(0, 0, 0, 0.5); }
  [role=main] .sub-menu > li > a {
    font-weight: bold; }
    [role=main] .sub-menu > li > a:after {
      content: ':'; }
  [role=main] .sub-menu, [role=main] .sub-menu ul {
    list-style: none; }
  [role=main] .sub-menu ul, [role=main] .sub-menu li, [role=main] .sub-menu a {
    margin: 0;
    padding: 0;
    float: left; }
  [role=main] .sub-menu a {
    display: block;
    padding: 0 0.75em;
    text-decoration: inherit;
    color: inherit;
    line-height: 1cm; }
  [role=main] .sub-menu li.active > a, [role=main] .sub-menu a:hover {
    box-shadow: 0 -0.2em 0 rgba(0, 0, 0, 0.5) inset; }

[role=main] {
  padding: 1em 0;
  margin-bottom: 3em;
  overflow: hidden; }

[role=contentinfo] {
  background: -webkit-linear-gradient(top, white, rgba(255, 255, 255, 0));
  background: -moz-linear-gradient(top, white, rgba(255, 255, 255, 0));
  background: -ms-linear-gradient(top, white, rgba(255, 255, 255, 0));
  background: -o-linear-gradient(top, white, rgba(255, 255, 255, 0));
  background: linear-gradient(top, white, rgba(255, 255, 255, 0));
  border-top: solid 1px gray;
  /*    box-shadow: 0 0 .5em rgba(0, 0, 0, .2);*/
  padding: 2em 0;
  overflow: hidden; }
  [role=contentinfo] .col {
    width: 33.33333%;
    float: left;
    padding-right: 1em; }

[role=main] .flash-messages {
  list-style: none;
  margin: 0;
  margin-bottom: 1.5em;
  background-color: rgba(255, 255, 255, 0.5);
  border: solid 1px gray;
  border-radius: .2em;
  font-size: 1.44em;
  padding: 0.3em 0.4em;
  font-weight: bold;
  color: #444; }
  [role=main] .flash-messages > li {
    margin: 0;
    padding: 0; }