@color-facebook: #4b6ea8;
@color-twitter:  #4fd5f8;
@color-google:   #dd4b39;
@s-event-list-main-size: 120px;

#wrapwrap .s_event_list_item {
    .clearfix();
    background-color: white;
    box-shadow: 0px 0px 5px fade(black, 25%);
    margin: 0px 0px 20px;

    > time {
        display: block;
        color: white;
        padding: 5px;
        text-align: center;
        text-transform: uppercase;
        span {
            display: none;
        }
        .s_event_list_day, .s_event_list_month, .s_event_list_time {
            display: block;
            line-height: 1;
        }
        .s_event_list_day {
            font-size: 50px;
            padding-top: 10px;
        }
        .s_event_list_month {
            font-size: 30px;
        }
        .s_event_list_time {
            font-size: 16px;
            color: white;
            font-weight: 200;
            padding-bottom: 10px;
        }
    }
    > .s_event_list_icon  {
        background-color: @color-beta;
        color: white;
        text-align: center;
    }

    > .s_event_list_info,
    > .s_event_list_social {
        > ul {
            list-style: none;
            margin: 0;
            padding: 0;
            text-align: center;
            > li {
                float: left;
                color: @gray-dark;
                font-size: 11px;
                font-weight: 300;

                &:hover {
                    color: @gray-dark;
                    background-color: @gray-lighter;
                }

                > a {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    > .s_event_list_info {
        padding-top: 5px;
        text-align: center;
        > .s_event_list_title {
            margin: 5px 0 0;
            color: @gray-dark;
            .o-text-overflow();
        }
        > .s_event_list_desc {
            font-size: 14px;
            font-weight: 300;
            margin: 8px 0 0;
            color: @gray;
            word-wrap: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: 2.2em;
            line-height: 1.1em;
            .fa {
                color: white;
            }
        }

        > ul {
            margin-top: 10px;
            > li {
                width: 50%;
                > a {
                    display: block;
                    width: 100%;
                    color: @gray-dark;
                    text-decoration: none;
                }
            }
        }
    }
    > .s_event_list_social > ul {
        > li {
            width: 33.3333%;
            padding: 0px;
            > a {
                padding: 9px 0px 3px;
            }

            &:hover > a {
                color: white!important;
            }
        }
    }

    .s_event_list_facebook a {
        color: @color-facebook!important;
    }
    .s_event_list_twitter a {
        color: @color-twitter!important;
    }
    .s_event_list_google_plus a {
        color: @color-google!important;
    }
    .s_event_list_facebook:hover a {
        background-color: @color-facebook !important;
    }
    .s_event_list_twitter:hover a {
        background-color: @color-twitter !important;
    }
    .s_event_list_google_plus:hover a {
        background-color: @color-google !important;
    }
}

@media (min-width: @screen-sm-min) {
    #wrapwrap .s_event_list_item {
        position: relative;
        > .s_event_list_icon  {
            width: @s-event-list-main-size;
            height: @s-event-list-main-size;
            float: left;
            background-color: @color-beta;
            text-align: center;
            .fa  {
                line-height: @s-event-list-main-size;
                font-size: @s-event-list-main-size * 2 / 3;
            }
        }
        > time {
            width: @s-event-list-main-size;
        }
        > time, > img {
            height: @s-event-list-main-size;
            margin: 0px;
            padding: 0px;
            float: left;
        }
        > .s_event_list_info {
            position: relative;
            overflow: hidden;
            height: @s-event-list-main-size;
            padding-right: 40px;
            background-color: lighten(@gray-lighter, 18%);
            text-align: left;
            > .s_event_list_title, .s_event_list_desc {
                padding: 0px 10px;
            }
            > ul {
                .o-position-absolute(@left: 0, @bottom: 0, @right: 40px);
            }
        }
        > .s_event_list_social {
            .o-position-absolute(@top: 0, @right: 0, @bottom: 0);
            width: 40px;
            > ul {
                height: 100%;
                border-left: 1px solid lighten(@gray-lighter, 10%);
                > li {
                    width: 100%;
                    height: 33.333%;
                    > a {
                        padding: 9px 0px;
                    }
                }
            }
        }
    }
}
