html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, em, img, q, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
body { line-height: 1; color: #000; background: #fff; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img, input[type="image"] { border: none; }
.clearfix:after { content: "."; display: block; height: 0; clear :both; visibility: hidden; }
* html .clearfix {
  height: 1%;
}
.clear { clear: both; }



#projects::-webkit-scrollbar                        { width: 8px; height: 8px; }
#projects::-webkit-scrollbar-button:start:decrement,
#projects::-webkit-scrollbar-button:end:increment   { display: block; width: 8px; height: 8px; background-color: transparent; }
#projects::-webkit-scrollbar-track:enabled          { background-color: transparent; }
#projects::-webkit-scrollbar-thumb:horizontal       { width: 30px; background-color: rgba(0, 0, 0, 0.1); -webkit-border-radius: 5px; }
#projects:hover::-webkit-scrollbar-thumb:horizontal { background-color: rgba(0, 0, 0, 0.3); }

#ohio {
  display    : none;
  position   : absolute;
  top        : 20px;
  right      : 20px;
  width      : 55px;
  height     : 59px;
  background : url(/images/ohio.png); }

html, body {
  color       : #dfdfdf;
  font-family : 'Hoefler Text', georgia, serif;
  background  : #54695c url(/images/bg.png); }

#container { padding: 74px 0 0 36px; }

#wrapper h1 {
  margin-bottom : 70px;
  font          : 24px helvetica, arial, sans-serif;
  font-weight   : bold; }

h1 span { font-weight: normal; }

h1 span#name {
  display       : block;
  margin-bottom : 7px;
  font          : 16px 'Hoefler Text', georgia, serif;
  font-style    : italic; }

a {
  color           : #dfdfdf;
  text-decoration : none; }

p#intro {
  margin-bottom : 40px;
  color         : #a7b0ab;
  font-size     : 18px;
  line-height   : 118%; }

#wrapper { width: 348px; }

.external {
  display       : block;
  float         : left;
  width         : 174px;
  border-bottom : 1px solid #65786d;
  padding       : 10px 0; }

.external p {
  color     : #a7b0ab;
  font-size : 14px; }

.external h2 {
  margin-bottom  : 5px;
  font           : 13px 'proxima-nova-1','proxima-nova-2', 'gotham htf', sans-serif;
  font-weight    : 600;
  text-transform : uppercase; }


#projects {
  overflow : auto;
  position : absolute;
  top      : 55px;
  right    : 0;
  left     : 440px;
  height   : 370px; }

#projects_wrapper { width: 1175px; }

.project {
  float             : left;
  display           : block;
  width             : 245px;
  height            : 177px;
  margin-right      : 13px;
  padding           : 160px 15px 0 15px;
  background-color  : #fff;
  background-repeat : no-repeat;

  -moz-box-shadow    : 4px 4px 0 rgba(0,0,0, 0.1);
  -webkit-box-shadow : 4px 4px 0 rgba(0,0,0, 0.1);
  box-shadow         : 4px 4px 0 rgba(0,0,0, 0.1); }

.project h1 {
  margin-bottom  : 1.25em;
  color          : #ea874b;
  font           : 13px 'proxima-nova-1','proxima-nova-2', 'gotham htf', sans-serif;
  text-transform : uppercase; }

.project p {
  color       : #555;
  line-height : 120%;
}

.project.alt { background-color: #ea874b }

.project.alt h1, .project.alt p { color: #fff; }

#sparks       { background-image: url(/images/sparks.jpg);       }
#rubykoans    { background-image: url(/images/rubykoans.png);    }
#gitimmersion { background-image: url(/images/gitimmersion.png); }
#paperactive  { background-image: url(/images/paperactive.jpg);  }
#triato       { background-image: url(/images/triato.jpg);       }