// Capo common styles


// ------------ IMPORTS ---------------//
@import '_reset.scss';                       // defines reset and core styles
@import '_typography.scss';                  // typography
@import '_mixins.scss';                      // defines mixins
@import '_layout.scss';                      // layouts
@import '../assets/_all_assets.scss';        // pull in asset helpers

html { background: $base $texture; }
body {
  font-family: $base_font;     // root font stack. Baseline grid is defined in reset
  color:       $inverse;
  height: 100%;
  margin-top: 0;
  @include trans(all, .3s, linear);
}

select, input, textarea {color:$inverse_alt}

a { color:$accent_alt;
  &:link{-webkit-tap-highlight-color: $accent_alt}
  &:hover { color:$accent }
}
h1, h2, h3 { font-weight:normal }

::-moz-selection { background: $inverse_alt; color:$base_alt }
::selection      { background: $inverse_alt; color:$base_alt }


/**************************** Structure ******************************/
.constrain { 
  @include breakpoint(xs) { margin:0 20px; width: auto;  };
  @include breakpoint(s)  { margin: 0 auto; width: ($s - 20) + px };
  @include breakpoint(m)  { width: ($m - 40) + px };
  @include breakpoint(l)  { width: ($l - 40) + px };
  @include breakpoint(xl) { width: ($xl - 40) + px };
}

body { 
  &:after { display: none; }
  @include breakpoint(xs) { &:after { content: 'x-small'; } };
  @include breakpoint(s)  { &:after { content: 'small'; } };
  @include breakpoint(m)  { &:after { content: 'medium'; } };
  @include breakpoint(l)  { &:after { content: 'large'; } };
  @include breakpoint(xl) { &:after { content: 'x-large'; } };
}

body.collapsed {
  header[role=banner] { 
    @include box-shadow(0, 2px, 2px, .4); 
    position: fixed; 
    z-index: 1000;
    .site-name {
      h1 {max-width: 200px;}
      h2 { display: none }
    }
    #main_menu { 
      @include breakpoint(xs) { display: none }; 
      ul { 
        @include breakpoint(s) { 
          height: 0;
          overflow:hidden;
          margin:0 
        }; 
      }
    }
  }
}

// regular masthead styles.
header[role=banner] { 
  @include box-shadow(0, 2px, 2px, .3);
  @include gradient($accent, 10%, $texture); 
  top: 0; 
  width: 100%; 
  z-index: 100; 
  padding: 10px 0; 
  min-height: 60px;
  border-bottom: 2px solid $accent; 

  &, * {
    @include trans(all, .3s, ease);
  }
  .site-name,
  nav { display: block; }
  
  .site-name { 
    color: $inverse; 
    text-shadow: 0 1px 2px rgba(0,0,0,.7); 
    padding-right: $gutter;
    @include breakpoint(xs) { padding-left: $gutter; }

    a { color: $base }
    h1, h2 { margin: 0 }
    h1 { float: left; width: 32% }
  }

  > div .navicon {
    @include radius(5px);
    float: right; 
    font-weight: bold; 
    border: 1px inset $accent; 
    color: $base; 
    margin-right: $gutter;
    @include breakpoint(s) { padding: 0.5em auto; }
    &.activated { background: $accent_alt }
  }
  
  nav {
    position: relative; 
    @include breakpoint(s) { margin-left: 31%; }
  }
}

#content {
  text-shadow: 1px 1px 2px $base;
  @include breakpoint(s) { padding: 0 2em };
  @include breakpoint(m) { padding: 0 };

  figure {
    img { border: 1px solid $accent_alt; }
    figcaption {
      @extend .sub-text;
      @extend .pad-bottom;
      color: $inverse_alt;
      font-weight: normal;
      .author { 
        display: block; 
        text-align: right; 
        font: 9px $base_font; 
        text-transform: uppercase; 
        margin: -1.5em 0.5em 0 0; 
      }
      p { margin: 0 }
    }
  }

  div[role=main] {
    padding-bottom: 1em;
    p, ul, ol, dl, table {
      margin-bottom: 1em
    }
  }
}

header[role=banner], 
footer[role=contentinfo] {
  clear:both; 
  nav {
    ul { margin: 0 }
    [role=menu] > li {
      font-weight: bold;
      @extend .margin-bottom;
      ul { 
        li { 
          @extend .sub-text;
          font-weight: normal
        }
      }
    }
    .button { margin: 0 }
  }
}

header[role=banner] nav ul {
  @include breakpoint(xs) { display: none; };
}

footer[role=contentinfo] {
  @include box-shadow(0, -2px, 2px, .3);
  padding: 1em 0;
  border-top: 2px solid $accent; 
}

