/*
  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" />


@import defaults.sass


/* @group STRUCTURE */

#skip-links
  ul
    +no-style-list
  a
    +skip-link
    width: 100%

body
  +susy

#page
  position: relative
  +container
  background: rgba(0,0,0,.10)

h1, h2
  +serif-family
  text-transform: uppercase
  text-align: center
  background: rgba(0,0,0,.15)
  letter-spacing= 1/14 + "em"

h1 + p, h2 + p, p:first-child
  margin-top: 0

header[role="banner"], #site-nav
  +full
  h1
    font-size: 1.5em
    line-height: 2em

#site-nav
  text-align: center
  padding: 1.5em
  ul
    +inline-block-list(.5em)

#content
  > aside
    +columns(2)
    &:first-child
      +alpha
    & + aside
      +omega
  section[role="main"]
    +columns(6)
    > section
      +full(6)
    .major
      article
        +columns(3,6)
        & + article
          +omega(6)
    .minor
      aside
        +columns(2,6)
      article
        +columns(4,6)
        +omega(6)
        header, .body
          +columns(2,4)
        .body
          +omega(4)
        footer
          +full(4)
    
footer[role="contentinfo"]
  +full
  border-top= 1/14 + "em dotted"
  padding-top= 13/14 + "em"


/* @end */

  
/* @group COMPONENTS by type */



/* @end */


/* @group OVERRIDES by content */



/* @end */

        
/* @group OVERRIDES by page */



/* @end */


/* @group DEBUG */

// Uncomment, adjust and use for debugging
// #page
//   +show-grid("your-grid-image.png")

/* @end */