$fa-font-path: "../bower_components/font-awesome/fonts"

@import 'font-awesome'

html
  min-height: 100%

body
  font-family: 'Helvetica Neue','Helvetica','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック',arial,sans-serif
  font-size: 12px
  margin: 0
  padding: 0

h1
  font-size: 16px
  font-weight: bold
  line-height: 20px

h2
  font-size: 14px
  font-weight: bold
  line-height: 18px
  margin-top: 0.2rem
  margin-bottom: 0.5rem

p
  font-size: 12px
  line-height: 15px
  margin-bottom: 6px

ul
  margin: 0

  li
    font-size: 12px
a
  text-decoration: none !important

textarea
  padding: 8px
  width: 100%
  overflow: auto
  vertical-align: top
  min-height: 30px !important
  font-size: 12px

input[type=text], input[type=email], input[type=password]
  padding: 8px
  width: 100%
  font-size: 12px

.sr-background
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 100%
  background-repeat: no-repeat
  background-size: cover
  background-position: 50% 50%
  overflow: hidden
  z-index: -101

.sr-avatar
  height: 35px
  width: 35px

.sr-button
  -webkit-font-smoothing: antialiased
  cursor: pointer
  font-weight: bold
  white-space: nowrap
  font-size: 12px
  padding: 6px 12px
  display: inline-block
  text-decoration: none

.sr-facebook-button,
.sr-facebook-button:hover,
.sr-twitter-button,
.sr-twitter-button:hover
  font-size: 14px
  line-height: 18px
  width: 100%
  max-width: 250px
  margin-top: 10px

  i
    margin-right: 8px

.sr-twitter-button
  display: inline-block
  text-align: center
  margin-bottom: 20px
  border: solid black 1px
  box-shadow: none !important
  font-weight: 400 !important

.sr-button-large
  font-size: 14px
  line-height: 18px

.sr-button.sr-header-button i.fa-refresh
  margin-top: 3px

.sr-loading-page
  opacity: 0.5
  width: 48px
  height: 48px
  font-size: 48px
  line-height: 48px
  margin: 10px auto 0 auto

.sr-centered
  text-align: center

.sr-large-text
  font-size: 14px
  line-height: 18px

.sr-fine-print
  font-size: 11px

  a,
  a:hover,
  a:active,
  a:visited
    text-decoration: underline !important

.sr-clearfix
  *zoom: 1

  &:before,
  &:after
    content: " "
    display: table
    height: 1px

  &:after
    clear: both

.sr-meta-wrapper
  text-align: center
  padding: 2px 0

  .sr-meta-item
    display: inline-block
    padding: 0 4px
    font-size: 12px

.ui-wrapper
  background-size: cover
  margin-top: -44px
  padding-top: 44px
  min-height: 100%

.sr-alert
  padding-top: 20px

  .sr-alert-body
    padding: 8px

  .sr-alert-header
    padding: 8px
    margin-bottom: 0

.sr-box-wrapper
  margin: 0 auto
  padding-top: 44px // For the menu!

  .sr-box
    margin: 8px

    .sr-box-padding
      padding: 10px

  .sr-alert
    margin: 8px
    padding-top: 0px

.sr-actions
  text-align: center
  padding: 8px

.sr-left
  float: left

.sr-right
  float: right

.sr-padded-10
  padding: 10px

.sr-padded-30
  padding: 30px

.sr-play-button
  position: absolute
  top: 0
  left: 0
  bottom: 0
  right: 0
  background-position: center center
  background-color: transparent
  background-repeat: no-repeat

.sr-one-line-form-instruction
  max-width: 250px
  margin-left: auto
  margin-right: auto

.sr-form
  input[type=text], input[type=email], input[type=password]
    max-width: 80%
    height: 32px
    display: block
    margin: 5px auto

.sr-one-line-form
  padding: 10px 0
  text-align: center

  input[type=text], input[type=email], input[type=password]
    max-width: 180px
    height: 32px

  input.sr-button
    height: 32px

.form-error
  color: red
  font-weight: bold
  font-size: 10px
  display: block
  padding: 4px

.sr-auto-margin
  margin-left: auto
  margin-right: auto

.sr-table
  th, td
    text-align: left
    padding: 2px 8px
    font-size: 12px