@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400');

$background:#222;
$background-even:#2c2c2c; 
$foreground:#f9f9f9;
$foreground-light:#d9d9d9;
$foreground-focus:#c9c9c9;
$foreground-important:#F0640D;//f29766;
$foreground-title:#5db0d7; 
$selected: $foreground-important;//#FF530D;//darken($foreground-important, 20%);
$margin: 5px;

$transition-time: 0.3s;

@mixin img-checkboard() {
  background-image:
   -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, $foreground-focus), color-stop(.25, transparent)), 
   -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, $foreground-focus), color-stop(.25, transparent)),
   -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, $foreground-focus)),
   -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, $foreground-focus));
  background-image:
    -moz-linear-gradient(45deg, $foreground-light 25%, transparent 25%), 
    -moz-linear-gradient(-45deg, $foreground-light 25%, transparent 25%),
    -moz-linear-gradient(45deg, transparent 75%, $foreground-light 75%),
    -moz-linear-gradient(-45deg, transparent 75%, $foreground-light 75%);

  -webkit-background-size:50px 51px;
  -moz-background-size:50px 50px;
  background-size:50px 50px;

  background-position:0 0, 25px 0, 25px -25px, 0px 25px;
}

@mixin on-hover() {
    color: $foreground;      
    cursor: pointer;
    transition: color $transition-time;
    -webkit-transition: color $transition-time;
    -moz-transition: color $transition-time; 
}