html {
    -webkit-font-smoothing: antialiased
}

body {
    background-color: #fff;
    font-family: Karla, Sans-serif;
    font-size: 1.2em;
    line-height: 1.6em;
    color: #3f3f3f;
    padding: 40px 20px;
    margin: 0
}

a {
    color: #3f3f3f;
    text-decoration: none
}

a:hover {
    color: #3f3f3f;
    border-bottom: 1px solid #7f7f7f;
    padding-bottom: 2px
}

h1 {
    font-size: 1.2em;
    font-weight: normal;
    margin: 0 auto;
    padding: 0 5px 0 0;
    display: inline
}

#container {
    margin: 0 auto;
    padding: 0
}

header.main {
    margin: 60px auto 100px auto;
    padding: 20px 20px;
    text-align: center;
    width: 350px;
    background-color: #fff;
    -webkit-animation: fadein 4s ease-out;
    -moz-animation: fadein 4s ease-out;
    -o-animation: fadein 4s ease-out;
    -ms-animation: fadein 4s ease-out;
    animation: fadein 4s ease-out;
}

footer.primary-footer {
    text-align: center;
    margin: 0 auto 40px auto;
    clear: both;
    float: left;
    width: 100%;
    padding: 30px 0
}

footer.primary-footer .load-more-entries {
    padding: 12px 22px;
    background: #f2f2f2;
    font-size: 1.4em
}

footer.primary-footer .load-more-entries:hover {
    background: #ebebeb
}

#posts {
    margin: 0 auto;
    clear: both
}

.post {
    margin: 0 20px 40px 20px;
    float: left;
    min-width: 260px
}

.post iframe {
    width: 100%;
    display: block
}

.post header {
    color: #b4b4b4;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%
}

.caption {
    margin-top: 20px
}

.single {
    width: 260px;
    float: left
}

.single img {
    width: 260px;
    line-height: 0px;
    display: block
}

.double {
    width: 560px;
    float: left
}

@media (max-width: 640px) {
    .double {
        width: 260px
    }
}

.double img {
    width: 560px;
    display: block
}

@media (max-width: 640px) {
    .double img {
        width: 260px;
        height: auto
    }
}

.triple {
    max-width: 620px;
    float: left
}

.triple img {
    max-width: 620px;
    display: block
}

.fade {
    display: none
}

.page {
    padding: 0 0 0 5px
}

.page a {
    color: #cbcbcb;
    font-size: 1.2em;
}

.load-more-posts {
    background: salmon;
    height: 100px;
    width: 200px;
    position: fixed;
    left: 50%;
    top: 50%
}

hr {
    background-color: #c7c7c7;
    height: 1px;
    margin: 0 0 10px 0;
    border: none
}

.navigation {
    margin: 0 20px 40px 20px;
    border-top: 1px solid #c7c7c7;
    padding: 10px 0 0 0;
    width: 260px;
    float: left;
    display: none
}

.text h2 {
    font-size: 1.2em;
    margin: 0 0 0.5em 0
}

.text h2 a:hover {
    border: none;
    color: #a5a5a5
}

.text .text-body a {
    text-decoration: underline;
    color: #3f3f3f
}

.text .text-body a:hover {
    border: none;
    color: #a5a5a5
}

.text .text-body p {
    margin: 0 0 1em 0
}

.text .text-body p:last-of-type {
    margin-bottom: 0
}

.chat {
    background-color: #f2f2f2;
    padding: 10px
}

.chat ul {
    margin: 0;
    padding: 0
}

.chat li {
    list-style: none
}

.link .link-title {
    font-size: 1.2em;
    font-weight: bold
}

.link .link-title:hover {
    border: none;
    color: #a5a5a5
}

.link .description {
    margin-top: 0.5em
}

.link p {
    margin: 0
}

.quote {
    background-color: #f2f2f2;
    padding: 10px
}

.photoset img {
    height: auto
}