#searchForm {
  text-align: right;
  select { width:120px; }
  #q {
    @include radius(3px);
    @extend .sub-text;
    border: 1px solid $inverse_alt;
    padding: 3px;
    margin-right: -8px;
    width: 140px;
  }
  span {
    @extend .small-text;
    color: $inverse_alt
  }
}



/************************ COMMON CLASSES AND ELEMENTS ********************/
time {
  @extend .sub-text;
  color: $inverse_alt; 
  display: block;
}

.block { display: block }

// for content that needs to be 'broken out' and given more prominence
.breakout {
  @include radius(.5em);
  @extend .breakout-text;
  display: block;
  border: 1px solid lighten($base_alt2, 2%);
  background: $base_alt2;
  padding: 1em;
  margin: .5em 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.8); 
}

// for objects that we wish to diminish the importance of
// examples would be events that are recently over, and toxic posts.
.diminish, .toxic {@include opacity(.6);
  &:hover {@include opacity(1)}
}

// for number counts on objects, like recently updated
.counter { 
  @include radius(1.5em);
  @extend .small-text;

  background: rgba($base, 0.9);
  border: 1px solid $base_alt2;
  line-height: 1.5em;
  padding: .25em;
  text-align: center;
  display: inline-block;
  min-width: 2em;
  font-weight: normal;
  color: $inverse_alt;

  &.left { margin-right: 0.5em }
}
.avatar {
      width: 80px;
      display: block;
      border:1px solid $base_alt2;
}
a .avatar:hover {border-color: $accent}


.errorlist {
  @extend .sub-text;
  background: $error;
   list-style: none; 
   padding: .25em 1em; 
   margin: 0; 
   font-weight: bold; 
   
}

.messages {margin:0 0 1em; padding:0; list-style:none;
  > li, .message {
    @extend .breakout-text;
    border: 1px solid; 
    padding: .25em 1em;
    background: $inverse;
    color: $base_alt2;
    text-shadow: 1px 1px 0 lighten($inverse, 20%);
    @include radius($default_radius);
    &:before {font-size:1.5em}

    a { color: $base }
  }
  .message h4 {margin:0}

  .error {
    color: $error;
     &:before    { content: '\2639'; }
    }
  .debug, .warning {
    background: $alert;
    &:before    { content: '\26A0'; }
  }
  .info {color: #1F21BF;
    &:before    { content: 'ℹ'; }
  }
  .success {
    color: #0F8C35;
    &:before { content: '\263A'; }
    }
}

.signature {
  @extend .small-text;
  border-bottom: 1px solid $base_alt2;
  text-align: right;
}

/********************* CONTENT SECTION FRONTS *****************************/
#top_stories_hold {
  a { color: $inverse }
  a:hover, a:active { color: $accent_alt }
  
  #lead_item { 
    @include breakpoint(s) {
       figure.vertical {
        width: 57%;
        figcaption { display: none }
      }
      figure {
        float: right;
        margin: 0 0 $defaultMargin $gutter;
      }
    }
    @include breakpoint(l) {
      width: 450px;
      float: left;
      p { @extend .breakout-text; }
    }
    @include breakpoint(xl) {
      width: 700px;
    }
  } 
    article+article { 
      border-top: 2px solid $base_alt;
      margin-top: 1em;
      h1, p { font-weight: normal }
      h1 { @extend .small-header }
      p { @extend .body-text }
    }

  #more_featured {
    h1 { @extend .medium-header }
    p { @extend .sub-text }
    img { width:110px }

    @include breakpoint(s) {
      article {
        display: inline-block;
        padding: 0.5em 10px 0 0; 
        border-top:1px solid $inverse_alt;
        width:49.5%;
        vertical-align: top;
      }
    }
     @include breakpoint(l) {
      width: 300px; 
      float: right;
      article {
        display: block;
        width: auto;
        padding-right: 0;
        clear:right
      }
      article:first-child { border: 0 }
    }
  }
}
#more_articles {
    h1 { @extend .medium-header }
    figure { width: 32% }
  }


/**************************** STORY PAGES  *********************************/
p.vcard { line-height: 1em }
p.author {
  @extend .sub-text;
  font-weight: bold;
  margin: 0; 
  text-transform: uppercase
}
p.source-org {
  @extend .small-text;
  font-family: $alt_font; 
}

h2.overline {
  @extend .medium-header;
  margin-bottom: 0;
}

