/*
================================================
Shared styles
================================================
*/


/* Styles for post */

.post {
    margin-top: 20px;
}

/* label styles */

.post-labels {
    float: left;
    width: 50px;
    margin-top: 22px;
}

.post-label-picture {
    img {
        height:50px;
        width:50px;
    }
    .css-thumb {
        .border-radius(80px);
    }
    img, div {
        border:2px solid @themeColor;
        border-right: 0px;
        .box-sizing(border-box);
        .border-radius(3px 0 0 3px);
    }
}

.post-label-date {
    height: 40px;
    width: 40px;
    color: @white;
    margin-top: 5px;
    .border-radius(3px 0 0 3px);
    text-align: center;
}

.post-label-date-day {
    margin-bottom: 0px;
    font-size: 28px;
    font-weight: bold;
    padding-top: 7px;
}

.post-label-type {
    height: 40px;
    width: 40px;
    .border-radius(40px);
    text-align: center;
    #gradient > .vertical(@themeColor, @themeSecondary);
    icon {
        margin-top: 10px;
    }
}


/* post body styles */

.post-body {
    .white-widget;
    margin-left: 20px;
    .box-sizing(border-box);
}

.post-header {
    margin: 0px;
    line-height: 24px;
    border-bottom: none;
}

.post-description {
    padding-top: 20px;
}

.post-author-disabled {
    color: @gray;
    display: inline-block;
    h5 {
        margin-bottom: 0px;
    }
}

