// Generated by compass-jquery-plugin/gem-tasks/jqtouch.rake

body
  background: #000
  color: #ddd

  > *
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#5e5e65))


h1, h2
  font: bold 18px Helvetica
  text-shadow: rgba(255,255,255,.2) 0 1px 1px
  color: #000
  margin: 10px 20px 5px


.toolbar
  -webkit-box-sizing: border-box
  border-bottom: 1px solid #000
  padding: 10px
  height: 45px
  background: url("/images/jqtouch/jqt/toolbar.png") #000000 repeat-x
  position: relative


.black-translucent .toolbar
  margin-top: 20px


.toolbar > h1
  position: absolute
  overflow: hidden
  left: 50%
  top: 10px
  line-height: 1em
  margin: 1px 0 0 -75px
  height: 40px
  font-size: 20px
  width: 150px
  font-weight: bold
  text-shadow: rgba(0,0,0,1) 0 -1px 1px
  text-align: center
  text-overflow: ellipsis
  white-space: nowrap
  color: #fff


body.landscape .toolbar > h1
  margin-left: -125px
  width: 250px


.button, .back, .cancel, .add
  position: absolute
  overflow: hidden
  top: 8px
  right: 10px
  margin: 0
  border-width: 0 5px
  padding: 0 3px
  width: auto
  height: 30px
  line-height: 30px
  font-family: inherit
  font-size: 12px
  font-weight: bold
  color: #fff
  text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0
  text-overflow: ellipsis
  text-decoration: none
  white-space: nowrap
  background: none
  -webkit-border-image: url("/images/jqtouch/jqt/button.png") 0 5 0 5


.blueButton
  -webkit-border-image: url("/images/jqtouch/jqt/blueButton.png") 0 5 0 5
  border-width: 0 5px


.back
  left: 6px
  right: auto
  padding: 0
  max-width: 55px
  border-width: 0 8px 0 14px
  -webkit-border-image: url("/images/jqtouch/jqt/back_button.png") 0 8 0 14

  &.active
    -webkit-border-image: url("/images/jqtouch/jqt/back_button_clicked.png") 0 8 0 14
    color: #aaa


.leftButton, .cancel
  left: 6px
  right: auto


.add
  font-size: 24px
  line-height: 24px
  font-weight: bold


.whiteButton, .grayButton
  display: block
  border-width: 0 12px
  padding: 10px
  text-align: center
  font-size: 20px
  font-weight: bold
  text-decoration: inherit
  color: inherit


.whiteButton
  -webkit-border-image: url("/images/jqtouch/jqt/whiteButton.png") 0 12 0 12
  text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0


.grayButton
  -webkit-border-image: url("/images/jqtouch/jqt/grayButton.png") 0 12 0 12
  color: #FFFFFF


h1 + ul, h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul
  margin-top: 0


ul
  color: #aaa
  border: 1px solid #333333
  font: bold 18px Helvetica
  padding: 0
  margin: 15px 10px 17px 10px

  &.rounded
    -webkit-border-radius: 8px
    -webkit-box-shadow: rgba(0,0,0,.3) 1px 1px 3px

    li
      &:first-child
        border-top: 0
        -webkit-border-top-left-radius: 8px
        -webkit-border-top-right-radius: 8px

        a
          border-top: 0
          -webkit-border-top-left-radius: 8px
          -webkit-border-top-right-radius: 8px

      &:last-child
        -webkit-border-bottom-left-radius: 8px
        -webkit-border-bottom-right-radius: 8px

        a
          -webkit-border-bottom-left-radius: 8px
          -webkit-border-bottom-right-radius: 8px

  li
    color: #666
    border-top: 1px solid #333
    border-bottom: #555858
    list-style-type: none
    padding: 10px 10px 10px 10px
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142))
    overflow: hidden

    &.arrow
      background-image: url("/images/jqtouch/jqt/chevron.png"), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142))
      background-position: right center
      background-repeat: no-repeat

    &.forward
      background-image: url("/images/jqtouch/jqt/chevron_circle.png"), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142))
      background-position: right center
      background-repeat: no-repeat

    a
      color: #fff
      text-decoration: none
      text-overflow: ellipsis
      white-space: nowrap
      overflow: hidden
      display: block
      padding: 12px 10px 12px 10px
      margin: -10px
      -webkit-tap-highlight-color: rgba(0,0,0,0)
      text-shadow: rgba(0,0,0,.2) 0 1px 1px


