/**
 * @file articles.css
 * @author max toepfer (info@maxtoepfer.com)
 *
 * @description In diesem Sylesheet werden die
 * Styles der Beiträge im Template spopfikon definiert
 *
 */

/* -------------------------------------------
 * CSS classes without differences
 * -------------------------------------------
 */

/* Main Article Container */
.sp-article-front, sp-article{
    display:block;
}

/* Object: img in sp-article */
.sp-article img, .sp-article-front img{
    width:100%;
    height:auto;
}

/* Class: sp-article-info */
.sp-article-info{
    font-size:14px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Class: sp-article-title */
.sp-article-title{

}

/* -------------------------------------------
 * Articles on the front page (Differences)
 * -------------------------------------------
 */

/* Class: sp-article-info */
.sp-article-front .sp-article-info{
    padding:10px 0px;
}

/* Class: sp-article-title */
.sp-article-front .sp-article-title{
    padding:0px 0px 15px 0px;
}

.sp-article-front .sp-article-title h2{
    margin-top:0px;
}

/* Class: sp-article-content */
.sp-article-front .sp-article-content{
    padding:0px 0px 20px 0px;
    margin-bottom:15px;
    border-bottom:1px solid #e3e3e3;
}

/* img in sp-article-front */
.sp-article-front img{
    padding-bottom:25px;
}

/* Class: more-link */
.sp-article-front .more-link{
    font-size:14px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* a in sp-article-title */
.sp-article-title a{
    color:black;
    text-decoration:none;
}

    /* a hover */
    .sp-article-title a:hover{
        color:black;
        text-decoration:underline;
    }

    /* a focus */
    .sp-article-title a:focus{
        color:black;
        text-decoration:none;
    }

/* -------------------------------------------
 * Articles on single.php (Differences)
 * -------------------------------------------
 */

/* Class: sp-article-info */
.sp-article .sp-article-info{
    padding:20px 0px;
    margin:20px 0px;
    border-top:1px solid #e3e3e3;
    border-bottom:1px solid #e3e3e3;
}

/* Class: sp-article-footer */
.sp-article-footer{
    border-top:1px solid #e3e3e3;
    margin-top:30px;
    padding-top:30px;
}

/* Class: sp-article-title */
.sp-article .sp-article-title{
    padding:15px 0px;
}

/* -------------------------------------------
 * CSS classes
 * -------------------------------------------
 */

/* Class: sp-article-author */
.sp-article-author{
    width:100%;
    border:1px solid #e3e3e3;
}

/* Class: sp-article-author-header */
.sp-article-author-header .sp-staff-img{
    margin:auto;
    float:none;
}

/* Class: sp-article-author-bio */
.sp-article-author-bio{
    padding:20px 15px;
    margin-top:15px;
    border-top:1px solid #e3e3e3;
}

/* Class: sp-article-author-title */
.sp-article-author-title{
    padding:20px 15px;
    margin-bottom:15px;
    border-bottom:1px solid #e3e3e3;
}

/* h3 in sp-article-author-title */
.sp-article-author-title h3{
    margin:0px;
    font-weight:bold;
}

/* Class: sp-social-media */
.sp-social-media{
    padding:30px 0px;
    border-top:1px solid #e3e3e3;
    margin:30px 0px;
}