@font-face {
  font-family: "Junction";
  src: url(../fonts/junction.ttf) format("truetype");
}

@font-face {
  font-family: "League Gothic";
  src: url(../fonts/leaguegothic.otf) format("opentype");
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup,
menu, footer, header, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
  display: block;
}

a img {
  border: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: -webkit-gradient(radial, center center, 0, center 55, 760, from(#3d3c34), to(#2e2d27)) no-repeat fixed;
  background-color: #2e2d27;
  color: #ccc6ad;
  font-family: Junction, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 4px 3px rgba(0, 0, 0, 0.35);
}

h1, h2, h3, h4, h5, h6, p, blockquote, ul {
  margin-bottom: 12px;
}

blockquote {
  margin-left: 12px;
  padding-left: 10px;
  border-left: 2px solid #ccc6ad;
}

a {
  color: #9ad93d;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

br, .clear {
  clear: both;
}

strong {
  color: #e5dfc2;
}

header {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 44px;
  background: #6b685b;
  /* Old browsers */
  background: -moz-linear-gradient(top, #6b685b 0%, #4f4d44 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6b685b), color-stop(100%, #4f4d44));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #6b685b 0%, #4f4d44 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #6b685b 0%, #4f4d44 100%);
  /* Opera11.10+ */
  background: -ms-linear-gradient(top, #6b685b 0%, #4f4d44 100%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$lightBackground', endColorstr='darken($lightBackground, 10%)',GradientType=0 );
  /* IE6-9 */
  background: linear-gradient(top, #6b685b 0%, #4f4d44 100%);
  /* W3C */
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35), inset 0 -1px 0 #4a483f, inset 0 -2px 0 #5a584d, inset 0 1px 0 #5d5b4f, inset 0 2px 0 #716d60;
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35), inset 0 -1px 0 #4a483f, inset 0 -2px 0 #5a584d, inset 0 1px 0 #5d5b4f, inset 0 2px 0 #716d60;
  -o-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35), inset 0 -1px 0 #4a483f, inset 0 -2px 0 #5a584d, inset 0 1px 0 #5d5b4f, inset 0 2px 0 #716d60;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35), inset 0 -1px 0 #4a483f, inset 0 -2px 0 #5a584d, inset 0 1px 0 #5d5b4f, inset 0 2px 0 #716d60;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

header ul {
  list-style: none;
  padding: 0 5px;
}

header ul li {
  float: left;
}

header ul li a {
  display: block;
  margin: 7px 5px;
  padding: 3px 7px;
  color: #ccc6ad;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  font-weight: bold;
}
header ul li a:hover {
  padding: 2px 6px;
  border: 1px solid #3c3a33;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 #6e6b5d, inset 0 0 1px 1px rgba(255, 255, 255, 0.15);
  -moz-box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 #6e6b5d, inset 0 0 1px 1px rgba(255, 255, 255, 0.15);
  -o-box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 #6e6b5d, inset 0 0 1px 1px rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 #6e6b5d, inset 0 0 1px 1px rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}
header ul li a:active {
  padding: 2px 6px;
  border: 1px solid #3c3a33;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 #6e6b5d, inset 0 0 1px 1px rgba(255, 255, 255, 0.1);
  -moz-box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 #6e6b5d, inset 0 0 1px 1px rgba(255, 255, 255, 0.1);
  -o-box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 #6e6b5d, inset 0 0 1px 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 #6e6b5d, inset 0 0 1px 1px rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.15);
  -webkit-transition: background .1s;
}
header ul li a.selected {
  padding: 2px 6px;
  border: 1px solid #3c3a33;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 #6e6b5d, inset 0 0 1px 1px rgba(255, 255, 255, 0.1);
  -moz-box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 #6e6b5d, inset 0 0 1px 1px rgba(255, 255, 255, 0.1);
  -o-box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 #6e6b5d, inset 0 0 1px 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 #6e6b5d, inset 0 0 1px 1px rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.1);
}

#container {
  position: relative;
  top: 44px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#panes {
  position: relative;
  z-index: 90;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.pane {
  position: absolute;
  top: 0;
  left: 0;
  width: 640px;
  margin: 0 50px;
  padding: 20px 10px 34px;
  opacity: .25;
  -webkit-transition: opacity .35s;
}

.pane * {
  cursor: default;
}

.pane.focused {
  opacity: 1;
}

.pane.focused * {
  cursor: auto;
}

.pane h2 {
  font-family: League Gothic, Impact, Helvetica, Arial, sans-serif;
  font-size: 48px;
  line-height: 48px;
  font-weight: normal;
}

#hello h1 {
  width: 620px;
  height: 96px;
  margin: 0 auto;
  background: url(../images/hello_header.png) no-repeat center center;
  text-indent: -9000px;
}

.pane.project img.full {
  position: relative;
  left: -20px;
  display: block;
  height: 300px;
  margin-bottom: 24px;
  padding: 9px;
  border: 1px solid black;
  background: #F2EBCD;
}

.pane.project img.full.withCaption {
  margin-bottom: 6px;
}

.pane.project .caption {
  font-size: 13px;
}

.pane.project img.float_left {
  float: left;
  display: block;
  margin: 0 24px 24px 0;
  padding: 9px;
  border: 1px solid black;
  background: #F2EBCD;
}

#project_holiwrit h1 {
  width: 400px;
  height: 96px;
  margin: 0 auto;
  background: url(../images/holiwrit_header.png) no-repeat center center;
  text-indent: -9000px;
}

#project_ashes h1 {
  width: 400px;
  height: 96px;
  margin: 0 auto;
  background: url(../images/ashes_header.png) no-repeat center center;
  text-indent: -9000px;
}

#project_community h1 {
  width: 620px;
  height: 48px;
  margin: 0 auto;
  background: url(../images/co_header.png) no-repeat center center;
  text-indent: -9000px;
}

#resume h1 {
  width: 620px;
  height: 96px;
  margin: 0 auto;
  background: url(../images/resume_header.png) no-repeat center center;
  text-indent: -9000px;
}

#resume #education, #resume #experience, #freelance {
  list-style: none;
  margin-left: 24px;
}

#resume #education li, #resume #experience li, #freelance li {
  margin-bottom: 12px;
}

#resume #education .school, #resume #experience h3, #freelance h3 {
  margin-left: -24px;
  margin-bottom: 6px;
  font-size: 20px;
  line-height: 24px;
  color: #e5dfc2;
}

#resume #experience p.description, #freelance p.description {
  margin-bottom: 6px;
}

#resume #experience p.skills, #freelance p.skills {
  margin-bottom: 6px;
}

#resume #skills {
  list-style: none;
  height: 48px;
}

#resume #skills li {
  float: left;
  width: 20%;
  text-align: center;
}