
// Navicon is a scalable menu navigation icon
// generally, you'll want to put it inside a button element of some kind.
// Example: <span class="button"><span class='navicon'>≡≡</span></span>
.navicon { 
  font-size: 1.5rem; 
  letter-spacing: -0.33em; 
  display: block; 
  width: 3em; 
  color: $base;
  text-align: center;

  &:before {
    content: "≡";
    width: .33em; 
    overflow: hidden; 
    display: inline-block;
    color: $base_alt;
    vertical-align: top;
  }
  &, &:before {
    height: 1.5em; 
    line-height: 1.5em
  }
}

@import '_tables.scss';      // table styles
@import '_lists.scss';       // list styles
@import '_grids.scss';       // gridded content
@import '_pagination.scss';  // pagination
@import '_tabs.scss';        // tabs content
@import '_calendar.scss';    // calendars, dateboxes and event lists content
@import '_forms.scss';       // basic form styling
@import '_icons.scss';       // auto-inserted icons
@import '_sideheads.scss';   // vertical headlines
@import '_button.scss';      // buttons
@import '../core/_typography.scss';

hr.fancy {border:0; @include fancy_rule;}

.hero { 
  position:relative; 
  z-index:10;
  padding:2em 0 0;
}

// A kicker sits above a major heading and provies as a section name, 
// author name or other short additional information.
.kicker {
  margin-bottom: $thinMargin; 
  color: $inverse_alt;
  
  a {color:$inverse_alt}
  a:hover {color:$accent}
}


.hero .boxedform {
  @include gradient($base_alt, 10%, $texture);
  label, legend, h2, {padding-left:20px}
  input[type=text], input[type=password], textarea {width:67%}
}

blockquote, q {
  @extend .sub-text;
  @extend .margin-top-bottom;
  @include clearfix();

  padding-left: $gutter;
  color: $meta; 
  display: block;
  border-left: 4px solid $base_alt2; 
  footer {font-style: italic;}
  img {max-width:30% !important}
}

.content-body {

  .datebox {margin-right: $gutter; }

  @include breakpoint(s) {
    width:365px; float:left; 
  }
  @include breakpoint(m) {
    width:460px;
  }
  @include breakpoint(l) {
    width:540px;
  }
  @include breakpoint(l) {
    width:620px;
  }
  @include breakpoint(xl) {
    width:800px;
  }
  
  #top_assets { 
    position:relative; z-index:100;
    border-bottom: 2px solid $base_alt; 
    @extend .pad-bottom;

    ul.sociallinks { margin: 0; border-bottom:0 }

    @include breakpoint(s) {
      width: 230px; 
      float: right; 
      margin: 0 -160px $defaultMargin $gutter; 
      blockquote {display:block;}
    }
    @include breakpoint(m) {
      width:380px; 
      margin-right: -160px;
    }
    @include breakpoint(l) {
      width:460px;
    }
    @include breakpoint(xl) {
      width:540px; 
      margin-right: -240px;
    }

  .tabbed > ul {
    @extend .sub-text;

    text-align: right; 
    list-style: none; 
    margin: 0; 
    background:transparent;

    > li {background:transparent; padding:0;
      a {background:$inverse_alt; @include radius(1em);
        color:$base; padding:.25em .5em; text-shadow:none}
    }
    > li.active {border:0;
      a {background:$accent}
    }
    .preview {position:absolute; width:6em; top:-65px; margin-left: -4em; 
      display:none; min-height:50px; background:$accent; color:$base; line-height:50px; 
      text-align:center; text-shadow:none; font-weight:bold; 
      @include radius(3px); 
      @include box-shadow(0, 0, 4px, 1);
     
      img {border-color:$accent}
    }
    .preview:before {display:inline-block; z-index:1000;
      content: ' ';
      height: 0;
      position: absolute;
      width: 0;

      border: 7px solid transparent;
      border-top-color: $accent;
      top: 100%;
      left:35px;
      @include box-shadow(0, 0, 4px, 1);
    }
  }
  blockquote {display:none; font:1.33em $alt_font; border-top:2px solid $base_alt; margin:.25em 0;
    em {display:inline-block; float:right;  padding-top:.67em; font:13px $base_font; text-align:right; color:$inverse_alt;
      &:before {content: '— ';}
    }
  }
  object, video {width:100%;}
  }
}


/*
#more_assets {float:right;
  @include breakpoint(s) {
    width:180px;
  }
  @include breakpoint(m) {
    width:220px;
  }
  @include breakpoint(l) {
    width:380px;
  }
}
*/