$desktop_small: "(max-width: 320px)"
$desktop_320: "(min-width: 320px)"
$desktop_640: "(min-width: 640px)"
$desktop_800: "(min-width: 800px)"
$desktop_1024: "(min-width: 1024px)"
$desktop_big: "(min-width: 1200px)"

$background: #2d2d2d
$box_background: rgba(0, 0, 0, 0.3)
$text_color: #f0f0f0
$link_color: #09b7fa

$content_padding: 186px

/** MIXINS START **/
@mixin pre_wrap()
  white-space: pre-wrap /* CSS 3 */
  white-space: -moz-pre-wrap /* Mozilla, since 1999 */
  white-space: -pre-wrap /* Opera 4-6 */
  white-space: -o-pre-wrap /* Opera 7 */
  word-wrap: break-word /* Internet Explorer 5.5+ */

@mixin clearfix()
  &:after
    content: ""
    display: table
    clear: both



@mixin border_radius($radius: 5px)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  -ms-border-radius: $radius
  border-radius: $radius


@mixin boxed()
  padding: 5px 10px
  border: 1px solid darken($link_color, 5)
  background: $box_background
  text-align: center


@mixin wrapper_width($width: 1200px)
  width: $width


/** MIXINS END **/

/** MEDIAS START **/
@media #{$desktop_small}
  $width: 300px
  $font_size: 14px
  $content_padding_top: 20px
  $margin: 0
  $content_padding: 0

  p, pre
    font-size: $font_size

  .wrapper
    @include wrapper_width($width)

    .content
      padding-top: $content_padding_top
      padding-bottom: $content_padding

      .center
        margin: $margin

  .footer,
  .left-sidebar,
  .right-sidebar,
  .boxes
    display: none



@media #{$desktop_320}
  $width: 300px
  $font_size: 16px
  $content_padding_top: 20px
  $center_margin: 0
  $content_padding: 0

  p, pre
    font-size: $font_size

  .wrapper
    @include wrapper_width($width)

    .content
      padding-top: $content_padding_top
      padding-bottom: $content_padding

      .center
        margin: $center_margin

  .footer,
  .left-sidebar,
  .right-sidebar,
  .boxes
    display: none



@media #{$desktop_640}
  $width: 600px
  $font_size: 18px
  $content_padding_top: 20px
  $center_margin: 0 60px
  $content_padding: 160px
  p, pre
    font-size: $font_size
  .wrapper
    @include wrapper_width($width)
    .content
      padding-top: $content_padding_top
      padding-bottom: $content_padding
      .center
        margin: $center_margin

    .footer
      width: $width

    .boxes
      .box
        width: 106px

  .footer,
  .left-sidebar,
  .right-sidebar,
  .boxes
    display: block



@media #{$desktop_800}
  $width: 750px
  $font_size: 20px
  $content_padding_top: 20px
  $center_margin: 0 70px
  $content_padding: 166px
  p, pre
    font-size: $font_size
  .wrapper
    @include wrapper_width($width)
    .content
      padding-top: $content_padding_top
      padding-bottom: $content_padding
      .center
        margin: $center_margin

    .footer
      width: $width

    .boxes
      .box
        width: 145px

  .footer,
  .left-sidebar,
  .right-sidebar,
  .boxes
    display: block



@media #{$desktop_1024}
  $width: 960px
  $font_size: 22px
  $content_padding_top: 20px
  $center_margin: 0 70px
  $content_padding: 180px
  p, pre
    font-size: $font_size
  .wrapper
    @include wrapper_width($width)
    .content
      padding-top: $content_padding_top
      padding-bottom: $content_padding
      .center
        margin: $center_margin

    .footer
      width: $width

    .boxes
      .box
        width: 195px

  .footer,
  .left-sidebar,
  .right-sidebar,
  .boxes
    display: block



@media #{$desktop_big}
  $width: 1100px
  $font_size: 24px
  $content_padding_top: 20px
  $center_margin: 0 75px
  p, pre
    font-size: $font_size
  .wrapper
    @include wrapper_width($width)
    .content
      padding-top: $content_padding_top
      padding-bottom: $content_padding
      .center
        margin: $center_margin

    .footer
      width: $width

    .boxes
      .box
        width: 232px

  .footer,
  .left-sidebar,
  .right-sidebar,
  .boxes
    display: block
  /** MEDIAS END **/

body
  margin: 0
  padding: 0
  background: $background
  color: $text_color
  position: absolute
  width: 100%
  min-height: 100%


  .wrapper
    padding: 0
    margin: 0 auto
    .header
      @include clearfix()
      padding: 0 0 20px
      .logo
        @include boxed()
        float: left
      .right
        @include boxed()
        @include border_radius(10px)
        float: right

    .menu, .menu-footer
      @include boxed()
      ul
        @include clearfix()
        margin: 0
        padding: 0
        li
          margin: 0
          padding: 0 10px
          list-style: none
          float: left
          a
            color: $link_color

    .boxes
      @include clearfix()
      margin-right: -10px
      padding: 20px 0 20px
      .box
        @include boxed()
        float: left
        margin: 0 10px

    .content
      .left-sidebar
        @include boxed()
        float: left

      .right-sidebar
        @include boxed()
        float: right

      .center
        @include boxed()
        text-align: left
        pre
          @include pre_wrap()
      @include clearfix()

    .footer
      position: absolute
      bottom: 0
      padding: 20px 0 20px
      margin: 0 auto
      .footer-inner
        padding: 20px 0 0
        .left
          float: left
          @include boxed()
        .right
          float: right
          @include boxed()
        @include clearfix()