/* ==========================================================================
   Expend Basic style settings
   ========================================================================== */

/*
 * Set up the html
 *
 * 1. Makes sue that some fonts are better rendered
 */

html
  -webkit-font-smoothing: antialiased /* 2 */
  -moz-osx-font-smoothing: grayscale
  text-rendering: optimizeLegibility


/*
 * Set up the body
 *
 * 1. Set font to lining figures
 */

body
  margin: 0

  +dubai
  line-height: 1.6

  font-feature-settings: 'lnum' /* 1 */

  +respond-to-width(760)
    padding-top: 75px

  +respond-to-width(380)
    padding-top: 60px


/*
 * Set default settings for all elements
 *
 * 1. Default selection styling
 *
 */
*
  ::selection /* 2 */
    background: $juniorBlue
    color: white


/*
 * Set default styling for input and textarea
 *
 * 1. Set font because else the agent will overrule them with an ugly font
 */
input, textarea
  +dubai
  //font-family: $fontFamily /* 1 */


/*
 * Set default styling for list
 *
 * 1. Use before for the list styling so we can control them with sass
 * 2. This will make an custom ordered list counter
 */
ul.list, ol.list
  list-style: none
  padding-left: 20px

  li
    position: relative
    padding-left: 20px
    &:before
      position: absolute
      left: -20px

ul.list
  li
    &:before
      content: '•' /* 1 */

.button
  display: inline-block
  padding: 10px 20px
  border: 1px solid white
  border-radius: 10px
  text-decoration: none

  .arrow
    display: inline-block
    margin-left: 25px
    +sprite(-35px -1px, 15px, 10px)
    transform: translate3d(0,0,0)
    transition: transform 0.3s

  &:hover
    .arrow
      transform: translate3d(5px, 0, 0)