.article
  margin: block-margin 0
  .card
    background-color: color-article-background
    color: color-primary-text
  h1 
    color: color-article-title

// .article-inner
//   @extend $block
//   overflow: hidden

.article-meta
  background-color: color-article
  padding: 16px
  a
    color: color-secondary-text
    text-decoration: none
    &:hover
      color: color-default
  

.article-date
  @extend $block-caption
  float: left

.article-header
  padding: 16px
  background-color: color-article
  background-size: cover
  border-radius: 2px 2px 0 0

// .article-title
//   text-decoration: none
//   font-size: 2em
//   font-weight: bold
//   color: color-default
//   line-height: line-height-title
//   transition: color 0.2s
//   a&:hover
//     color: color-link

.article-entry
  // @extend $base-style
  // clearfix()
  // color: color-primary-text
  padding: 0 article-padding
  // p, table
  //   line-height: line-height
  //   margin: line-height 0
  // h1, h2, h3, h4, h5, h6
  //   font-weight: bold
  // h1, h2, h3, h4, h5, h6
  //   line-height: line-height-title
  //   margin: line-height-title 0
  a
    color: color-link
    text-decoration: none
    &:hover
      text-decoration: underline
  ul, ol, dl
    margin-top: line-height
    margin-bottom: line-height
  img, video
    max-width: 100%
    height: auto
    display: block
    margin: auto
  iframe
    border: none
  table
    width: 100%
    border-collapse: collapse
    border-spacing: 0
  th
    font-weight: bold
    border-bottom: 3px solid color-border
    padding-bottom: 0.5em
  td
    border-bottom: 1px solid color-border
    padding: 10px 0
  // blockquote
  //   font-family: font-serif
  //   font-size: 1.4em
  //   margin: line-height 20px
  //   text-align: center
  //   footer
  //     font-size: font-size
  //     margin: line-height 0
  //     font-family: font-sans
  //     cite
  //       &:before
  //         content: "—"
  //         padding: 0 0.5em
  // .pullquote
  //   text-align: left
  //   width: 45%
  //   margin: 0
  //   &.left
  //     margin-left: 0.5em
  //     margin-right: 1em
  //   &.right
  //     margin-right: 0.5em
  //     margin-left: 1em
  // .caption
  //   color: color-grey
  //   display: block
  //   font-size: 0.9em
  //   margin-top: 0.5em
  //   position: relative
  //   text-align: center
  // http://webdesignerwall.com/tutorials/css-elastic-videos
  .video-container
    position: relative
    padding-top: (9 / 16 * 100)% // 16:9 ratio
    height: 0
    overflow: hidden
    iframe, object, embed
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      margin-top: 0

// .article-more-link a
//   display: inline-block
//   line-height: 1em
//   padding: 6px 15px
//   border-radius: 15px
//   background: color-background
//   color: color-grey
//   text-shadow: 0 1px #fff
//   text-decoration: none
//   &:hover
//     background: color-link
//     color: #fff
//     text-decoration: none
//     text-shadow: 0 1px darken(color-link, 20%)

.article-footer
  clearfix()
  font-size: 0.85em
  line-height: line-height
  padding: 16px
  margin: 0
  border-radius: 0 2px 2px 0px
  background: color-article
  a
    color: color-secondary-text
    text-decoration: none
    &:hover
      color: color-default

.article-tag-list-item
  float: left
  margin-right: 10px

.article-tag-list-link
  &:before
    content: "#"

// .article-comment-link
//   float: right
//   &:before
//     content: "\f075"
//     font-family: font-icon
//     padding-right: 8px

// .article-share-link
//   cursor: pointer
//   float: right
//   margin-left: 20px
//   &:before
//     content: "\f064"
//     font-family: font-icon
//     padding-right: 6px

.article-nav
  padding: 16px
  
.article-nav.prev
  text-align: right
.article-nav.next
  text-align: left    
// #article-nav
//   clearfix()
//   position: relative
//   @media mq-normal
//     margin: block-margin 0
//     &:before
//       absolute-center(8px)
//       content: ""
//       border-radius: 50%
//       background: color-border
//       box-shadow: 0 1px 2px #fff

// .article-nav-link-wrap
//   text-decoration: none
//   text-shadow: 0 1px #fff
//   color: color-grey
//   box-sizing: border-box
//   margin-top: block-margin
//   text-align: center
//   display: block
//   &:hover
//     color: color-default
//   @media mq-normal
//     width: 50%
//     margin-top: 0

// #article-nav-newer
//   @media mq-normal
//     float: left
//     text-align: right
//     padding-right: 20px

// #article-nav-older
//   @media mq-normal
//     float: right
//     text-align: left
//     padding-left: 20px

// .article-nav-caption
//   text-transform: uppercase
//   letter-spacing: 2px
//   color: color-border
//   line-height: 1em
//   font-weight: bold
//   #article-nav-newer &
//     margin-right: -2px

// .article-nav-title
//   font-size: 0.85em
//   line-height: line-height
//   margin-top: 0.5em

.article-share-box
  position: absolute
  display: none
  background: #fff
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2)
  border-radius: 3px
  margin-left: -145px
  overflow: hidden
  z-index: 1
  &.on
    display: block

.article-share-input
  width: 100%
  background: none
  box-sizing: border-box
  font: 14px font-sans
  padding: 0 15px
  color: color-default
  outline: none
  border: 1px solid color-border
  border-radius: 3px 3px 0 0
  height: 36px
  line-height: 36px

.article-share-links
  clearfix()
  background: color-background

$article-share-link
  width: 50px
  height: 36px
  display: block
  float: left
  position: relative
  color: #999
  text-shadow: 0 1px #fff
  &:before
    font-size: 20px
    font-family: font-icon
    absolute-center(@font-size)
    text-align: center
  &:hover
    color: #fff

.article-share-twitter
  @extend $article-share-link
  &:before
    content: "\f099"
  &:hover
    background: color-twitter
    text-shadow: 0 1px darken(color-twitter, 20%)

.article-share-facebook
  @extend $article-share-link
  &:before
    content: "\f09a"
  &:hover
    background: color-facebook
    text-shadow: 0 1px darken(color-facebook, 20%)

.article-share-pinterest
  @extend $article-share-link
  &:before
    content: "\f0d2"
  &:hover
    background: color-pinterest
    text-shadow: 0 1px darken(color-pinterest, 20%)

.article-share-google
  @extend $article-share-link
  &:before
    content: "\f0d5"
  &:hover
    background: color-google
    text-shadow: 0 1px darken(color-google, 20%)

.article-gallery
  background: #000
  position: relative

.article-gallery-photos
  position: relative
  overflow: hidden

.article-gallery-img
  display: none
  max-width: 100%
  &:first-child
    display: block
  &.loaded
    position: absolute
    display: block
  img
    display: block
    max-width: 100%
    margin: 0 auto
/*
$article-gallery-ctrl
  position: absolute
  top: 0
  height: 100%
  width: 60px
  color: #fff
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3)
  opacity: 0.3
  transition: opacity 0.2s
  cursor: pointer
  &:hover
    opacity: 0.8
  &:before
    font-size: 30px
    font-family: font-icon
    position: absolute
    top: 50%
    margin-top: @font-size * -0.5

.article-gallery-prev
  @extend $article-gallery-ctrl
  left: 0
  &:before
    content: "\f053"
    left: 15px

.article-gallery-next
  @extend $article-gallery-ctrl
  right: 0
  &:before
    content: "\f054"
    right: 15px*/