opengovernment/askthem

@import load

.clear
  clear: both
  display: block
  height: 0
  float: none

/*
 *Main structural elements
header div.wrapper,div.content_body div.wrapper,footer div.wrapper
  padding-left: 7.6923077%
  width: 85.714286%

header.main
  margin:
    top: 28px
    bottom: 24px
  width: 950px

div.content_body
  background-color: $white
  +box-shadow(0 0 5px rgba($black, 0.1), 0 35px 85px rgba($white, 0.45))
  +responsive-blocker
  +border-radius(0 2px 2px 0)
  display: inline-block
  width: 910px
  div.wrapper
    padding-bottom: 60px
    min-height: 600px

/* Structures for people, questions,
 *issues and other sub data containers
div.related_wrap
  overflow: hidden

div.related_data
  margin-top: 30px
  padding-bottom: 60px
  border:
    top: 1px solid #e7e7e7
    right: 1px solid #e7e7e7
  background
    image: url(/assets/related_bg@2x.png)
    repeat: repeat
    size: 30px 30px
  box-shadow: 0px -1px 3px rgba($black, 0.05), 0 1px 0 0px $white inset
  ul.related_nav
    padding-left: 1%
    display: block
    width: 76.5128205%
    border-bottom: 3px solid $darkblue
    box-shadow: 1px 0 0 #e7e7e7 inset
    li
      display: inline-block
      a
        margin-bottom: -3px
        padding: 21px 18px
        display: inline-block
        font-size: 0.813em
        line-height: 1.385em
        color: #999999
        &:hover
          color: $darkblue
        &.active
          padding: 21px 18px 16px
          border-bottom: 5px solid #f77463
          color: $darkblue
  div.related_content
    section.related_focus
      padding-top: 18px
      display: inline-block
      width: 77.5128205%
      min-height: 600px
      box-shadow: 3px 0 7px rgba($black, 0.03), -1px 0 0 rgba(150, 197, 206, 0.37) inset
      background-color: $white
    aside
      display: inline-block
      width: 20.5641025%
      vertical-align: top
      section
        margin:
          right: 11.62790697%
          bottom: 24px
          left: 11.62790697%
        padding-bottom: 24px
        border-bottom: 1px dashed rgba($black, 0.15)
        p
          word-wrap: break-word
        &:last-child,
        &.last
          border: 0
        ul>li
          font-size: 0.813em
          line-height: 1.385em
          color: $lightblue
          p
            font-size: 1em

/*
 *cta in header pos
section.overview
  header
    position: relative
  h1
    display: inline-block
    float: left
    clear: both
  a.cta-pill
    float: right

.sim_act
  padding: 7px 12px 6px
  display: inline-block
  min-width: 70px
  background-color: #96c5ce
  +rounded_corners
  font:
    size: 0.75em
    weight: 600
  text-align: center
  line-height: 2em
  color: $white
  &:hover
    // todo
    color: $white

a.sign_on
  float: right
  margin:
    top: 12px
    bottom: 12px +border-radius(3px)
  padding:
    top: 12px
    bottom: 12px
  display: inline-block
  position: relative
  width: 100%
  clear: right
  +box-shadow(0 2px 0 whitesmoke, 0 1px 0 0px #f5f9fa inset)
  border: 1px solid #cadfe5
  +background(linear-gradient(top center, #e4eff2, #dfeaee))
  font:
    size: 0.813em
    weight: 600
  color: #477380
  text-align: center
  &:hover
    top: -1px
    color: #709EAC
  &:active
    top: 1px
    +box-shadow(0 1px 0 whitesmoke, 0 1px 0 0px white inset)

.mobile_cta
  display: none

/*
 *Sub navigations

nav
  ul.level
    display: block
    border-bottom: 1px solid #EBF1F3
    li
      display: inline-block
      position: relative
      vertical-align: top
      a
        padding: 20px 18px
        display: inline-block
        font:
          size: .9em
          weight: 600
        +RobotoRegular
        color: #9db9bd
        +transition(color 0.2s ease-in)
        &:hover
          color: #3c636e
      i
        display: none
      &.active
        a
          color: #3c636e
        i
          margin: -9px auto -8px
          display: block
          position: relative
          clear: both
          background: $white
          width: 25px
          text-align: center
          color: #F77665
  ul.top_nav
    margin-bottom: 16px
    display: block
    width: 100%
    li
      margin-bottom: -4px
      display: inline-block
      +RobotoRegular
      a
        padding: 16px 20px
        float: left
        font-size: 1.45em
        line-height: 1.5em
        +transition(color 0.2s ease-in)
        &.active
          color: $middleblue
        &:hover
          color: $linkhover
  ul.radio_nav
    display: block
    margin:
      top: 30px
      bottom: .5em
    li
      display: inline-block
      float: left
      width: 33.3%
      border:
        top: 1px solid #e7e7e7
        bottom: 6px solid #f0f0f0
      background:
        image: url(/assets/related_bg@2x.png)
        repeat: repeat
        size: 30px 30px
      box-shadow: 0 1px 0 0px $white inset
      vertical-align: top
      &.clear
        display: block
        float: none
        height: 0
        border: 0
      &:first-child
        box-shadow: 1px 0 0 #e7e7e7 inset
      &.last a
        border-right: 0
      a
        padding: 19px 0 19px 11%
        display: inline-block
        min-height: 18px
        width: 89%
        box-shadow: -1px 0 0 #E7E7E7 inset
        font-size: 1em
        line-height: 1.125em
        color: #518795
        &:hover
          color: $darkblue
        &.active
          margin-bottom: -6px
          border-bottom: 6px solid #F77463
          color: $darkblue
          background-color: lighten(#f0f0f0, 1%)
        span.info
          display: block
          font-size: 0.625em
          line-height: 1.8em
          text-transform: uppercase
          span
            margin-right: 6px
            display: block
  div.nav_extras
    margin-bottom: 30px
    padding: 2.48275862069% 1.282051282051%
    border-bottom: 4px solid #FAFAFA
    display: block
    width: 90.384615384615%
    clear: both
    box-shadow: 0 -1px 0 0 #E5E5E5 inset
    a
      display: inline-block
    div.rep_search
      margin-top: -7px
      display: inline-block
      float: right
      position: relative
      label
        display: inline-block
        font-size: 0.813em
        line-height: 1.846em
        color: #3c636e
      input[type=text]
        +border-radius(3px)
        border: 1px solid #C7DFE3
        box-shadow: 0 2px 2px 0 rgba($black, 0.05) inset
        color: #b9ccc8
        display: inline-block
        padding:
          left: 6px
          bottom: 2px
        height: 24px
        &:focus
          color: #3c636e
      input[type=submit]
        display: inline-block
        position: absolute
        top: 0
        right: 3px
        height: 27px
        width: 26px
        border:
          top: 1px solid #c7dfe3
          right: none
          bottom: none
          left: none
        box-shadow: 0 2px 2px 0 rgba($black, 0.05) inset
        background:
          color: $white
          image: url(/assets/search_pick@2x.png)
          size: 14px 15px
          repeat: no-repeat
          position: center center
        text-indent: -9999px
        cursor: pointer

/*
 *Filtering
div.filters
  margin-bottom: 24px
  display: inline-block
  position: relative
  width: 100%
  background:
    color: #FAFAFA
    size: 30px 30px
  border: 1px solid #E7E7E7
  +rounded_corners
  clear: both
  z-index: 1
  span.info
    margin: 14px 15px 10px
    display: inline-block
    vertical-align: middle
  ul.menu
    background: white
    +box-shadow(0 1px 3px rgba(33, 54, 60, 0.1))
    color: #477380
    cursor: pointer
    display: inline-block
    font:
      size: 0.688em
      weight: 600
    line-height: 1.364em
    text-transform: uppercase
    padding: 9px 9px 7px 12px
    position: relative
    margin-right: 3px
    +rounded_corners
    li.menu
      background: white
      +box-shadow(0 1px 3px rgba(33, 54, 60, 0.1))
      display: none
      position: absolute
      left: 0
      width: 100%
      margin-top: 6px
      text-indent: 12px
      li
        display: block
        a
          display: block
          font:
            weight: normal
            size: 1em
          line-height: 1.5em
          text-transform: none
          padding: 6px 0
      span
        display: none
    &:hover
      li.menu
        display: block
    li.selected
      display: block
      font-size: 0.909em
      line-height: 1.3em
      span
        display: inline-block
        padding-left: 10px
  a.radio_button
    background: white
    color: #97A2A5
    cursor: pointer
    display: inline-block
    font:
      size: 0.688em
      weight: 600
    line-height: 1.364em
    text-transform: uppercase
    padding: 7px 9px 7px 12px
    position: relative
    margin-right: 3px
    +rounded_corners
    span.use
      +border-radius(6px)
      display: inline-block
      height: 10px
      width: 10px
      margin-right: 8px
      position: relative
      top: 2px
    &.inactive
      background: #fcfcfc
      border: 1px solid #E7E7E7
      +box-shadow(0 2px 3px rbga(0, 0, 0, 0.05) inset)
      span.use
        background: #FAFAFA
        display: inline-block
        +box-shadow(0 3px 0 #f3f3f3 inset)
        border: 1px solid #DFDFDF
      &:hover
        +box-shadow(0 1px 3px rgba(0, 0, 0, 0.05))
        display: inline-block
        border: 1px solid #CFCFCF
        position: relative
        top: -1px
        background: #FFF
        span.use
          display: inline-block
      &:active
        background: #FAFAFA
        top: 0
        box-shadow: 0 1px 0 0 #FFF
    &.active
      background: #f9fff5
      border: 1px solid #b4dd94
      +box-shadow(0 1px 5px rgba(33, 54, 60, 0.15))
      color: #477380
      span.use
        background: #bfea9c
        display: inline-block
        +box-shadow(0 3px 0 #caf7a6 inset)
        border: 1px solid #9ec181
      &:hover
        display: inline-block
        span.use
          display: inline-block
    &.filter
      display: inline-block
  div.search
    float: right
    background: white
    border: 1px solid #DDE3E1
    +box-shadow(inset 0 3px 3px rgba(41, 110, 122, 0.07))
    margin: 6px
    position: relative
    +border-radius(3px)
    input[type=text]
      margin-right: 35px
      padding:
        top: 6px
        bottom: 2px
        left: 11px
      border: none
      background: none
      height: 18px
      width: 101px
      font:
        family: helvetica, arial, verdana, sans-serif
        size: 0.688em
        weight: 100
      line-height: 1.455em
      color: #5E9187
      &:focus
        outline: none
    input[type=submit]
      margin-top: -6px
      padding: 8px
      position: absolute
      top: 6px
      right: 1px
      height: 26px
      width: 27px
      border: none
      box-shadow: inset 0 3px 3px rgba(41, 110, 122, 0.07)
      background:
        color: $white
        image: url(/assets/mag_glass@2x.png)
        size: 14px 14px
        repeat: no-repeat
        position: center
      cursor: pointer

/*
 *Pagination
nav.pagination
  display: block
  margin-top: 12px
  span
    display: inline-block
    &.current, &.gap
      padding: 6px
      display: inline-block
      font-size: 0.813em
      color: #999
    &.prev
    &.next
    a
      +border-radius(3px)
      +box-shadow(0 1px 3px rgba($black, 0.1))
      +background(linear-gradient(top center, #fcfcfc, #f9f9f9))
      display: inline-block
      padding: 6px
      font-size: 0.813em
      border: 1px solid white
      &:hover
        +box-shadow(0 1px 3px rgba($black, 0.2))

/*
 *UI helpers
a.show_full_title, a.show_short_title
  margin:
    top: 12px
    left: 6px
  display: inline-block
  clear: left
  font:
    size: 13px
    weight: normal
  line-height: 14px
  span
    display: inline-block
    font-size: 0.678em
    vertical-align: 1px

a.expose_nav
  display: none

span.bill_ref
  font-size: 0.813em
  line-height: 1.385em
  color: #2B464E

/*
 *MISC

section.overview
  nav
    display: block
    clear: both
    margin-top: 24px

/*

.leftCol
  float: left
  width: 60%

.static div.rightCol h3
  padding:
    top: 0
    bottom: 0

.rightCol
  width: 218px
  float: right
  ul.no-extra-top-margin
    margin-top: 0
  ul
    margin-top: 12px
  li
    list-style: none
  .avatar
    height: 60px
    width: 60px
    float: left
  .person-info
    display: inline-block
    margin-left: 5%
    width: 63.63636%
    h3
      margin-bottom: 0
      padding-bottom: 0
    p
      margin-bottom: 1em
      font:
        size: .813em
        family: "RobotoLight", helvetica, arial, verdana, sans-serif
      line-height: 1.385em