
/* blog - listing container */
.nav > li > a {
    padding: 10px 4px;
}

/* post - listing container */


/* blog - item */
article.blog-item,
article.post-item {
    padding-bottom:1.5em; /* same as margin-top-20*/
}

.blog-details article.post-item {
    padding-bottom:0.8em; /* same as margin-top-10*/
}

.blog-item-thumb-container img {
    border: 1px solid #dddddd;
}

.post-item-thumb-container {
    margin:0 auto;
    position:relative;
}
.post-listing .post-item-thumb-container img {
    margin:0 auto;
    padding:10px 10px 30px 10px;
    border: 1px solid #dddddd;
    -webkit-box-shadow: 1px 1px 6px #515151;
       -moz-box-shadow: 1px 1px 6px #515151;
            box-shadow: 1px 1px 6px #515151;
}
.blog-details .post-item-thumb-container img {
    margin:0 auto;
    padding:0;
    border: 1px solid #dddddd;
}

/* blog ordering info */
.blog-item-order-container {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding: 5px;
    background-color:#dddddd;
    border: 1px solid #dddddd;
    -webkit-border-radius:0 0 5px 5px;
       -moz-border-radius:0 0 5px 5px;
            border-radius:0 0 5px 5px;
    text-align:center;
    font-size: 0.875em;
    font-weight:bold;
    color:#555555;
}
.blog-listing .blog-item-order-container {
    max-width:204px;    /* idem as SCRSHT_WIDTH_S + border */
}
.blog-details .blog-item-order-container {
    max-width:402px;
}
.blog-item-order {
}

.post-item-date {
    position:absolute;
    bottom:8px;
    width: 100%;
    text-align:center;
    font-weight:bold;
}

.blog-details-post-item-date {
    text-align:center;
    color: #888888;
    margin-bottom:8px;
}

.blog-item-title {
    font-size: 1.25em;
}
.post-item-title {
    font-weight: bold;
}

.blog-item-infos,
.post-item-infos {
    font-size: 0.875em;
    color: #888888;
    line-height:20px;
}

.blog-item-categ img {
    padding-right:12px;
}


.blog-item [class*="_flag"],
.blog-item .flag-line {
    padding-top: 3px;
    line-height: 16px;
    padding-left: 16px;
    float: left;
    text-decoration:none;
}

.blog-item [class*="_flag"]:hover {
    text-decoration:none;
}

.blog-item-post-title {
    font-size: 1.125em;
    padding-bottom:4px;
    color: #888888;
    border-bottom:1px solid #E9E9E9;
}

.post-listing .post-item-description {
    height:72px;
    overflow: hidden;
}

.blog-item-post-container ul {
    margin: 0;
}
.blog-item-post-container ul li {
    list-style-type: none;
    padding-left: 0;
}

.blog-item-post-container .post-item,
.blog-item-post-container .post-item a, 
.blog-item-post-container .post-item .item-tiny-icon {
    color:#515151;
    line-height:20px;    
}
.blog-item-post-container .item-tiny-icon,
.post-item-title .item-tiny-icon {
    font-size:8px;
    vertical-align:middle;
}


/* blog promote */
#toggleTable .row {
    margin-top:1.5em; /* idem as margin-top-20*/
}
.blog-added #moreColors {
    display:none;
}

/* blog add - blog modify */
.blog-add .form-control,
.blog-modify .form-control {
    max-width: 400px;
    min-width: 206px;
}

#block-add-infos {
    text-align: justify;
}




/* MEDIA QUERIES */

@media (max-width: 991px) {
    
    /* PHONE + TABLET */
   .blog-dropdown-menu {
       text-align: center;
   }
   
   .blog-dropdown-menu .btn-group,
   .blog-dropdown-menu .btn-group button,
   .blog-dropdown-menu .dropdown-menu {
       width:100%;
   }
   
}

@media (max-width: 767px) {
    
    /* PHONE */
   
    .blog-item {
    }
    
    .blog-item-thumb-container {
        text-align: center;
    }
    .blog-listing .blog-item-order-container {
        margin:0 auto;
    }
    .blog-details .blog-item-order-container {
        margin:0 auto;
    }
    
    .blog-item-title {
        padding-top:10px;
    }
    
    .blog-item .flag-line {
        padding-left: 0;
    }

    .post-item-description {
        height:auto;
        overflow:auto;
    }


    /* blog promote */    
    #toggleTable .row {
        margin-top:2.5em; /* idem as margin-top-40*/
    }
    #toggleTable .toggleTH {
        display:none;
    }
    
}
