$tab-bar-height: 50px

$primary-color: #009688
$primary-color-light: lighten($primary-color, 10%)
$primary-color-dark: darken($primary-color, 10%)

$default-transition: all 230ms ease-in-out

body
  margin: 0
  padding: $tab-bar-height 0 90px
  background: white
  font-size: 18px

a
  color: $primary-color
  transition: $default-transition

  &:hover
    color: $primary-color-light

input
  transition: $default-transition

input[type=submit],
button
  background-color: cornflowerblue
  color: #f0f0f0
  transition: $default-transition

  &:hover
    background-color: darken(cornflowerblue, 10%)
    color: white

.faded-text
  color: #999

.u-text-center
  text-align: center

.container
  max-width: 1024px

.container.fluid
  width: 100%
  max-width: 100%
  margin: 0

#wrapper
  margin-top: 25px

#tab-bar
  position: fixed
  top: 0
  left: 0
  z-index: 10
  width: 100%
  height: $tab-bar-height
  margin: 0
  padding: 0
  background: #eee
  border-bottom: 1px solid #bbb
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25)

  .container.fluid
    width: 100%
    margin-right: 0

  .row
    display: relative

  .tab-button
    float: left
    height: 50px
    margin: 0
    background-color: #eee
    border: none
    border-right: 1px solid #999
    border-radius: 0
    color: #212121
    font-size: 2rem
    font-weight: bold
    transition: $default-transition

    &.active,
    &:hover
      background-color: white

.component-display
  display: none
  &.active
    display: block

.pageLink
  text-decoration: none
  i
    font-size: 10rem
  p
    margin-top: 10px
    color: #212121
    font-size: 2.5rem
    text-decoration: none

table.hardware-info
  border-spacing: 0
  padding: 8px
  border: 1px solid #999
  td
    border: none
  td:not(:nth-child(2))
    border-right: 1px solid #bbb
  tr:not(:last-child) td
    border-bottom: 1px solid #bbb

.tempGauge
  position: relative
  box-sizing: border-box
  width: 100%
  max-width: 175px
  height: 300px
  margin-left: auto
  margin-right: auto
  border: 4px solid #212121
  background: rgb(61,191,37)
  background: linear-gradient(0deg, rgba(61,191,37,1) 45%, rgba(253,255,2,1) 65%, rgba(253,255,2,1) 75%, rgba(253,45,45,1) 100%)

  .tempGaugeFill
    display: block
    position: absolute
    left: 0
    top: 0
    box-sizing: border-box
    width: 100%
    height: 0
    background: white

#header h1
  text-align: center

#footer
  position: fixed
  left: 0
  right: 0
  bottom: 0
  padding-top: 25px
  padding-bottom: 25px
  background: white
  border-top: 1px solid #999
  font-size: 16px

  .row
    position: relative

  p.no-margin
    margin-bottom: 0

  p#version-info
    text-decoration: underline

#systemPages
  > div:nth-child(2n + 3)
    margin-left: 0