/** TEMPLATE: CALENDAR / ACTIVITY DETAIL STYLES **/
/* heading with social / share icons */
.heading-social {
    overflow: hidden;
    /*padding-top: 18px;*/
}

.heading-social h2 {
    float: left;
    margin-right: 18px;
}

.share-btns {
    padding-top: 3px;
}

/* activity info */
.activity-info {
    padding-bottom: 16px;
    clear: both;
}

#activity-one-col .activity-name,
#activity-two-col .activity-name {
    float: left;
    padding-right: 10px;
}

/* activity attributes with icons; individual icon styles inherited from globals */
span.with-icon {
    padding-top: 0px;
    padding-left: 22px;
    background-image: url(../img/small-icon-sprite.png);
    background-repeat: no-repeat;
}

.activity-info span {
    margin-right: 35px;
    font-size: 14px;
}

.activity-info .activity-category, .activity-info .activity-audience {
    display: inline-block;
    color: #575757;
    font-weight: 300;
    font-size: 14px;
}

/* ticket info and attachments; used regardless of activity having images or not */
.ticket-info, .attachments {
    width: 360px;
}

.attachments {
    padding-top: 20px
}

.attachments h5 {
    background: #a00233;
    color: #fff;
    text-indent: 20px;
    height: 24px;
    line-height: 24px;
    font-size: 15px;
}

.attachments i {
    /*margin-right: 16px;*/
    position: absolute;
    top: 10px;
    left: 0;
}

.attachments .doc-title {
    line-height: 22px;
    padding-left: 26px;
    display: block;
}

.ticket-info {
    clear: both;
    /*padding-top: 16px;*/
    padding-top: 4px;
}

.ticket-info i {
    margin-right: 10px;
}

#content .attachments a {
    display: block;
    text-decoration: none;
    font-size: 14px;
    /*line-height: 36px;*/
    border-bottom: 1px #d7d7d7 solid;
    overflow: auto;
    padding: 6px 0;
    position: relative;
    min-height: 20px;
}

.node-type-activity .panel-2col-stacked .panel-col-top .inside {
    margin: 0;
    padding: 0;
}

.node-type-activity .panel-2col-stacked .panel-col-first .inside, .node-type-activity .panel-2col-stacked .panel-col-last .inside, .node-type-activity .panel-2col-stacked .panel-col-first .panel-separator {
    margin: 0;
    padding: 0;
}

/* activities with image(s) styles */
#activity-two-col .panel-col-first { /* left container of images, ticket info and attachments */
    width: 360px;
    margin: 0;
    padding: 0;
}

#activity-two-col .panel-col-last { /* right container of description */
    float: right;
    width: 595px;
}

.node-type-activity .right.half {
    width: 595px;
}

.node-type-activity .left.half {
    width: 360px;
}

@media screen and (min-width: 1024px) and (max-width: 1079px) {
    .node-type-activity .right.half {
        width: auto;
        margin-left: 40px !important;
    }
}

@media screen and (min-width: 970px) and (max-width: 1023px) {
    #activity-two-col .panel-col-last { /* right container of description */
        float: right;
        width: 515px;
    }

    .node-type-activity .right.half {
        width: 515px;
    }
}

@media screen and (min-width: 768px) and (max-width: 969px) {
    #activity-two-col .panel-col-last { /* right container of description */
        float: none;
        width: auto;
    }

    .node-type-activity .right.half {
        width: auto;
    }

    #activity-two-col .panel-col-first {
        margin-right: 20px;
    }
}

@media (max-width: 1023px) {
    #activity-one-col .activity-name, #activity-two-col .activity-name {
        float: none;
    }

    .node-type-activity .pane-sharethis {
        margin-top: -1em;
    }
}

@media (max-width: 767px) {
    .node-type-activity .activity-info span {
        display: block;
        margin: 0;
        width: 100%;
    }

    #activity-two-col .panel-col-first {
        float: none;
        margin: 0 auto;
        max-width: 100%;
        overflow: hidden;
    }

    .node-type-activity .left.half {
        width: 100%;
    }

    .carousel, .view-display-id-panel_pane_2 #flexslider-2 {
        display: none;
    }

    #activity-two-col .panel-col-last,
    .node-type-activity .right.half {
        float: none;
        width: 100%;
    }
}