/* Welcome to Susy. Use this file to define screen styles.
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" /> */

// Imports --------------------------------------------------------------*/

@import "defaults";

/* Layout --------------------------------------------------------------*/

@include susy;

// change '#page' to match your HTML container element(s)
#page {
  @include container;
  //@include show-grid("grid.png"); 
  @include sans-family;
}

// show-grid loads a 64+16x24 grid image by default
// For other grid settings, run `compass grid-img 30+10x20`
// Where 30 is the column width, 10 is the gutter width, 
// and 20 is the (optional) line-height.

/* Styles --------------------------------------------------------------*/

header#site-header {
  @include full;
  @include leader(6,32px);
  @include trailer(2,32px);
  #logo {
    @include columns(1,12);
    @include prefix(1);
    img {
      width: 64px;
      height: auto;
      
    }
  }
  #site-title {
    @include columns(5,12);
    h1{
      @include adjust-font-size-to(24px);
      color: black;
    }
  }
  #site-description {
    @include columns(5,12);
    h2 {
      @include adjust-font-size-to(24px);
      color: #ddd;
    }
  }
  #access {
    @include skip-link();
  }
  nav {
    @include trailer(1,32px);
    @include prefix(2);
    ul {
      @include inline-block-list(12px);
      li {
        @include slab-family;
      }
    }
  }
}

section#main {
  @include full;
  header#page_title
  {
    h1, h2 {
      @include adjust-font-size-to(48px);
      color: #aaa;
      @include prefix(2);
    }
  }
  section#content {
    min-height: 320px;
    @include prefix(0);
    @include columns(12,12);
    @include leader(1,32px);
    h1, h2 {
      @include adjust-font-size-to(24px);
    }
    article {
      @include trailer(2,32px);
      aside {
        color: #aaa;
        a {
          color: #999;
        }
      }
    }
  }
  aside#sidebar {
    @include columns(2,12);
    ul {
      @include no-style-list;
    }
  }
}

footer {
  @include prefix(2);
  @include full;
  @include slab-family;
}

section.subsection {
  @include columns(12,12);
  aside.submenu {
    @include columns(2,12);
    ul {
      @include no-style-list;
      @include adjust-font-size-to(12px);
    }
  }
  
  section.subpage {
    @include columns(9,12);
  }
}


.page {
  iframe {
    width: 580px;
    height: 580px;
    background-color: #eee;
    padding: 32px;
    overflow: hidden;
    scroll: none;
  }
}

#testing {
  background-color: red;
}

section#errors {
  background-color: #ffdddd;
  padding: 0.5em;
  h2 {
    @include adjust-font-size-to(16px);
    color: #882222;
  }
  .reason {
    display: none;
  }
}