.explorer

  // These should eventually go away once there's a proper
  // typographical grid in place and there's more default,
  // out-of-the-box CSS in place
  p
    font-size: 1.5em
    margin-bottom: 1em

  h1
    font-family: "Knockout 49 A", "Knockout 49 B"
    text-transform: uppercase
    font-weight: 400
    font-style: normal
    font-size: 4em

  .content_container
    padding: 2em
  // End of code to refactor out

  div.search
    width: 80%
    margin: 2em 0 0 0
    padding: .8em
    form
      button, input[type="submit"]
        //for buttons on a grid, default button styling has to be overriden
        line-height: auto
        height: auto
        font-size: 2em
        padding: 0
        //actual styling
        +border-radius(0 0.1em  0.1em 0)
        +background-gradient(#222, #666)
        +box-shadow(0 2px 4px #888888)
        font-family: "freight-sans-pro-n9", "freight-sans-pro"
        font-weight: 700
        text-transform: uppercase
        color: #eee
        text-shadow: 0 -1px 0 #444444
        &:hover, &.hover
          +background-gradient(#666,#222)




  .header
    border-bottom: 1px solid lighten(#222, 75%)

    +breakpoint(mobile)
      padding-left: 1.5em

    h1
      font-family: "freight-sans-pro-n9", "freight-sans-pro"
      font-weight: 900
      font-size: 4.25em
      text-transform: uppercase
      height: 66px

      +breakpoint(mobile)
        font-size: 3.5em
        line-height: 0.9

      a
        color: #222
        &:hover
          text-decoration: none

      small
        display: block
        font-size: 0.45em
        font-family: Helvetica, Arial, sans-serif
        margin-left: 0.15em
        text-transform: none
        color: lighten(#222, 50%)
        font-weight: normal
        margin-left: 3.55em

        +breakpoint(mobile)
          display: none

  .content
    margin-top: 1.5em

    hr
      display: block
      width: 90%
      height: 1px
      border: solid 1px lighten(#222, 80%)
      margin: 2em auto


  .overview
    h1, h2
      font-family: "Knockout 49 A", "Knockout 49 B"

      +breakpoint(mobile)
        padding-left: 0.5em

    h1
      line-height: 0.9
      font-weight: bold
      font-size: 4.5em
      display: block
      width: 100%
      border-bottom: 2px solid $yellow
      padding-bottom: 0.15em

      a
        color: #222
        &:hover
          color: #008990

      small
        a
          color: lighten(#222, 50%)
        color: lighten(#222, 50%)
        font-size: 0.75em
        font-weight: normal
        white-space: nowrap

    .summary
      overflow: hidden
      padding: 20px

      > div
        overflow: hidden

      img
        float: left
        padding-right: 20px

      dl
        float: left
        width: 70%
        margin-bottom: 0.5em
        line-height: 1.3
        +breakpoint(mobile)
          width: 100%

        dt
          color: lighten(#222, 50%)
          font-style: italic

          width: 25%
          float: left

        dd
          width: 75%
          float: left

        dt, dd
          font-size: 1.5em
          +breakpoint(mobile)
            float: none
            width: 100%
            display: block

        &.vertical
          dt, dd
            width: 100%
            float: none

          dt, li
            padding-bottom: 0.25em

          dd
            padding-left: 20px

            ul
              padding-left: 10px
              list-style: disc


  .list
    h1
      padding-left: .5em
    .controls
      font-size: 1.5em
      clear: both
      text-transform: uppercase
      font-family: "freight-sans-pro-n9", "freight-sans-pro"
      font-weight: 700
      dl
        margin: 1em
        float: left
        dt, li
          float: left
          width: auto
          padding-top: 0.5em
          padding-bottom: 0.5em
        li
          padding-left: 0.75em
          padding-right: 0.75em

        dt
          padding-right: 0.5em
          color: #666 !important
          margin-left: 5px
          text-transform: none


        dd
          float: left
          ul
            width: auto
            overflow: hidden
            display: inline-block

            border-left: 0
            li
              +border-radius(5px)
              border: 1px solid lighten(#222, 75%)
              +background-gradient(#ccc)
              margin: 0 5px
              a
                color: #222 !important
              &:hover, &.hover
                +background-gradient(#409761, #7dc69f)
                a
                  color: #fff !important
                  text-decoration: none
            li.active
              +background-gradient(#409761, #7dc69f)
              a
                color: #fff !important


    ul.grid
      clear: both
      li
        padding: 0.5em 1em
        float: left

        &:last-of-type
          padding-right: 1em

        div
          height: 2.5rem
          display: block
          padding: 0.5em 1em
          width: 100%


          &.republican, &.democratic
            color: #222

          &.republican
            background-color: $republicanBackground

          &.democratic
            background-color: $democraticBackground

  .component
    h2
      font-size: 2.5em
      font-weight: bold
      font-family: Helvetica, Arial, sans-serif
      padding-bottom: 6px
      margin: 18px auto
      border-bottom: 2px solid

      +breakpoint(mobile)
        padding-left: 0.5em

    &.careers h2
      border-color: lighten($blue, 10%)
    &.property h2
      border-color: lighten($purple, 10%)
    &.law-ethics h2
      border-color: lighten($green, 10%)
    &.contributions h2
      border-color: lighten($orange, 10%)
    &.analysis h2
      border-color: lighten($red, 10%)

    // TODO: Remove this once there's a proper typography framework
    ul
      list-style: disc
      margin-left: 1.5em



      li
        margin-left: 1.5em
        margin-bottom: 0.5em
        font-size: 1.5em
        line-height: 1.4

    p
      margin-left: 1.5em

    li p
      margin: 0
      font-size: 1.0em
