/**
 * Basic element styling
 */

html
  height: 100%
body
  position: relative
  overflow-x: hidden
  margin: 0
  padding-bottom: 88px
  color: #555
  font-family: 'Source Sans Pro', sans-serif
  font-weight: 400
  font-size: 16px
  line-height: 16px

h1, h2, h3, h5
  font-weight: 600
  margin: 0
  padding: 0
  color: #7f7f7f

h1
  display: block
  margin: 8px 0 40px 0
  color: #000
  font-size: 20px
  font-weight: 700
  text-transform: uppercase
  letter-spacing: 2px

h2
  display: inline
  font-size: 15px
  font-weight: 700
  font-variant: small-caps
  text-transform: lowercase
h3
  display: inline
  font-size: 11px
  font-weight: 700
  text-transform: uppercase
h4
  display: block
  margin: 0 0 16px 0
  color: #565656
  font-weight: bold
h5
  display: block
  font-size: 14px
  font-weight: normal
  font-variant: small-caps
  text-transform: lowercase
  letter-spacing: 1px
form
  margin: 0
  padding: 0

input
  color: #7f7f7f

ul
  margin: 0
  padding: 0

img
  border: none

p
  margin: 0 0 16px 0

a
  text-decoration: none
  color: #069EF2

a
  text-decoration: underline
  color: #069EF2

hr
  margin: 16px 0
  height: 1px
  background: #e5e5e5
  border: none

/**
 * Main flexable layout containing aside and content
 */
.main-flexable-layout
  position: relative
  display: flex
  flex-direction: row
  justify-content: flex-start
  box-sizing: border-box
  margin: 0 auto
  width: 100%
  max-width: $gridMaxWidth

  +respond-to-width($bp_md)
    padding: 0 20px

#aside
  position: relative
  z-index: 100

  flex-grow: 0
  flex-shrink: 0
  flex-basis: 160px

  width: 160px
  height: auto

#content
  position: relative

  flex-grow: 1
  flex-shrink: 1
  flex-basis: auto