/*
 * Import nib
 */
@import 'nib'

/*
 * Grab a custom font from Google
 */
@import url('http://fonts.googleapis.com/css?family=Source+Code+Pro')

/*
 * Nib provides a CSS reset
 */
global-reset()

/*
 * Store the main color and
 * background color as variables
 */
main-color = #4d5bfa
background-color = #faf9f0

body
  font-family 'Arial'
  background-color background-color
  color #444

header
  font-family 'Source Code Pro'
  padding 50px 10px
  color #fff
  font-size 25px
  text-align center

  /*
   * Note the use of the `main-color`
   * variable and the `darken` function
   */
  background-color main-color
  border-bottom 1px solid darken(main-color, 30%)
  text-shadow 2px 2px 4px 2px #333

h2
  font-family 'Source Code Pro'
  padding 0px
  border-bottom 1px dotted #ddd
  font-family 'Source Code Pro'
  padding-bottom 10px
  border-bottom 1px dotted #ddd
  border-radius 2px 2px 0px 0px
  margin-bottom 10px

.container
  width 500px
  margin 50px auto
  overflow hidden

.main-content
  float left
  width 300px

  p
    margin-bottom 20px

.sidebar
  float left
  width 200px

  .widget

    /*
     * Note the lack of vendor
     * prefixes here. Nib will
     * add them for us
     */
    border-radius 3px
    border 1px solid #ccc
    margin-left 20px
    padding-bottom 10px
    background-color background-color
    box-shadow inset 0px 0px 0px 3px rgba(#fff, 0.8), 0px 3px 0px -2px rgba(#000, 0.1)

    h1
      font-family 'Source Code Pro'
      margin 13px 10px 4px
      padding-bottom 10px
      border-bottom 1px dotted #ddd
      border-radius 2px 2px 0px 0px
      margin-bottom 10px

    p
      font-size 13px
      padding 0px 10px
      margin-bottom 10px

#cssmenu
    list-style none
    margin 6px
    padding 0
    width 90%

    ul
      width 99%
      margin 0

    li
      margin 0
      width 99%

    a:link
      display block
      text-decoration none
      color #000
      background-color background-color
      padding 4px 8px
      margin 0
      width 99%

    a:visited
      display block
      text-decoration none
      color #000
      padding 4px 8px
      margin 0
      width 99%

    a:hover
      display block
      text-decoration none
      color #fff
      background #4d5bfa
      padding 4px 8px
      margin 0
      width 99%

p
  line-height 1.8

footer
  width 500px
  margin 50px auto
  border-top 1px dotted #ccc
  padding-top 5px
  font-size 13px