/* * Globals */ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #555; background: #eeeeec; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-top: 0; font-weight: bold; color: #333; } ul + h4 { margin-top: 1.5em; } td { vertical-align: top; padding: .75em; } td:first-child { text-align: right; } /* * Override Bootstrap's default container. */ @media (min-width: 1200px) { .container { width: 970px; background: white; margin-top: 2em; } } /* Nav links */ .blog-nav-item { position: relative; display: inline-block; padding: 10px; font-weight: 500; color: #cdddeb; } .blog-nav-item:hover, .blog-nav-item:focus { color: #fff; text-decoration: none; } .embed-responsive { margin-bottom: 1em; } /* Active state gets a caret at the bottom */ .blog-nav .active { color: #fff; } .blog-nav .active:after { position: absolute; bottom: 0; left: 50%; width: 0; height: 0; margin-left: -5px; vertical-align: middle; content: " "; border-right: 5px solid transparent; border-bottom: 5px solid; border-left: 5px solid transparent; } /* * Blog name and description */ .main { margin-right: auto; margin-left: auto; padding: 15px; background-color: #fff; } header a { display: block; position: relative; padding-top: 25.471%; background-color: #000000; background-image: url(/images/header.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; margin-bottom: 1em; } .header-wrapper { position: absolute; bottom: 1rem; left: 1.5rem; } .blog-title { display: inline-block; color: white; text-shadow: 1px 1px 3px black; margin-bottom: 0; font-size: 60px; font-weight: bold; } .blog-description { display: inline-block; margin-bottom: 0; font-size: 20px; color: white; margin-left: 1rem; text-shadow: 1px 1px 2px black; font-weight: bold; } /* * Main column and sidebar layout */ .blog-main, .blog-masthead, .blog-sidebar { font-size: 18px; line-height: 1.5; } /* Sidebar modules for boxing content */ .sidebar-module { padding: 15px; margin: 0 -15px 15px; } .sidebar-module-inset { padding: 15px; background-color: #f5f5f5; border-radius: 4px; } .sidebar-module-inset p:last-child, .sidebar-module-inset ul:last-child, .sidebar-module-inset ol:last-child { margin-bottom: 0; } /* Pagination */ .pager { margin-bottom: 60px; text-align: left; } .pager > li > a { width: 140px; padding: 10px 20px; text-align: center; border-radius: 30px; } /* * Blog posts */ .blog-post { margin-bottom: 60px; } .blog-post-title { margin-bottom: 5px; font-size: 40px; } .blog-post-meta { margin-bottom: 20px; color: #999; } /* * Footer */ .blog-footer { padding: 40px 0; color: #999; text-align: center; background-color: #f9f9f9; border-top: 1px solid #e5e5e5; } .blog-footer p:last-child { margin-bottom: 0; } .figuregroup { margin: 1em auto; } .figuregroup > figure { display: inline-block; } .card-sm { display: inline-block; width: 300px; vertical-align: top; } .card-sm img { margin: auto; display: block; } img { max-width: 100%; }