.clear {
  clear: both;
  display: block;
  visibility: hidden;
}

// color pallette: http://www.colourlovers.com/palette/580974/Adrift_in_Dreams

$color1: #00A0B0;
$color2: #6A4A3C;
$color3: #CC333F;
$color4: #EB6841;
$color5: #EDC951;

body {
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

body, div, p {
  font-family: arial, helvetica;
  font-size: 14px;
}

header {
  background-color: $color5;
  height: 40px;

  nav {
    height: 100%;

    h1 {
      height: 100%;
      float: left;
      background-color: black;
      font-family: 'Trebuchet MS';
      font-size: 26px;
      padding-right: 10px;

      a {
        color: white;
        vertical-align: middle;
        margin: 6px 0 0 0;
        display: block;
      }
    }

    ul {
      list-style: none;
      height: 100%;
      float: right;
      background-color: $color1;

      li {
        color: #eee;
        display: inline-block;
        margin-right: 20px;
        height: 100%;
      }

      .avatar {
        height: 100%;
      }
    }
  }
}

a {
  text-decoration: none;
  color: $color2;
}

p {
  margin-bottom: 20px;
}

// a.logout {
//   background-image: url(image-path("logout.png"));
//   background-repeat: no-repeat;
// }

.flash {
  vertical-align: middle;
  padding: 10px 0 10px 10px;
  font-weight: bold;
}

.flash#notice {
  color: black;
  background-color: white;
}

.flash#alert {
  color: red;
  background-color: white;
}

h2 {
  // color: #3e3e3e;
  color: $color3;
  font-family: monospace;
  font-size: 20px;
  padding: 15px 0px 30px 0px;
}

#content {
  width: 960px;
  text-align: left;
  font-size: 12px;
  padding: 20px;
}