/*
    Copyright 2015-2020 Olli Helin
    This file is part of GainCMS, a free software released under the terms of the
    GNU General Public License v3: http://www.gnu.org/licenses/gpl-3.0.en.html
*/

div.share-buttons {
    text-align: center;
}

ul.share-buttons {
    display: inline-table;
    list-style: none;
    padding: 0;
}

ul.share-buttons li {
    display: inline;
}

ul.share-buttons img {
    margin-left: 1px;
    margin-right: 1px;
    width: 32px;
}

.postmetadata {
    font-style: italic;
    font-size: 1.2rem;
    margin-top: 1rem;
    word-spacing: 0.5em;
}

.postmetadata > a {
    word-spacing: 0px;
}

h1:first-child {
    margin-top: 30px;
    text-align: center;
}

h1 + h2 {
    font-size: 3.0rem;
    margin-bottom: 30px;
}

.pager li>a, .pager li>span {
    background-color: #cccccc;
    border-color: #606060;
    border-radius: 5px;
    color: #303030;
}

.pager .disabled>a, .pager .disabled>a:focus, .pager .disabled>a:hover, .pager .disabled>span {
    background-color: #cccccc;
    border-color: #606060;
    color: #a0a0a0;
}

article {
    text-align: justify;
}

/* This makes paragraphs beside a floating image more reasonably wide. */
article p:before {
    content: "";
    display: block;
    overflow: hidden;
    width: 12em;
}

article div.img-container {
    float: right;
    margin: 10px 0 10px 20px;
    text-align: justify;
}

article div.img-container img {
    border-radius: 5px;
    margin: 0;
    max-width: 100%;
}

article div.img-container figure, article div.img-container figure a {
    display: table;
}

article div.img-container figure img {
    border-radius: 5px 5px 0 0;
}

article div.img-container figure figcaption {
    border-color: #606060;
    border-radius: 0 0 5px 5px;
    border-style: solid;
    border-width: 1px;
    caption-side: bottom;
    color: #cccccc;
    display: table-caption;
    font-style: italic;
    margin: 0;
    padding: 5px 10px;
    width: 100%;
}

/* Use <div class="img-highlight"></div> before an image
 * to make it stand out. Good for panorama images and such. */
article div.img-highlight+div.img-container {
    clear: both;
    float: none;
    margin: 1.5em 0;
}

article video {
    margin: 1.5em 0;
}

article div.img-highlight+div.img-container figure {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

@media only screen and (max-width: 991px) {
    article div.img-container {
        float: none;
        margin: 2rem 0;
    }
    article div.img-container figure, article div.img-container img {
        left: 50%;
        position: relative;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

article .video-container {
    left: 50%;
    margin: 4rem 0;
    position: relative;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

article div.audio-container {
    border: outset #a0a0a0 2px;
    border-radius: 15px;
    display: inline-block;
    float: left;
    margin: 1rem 1.5rem 1.5rem 0;
    padding: 1rem;
}

article div.audio-container>audio {
    min-width: 300px;
    width: 100%;
}

article div.audio-container>p {
    font-style: italic;
    margin: 0;
}

article div.audio-container>p:before {
    display: none;
}

article p>br {
    clear: both;
    content: "";
    display: block;
}

div.to-top-button-container {
    margin-top: -2.2rem;
    text-align: center;
}

div.to-top-button-container>a {
    cursor: pointer;
    font-size: 5rem;
    margin: 0px;
    padding: 0px;
    text-decoration: none;
}

div.contactnote {
    text-align: center;
    padding: 20px 5px;
}

.disclaimer {
    color: #ff3060;
}

#disqus_thread {
    margin-left: 5%;
    margin-right: 5%;
}

div.license {
    margin-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
}

#postmetadata .blog-updates {
    display: block;
    padding: 0;
}

#postmetadata .custom-padding {
    font-size: inherit;
}

#postmetadata td {
    min-width: 0;
}