/*!
Theme Name: action
Theme URI: http://actiontheme.com
Description: Extensible HTML5 parent theme.
Version: 1.1.7
Author: Ryan Van Etten
Author URI: http://ryanvanetten.com
Tags: flexible-width, microformats, custom-menu, custom-background, custom-colors, light, white
License: MIT
License URI: http://opensource.org/licenses/MIT
*/
 
/*!
 * main styles for "action" theme (relies on ./base.css)
 * @link    github.com/ryanve/action/issues/2
 * @license MIT
 */

/* =formatting
   Be color-agnostic so that color can be modularly cascaded.
   baymard.com/blog/formatting-links-for-usability
   nngroup.com/articles/guidelines-for-visualizing-links/
   --------------------------------------------------------------------- */
    a { font-weight:bolder; }
    nav a { font-weight:bold; }
    a small { font-weight:lighter; }
    strong a, small a, b a, i a, em a, cite a, code a, kbd a, s a,
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight:inherit; }
    a img { opacity:0.9 }

    /* =modifiers */
    .dot-anchors a, .dash-anchors a, .solid-anchors a { text-decoration:none; border-bottom-width:1px; }
    .dot-anchors a { border-bottom-style:dotted; }
    .dash-anchors a { border-bottom-style:dashed; }
    .solid-anchors a { border-bottom-style:solid; }
    .void-anchor-border a { border:0!important; }
    .void-anchor-decor a { text-decoration:none; }
    
    @media (color) {
        :not(.assist) a:not(:hover) { text-decoration:none; }
    }
 
/* =size/proximity
   --------------------------------------------------------------------- */
   body { font-size:1em; line-height:1.618; } /* golden ratio */
   ul, ol { padding-left:2em; } /* vs. 40px default from bit.ly/css2sample */

   article figure + figure { margin-top:1.5em; }
   figcaption { padding-top:.5em; padding-bottom:.5em; }
   figcaption:first-child { padding-top:0; padding-bottom:0; } /* revert if caption is on top */
   
   @media (min-width:30em) and (min-height:20em) {
       .entry-summary, .entry-content, .loop-nav { font-size:1.1em; }
   }
   
