@import "bootstrap.less";
#reset > .global-reset;

// Content
@contentColor:      #384445;

// LINKS
@linkColor:         lighten(@contentColor,20%);
@linkColorHover:    darken(@linkColor, 10);
a {
  color: @linkColor;
  text-decoration: none;
  &:hover {
    color: darken(@linkColor, 10);
  }
}
// LAYOUT
html,
body {
}
html {
}
body {
  color: @contentColor;
  padding: 2em;
  #gradient > .directional (rgba(250,250,250,75), rgba(255,255,255,0), 320deg);
}
header {
  color: darken(@contentColor, 10%);
  text-align: center;
  h1 {
    letter-spacing:-1px;
    text-transform: uppercase;
    width: 100%;
    #font > .sans-serif(700, 4.3em, 1.3em, normal);
    .char1 {}
    .char2 {}
    .char3 {}
    .char4 {}
    .char5 {}
    .char6 {}
    .char7 {margin-left:-2px;}
    .char8 {margin-left:-2px;}
    .char9 {}
    .char10 {margin-left:-5px;}
    .char11 {}
    .char12 {}
    .char13 {}
  }
  h2 {
    width: 100%;
    #font > .serif(normal, 2.2em, 1, italic);
  }
}
section {
  margin: 2em auto 2.5em;
  width: 36em;
}
#summary {
  width: 40em;
  p {
    #font > .serif(normal, 1.3em, 1.5em);
  }
}
#founders {
  overflow: hidden;
  dl {
    float: left;
    position: relative;
    width: 50%;
    dt.photo {
      background: lighten(@contentColor,50%);
      background-size: 100% auto;
      background-position: center center !important;
      height: 12em;
      .opacity(90);
      .transition(opacity .1s ease-in);
      &:hover {
        .opacity(100);
      }
    }
    dt.name {
      background: darken(@contentColor, 10%);
      color: #FFF;
      float: left;
      padding: .5em 1em;
      position: absolute;
      top: 9.8em;
      #font > .sans-serif(normal, 1em, 1.3em, normal);
    }
    dd.follow {
      overflow: hidden;
      position: absolute;
      right: 5px;
      top: 9.3em;
      width: 100px;
      iframe {
      }
    }
    &:first-child {
      dt,dd {
        margin: 0 1em 0 0;
      }
      dt.photo {
        background: url(../img/aaron.jpg) no-repeat;
      }
      dd.follow {
        right: 5px
      }
    }
    &:last-child {
      dt,dd {
        margin: 0 0 0 1em;
      }
      dt.photo {
        background: url(../img/kyle.jpg) no-repeat;
      }
      dd.follow {
        right: -12px
      }
    }
    dd {
      clear: left;
      padding: 1em;      
      #font > .serif(normal, 1em, 1.2em);
    }
  }
}
footer {
  color: lighten(@contentColor, 50%);
  text-align: center;
  text-transform: uppercase;
  #font > .sans-serif(300, 1em, 1.3em, normal);
}

@media (max-width:600px) {
  #founders {
    width: 100%;
    dl {
      float: none;
      margin-bottom: 1em;
      width: 100%;
    }
    dt,dd {
      margin: 0 !important;
    }
  }
}