a
  img, &:active
    border: none

.center
  text-align: center

.full
  width: 100%

.half
  width: 50%

.ninety
  width: 90%

input.text
  border: 1px solid #919191
  padding: 3px 3px 2px

.padding
  margin: 5px 0px

table
  text-align: left
  border-collapse: collapse
  td, th
    padding: 5px
  .row0
    background-color: #3198c1
    color: white
    a
      color: white
      text-decoration: underline
    th.score
      width: 95px
  .row1
    background-color: #fafafa
  .row2
    background-color: #fefefe
  .thin td
    padding: 2px 5px
    height: 2px
  .votes
    min-width: 90px
  &.recent-winners td
    text-align: center
  &.item td:last-child
    font-weight: bold
  &.left
    margin: 0
  &.signup td
    max-width: 400px

.create-question
  h2
    padding-bottom: 0px
  p
    padding: 15px 25px
    font-size: 14px
    &.ideas
      padding-bottom: 10px
      padding-right: 400px
  .fieldWithErrors
    padding: 2px 0 3px
    border: 1px solid #ff6464

.errorExplanation
  color: #FFF
  background: #ff6464
  padding: 8px 5px
  border: 1px solid #000
  h2
    color: #FFF
  ul li
    margin-left: 40px

.header.row-fluid
  margin-top: 10px
  .nav
    margin-top: 10px
    text-transform: uppercase
  a.logo
    display: block
    margin-bottom: 1em
  a.logo:hover
    border: none

.bread-crumb
  color: #54afe2

.body
  padding: 0 0 30px
  .center img
    padding: 0px 0px 30px 0px
  .triple-left
    min-height: 150px
  #body
    .triple-center, .triple-right
      min-height: 150px

.triple-left, .triple-center, .triple-right, .double-left
  float: left

.noborder
  border: none

.image-example
  border: 2px solid #eeeeee
  width: 250px
  margin: 0px 0px 10px

.button
  border: 1px solid #3198c1
  width: 125px
  padding: 2px 0px
  background-color: #54afe2
  text-align: center
  float: left

.button-link
  color: white

.button:hover
  border: 1px solid #3198c1

.triple-left
  border-right: 1px dotted #d8dbdc
  padding: 0px 15px 2px 0px
  width: 264px

.triple-center
  border-right: 1px dotted #d8dbdc
  padding: 0px 15px 2px 15px
  width: 249px

.triple-right
  padding: 0px 0px 2px 15px
  width: 265px

.double-left
  padding: 0px 15px 2px 0px
  width: 545px

.vote-question
  background-color: white
  text-align: center
  padding: 15px 15px
  color: #333
  border-radius: 7px
  -webkit-border-radius: 7px
  -moz-border-radius: 7px

.votebox
  margin-top: 20px

.skip
  margin: 10px 0
.right-border
  border-right: 1px dotted #D8DBDC

.footer
  border-top: 1px solid #d9d9d9
  background-color: #f2f2f2
  color: #989898
  padding: 20px
  font-size: 12px
  line-height: 13px
  a
    color: #989898
  .breadcrumb
    padding-left: 0
    background-color: inherit
    margin-bottom: 0

div.bar-chart
  border: 1px solid #ccc
  width: 250px
  margin: 2px 5px 2px 0
  padding: 1px
  float: left
  background: white
  > div
    background-color: #797979
    height: 12px
    margin: 0

hr
  border: none
  border-bottom: 1px dotted #BBB
  margin: 0 0 15px 0

.form-btn
  color: #000

.error, .notice, .vote-notice
  color: #FFF
  background-color: #ff6464
  margin: -10px 10em 25px
  text-align: center
  font-size: 13px

.notice
  background-color: #FFC
  border: 1px solid #797979
  color: #797979
  text-align: left
  padding: 5px 10px
  margin: 0 40px 25px
  span.close
    display: block
    text-align: right
    &:hover
      border: none

.vote-notice
  background-color: #0B0

.border *, .border-thick *, .round-filled *, .round-filled-grey *
  font-size: 0.01px
  line-height: 0.01px
  display: block
  height: 1px
  overflow: hidden
  padding: 0px

.border-top, .border-bottom, .border2, .round-filled-top, .round-filled-bottom, .round-filled-grey-top, round-filled-grey-top
  padding-left: 1px
  padding-right: 1px

.border-top, .border-bottom
  margin-left: 3px
  margin-right: 3px

.border-top
  border-bottom: 1px solid #e9e9e9

.border-bottom
  border-top: 1px solid #e9e9e9

.border2, .border3, .border4, .border5, .borderfg
  border-left: 1px solid #e9e9e9
  border-right: 1px solid #e9e9e9

.border2, .border3
  margin-left: 1px
  margin-right: 1px

.border-thick-top
  border-bottom: 2px solid #e9e9e9

.border-thick-bottom
  border-top: 2px solid #e9e9e9

.border-thick2, .border-thick3, .border-thick4, .border-thick5, .border-thickfg
  border-left: 2px solid #e9e9e9
  border-right: 2px solid #e9e9e9

