@import '../../../node_modules/nib/lib/nib'
@import '../vars'
@import '../mixins/*'
global-reset()
@import '../shared/*'
@import './components/*'
@import './containers/*'

body
  font-family "Lato"
  color textColor

h1
  font-size 2em
h2
  font-size 1.5em
h3
  font-size 1.3em
h4
  font-size 1.15em
a
  color brandColor
  &:hover
    color darken(brandColor, 15%)
  &:visited
    color brandColor

hr
  border-top none
  border-bottom solid 1px borderColor
  margin 25px 0

button
  &:focus, &.focus
    outline none

.text-center
  text-align center

.form-group
  margin-bottom 20px
  &>label
    display block
    margin-bottom 5px

.stripInput
  border none
  border-bottom 1px solid borderColor
  padding 5px 15px
  width 100%
  display block
  font-size 1em
  height 33px
  box-sizing border-box
  transition 0.1s
  &:focus, &.focus
    border-bottom 1px solid brandBorderColor
    outline none

.block-input, .inline-input
  border solid 1px borderColor
  padding 0 15px
  font-size 1em
  height 33px
  border-radius 5px
  box-sizing border-box
  &:focus, &.focus
    border solid 1px brandBorderColor
    outline none
  &.circleInput
    border-radius 16.5px

.block-input
  display block
  width 100%

.inline-input
  display inline-block
  margin-right 5px

textarea.block-input
  resize vertical
  height 125px
  border-radius 5px
  padding 5px

#content
  fullsize()

.UserNavigator
  background-color planetNavBgColor
  absolute left top bottom
  width 50px
  text-align center
  box-sizing border-box
  a.userConfig
    display block
    width 50px
    height 50px
    background-color black
    img
      transition 0.1s
      opacity 0.6
    box-sizing border-box
    &.active, &:active, &.focus, &:focus, &.hover, &:hover
      img
        opacity 1
  ul>li
    padding 10px 3px
    .shortCut
      margin-top 5px
      color lighten(textColor, 5%)
      font-size 0.8em
    &.active
      a
        background-color planetAnchorActiveBgColor
        color planetAnchorActiveColor
    a
      display block
      width 44px
      height 44px
      text-align center
      background-color planetAnchorBgColor
      text-decoration none
      color planetAnchorColor
      line-height 44px
      font-size 1.1em
      cursor pointer
      circle()
      transition 0.1s
      &:hover, &:active
        background-color white
    img
      circle()
      width 44px
      height 44px
  button.newPlanet
    display block
    margin 0 auto
    width 30px
    height 30px
    circle()
    border solid 2px lightButtonColor
    color lightButtonColor
    text-align center
    font-size 1
    background-image none
    background-color transparent
    box-sizing border-box
    absolute left bottom right
    bottom 15px
    &:hover, &.hover, &:focus, &.focus
      border-color darken(lightButtonColor, 25%)
      color darken(lightButtonColor, 25%)
    &:active, &.active
      border-color darken(brandBorderColor, 10%)
      background-color brandColor
      color white