/* MarketInOut blog (/blog/blog.php). Colors inherit from the site theme, so light and dark both work. */

.blog { max-width: 780px; padding: 10px 14px 0 14px; line-height: 1.6; }
.blog h1.blog-title { margin: 6px 0 6px 0; line-height: 1.25; }
.blog .blog-lead { font-size: 1.05em; opacity: 0.85; margin: 0 0 14px 0; }
.blog .blog-meta { font-size: 0.9em; opacity: 0.7; margin: 0 0 16px 0; }
.blog .blog-crumbs { font-size: 0.9em; margin: 0 0 4px 0; }
.blog .blog-preview { padding: 8px 12px; margin: 0 0 12px 0; border: 1px solid #e0a000; background: rgba(224, 160, 0, 0.12); }

/* topic tabs reuse the site's button-h1 / button-link */
.blog .blog-topics { margin: 0 0 18px 0; }

/* list */
.blog .blog-item { padding: 0 0 18px 0; margin: 0 0 18px 0; border-bottom: 1px solid rgba(128, 128, 128, 0.25); }
.blog .blog-item h2 { margin: 0 0 2px 0; font-size: 1.3em; line-height: 1.3; }
.blog .blog-item .blog-meta { margin-bottom: 6px; }
.blog .blog-item p { margin: 0 0 6px 0; }
.blog .blog-more { font-weight: bold; }

.blog .blog-pages { margin: 4px 0 20px 0; }
.blog .blog-pages a, .blog .blog-pages span { display: inline-block; padding: 4px 10px; margin: 0 4px 4px 0; border: 1px solid rgba(128, 128, 128, 0.35); border-radius: 3px; }
.blog .blog-pages .blog-page-cur { font-weight: bold; background: rgba(128, 128, 128, 0.15); }

/* article body */
.blog-article h2 { margin: 28px 0 8px 0; font-size: 1.35em; line-height: 1.3; }
.blog-article h3 { margin: 22px 0 6px 0; font-size: 1.1em; }
.blog-article p { margin: 0 0 12px 0; }
.blog-article ul, .blog-article ol { margin: 0 0 12px 0; padding-left: 24px; }
.blog-article li { margin: 0 0 4px 0; }
.blog-article blockquote { margin: 0 0 12px 0; padding: 6px 14px; border-left: 3px solid rgba(128, 128, 128, 0.5); opacity: 0.9; }
.blog-article pre { margin: 0 0 12px 0; padding: 10px 12px; overflow-x: auto; background: rgba(128, 128, 128, 0.12); border-radius: 3px; font-size: 0.95em; }
.blog-article .table-wrap { overflow-x: auto; margin: 0 0 14px 0; }
.blog-article table { border-collapse: collapse; width: 100%; font-size: 0.95em; }
.blog-article th, .blog-article td { padding: 7px 10px; border: 1px solid rgba(128, 128, 128, 0.3); text-align: left; vertical-align: top; }
.blog-article th { background: rgba(128, 128, 128, 0.12); }
.blog-article .cta { margin: 20px 0; }
.blog-article .cta a { display: inline-block; margin: 0 10px 8px 0; padding: 8px 16px; border: 1px solid; border-radius: 4px; font-weight: bold; text-decoration: none; }
.blog-article .note { font-size: 0.9em; opacity: 0.7; }

.blog .blog-related { margin: 30px 0 10px 0; padding: 14px 0 0 0; border-top: 1px solid rgba(128, 128, 128, 0.25); }
.blog .blog-related h2 { font-size: 1.15em; margin: 0 0 6px 0; }
.blog .blog-related ul { margin: 0; padding-left: 20px; }