/* Basic Posts – Uses <table> instead of the rest of the lists */
.basic-posts {
    margin: 10px 0 30px 0;
}

.basic-posts col:first-of-type {
    width: 20%;
}

.basic-posts col:last-of-type {
    width: 80%;
}


/* Vertical Frame */
.vertical-posts {
    display: flex;
}
        
.vertical-posts > * {
    flex: 1 1 0;
    margin: 0;
}
        
.vertical-posts > *:first-child {
    padding-right: 0.75em;
}
      
.vertical-posts > *:last-child {
    padding-left: 0.75em;
}


/* Horizontal Frame */
.horizontal-posts {
    /* This line is intentianally left blank */
}


/* Scroll Frame */
.scroll-posts {
    width: 95%;
    height: fit-content;
    margin: 6px auto;
    display: flex;
            
    white-space: nowrap;    
    overflow-x: scroll;
    overflow-y: hidden;
            
    -webkit-overflow-scrolling: touch;
}
        
::-webkit-scrollbar {
    display: none;
}


/* No Scroll Frame */
.no-scroll-posts {
    width: 100%;
    height: fit-content;
    margin: 6px auto;
            
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


/* Card Frame */
.card-posts {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
}


/* Posts */
.vertical-posts .post {
    border: 1px solid black;
    border-radius: 6px;
    margin: 6px;
    background-color: var(--even-color);
    padding: 12px;
    position: relative;
}
        
.horizontal-posts .post {
    min-height: 165px;
    border-bottom: 3px solid #a3a3a3;
    padding: 12px 6px;
}
           
.horizontal-posts .post:last-child {
    min-height: 165px;
    border-bottom: none;
    padding: 12px 6px;
}
            
.scroll-posts .post,
.no-scroll-posts .post,
.card-posts .post {
    width: 240px;
    height: 135px;
    margin: 0 4px;
    margin-bottom: 100px;
}
            
.scroll-posts .post:first-child
.no-scroll-posts .post:first-child {
    margin-left: 0px;
}
            
.scroll-posts .post:last-child
.no-scroll-posts .post:last-child {
    margin-right: 0px;
}

.card-posts .post {
    margin: 10px 5px;
}


/* Post - Thumbnail */
.vertical-posts .post .thumbnail,
.horizontal-posts .post .thumbnail,
.scroll-posts .post .thumbnail,
.no-scroll-posts .post .thumbnail,
.card-posts .post .thumbnail {
    max-width: 240px;
    max-height: 135px;
    overflow: hidden;
    border: 1px solid black;
    border-radius: 2px;
}
            
.vertical-posts .post .thumbnail img,
.horizontal-posts .post .thumbnail img,
.scroll-posts .post .thumbnail img,
.no-scroll-posts .post .thumbnail img,
.card-posts .post .thumbnail img {
    max-width: 240px;
    max-height: 135px
}
            
.vertical-posts .post .thumbnail {
    position: relative;
    margin: 0 auto;
}
            
.horizontal-posts .post .thumbnail {
    position: relative;
    float: left;
}
            
.scroll-posts .post .thumbnail,
.no-scroll-posts .post .thumbnail {
    position: relative;
}
        
.no-scroll-posts .post .thumbnail {
    margin-bottom: 0px;
}


/* Post - Ribbons */
.thumbnail .ribbon {
    position: absolute;
    width: 150px;
    text-align: center;
    transform: rotate(-45deg);
    line-height: 30px;
    background: linear-gradient(var(--border-color) 0%, var(--contrast-color) 100%);
    color: var(--text-color);
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    font-weight: bold;
    border: 1px solid black;
    top: 26px;
    left: -34px;
}


/* Post - Summary */
.vertical-posts .post .summary {
    /* Line intentionally left blank */
}
            
.horizontal-posts .post .summary {
    position: relative;
    margin-left: 246px;
}
            
.post .summary h3 {
    all: revert;
    text-align: center;
    padding-top: 0;
    margin: 0 auto;
}


/* "Read More" Button */
.post .summary .read-more,
.tags tr td .read-more {
    border: 3px solid black;
    border-style: outset;
    background-color: var(--contrast-color);
    width: fit-content;
    margin: 0 auto;
}
      
.read-more a,
.read-more a:link,
.read-more a:visited,
.read-more a:hover,
.read-more a:active {
    all: revert;
    text-decoration: none;
    color: var(--text-color);
    padding: 8px;
    display: block;
    font-weight: bold;
}