.video-play-button {
    position: absolute;
    z-index: 99;
    left: 50%;
    top: 50%;
    max-width: 80px;
    width: 80px;
    margin-left: -40px;
    height: 54px;
    margin-top: -27px;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA2CAYAAABQvB7qAAACT0lEQVR4Ae3cz0oCURQGcM0IColw1Z9dLSSwWkU+QdtaBNKyBwgkWrdxn0JbHyCohS17gKCopRAKBW7CWriSFmHS9zFes1qIc8A5l86B04yXOeT8PNNMw1zjsb+xjKFdZBY5j5xB/ud4x843kbfIK+QTsh/x/losNon1I+QecmJg3Fa/BbpYvUSeIjscdoDEO0NuctBiqMA9tjhEdhK9TY+x3O6t22K4wBI2mUXesAP5N+8caYctEEYIHs777MAD5PoIhbZpIMDm67DreLa1CCewRUBeqliEE5gn4H+/zgtHF1TN2IlDwodaAzRAoYCw3DrQAIUCwnLrQAMUCgjLrQMNUCggLI+0A7PZ7HQqlXK31IS7Ek15pIC5XG6u0WisFYvFBV8hIwVkzySTyUQ+n1/0FTJyQHfg+QqpBtBXSHWAvkGqBfQFUj2gdkhvALVCegf4G7Jara6m0+kpNz7upbeA7Xb7s1QqvWQymcdarfYxbjj3+/hIh1dBuHK5/FooFN5ardZn1G/eG0BtcO6DUw+oFU49oHY4tYC+wKkD9A1ODaCvcA6Qj2g9uBfjXvKOdL1e/9BwORJ23yMFDPumNdV5+5+IFkQDFH4SBmiAQgFhuXWgAQoFhOXWgQYoFBCWswM5G9EinMA7ATmV0yKcQJOAd+FqrQoCtwSsIDlxzmI0AZpVCMgZ2JxEbDGaAM2e3cONPIw3kJwHazFcgBOuT5BdB8h2vEZyEvEqkre5LP4K0OkCSbwfU/4HN13Bix2kfelEoDL4pRM8XzwHw8HPL6t/0mA73vMvAAAAAElFTkSuQmCC)
}

.notes-container {
    margin: 0 20px 40px 20px;
    border-top: 1px solid #c7c7c7;
    padding: 10px 0 0 0;
    width: 560px;
    float: left;
    display: none
}

@media (max-width: 640px) {
    .notes-container {
        width: 260px
    }
}

.notes-container ol.notes {
    padding: 0;
    margin: 0 0 40px 0;
    list-style-type: none
}

.notes-container img.avatar {
    display: none
}

.notes-container blockquote {
    padding: 4px 10px;
    margin: 10px 0px 10px 25px
}

.masonry,
.masonry .masonry-brick {
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    transition-duration: 0.6s
}

.masonry {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width
}

.masonry .masonry-brick {
    -webkit-transition-property: left, right, top;
    -moz-transition-property: left, right, top;
    -o-transition-property: left, right, top;
    transition-property: left, right, top
}

#infscr-loading {
    width: 16px;
    height: 16px;
    position: fixed;
    top: 14px;
    left: 14px;
    border: solid 2px transparent;
    border-top-color: gray;
    border-left-color: gray;
    border-radius: 10px;
    -webkit-animation: yuki-spinner 550ms linear infinite;
    -moz-animation: yuki-spinner 550ms linear infinite;
    -ms-animation: yuki-spinner 550ms linear infinite;
    -o-animation: yuki-spinner 550ms linear infinite;
    animation: yuki-spinner 550ms linear infinite
}

@-webkit-keyframes yuki-spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-moz-keyframes yuki-spinner {
    0% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-o-keyframes yuki-spinner {
    0% {
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-ms-keyframes yuki-spinner {
    0% {
        -ms-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes yuki-spinner {
    0% {
        transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg);
        transform: rotate(360deg)
    }
}