
@import 'core/_vars.scss';
@import 'core/_common.scss';


// Insert custom site styles.
body { backgound-image: $texture; @include trans() }

header[role=banner], 
footer[role=contentinfo] {
  > div { 
    position:relative; 
    
    .navicon {
      background: $accent;
      position: relative;
      z-index: 1000;
      
      @include breakpoint(s) {
        position: absolute;
        bottom: -2em;
        right: 0;
        background: darken($base, 5%) $texture;
        color: $inverse;
        border-width: 0 2px 2px;
        border-radius: 0 0 5px 5px;
        display: block; // overrides normal hidden
        padding: 0 1em .5em;
      }
    }
  }
}

header[role=banner] {
  .site-name h1 { max-width:335px }
  .site-name h2 { 
    @extend .pad-top-bottom;
    display: none;
    @include breakpoint(s) {
      display:block
    }
  }
  [role=menu] > li {
    @include radius($default_radius);
    @extend .pad-sides;
    border:1px solid transparent;
    a { color: $base }
    &:hover {
      background: transparentize($base, .1);
      border-color: $base_alt;

      a {color: $accent_alt}
    }
  }
}

#content {
  div[role=main] > h1, 
  div[role=main] > article > h1, 
  div[role=main] > header > h1,
  #forum_categories h1 { @extend .super-text; }

  @include breakpoint(s) {
    background-repeat: no-repeat;
  }
  //@include breakpoint(2) {
    //background-image: url(../img/grids/740.jpg);
  //}
  //@include breakpoint(m) {
    //background-image: url(../img/grids/940.jpg);
  //}
  //@include breakpoint(l) {
    //background-image: url(../img/grids/1180.jpg);
  //}
}