.round-filled-top, .round-filled-bottom
  margin-left: 3px
  margin-right: 3px
  border-left: 1px solid #3198c1
  border-right: 1px solid #3198c1
  background: #3198c1

.round-filled-grey-top, .round-filled-grey-bottom
  margin-left: 3px
  margin-right: 3px
  border-left: 1px solid #cccccc
  border-right: 1px solid #cccccc
  background: #cccccc

.round-filled-grey2, .round-filled-grey3, .round-filled-grey4, .round-filled-grey5, .round-filled-greyfg
  border-left: 1px solid #cccccc
  border-right: 1px solid #cccccc
  background: #cccccc
  color: #686868

.round-filled2, .round-filled3, .round-filled4, .round-filled5, .round-filledfg
  border-left: 1px solid #3198c1
  border-right: 1px solid #3198c1
  background: #3198c1

.rounded
  border-radius: 5px
  -moz-border-radius: 5px

.round-filled2, .round-filled3, .round-filled-grey2, .round-filled-grey3
  margin-left: 1px
  margin-right: 1px

div.form_field
  position: relative
  float: left

label.over-apply
  color: #ccc
  position: absolute
  top: 0px
  left: 5px

table.tablesorter
  thead tr .header
    padding-right: 12px
    background-image: url(../images/bg-invert.gif)
    background-repeat: no-repeat
    background-position: center right
    cursor: pointer
  tbody
    td
      color: #3D3D3D
      padding: 4px
      vertical-align: top
    tr
      &.odd td
        background-color: #fafafa
      &.even td
        background-color: #fefefe
  thead tr
    .headerSortUp
      background-image: url(../images/asc-invert.gif)
    .headerSortDown
      background-image: url(../images/desc-invert.gif)

.twenty_pixel_font
  font-size: 20px

.sixteen_pixel_font
  font-size: 16px

.twelve_pixel_font
  font-size: 12px

.active
  color: #000000

.firsttime
  position: fixed
  top: 0
  left: 0
  width: 100%
  z-index: 100
  background: #4dbae6
  color: #185b75
  font-size: 15px
  font-weight: bold
  text-align: center
  border-bottom: 1px solid #1f7293
  padding: 4px
  margin-bottom: 8px
  display: none

.cant-decide
  text-align: center

#cant_decide_options
  .cd_options
    width: 100%
    overflow: auto

.wider
  color: #000000
  td
    padding: 5px !important
    &.no_bottom_padding
      padding-bottom: 0px !important
    &.no_top_padding
      padding-top: 0px !important
      vertical-align: top
  h2
    font-weight: bold
    color: #3198c1

.cd_submit_button
  padding: 5px 10px 5px 10px
  background: #3198C1
  cursor: pointer
  color: #FFFFFF
  &:hover
    background-color: #2B88AD

.add-idea-row
  border-top: 10px solid white
  padding: 0 5%

p.add-idea
  margin-top: 30px

.add_idea
  margin: 0
  a.add-idea-link
    text-decoration: none
    display: block
    width: 300px
  .add_idea_button
    padding: 5px 10px 5px 10px
    width: 265px
    height: 3em
    display: table-cell
    vertical-align: middle
    color: #FFFFFF
    font-size: 16px
    cursor: pointer
    background: #01bb00
    a
      color: #FFFFFF
    &:hover
      background: #228b53

.add_container
  height: 12em

.no_bottom_padding
  padding-bottom: 0px !important

.question-admin-form
  margin-top: 20px
  .form-horizontal
    .controls
      margin-left: 190px
    .control-label
      width: 170px

.ideas-table
  tbody
    tr
      cursor: pointer

  td.choice-progress
    .progress
      margin-bottom: 0
      float: left
      width: 80%
    .score
      font-size: 120%

.vote-count-span
  text-align: center

.rightside .flag
  text-align: right

@media (max-width: 767px)
  .rightside .flag
    text-align: left