.sociallinks {
  border: solid $base_alt; 
  border-width: 2px 0; 
  padding: 0.25em 0; 

  li {
    list-style: none;
    display: inline-block; 
    padding: 0 0.5em;
    margin: 0;
    font-size: 70%;
    width: 24%;
  }
  li#social_fb { width:48% }
  img {
    border: 0; 
    width: 24px; 
    padding-right: 2px;
  }
  iframe {
    border:none;
    overflow:hidden;
    width:90px;
    height:21px;
    margin-bottom: -0.67em;
  }
  a {
    color:$inverse_alt;
    font-weight:bold
  }
}
.section_front article > a {
  color: $inverse;
  &:hover { color: darken($accent, 5) }
}

.story_detail {
  .dateline {
    @extend .sub-text;
    font-weight: bold;
    margin-top: 0.45em;
    &:after {
      content: '|'; 
      color: $inverse_alt;
      padding: 0 0.5em;
      font-weight: normal
    }
  }
  object, video { width:100%; }
  .shirttail {
    @extend .small-text;
    @extend .pad-top-bottom;
    color: $inverse_alt;
    border-top: 2px solid $base_alt;
    margin: 0;
  }
}


/******************** GALLERIES **********************/
#gallery_thumbs_hold {
  display: none;
  width: 100%;
  overflow: hidden;
  height: 70px;
  position: relative;
  
  li {
    height: 65px; 
    width: 65px;
    margin: 0 5px 0.5em 0;
    border: 1px solid $inverse;
    &.current {
      border-color: $accent;
      border-width: 4px
    }
    img {border:0}
  } 
}
#gallery_slides_hold {
  figure.vertical  { text-align: center; }
  figcaption { display: none }
}
#gallery_info .sociallinks li { width: auto }



/******************** user posts and comments **********/
#comment-list {
  article { 
    clear:both; 
    position:relative; 
    margin-bottom:2em;

    header, footer { @extend .small-text }
    header {
      letter-spacing: 1px;
      padding-left: .5em; 
      margin-bottom:1em;
      border-bottom: 1px solid $base_alt2; 
      color: $accent;
      @include breakpoint(s) {
        padding-left:100px;
      }

      time { 
        float:right; 
        margin-left:.5em 
      }
      .counter { float:right; margin-left:.5em }
      a[rel=author] { font-weight:bold; }
    } 
    .avatar {
      display:none;

      @include breakpoint(s) {
        margin-left: -100px;  
        float: left; 
        display: block;
      }
    }
    .profile_preview {
      margin: 0;
      position: absolute;
      top: 0;
      left: 100px;
      padding: 0 1em;
      z-index:200;
      width: 200px;
      font-weight: normal;
      background: $base;
      border:1px solid $meta;
      @include radius($default_radius);
    }
    .post {
      @include breakpoint(s) {
        margin:0 0 0 100px; 
        min-height:40px;
      }
      p {
        clear:right;
        @include breakpoint(xs) {
          @extend .body-text;
        }
      }

      figure, p > img, figure >img {
        width:auto;
        float:right; clear:right;
        margin: 0 0 $defaultMargin $gutter;
        max-width:320px; 
        @include breakpoint(m) {
          max-width:540px;
        }

        &:after {
          content: ' '; 
          display:block;
          clear:both
        }

        &.smiley {margin:0; float:none; border:0; display:inline; width:auto }
        p:last-child {margin-bottom:0}
      }

      figure:first-child+p {clear:none}

      figure:after, p > img:after  {
        @include clearfix();
        }
    }

    .postcontrols, .post-voting {
      a[href*="/downvote/"]:hover, a[href*="/downvote/"]:active { background:#600 }
      a[href*="/upvote/"]:hover, a[href*="/upvote/"]:active { background:#060 }

    }
    .postcontrols {
      position: absolute; 
      right: 0; 
      z-index: 100;
    }
    .post-voting {
      @include breakpoint(m) {
        margin-left:45%;
      }
    }
  }
  article.toxic {
    .avatar, .post, .postcontrols li.icon-quote {display:none}
    .toxic-message {cursor:pointer;
      &:before {content: '☢' }
    }
  }
}
#reply textarea {
  width: 100%;
}

.markdown {
  margin: 0 0.5em;
  .markItUpHeader ul {
    padding: 0; 
    margin: 0;
    position: relative;
    li {
      @include button();
      @extend .small-text;
      margin: 0;
      vertical-align: top; 
    
      &.markItUpSeparator, a { display: none }
    }
    li.sub-nav {
      position: absolute;
      max-width: 7.5em;
    }
  }
}


.new { border-left: 4px solid $accent } // list items and such.
a.new {                                 // actionable
  @include radius($default_radius);
  @extend .small-text;
  display: inline-block; 
  background: $accent;
  border: 1px inset $base_alt2;
  text-shadow: none;
  color: $inverse; 
}