/* =color
   Aim for contrast ratios between 4 and 16.
   leaverou.github.io/contrast-ratio/
   lea.verou.me/2012/10/easy-color-contrast-ratios/
   bit.ly/wcag2contrast
   ux.stackexchange.com/a/35847
   Colors like #17c #d30 #d09 have consistent contrast on white or black.
   --------------------------------------------------------------------- */
    ::-moz-selection { background:#ee3; color:#111; }
         ::selection { background:#ee3; color:#111; }
         
    html { color:#444; background:#fffddd; } /* off-white */
    .skin-dark { background:#000; color:#bbb; }
    
    a:not(:hover) { border-color:#bbb; }
    .skin-dark a:not(:hover) { border-color:#444; }
    
    /* border-color applies to border-style/-width and otherwise has no effect */
    a { color:#17c; }
    a:focus { color:#fffddd; background:#17c; }
    a:hover { color:#fffddd; background:#17c; border-color:#17c; text-decoration:none; }
    a:focus:hover, .skin-dark a:focus:hover { background:#17a; border-color:#17a; }

    .skin-dark a:focus, .skin-dark a:hover { color:#000; }
    .skin-dark a:focus:hover { background:#d09; border-color:#d09;  }
    
    .void-color a { color:#111; }
    .void-color.skin-dark a { color:#eee; }
    .void-color a:focus { color:#fffddd; background:#444; }
    .void-color a:hover { color:#fffddd; background:#111; border-color:#111; }
    .void-color.skin-dark a:hover { color:#111; background:#eee; border-color:#eee; }
         
/* =menu
   --------------------------------------------------------------------- */    
    .site-nav { font-weight:bold; margin:1.5em 0; }
    .site-nav ul { padding-left:0; }
    .site-nav li { max-width:20em; }
    .site-nav li, .site-nav a { display:block; }
    .site-nav a { padding:.5em; }
    .site-nav li ul { display:block; margin:2px 0; }
    .invert-anchors .site-nav li + li { margin-top:2px; }

/* =editor
   bit.ly/wp-theme-review#WordPress-Generated_CSS_Classes
   --------------------------------------------------------------------- */
    .wp-caption {}
    .wp-caption[style] { width:inherit!important; }
    .wp-caption + .wp-caption { margin-top:1.5em; }
    .wp-caption-text { padding-top:.5em; padding-bottom:.5em; }
    .wp-caption-text { margin:0; }

    .gallery-size-thumbnail .gallery-caption { display:none; }
    dl.gallery-item { float:left; max-width:30%; margin:.5em 3% .5em 0; padding:0; }
    dd.gallery-caption { margin-left:0; }

    .alignnone, .alignleft, .alignright, .aligncenter, article .gallery { display:block; margin:1.1em 0; }
    .aligncenter { margin-left:auto; margin-right:auto; }
    .alignleft { float:left; margin-right:4%; }
    .alignright { float:right; margin-left:4%; }
    
/* =entries
   --------------------------------------------------------------------- */
    .sticky {}
    .hentry { clear:left; }
    .hentry + .hentry { margin-top:2em; }
    
    .thumbnail-anchor { display:block; float:left; max-width:300px; margin:.5em 4% 1em 0; }
    .entry-title { margin:0 0 .2em; }
    .byline { margin:.5em 0; }
    .byline address { display:inline-block; font-style:normal; }
    .entry-summary { clear:none; }
    .entry-summary p:first-child { margin-top:0; }
    .plural .byline, .hide-excerpts .entry-summary, .entry-summary ~ .entry-meta, 
    article.unrevised .byline [class*="modified-"] { display:none; }

    .meta-list > dt, .meta-list > dd, .meta-label, .meta-value { display:inline-block; margin:0; }
    .meta-list > dt, .meta-label { margin-right:.2em; }
    .meta-list > dt + dd, .meta-label + .meta-value { margin-left:.3em; }
    .meta-list > dd + dt, .meta-value + .meta-label { margin-left:.8em; }
    .meta-list > dt:after, .meta-label:after  { content: ":"; }
    .meta-label { font-size:inherit; font-weight:bold; }

    .entry-pages { margin-bottom:0; }
    .entry-pages + .entry-taxos  { margin-top:0; }
    .entry-taxos > dt, .entry-taxos > .meta-label { display:block; float:left; }
    .entry-taxos > dd + dt, .entry-taxos > .meta-value + .meta-label { margin-left:0; }
    .entry-taxos > dd, .entry-taxos > .meta-value { display:block; }
    .entry-taxos .term-list { display:inline; padding-left:0; }
    .term-list li { display:inline; margin:0; }
    .term-list li + li:before { content: ", "; }
    
    .entry-meta, .comments, #disqus_thread { clear:both; }
    form label { margin-right:.6em; }
    .xoxo { list-style-type:none; padding-left:0; }
    .comment .avatar  { float:left; margin-bottom:1em; margin-right:4%; }
    .bypostauthor {}

/* =layout
   --------------------------------------------------------------------- */
    body { margin:0 auto; width:96%; } /* implies 2% padding */
    .widget-area { max-width:40em; }
    
    .site-header { margin:0 auto; }
    .site-branding { margin-bottom:1.5em; }
    .site-title {}
    .site-description { font-weight:inherit; }
    .hide-tagline .site-description { display:none; }
    .site-footer { clear:both; margin:1em auto; padding:1em; }
    .header-widget-area { clear:left; }
    
    .widget-area > ul { list-style-type:square; padding-left:0; }
    .widgettitle { margin:.4em 0; }
    li.widget { display:block; margin:2em 0; }
    li.widget:first-child { margin-top:inherit; }
    li.widget:last-child { margin-bottom:inherit; }

    .loop-header:not(:empty) { margin-bottom:2em; }
    .loop-nav { clear:both; margin-top:2em; margin-bottom:1em; }
    .loop-header h1 { margin-top:inherit; }
    .loop-nav { font-weight:bold; }
    .loop-nav a { display:inline-block; padding:.5em 0; margin:0 1em 1em 0; }
    .plural .loop-nav [rel~="prev"]:before { content:"< "; font-weight: bold; }
    .plural .loop-nav [rel~="next"]:after { content:" >"; font-weight: bold; }
    
    main { clear:left; float:left; margin:1em auto; }
    main + * { clear:both; }
    
    /* =layout=modifiers */
    @media (min-width:60em) {
        .l-lheader body { width:100%; }
        .l-lheader .site-header h1 { margin-top:0; }
        .l-lheader .site-header { float:left; width:12.5em; margin:0 1em 0 0; padding:1em; }
        .l-lheader main { clear:none; float:left; padding:0 1em; width:66.6666em; max-width:40em; }
        .l-lheader.full-width main, .l-lmenu.attachment main { max-width:50em; }

        /* account for wider line-width  */
        .l-lheader.full-width body, .l-rmenu:not(.l-rsidebar) body { line-height:2; }

        .l-rmenu  body { width:96%; max-width:60em; }
        .l-rmenu .site-header { float:none; width:100%; padding:0; margin-top:.618em; }
        .l-rmenu .site-branding { float:left; }
        .l-rmenu .site-nav { float:right; margin:0 0 2em 4%; }
        .l-rmenu main { clear:left; float:none; width:100%; max-width:100%; padding:0; } 
        .l-rmenu .site-footer { padding-left:0; padding-right:0; }

        .l-rsidebar body { max-width:64em; }
        .l-rsidebar.l-lheader body { max-width:100%; }
        .l-rsidebar.l-lheader main { max-width:64em; }
        .l-rsidebar.l-rmenu:not(.full-width) .site-nav { width:18.75em; }
        .l-rsidebar:not(.full-width) .loop { width:62.5%; float:left; padding:0; }
        .l-rsidebar:not(.full-width) .main-widget-area {
            width:29.296875%; max-width:18.75em; margin:0; float:right; clear:right; 
         }
    }

    @media (min-width:80em) {
        .l-lheader.full-width main { max-width:60em; }
    }