/* bits.scss */
/* special Luxi font */
@font-face {
  font-family: 'LuxiSerifRegular';
  src: url("../fonts/luxirr-webfont.eot");
  src: url("../fonts/luxirr-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/luxirr-webfont.woff") format("woff"), url("../fonts/luxirr-webfont.ttf") format("truetype"), url("../fonts/luxirr-webfont.svg#LuxiSerifRegular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'LuxiSerifOblique';
  src: url("../fonts/luxirri-webfont.eot");
  src: url("../fonts/luxirri-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/luxirri-webfont.woff") format("woff"), url("../fonts/luxirri-webfont.ttf") format("truetype"), url("../fonts/luxirri-webfont.svg#LuxiSerifOblique") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'LuxiSerifBold';
  src: url("../fonts/luxirb-webfont.eot");
  src: url("../fonts/luxirb-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/luxirb-webfont.woff") format("woff"), url("../fonts/luxirb-webfont.ttf") format("truetype"), url("../fonts/luxirb-webfont.svg#LuxiSerifBold") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'LuxiSerifBoldOblique';
  src: url("../fonts/luxirbi-webfont.eot");
  src: url("../fonts/luxirbi-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/luxirbi-webfont.woff") format("woff"), url("../fonts/luxirbi-webfont.ttf") format("truetype"), url("../fonts/luxirbi-webfont.svg#LuxiSerifBoldOblique") format("svg");
  font-weight: normal;
  font-style: normal; }

/* 8. CUSTOM LAYOUT & TYPOGRAPHY (Daddy bear)
----------------------------------------------------------------------------------------*/
#container {
  padding: 1.618em;
  margin: 0 auto;
  max-width: 60em; }

#main {
  width: 60%;
  float: left; }

.sidebar {
  width: 33%;
  float: right; }

footer {
  clear: both; }

header .brand {
  width: 66%; }
  header .brand h1 {
    font-size: 2.618em; }
header nav.primary ul {
  float: left; }
header nav.primary li {
  float: left;
  margin-right: 1em; }

/* 9. CUSTOM LAYOUT & TYPOGRAPHY (Mummy bear)
----------------------------------------------------------------------------------------*/
@media screen and (min-width: 30em) and (max-width: 63.236em) {
  #container {
    width: 30em; }

  #main, .sidebar {
    width: 100%; }

  header .brand {
    width: 100%; }
    header .brand img {
      margin: -0.5em 0.5em 0 0; }
    header .brand h1 {
      font-size: 1.618em; } }