@import 'attentive';
@import 'compass';
//@import 'syntax';

$dark-gray       : rgb(33,33,33);
$red             : rgb(255, 0, 0);
$white           : white;
$lighter-gray    : lighten(mix($dark-gray, $white), 30%);

$body-color      : $dark-gray;
$code-background : $lighter-gray;
$important-color : $red;

$compass-logo    : 'dark-logo.png';
$sass-logo       : 'sass.gif';

body {
  background-color: $body-color;
}

@mixin show-logo($logo) {
  background-image  : image-url($logo);
  background-repeat : no-repeat;
  width             : image-width($logo);
  height            : image-height($logo);
}

.compass {
  position          : absolute;
  bottom            : 0;
  left              : 20px;
  @include show-logo($compass-logo);
}

.sass {
  position          : absolute;
  bottom            : 10px;
  right             : 20px;
  @include show-logo($sass-logo);
}

//extendables

.rounded {
  @include border-radius(10px);
}

// syntax overrides

.na {
  color : #19177C;
}

.err {
  color : #008000;
  border : none;
}

h1, h2, h3, li, p {
  font-family : Nunito, sans-serif;
  color       : white;
}

#slides {

  @include transition-duration(0.5s);

  .highlight {
    @extend .rounded;

    background-color : $code-background;
    width            : 90%;
    margin           : 0 auto;
    margin-top       : 20px;
  }

  .slide {
    opacity : 0.4;

    &.active { opacity : 1.0 }
  }

  .style-big-list li {
    font-size : 60px;
  }

  .style-sprite-layout ul {
    width : 500px !important;
  }

  .style-variable-why ul {
    width  : 450px !important;
    margin : 0 auto;
  }

  .style-better .highlight {
    width : 800px;
  }

  .style-bad .highlight, .style-pallet .highlight {        
    width : 700px;
  }

  .style-variables .highlight {
    width : 500px;
  }

  .style-mixins .highlight {
    width : 900px;
  }

  ul {
    padding-top: 30px;
    font-size  : 30px;
    width      : 50%;
    margin     : 0 auto;
    text-align : left;
    li {
      padding-top : 10px;
    }
  }

  code {
    @extend .rounded;
    
    background-color : $code-background;
    font-size        : 90%;
    font-weight      : bold;
    padding          : 2px 10px;
    color            : $body-color;
  }

  .style-long {
    h1 {
      font-size : 60px !important;
    }
  }

  .style-important {
    h1 { 
      color : $important-color; 
      font-weight : normal;

    }
  }

}

.grid {
  @include grid-background(16, 20px, 10px, 20px, 5px, $force-fluid: true);

  background-color : $code-background;
  margin           : 0 auto;
  height           : 500px;
  width            : 700px;
}