$body_width: 100%
$body_height: 100%

$text_color: #555555
$border_color: #3198c1
$button_color: #3198c1
$button_hover_color: #2b88ad

$margin: 5px

*
  margin: 0 auto
  padding: 0

a
  text-decoration: none
  color: #54afe2
  img, &:active
    border: none

/*  a:hover {
 *  border-bottom: 1px dotted #54afe2; }

.fleft
  float: left

.fright
  float: right

.center
  text-align: center

.clear
  clear: both

.grey, label
  color: $text_color

body
  font-family: Arial, Helvetica, sans-serif
  font-size: 12px
  width: $body_width
  height: 100%
  color: $text_color
  line-height: 16pt
  float: left
  &.lang-ar
    font-size: 14px

html
  font-size: 100%
  min-height: $body_height

h1, h2, h3, h4, h5, h6, .large-text
  color: #797979

p, h1, h2, h3, h4, h5, h6, table, .large-text
  padding: 5px 0px

h1
  font-size: 20px

h2, .large-text
  font-size: 16px
  font-weight: normal

h3
  font-size: 14px
  font-weight: normal

h4
  font-size: 12px
  font-weight: normal

ul li
  margin-left: 20px

.full
  width: 100%

.half
  width: 50%

.ninety
  width: 90%

input.text
  border: 1px solid $text_color
  padding: 3px 3px 2px

.padding
  margin: 5px 0px

table
  text-align: left
  border-collapse: collapse
  .header_padding
    padding: 5px
  .idea_padding
    padding: 2.5px 5px 2.5px 5px
  .row0
    background-color: $border_color
    color: white
    td.idea
      width: 67.5%
    td.score_header
      width: 80px
  .row1
    background-color: #fafafa
  .row2
    background-color: #fefefe
  .thin td
    padding: 2px 5px
    height: 2px
  &.recent-winners td
    text-align: center
  &.item td:last-child
    font-weight: bold
  &.left
    margin: 0
  &.signup td
    max-width: 400px
  .score
    padding-right: 5px

.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: white
  background: #ff6464
  padding: 8px 5px
  border: 1px solid black
  h2
    color: white
  ul li
    margin-left: 40px

.header
  padding: 30px 5px 15px 5px
  border-bottomf: 1px solid #f4f5f6
  .fright
    padding-top: 18px
    ul li
      list-style-type: none
      float: left
      font-size: 14px
      text-transform: uppercase
      margin: 0
      a
        padding: 5px 20px
        color: #54afe2
        &:hover
          border-top: 1px dotted #54afe2
          border-bottom: 1px dotted #54afe2
        &.down
          color: $text_color
  a.logo:hover
    border: none

.bread-crumb
  color: #54afe2

.body
  height: 100%
  margin: 1px 0px
  padding: 0px 0px 0px
  .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 $button_color
  width: 125px
  padding: 2px 0px
  background-color: #54afe2
  text-align: center
  float: left

.button-link
  color: white

.button:hover
  border: 1px solid $button_color

.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

.votebox
  width: 98.5%
  float: center
  height: 80%

$fontScaleFactor: 0.8

.votebox table
  text-align: center
  height: 40%
  tbody
    height: 100%
  td
    min-height: 100%
    &.idea
      cursor: pointer
    &.left
      padding: 0 2.5px 0 0
    &.right
      padding: 0 0 0 2.5px
    &.vote_cell
      font-size: 16px * $fontScaleFactor
      color: white
      height: 90%
      background: $button_color
      .lang-ar &
        font-size: 20px * $fontScaleFactor
      &:hover
        background: $button_hover_color
      table
        height: 100%
      a
        color: white
        border: none
        &:hover
          color: white
          border: none
    .five_padding
      padding: 5px
    table tr
      &.prompt
        height: 100%

.skip
  margin: 10px 0

.footer
  padding: 10px 5px
  border-top: 1px solid #f4f5f6
  .triple-left, .triple-center, .triple-right
    font-size: 10px
    line-height: 12pt
    color: #aaaaaa
  img
    padding-right: 10px
    float: left
  p
    float: right
    padding: 0
  .triple-left p
    width: 153px
  .triple-center p
    width: 205px
  .triple-right p
    width: 220px

.bar-chart
  border: 1px solid #cccccc
  width: 97%
  margin: 0 auto
  padding: 1px
  background: white
  > div
    background-color: #797979
    height: 12px
    margin: 0

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

.add-box
  width: 90%
  margin-top: 10px
  textarea
    border: none
    width: 100%

input, textarea
  font-size: 13px
  color: $text_color
  font-family: Arial, Helvetica, sans-serif
  .lang-ar &
    font-size: 15px
  

.form-btn
  color: black

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

.notice
  background-color: #ffffcc
  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: #00bb00

#initial_notice
  text-align: center

.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 $button_color
  border-right: 1px solid $button_color
  background: $button_color

.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 $button_color
  border-right: 1px solid $button_color
  background: $button_color

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

.toggle_question_status, .toggle_choice_status, .toggle_autoactivate_status
  text-align: center
  color: white
  cursor: pointer
  line-height: 14px

div.form_field
  position: relative
  float: left

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

table.tablesorter
  font-family: arial
  margin: 10px 0pt 15px
  font-size: 8pt
  width: 100%
  text-align: left
  thead tr th, tfoot tr th
    border: 1px solid white
    font-size: 8pt
    padding: 4px 20px 4px 4px
  thead tr .header
    background-image: url("/images/bg.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.gif")
    .headerSortDown
      background-image: url("/images/desc.gif")
    .headerOver
      background-color: #8dbdd8

.twenty_pixel_font
  font-size: 20px

.sixteen_pixel_font
  font-size: 16px

.twelve_pixel_font
  font-size: 12px

.active
  color: black

.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

.wider
  color: black
  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: $border_color

#cant_decide_options
  width: 95%
  text-align: center
  font-size: 12px
  .lang-ar &
    font-size: 14px

#cant_decide_options table
  text-align: left

#cant_decide_btn
  background: #c5c5c5
  display:inline
  padding: 7.5px 12px 7.5px 12px
  font-size: 16px * $fontScaleFactor
  .lang-ar &
    font-size: 20px * $fontScaleFactor
  color: white
  cursor: pointer
  &:hover
    background-color: #b1b1b1

.add_idea
  .add_idea_button
    display:inline
    padding: 7.5px 20px 7.5px 20px
    color: white
    font-size: 16px * $fontScaleFactor
    .lang-ar &
      font-size: 20px * $fontScaleFactor
    cursor: pointer
    background: #01bb00
    a
      color: white
    &:hover
      background: #228b53

#facebox
  cursor: move

.new_idea_submit, .flag_submit_button, .cd_submit_button
  padding: 5px 10px 5px 10px
  background: #01bb00
  cursor: pointer
  color: white
  &:hover
    background-color: #228b53

.no_bottom_padding
  padding-bottom: 0px !important

.pagination
  text-align: center
  padding: 0.3em
  a
    padding: 0.2em 0.5em
  span
    padding: 0.2em 0.5em
    &.disabled
      color: #aaaaaa
    &.current
      font-weight: bold
  a
    border: 1px solid #dddddd
    text-decoration: none
    &:hover, &:focus
      border-color: #003366
      background: $border_color
      color: white
  .page_info
    color: #aaaaaa
    padding-top: 0.8em
  .prev_page, .next_page
    border-width: 2px
  .prev_page
    margin-right: 1em
  .next_page
    margin-left: 1em

#radio_button
  padding-right: 10px

#wide_column
  width: 50%

#narrow_column
  width: 40%

.user_cd_reason
  padding-left: 2px

.scrollbar_container
  height: 93%
  border: 4px solid $border_color
  border-bottom: 0px
  overflow: auto
  overflow-x: hidden

.bottom_status
  height: 16px
  line-height: 16px
  border: 4px solid $border_color
  text-align: center
  background-color: $border_color
  color: white

.link_style a
  color: white
  font-weight: bold
  &:hover
    font-weight: bolder
    text-decoration: underline

.tellmearea
  font-size: 14px

.close_and_submit
  margin-top: 5px

.bottom_padding
  padding-left: 5px
  padding-right: 5px

.aboutpage
  padding-left: 5px
  padding-right: 5px

.tabs
  margin: 0
  padding: 0
  list-style: none
  font-size: 12px
  border-color: $border_color
  .lang-ar &
    font-size: 14px
  .current_tab
    font-weight: bold
    background-color: $border_color
    a
      color: white
    &:hover
      background-color: $border_color
      border-color: $border_color
  li
    display: inline
    float: left
    border-top: 4px solid $border_color
    border-left: 4px solid $border_color
    border-right: 4px solid $border_color
    margin: 0 1px 0 0px
    padding-left: 5px
    padding-right: 5px
    a
      outline: none
      display: block
      color: $border_color
      font-weight: bold
    &:hover
      background-color: lighten($border_color, 30%)
      border-color: lighten($border_color, 30%)

.vote-nav
  height: 25.4px
  font-size: 12px

.question
  font-size: 16px
  width: 85%
  color: black
  height: 100%
  .lang-ar &
    font-size: 18px

.question_container
  height: 20%

#new_idea_field
  font-size: 12px
  .lang-ar &
    font-size: 14px
    

.idea_result
  color: $text_color
  width: 67.5%

.faq
  a
    padding-left: 5px

.showmespace
  margin-top: $margin * 4

.new_tellme_text
  margin-top: $margin

#flag_inappropriate
  width: 90%
  textarea
    border: none
    width: 100%

.vote-footer
  a
    color: white

.top_margin
  margin-top: $margin

.two_top_margin
  margin-top: $margin * 2

.six_top_margin
  margin-top: $margin * 6

.add_container
  margin-top: $margin * 3

#initial_notice
  background-color: white
  border: none
  font-size: 14px
  .lang-ar &
    font-size: 16px

.bottom_status table
  border: 0
  cellpadding: 0

.results_data
  height: 80%
  .vote_count
    color: #919191

#full_height
  height: 100%

.no_padding
  padding: 0 0 0 0

.results_content
  min-height: 100%

.text_field_border
  padding: 2px
  background-color: #e9e9e9
  textarea#new_idea_field:focus
    outline: none

textarea
  overflow: auto

.cd_option
  .cd_box
    margin: 5px 10px
    a
      background: #c5c5c5
      color: #ffffff
      display: block
      width: 40%
      padding: 5px 10px
      &:hover
        background: #b1b1b1

#cookies-failed
  position: absolute
  background-color: rgba(0,0,0,0.8)

  .aboutpage
    margin: 4em 1em 0
    background-color: #ffffff

    h2
      background: url(/images/widget/blocked_cookies.png) no-repeat left 40%
      padding-left: 22px
