/*
CSS Writing Format

1. position,float, overflow
2. width, height
3. margin, padding
4. border
5. text-decoration, text-align, font-family, font-size, font-weight, color
6. background

*/


/* 
 *
 * PC VERSION (Screen size 1024px and above) 
 *
 */

p{
    text-align:         justify;
    line-height:        22px;
}

.single-content{
    overflow:           hidden;
    width:              calc(100% - 42px);
    height:             auto;
    margin:             0px;
    padding:            20px 20px 20px 20px;
    border:             1px solid #dfdfdf;
    background-color:   #fcfcfc;
    font-size:          16px;
}

.single-content img{
    max-width:          calc(100% - 100px);
    height:             auto;
    margin:             0px 50px 0px 50px;
}

.single-imgdesc{
    text-align:         center;
    font-size:          12px;
    margin:             5px 0px 15px 0px;
}

.cat-meta{
    overflow: hidden;
    margin:             0px 0px 15px 0px;
}

.cat-date{
    float:              left;
    font-size:          16px;
    color:              #d18c8c;
}

.fb-share-button{
    float:              right;
    margin:             0px 0px 0px 15px;
}


.cat-header{
    margin:             0px 0px 5px 0px;
    padding:            0px 0px 5px 0px;
    border-bottom:      3px solid #d8ae47;
    font-size:          28px;
}

.single-siteurl{
    overflow:           hidden;
    width:              100%;
    margin-bottom:      20px;
}

.single-siteurl li{
    float:              left;
    list-style:         none;
    padding:            5px 5px 5px 5px;
    font-size:          12px;
    color:              #4a4a4a;
}

.single-siteurl li:before{
    content:            '>';
    padding:            0px 5px 0px 0px;
    font-weight:        bold;
    color:              #f8d04a;
}

.cat-comments{
    overflow:           hidden;
    width:              calc(100% - 42px);
    height:             auto;
    margin:             30px 0px 0px 0px;
    padding:            15px 20px 15px 20px;
    border:             1px solid #dfdfdf;
    background-color:   #fcfcfc;
    font-size:          16px;
}

.cat-comments .ch3{
    margin:             0px 0px 15px 0px;
    padding:            0px 0px 5px 0px;
    border-bottom:      3px solid #d8ae47;
}

.comment{
    clear:              both;
    float:              left;
    width:              calc(100% - 2px);
    padding:            10px 0px 5px 0px;
    border-bottom:      1px solid #cccccc;
}

.byuser{
    background-color:   #efefef;
}

.comment p{
    margin:             5px 0px 5px 0px;
}


.comment-desc{
    width:              calc(100% - 40px);
    padding:            2px 20px 2px 20px;
}

.comment-name{
    float:              left;
    width:              100px;
    margin:             0px 0px 0px 20px;
    padding:            2px 0px 2px 0px;
    border-top:         1px solid #eeeeee;
    font-size:          14px;
    color:              #ffd700;
}

.comment-date{
    float:              left;
    width:              calc(100% - 140px);
    margin:             0px 20px 0px 0px;
    padding:            2px 0px 2px 0px;
    border-top:         1px solid #eeeeee;
    text-align:         right;
    font-size:          12px;
    color:              #d18c8c;
}

.byuser .comment-name, .byuser .comment-date{
    border-top:         1px solid #dddddd;
}

.byuser .comment-name{
    color:              #dd4132;
}

.commentform{
    clear:both;
}

.comment-author{
    margin:             10px 0px 0px 0px;
    color:              #dd4132;
}

.comment-textarea textarea{
    width:              calc(100% - 16px);
    height:             120px;
    padding:            5px;
    font-family:        'Lato', sans-serif;
    resize:             vertical; 
}

.comment-ratetitle{
    clear:              both;
    float:              left;
    width:              100%;
    margin:             10px 0px 10px 0px;
    color:              #222222;   
}

.comment-rates{
    font-size:          14px;
    color:              #ffd700;
}

/* 
 *
 * TABLET & SMARTPHONE VERSION (Screen size 525px and below) 
 *
 */

@media screen and (max-width: 525px) {

.single-content{
    width:              calc(100% - 48px);
    border:             4px solid #dfdfdf;
}    
    
.single-content img{
    max-width:          100%;
    margin:             0px;
}

.cat-header{
    font-size:          24px;
} 


.single-siteurl li:last-child{
    display:             none;
}    


}

img.wp-smiley{
    width:              auto;
    height:             auto;
}