.navbar-aoi
  .btn-navbar
    float: right
  .navbar-inner
    // remove rounded corners
    -webkit-border-radius: 0
    -moz-border-radius: 0
    border-radius: 0
    // modify background color
    background-color: #333333
    background-image: -moz-linear-gradient(top, #3d3d3d, #2c2c2c)
    background-image: -ms-linear-gradient(top, #3d3d3d, #2c2c2c)
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3d3d3d), to(#2c2c2c))
    background-image: -webkit-linear-gradient(top, #3d3d3d, #2c2c2c)
    background-image: -o-linear-gradient(top, #3d3d3d, #2c2c2c)
    background-image: linear-gradient(top, #3d3d3d, #2c2c2c)
    background-repeat: repeat-x
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#3d3d3d', endColorstr='#2c2c2c', GradientType=0)

  .nav .active > a, .nav .active > a:hover, .nav .active > a:focus
    background-color: transparent
    //padding: 5px 10px 7px
    //line-height: 18px
    //color: #999999
  .nav > li > a, .nav-collapse .dropdown-menu a
    color: #999999
  .nav-collapse .nav > li > a:hover, .nav-collapse .dropdown-menu a:hover
    color: #F2F2F2
@media (max-width: 767px)
  .navbar-aoi
    margin-left: -20px
    margin-right: -20px

.votebox.row
  height: 128px
  margin-bottom: 10px
  overflow: hidden
  
.vote-table-div
  overflow: hidden

.vote-table
  table-layout: fixed
  width: 100%
  border-collapse: separate
  *border-collapse: collapse
  border-spacing: 0


.table-cell-btn
  font-size: 20px
  height: 126px
  padding: 0 10px
  display: table-cell

.progress-gray .bar
  background-color: #dddddd
  background-image: -ms-linear-gradient(top, #dddddd, #b5b5b5)
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dddddd), to(#b5b5b5))
  background-image: -webkit-linear-gradient(top, #dddddd, #b5b5b5)
  background-image: -o-linear-gradient(top, #dddddd, #b5b5b5)
  background-image: linear-gradient(top, #dddddd, #b5b5b5)
  background-image: -moz-linear-gradient(top, #dddddd, #b5b5b5)
  background-repeat: repeat-x
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#dddddd', endColorstr='#b5b5b5', GradientType=0)


.results-table-header
  background-color: #f2f2f2
  h3
    margin-top: 0
    background-color: black
    text-align: center
    color: #fefefe
    -moz-border-top-left-radius: 10px
    -webkit-border-top-left-radius: 10px
    border-top-left-radius: 10px
    -khtml-border-top-left-radius: 10px
    -moz-border-top-right-radius: 10px
    -webkit-border-top-right-radius: 10px
    border-top-right-radius: 10px
    -khtml-border-top-right-radius: 10px

/* convert to nav-stacked styles */
@media (max-width: 767px)
  .nav-tabs.vote-tabs
    float: none
    padding-right: 0
    border-bottom: 0
    margin-bottom: 1em
    li
      float: none
      & > a
        border: 1px solid #dddddd
        border-radius: 0
        -webkit-border-radius: 0
        -moz-border-radius: 0
        margin-right: 0
      &:first-child > a
        -webkit-border-top-right-radius: 4px
        -moz-border-top-right-radius: 4px
        border-top-right-radius: 4px
        -webkit-border-top-left-radius: 4px
        -moz-border-top-left-radius: 4px
        border-top-left-radius: 4px
      &:last-child > a
        -webkit-border-bottom-right-radius: 4px
        -moz-border-bottom-right-radius: 4px
        border-bottom-right-radius: 4px
        -webkit-border-bottom-left-radius: 4px
        -moz-border-bottom-left-radius: 4px
        border-bottom-left-radius: 4px
      & > a:hover
        z-index: 2
        border-color: #dddddd

.survey-image-col
  margin-top: -40px

  .survey-image
    position: relative
    padding-right: 10px
    bottom: -30px

  .survey-image-links
    margin-top: 12px

/* when less than 767px then nav is stacked so display image as normal */
@media (max-width: 767px)
  .survey-image-col
    margin: 0
    .survey-image
      position: static
      margin-bottom: 10px

#new_idea_field
  font-size: 18px
  line-height: 27px

.data-vis-header
  padding-left: 15px

.aoi-hero-unit
  text-align: center
  .headline
    font-weight: 200
    margin: 1.5em 0 .5em
  .sub-headline
    font-size: 20px
    font-weight: 200
    color: #666666
    line-height: 1.3
    max-width: 680px
    margin-left: auto
    margin-right: auto
  .headline-buttons
    margin-top: 2em

.descriptions
  h3
    margin-bottom: 0
    font-weight: normal
    line-height: 1
  .row-fluid
    margin-bottom: 6em
  .image
    text-align: center
  .math-formula
    margin-top: 3em

@media (max-width: 480px)
  .descriptions
    .row-fluid
      margin-bottom: 3em
    .math-formula, .tux
      margin: 0 0 1em 0

.how-it-works
  margin: 3em 0 6em
  text-align: center

  .divider-holder
    position: relative
  .divider
    width: 78px
    height: 350px
    background-image: url('../images/homepage/arrow.png')
    display: block
    position: absolute
    top: -20px
    right: -50px
  .participate-holder
    padding: 0 30px
    height: 200px

  h3.title
    color: #7d7d7d
    text-transform: uppercase
    font-weight: 200
    line-height: 1em
    font-size: 20px

  .boxes
    padding-top: 1em
    background-color: #f2f2f2
    border-radius: 10px
    -moz-border-radius: 10px
    -webkit-border-radius: 10px
    h3
      margin-bottom: 0
      line-height: 1em
      color: #48a1db
      padding: 0 20px

      a
        color: #48a1db
      a:hover
        text-decoration: none
    p
      padding: 0 20px

.overall-stats
  font-weight: 200
  text-align: center
  .wiki-surveys-count, .votes-count, .ideas-count
    font-weight: bold
    font-size: 130%

.flexslider
  padding: 0 70px
    background-color: #f5f5f5
  .slides
    padding: 10px 0
    background-color: #f5f5f5
    li
      padding: 0 10px
  .flex-direction-nav a
    color: white
    text-decoration: none
@media (max-width: 480px)
  .flexslider
    padding: 0 45px
  .flex-direction-nav a
    width: 45px
