/*!
Theme Name: action
Theme URI: http://actiontheme.com
Description: Extensible HTML5 parent theme.
Version: 1.2.11
Author: Ryan Van Etten
Author URI: http://ryanvanetten.com
Tags: flexible-width, microformats, custom-menu, custom-background, 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
 * @link  github.com/ryanve/action/issues/5
 */

/* =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:link { font-weight:bolder; }
    nav a:link { font-weight:bold; }
    a:link 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; }
    label { margin-right:.6em; }

    /* =modifiers */
    .dot-anchors a:link, 
    .dash-anchors a:link, 
    .solid-anchors a:link { text-decoration:none; border-bottom-width:1px; }
    .dot-anchors a:link { border-bottom-style:dotted; }
    .dash-anchors a:link { border-bottom-style:dashed; }
    .solid-anchors a:link { 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
   en.wikipedia.org/wiki/News_style
   bit.ly/maglossary
   --------------------------------------------------------------------- */
   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) {
        .upsize .entry-content,    /* Upsize content when applied to any ancestor. */
        .upsize > .entry-summary,  /* Upsize excerpt only when applied to parent, e.g. post_class. */
        main .arrestive { font-size:1.1em; }

        .journalistic > .entry-content > p:first-child,
        .journalistic .entry-content .standfirst,
        .journalistic .entry-content .lede { font-size:1.236em; line-height:1.236; }
   }
   
/* =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; }

    .reduce-color a:not(:hover) { border-color:#bbb; }
    .reduce-color.skin-dark a:not(:hover) { border-color:#444; }
    
    /* border-color applies to border-style/-width and otherwise has no effect */
    a:link, a:visited { color:#17c; }
    a:focus { color:#fffddd; background:#17c; }
    a:hover { color:#fffddd; background:#17c; border-color:#17c; text-decoration:none; }
    a:hover:focus, .skin-dark a:hover:focus { 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:link, .void-color a:visited { color:#111; }
    .void-color.skin-dark a:link, .void-color.skin-dark a:visited { 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 { display:block; max-width:20em; }
    .site-nav li ul { display:block; margin:2px 0; }
    .invert-anchors .site-nav li + li { margin-top:2px; }
    .site-nav a { display:block; padding:.5em; }
    @media (max-height:15em) {
        .site-nav a { padding:.3em .5em; }
    }

/* =editor
   bit.ly/wp-theme-review#WordPress-Generated_CSS_Classes
   --------------------------------------------------------------------- */
    .wp-caption {}
    .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; }
    
    .entry-title { margin:0 0 .2em; }
    .byline { margin:.5em 0; }
    .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-label { font-size:inherit; font-weight:600; }
    .entry-footer, .entry-meta, .comments, article.comment, #disqus_thread, #respond { clear:both; }
    .xoxo { clear:both; list-style-type:none; padding-left:0; margin-bottom:2em; }
    .xoxo li { clear:both; display:block; margin-top:1em; margin-bottom:1em; }
    .comment-content {}
    .bypostauthor {}
    .thumbnail-anchor, .avatar-anchor {
        display:block; float:left; clear:both;
        margin-bottom:1em; margin-right:4%; 
    }
    .image-anchor:empty { display:none; float:none; }

/* =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-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-header h1 { margin-top:inherit; }
    .loop-nav { clear:both; margin-top:2em; margin-bottom:1em; font-weight:bold; }
    .loop-nav a { display:inline-block; padding:.5em 0; margin:0 1em 1em 0; }
    .singular .loop-nav a { display:block; clear:both; margin-bottom:2px; }
    .plural .loop-nav [rel~="prev"]:before { content:"< "; }
    .plural .loop-nav [rel~="next"]:after { content:" >"; }
    
    main { clear:left; float:left; margin:1em auto; max-width:100%; }
    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; }

        .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; }
    }