/* ---- nav ---- */

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ---- container & main ---- */

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 10px;
}

#content .main > *:first-child { margin-top: 0; }

#content .container {
  position: relative;
}

.main {
  margin-left: 230px;
  padding-bottom: 40px;
}

/* anchor links */
.main h2,
.main h3,
.main h4 {
  position: relative;
}

.header-anchor {
  position: absolute;
  display: none;
  left: -1.1em;
  color: #00acee;
  padding-right: 1.0em;
  font-size: 0.9em;
}

h2:hover .header-anchor,
h3:hover .header-anchor,
h4:hover .header-anchor {
  display: inline-block;
}

.header-anchor:hover {
  color: #543729;
  text-decoration: none;
}

/* ---- lead ---- */

.lead {
  font-size: 1.6em;
  line-height: 1.25;
}

/* ---- about imgs ---- */

.download-logo {
  width: 100%;
  max-width: 400px;
}

.content-img {
  max-width: 100%;
}

/* ---- site-footer ---- */

.site-footer {
  padding-top: 10px;
  border-top: 1px solid #DDD;
  margin-top: 40px;
  font-size: 0.9em;
}

/* ---- color-palette ---- */

.color-palette {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 10px;
  font-size: 0.9em;
  color: white;
  margin-bottom: 4px;
  border-radius: 4px;
}

.color-palette.color-dark-brown { background: #543729; }
.color-palette.color-red { background: #EF5734; }
.color-palette.color-gold { background: #FFCC2F; }
.color-palette.color-green { background: #2BAF2B; }
.color-palette.color-blue { background: #00ACEE; }
.color-palette.color-light-gray { background: #CECECE; }

.color-palette.color-gold,
.color-palette.color-light-gray { color: #543729; }


.color-palette .color-name { display: block; }
.color-palette .color-hex { display: block; }