li.img a + a
  color: #fff
  text-decoration: none
  text-overflow: ellipsis
  white-space: nowrap
  overflow: hidden
  display: block
  padding: 12px 10px 12px 10px
  margin: -10px
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  text-shadow: rgba(0,0,0,.2) 0 1px 1px


ul
  li
    a
      &.active, &.button
        background-color: #53b401
        color: #fff

      &.active.loading
        background-image: url("/images/jqtouch/jqt/loading.gif)
        background-position: 95% center
        background-repeat: no-repeat

    &.arrow a.active
      background-image: url("/images/jqtouch/jqt/chevron.png")
      background-position: right center
      background-repeat: no-repeat

    &.forward a.active
      background-image: url("/images/jqtouch/jqt/chevron_circle.png")
      background-position: right center
      background-repeat: no-repeat

    &.img a +
      a
        margin: -10px 10px -20px -5px
        font-size: 17px
        font-weight: bold

        + a
          font-size: 14px
          font-weight: normal
          margin-left: -10px
          margin-bottom: -10px
          margin-top: 0

      small + a
        margin-left: -5px

        + a
          margin-left: -10px
          margin-top: -20px
          margin-bottom: -10px
          font-size: 14px
          font-weight: normal

          + a
            margin-left: 0px !important
            margin-bottom: 0

    a + a
      color: #000
      font: 14px Helvetica
      text-overflow: ellipsis
      white-space: nowrap
      overflow: hidden
      display: block
      margin: 0
      padding: 0

      + a
        color: #666
        font: 13px Helvetica
        margin: 0
        text-overflow: ellipsis
        white-space: nowrap
        overflow: hidden
        display: block
        padding: 0

    &.img a +
      a + a + a, small + a + a + a
        color: #666
        font: 13px Helvetica
        margin: 0
        text-overflow: ellipsis
        white-space: nowrap
        overflow: hidden
        display: block
        padding: 0

  &.form li
    padding: 7px 10px

    &.error
      border: 2px solid red

      + li.error
        border-top: 0

  li
    input
      &[type="text"], &[type="password"]
        color: #777
        background: transparent url(../.png)
        border: 0
        font: normal 17px Helvetica
        padding: 0
        display: inline-block
        margin-left: 0px
        width: 100%
        -webkit-appearance: textarea

    textarea, select
      color: #777
      background: transparent url(../.png)
      border: 0
      font: normal 17px Helvetica
      padding: 0
      display: inline-block
      margin-left: 0px
      width: 100%
      -webkit-appearance: textarea

    textarea
      height: 120px
      padding: 0
      text-indent: -2px

    select
      text-indent: 0px
      background: transparent url("/images/jqtouch/jqt/chevron.png") no-repeat right center
      -webkit-appearance: textfield
      margin-left: -6px
      width: 104%

    input
      &[type="checkbox"], &[type="radio"]
        margin: 0
        padding: 10px 10px

      &[type="checkbox"]:after, &[type="radio"]:after
        content: attr(title)
        font: 17px Helvetica
        display: block
        width: 246px
        color: #777
        margin: -12px 0 0 17px

    small
      color: #64c114
      font: 17px Helvetica
      text-align: right
      text-overflow: ellipsis
      white-space: nowrap
      overflow: hidden
      display: block
      width: 23%
      float: right
      padding: 0

    &.arrow small
      padding: 0 15px

    small.counter
      font-size: 17px
      line-height: 13px
      font-weight: bold
      background: rgba(0,0,0,.15)
      color: #fff
      -webkit-border-radius: 11px
      padding: 4px 10px 5px 10px
      display: block
      width: auto
      margin-top: -22px
      -webkit-box-shadow: rgba(255,255,255,.1) 0 1px 0

    &.arrow small.counter
      margin-right: 15px

  &.individual
    border: 0
    background: none
    clear: both
    overflow: hidden
    padding-bottom: 3px
    -webkit-box-shadow: none

    li
      background: #4c4d4e
      border: 1px solid #333
      font-size: 14px
      text-align: center
      -webkit-border-radius: 8px
      -webkit-box-sizing: border-box
      width: 48%
      float: left
      display: block
      padding: 11px 10px 14px 10px
      -webkit-box-shadow: rgba(0,0,0,.2) 1px 1px 3px
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142))

      + li
        float: right

      a
        color: #fff
        line-height: 16px
        margin: -11px -10px -14px -10px
        padding: 11px 10px 14px 10px
        -webkit-border-radius: 8px


