/* Custom OPTiMiSe theme, modelled on the Raneto 0.6 default theme. Brand colours are in /static/style.css */
body { color: #333; }

.header { background: #2C323D; color: #ccc; }
.header .container-fluid { padding-top: 20px; padding-bottom: 20px; }
.header a { color: #ddd; text-decoration: none; }
.header a:hover { color: #fff; }
.header .logo { font-size: 20px; line-height: 34px; margin-left: 20px; }
.header .search-form { margin-right: 20px; }

.menu { margin: 40px 20px; padding: 0; list-style: none; }
.menu .pages { margin: 0; padding: 0; list-style: none; }
.menu li { line-height: 30px; }
.menu .category-title { margin: 25px 0 10px; font-size: 12px; text-transform: uppercase; }
.menu a { display: inline-block; color: #888; line-height: 20px; text-decoration: none; }
.menu a:hover { color: #444; }
.menu .active > a { font-weight: bold; color: #444; }

.page-home .header .search-form { display: none; }
.home-search { text-align: center; padding: 48px 16px; margin: 0 -12px 30px; background: #eee; }
.home-search .search-form { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.home-search .form-control { max-width: 500px; width: 100%; flex: 1 1 300px; }

.home-categories { columns: 3 300px; column-gap: 20px; margin: 0 10px; }
.home-categories .panel {
    break-inside: avoid;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.home-categories .panel-heading {
    font-size: 100%;
    font-weight: normal;
    margin: 0;
    padding: 10px 15px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    border-radius: 3px 3px 0 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-categories .pages { list-style: none; margin: 0; padding: 0; }
.home-categories .list-group-item { padding: 10px 15px; border-bottom: 1px solid #ddd; }
.home-categories .list-group-item:last-child { border-bottom: 0; }
.home-categories .page { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.content {
    color: #555;
    margin: 40px 20px;
    padding: 40px;
    border: 1px solid #e9e9e9;
    box-shadow: 0 1px 50px rgba(0,0,0,.1);
}
.content .title { margin: 0 0 30px; }
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: #222; margin-bottom: 0.75em; }
.content h2, .content h3, .content h4 { margin-top: 0.75em; }
.content p, .content ul, .content ol, .content pre, .content blockquote, .content table, .content iframe { margin-bottom: 1em; }
.content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    background: #fff;
    padding: 4px;
    border: 1px solid #D6D6D6;
    border-radius: 4px;
}
.content code { background-color: #FFFDDC; color: #555; }
.content pre { background: #FFFDDC; border: 0; padding: 10px; }
.content pre code { color: #657B83; background: none; }
.content .hljs { background: none; }
.content iframe, .content video { max-width: 100%; }
.content .page-meta { font-size: 85%; color: #999; margin-top: 50px; }
.content .page-meta a { color: #999; border-bottom: 1px dotted #999; text-decoration: none; }
.content .page-meta a:hover { color: #428BCA; }
.content.search .page { margin-bottom: 1.5em; }
.content.search .page-title { font-size: 1.4rem; }
.page-excerpt .search-query { background: #FFFDDC; }

.footer .copyright { font-size: 85%; color: #999; margin: 0 20px 40px 0; }
.error { padding: 0 20px; }

@media only screen and (max-width: 767px) {
    .content { margin: 20px 0; padding: 20px; }
    .menu { margin: 20px; }
}