.post-message-container {
    padding: 15px 25px 25px 25px;
    .post-description {
        p {
            white-space: pre-wrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

.post-event-container {
    margin-top: 20px;
    icon {
        opacity: 0.5;
    }
}

/* Attachments styling */

.post-file {
    margin-top: 5px;
}

.post-photo {
    margin-top: 14px;
    margin-left: 14px;
    float: left;
    img {
        max-height: 136px;
    }
}

.gallery {
    margin-left: -14px;
}

.post-more-photos {
    font-size: 30px;
    height: 120px;
    width: 118px;
    line-height: 120px;
    text-align: center;
    &:hover {
        text-decoration: none;
    }
}

.video-thumbnail, .file-thumbnail {
    margin-top: 20px;
}

.file-thumbnail icon {
    opacity: 0.5;
}

/* comments styling */

.post-comments-container {
    background: fadeout(@themeColor, 95%);
    border-top: 1px solid fadeout(@themeColor, 90%);
    padding: 30px;
    .border-radius(0 0 5px 5px);
    hr {
        margin-top: 7px;
        margin-bottom: 7px;
    }
}

.post-more-comments {
    margin-bottom: 10px;
    margin-top: -20px;
}

.comment, .new-comment {
    img {
        -webkit-box-shadow: 0 0px 2px 0px rgba(0,0,0,0.3),inset 0 5px 5px rgba(0,0,0,0.5);
        box-shadow: 0 0px 2px 0px rgba(0,0,0,0.3),inset 0 5px 5px rgba(0,0,0,0.5);
        .border-radius(120px);
        width: 30px;
        height: 30px;
    }
}

.comment {
    margin-bottom: 10px;
    line-height: 18px;
    img {
        margin-top: 4px;
    }
    &:last-child {
        margin-bottom: 15px;
    }
}

.comment-body {
    margin-left: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comment-form {
    margin-bottom: 0px;
}

.comment-field-container {
    margin-right: 60px;
    margin-left: 40px;
}

.comment-field {
    margin-bottom: 0px !important;
    width: 100%;
}

/* New post styles */

.post-create-container {
    padding: 30px;
    form {
        .nav-tabs {
            .active a {
                border-top: 3px solid @themeColor;
            }
        }
    }

}

.post-create-title {
    width: 100%;
    height: 30px !important;
    .box-sizing(border-box);
    margin-bottom: 10px !important;
}

.post-create-description {
    width: 100%;
    max-width: 100%;
    .box-sizing(border-box);
    margin-bottom: 10px !important;
    .border-radius(3px 3px 0 0);
    margin-bottom: 0px;
}

.post-create-event-date {
    width: 75px;
    margin-right: 5px;
    margin-left: 5px;
}

.post-create-event-time {
    width: 150px;
    margin-left: 5px;
}

.second-day {
    margin-top: 10px;
}

.location {
    margin-top: 10px;
    input{
        margin-left: 5px;
    }
}

.post-create-video {
    width: 400px;
    .box-sizing(border-box);
    height: 30px !important;
}

.post-photo-field {
    width: 100%;
    padding: 30px 10px 30px 10px;
    .box-sizing(border-box);
    background: lighten(@themeColor, 33%);
    border: 2px dashed @themeColor;
    text-align: center;
    .border-radius(4px);
    span {
        color: @themeColor;
    }
}

.post-more-comments {
    > span {
        &:last-child{
            display:none;
        }
    }
    &.shown > span {
        &:last-child {
            display: inline;
        }
        &:first-child {
            display: none;
        }
    }
}

.post-clearfix {
    margin-left: -20px;
}

.post-mngt {
    background: none;
    border:none;
    box-shadow: none;
    -webkit-box-shadow: none;
    &:hover {
        background: transparent;
        box-shadow: none;
    }
}

.open {
    background-color: transparent;
    .box-shadow(none);
}

.post-color-event {
    background:@eventColor;
}

.post-color-comment {
    background:@postColor;
}

.post-body-color-event {
    border-top:2px solid @eventColor;
    .post-header {
      color: @eventColor;
    }
}

.post-body-color-comment {
    border-top:2px solid @postColor;
    .post-header {
        color: @postColor;
    }
}

.tab-pane > .row > .span4 > icon {
    padding-left: 90px;
    line-height: 100px;
}

.uploadifive-button {
    margin-top: 36px;
}

.tab-pane > .row > .span8 > .post-create-video {
    margin-top: 6px;
}

.post-create-submit {
    padding-left: 470px;
}

.post-label-mngt {
    display:none;
}

.post-body {
    .span5 {
        margin-left: -21px;
    }
    .icon-cog {
        color:@grayLighter;
        &:hover {
            color:@grayLight;
        }
    }
}

.post-label-type > .icon-comment {
    color: white;
    line-height: 40px;
}

.post-label-type > .icon-calendar {
    color: white;
    line-height: 40px;
}

.post-label-mngt {
    display:none;
}

.comment-field-container {
    input {
        background: @grayLighter;
        width: 504px;
        .box-shadow(none);
    }
    ::-webkit-input-placeholder {
        color: grey;
        font-style: italic;
    }
    :-moz-placeholder { /* Firefox 18- */
        color: @grayLight;
        font-style: italic;
    }

    ::-moz-placeholder {  /* Firefox 19+ */
        color: @grayLight;
        font-style: italic;
    }

    :-ms-input-placeholder {
        color: grey;
        font-style: italic;
    }
}

.comment-form {
    padding-right:0px;
}

.bb-comment-delete {
    .icon-remove {
        color:@grayLighter;
    }
    .icon-remove:hover {
        color: @grayLight;
    }
}

.nav-tabs > li > a > .icon-calendar {
    color: @themeColor;
}

.nav-attachments {
    color: @themeColor;
}

.edit-post {
    .btn-group {
        margin-top: -7px;
        margin-left: 18px;
    }
}

.public-post {
    display: inline-block;
}

.public-info {
    color: white;
    background-color: @themeColor;
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 20px;
    display: inline-block;
}

.meta-comm {
    margin-left: -3px;
}

.post-mngt-perm {
    padding-top: 12px;
}

.post-author-picture {
    height:50px;
    width: 50px;
    .border-radius(80px);
    margin-right: 10px;
}

#id_document {
    padding-top: 30px;
}

.video-share {
    padding-top: 12px;
    margin-left: -12px;
}

.post-meta, .post-mgmt {
    padding-top: 7px;
}

/*
================================================
CMS specific styles
================================================
*/


/* styles for responsive video */

.video-thumbnail {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

// all post container container
.css-posts-content {
    margin-bottom: 10px;
}