.toggle
  width: 94px
  position: relative
  height: 27px
  display: block
  overflow: hidden
  float: right

  input[type="checkbox"]
    -webkit-appearance: textarea
    -webkit-border-radius: 5px
    -webkit-tap-highlight-color: rgba(0,0,0,0)
    -webkit-transition: left .15s
    background-color: transparent
    background: #fff url("/images/jqtouch/jqt/on_off.png") 0 0 no-repeat
    border: 0
    height: 27px
    left: -55px
    margin: 0
    overflow: hidden
    position: absolute
    top: 0
    width: 149px

    &:checked
      left: 0px


.info
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#aaa), color-stop(.6,#CCCCCC))
  font-size: 12px
  line-height: 16px
  text-align: center
  text-shadow: rgba(255,255,255,.8) 0 1px 0
  color: #444
  padding: 15px
  border-top: 1px solid rgba(255,255,255,.2)
  font-weight: bold


ul.edgetoedge
  border-width: 1px 0
  margin: 0
  padding: 0

  li
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1e1f21), to(#272729))
    border-bottom: 2px solid #000
    border-top: 1px solid #4a4b4d
    font-size: 20px
    margin-bottom: -1px

    &.sep
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5)))
      border-bottom: 1px solid #111113
      border-top: 1px solid #666
      color: #3e9ac3
      font-size: 16px
      margin: 1px 0 0 0
      padding: 2px 10px
      text-shadow: #000 0 1px 0

    em
      font-weight: normal
      font-style: normal


#plastic
  background: #17181a


ul
  &.plastic
    background: #17181a
    color: #aaa
    font: bold 18px Helvetica
    margin: 0
    padding: 0
    border-width: 0 0 1px 0

    li
      border-width: 1px 0
      border-style: solid
      border-top-color: #222
      border-bottom-color: #000
      color: #666
      list-style-type: none
      overflow: hidden
      padding: 10px 10px 10px 10px

      a.active.loading
        background-image: url("/images/jqtouch/jqt/loading.gif)
        background-position: 95% center
        background-repeat: no-repeat

      small
        color: #888
        font-size: 13px
        font-weight: bold
        line-height: 24px
        text-transform: uppercase

      &:nth-child(odd)
        background-color: #1c1c1f

      &.arrow
        background-image: url("/images/jqtouch/jqt/chevron.png")
        background-position: right center
        background-repeat: no-repeat

        a.active
          background-image: url("/images/jqtouch/jqt/chevron.png")
          background-position: right center
          background-repeat: no-repeat

      &.forward
        background-image: url("/images/jqtouch/jqt/chevron_circle.png")
        background-position: right center
        background-repeat: no-repeat

        a.active
          background-image: url("/images/jqtouch/jqt/chevron_circle.png")
          background-position: right center
          background-repeat: no-repeat

  &.metal
    border-bottom: 0
    border-left: 0
    border-right: 0
    border-top: 0
    margin: 0

    li
      background-image: none
      border-top: 1px solid #fff
      border-bottom: 1px solid #666
      font-size: 26px
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(238,238,238,1)), to(rgba(156,158,160,1)))

      a
        line-height: 26px
        margin: 0
        text-shadow: #fff 0 1px 0
        padding: 13px 0

        em
          display: block
          font-size: 14px
          font-style: normal
          color: #444
          width: 50%
          line-height: 14px

        &.active
          color: rgb(0,0,0)

      small
        float: right
        position: relative
        margin-top: 10px
        font-weight: bold

      &.arrow
        background-image: url("/images/jqtouch/jqt/chevron.png")
        background-position: right center
        background-repeat: no-repeat
        background-image: url("/images/jqtouch/jqt/chevron.png"), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(238,238,238,1)), to(rgba(156,158,160,1)))
        background-repeat: no-repeat
        background-position: right center

        a small
          padding-right: 15px
          line-height: 17px