/* ===========
*   WIREFRAMES
* ================ */

#header, #intro, #page, #footer { @include container; }
.row { @include row; }


#header {
  #logo {
    @include grid(3);
  }
  
  #menu {
    @include grid(9, "last");
  }  
}

#intro {
  #catchphrase {
    @include grid(12, "last")
  }
}

#page {
  #content {
    @include grid(8);
  }
  
  #sidebar {
    @include grid(4, "last");
  }
  
}

#footer {
  #copyright {
    @include grid(12, "last");    
  }
}

/* =======================
*   WIREFRAMES APPEARANCE
* ======================== */

.wires { display: none; }
body.wireframed {
  .wires {
    display: block;
    border-left: 1px solid #BBB;
    border-right: 1px solid #BBB ;
    border-bottom: 1px solid #BBB;
  }
  p.wires {
    line-height: 100px; 
    text-align: center; 
    color: #BBB;     
  }
}

body.wireframed > div:nth-child(odd) {
  background-color: #F1F1F1;
}
#content, #sidebar, #intro { p.wires { line-height: 400px; } }