.StreamView {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.StreamViewCell {
    position: relative;
    width: 30%; /* IE8 */
    padding-top: 32%; /* IE8 aspect ratio */
    width: calc((100vw - 534px) / 3);
    height: calc((100vw - 534px) / 3);
    min-width: 120px;

    overflow: hidden;
    z-index: 1;
    margin: 3px;
    float: left;

    cursor: pointer;
    -moz-user-select:none;
    -webkit-user-select:none;
    -o-user-select:none;
    -ms-user-select:none;
    user-select: none;
}

.StreamViewCellImage {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;
}

.StreamViewCellLabelContainer {
    width: 100%;
    height: 56px;

    position: absolute;
    left: 0px;
    bottom: 0px;
}

.StreamViewCellLabelContainer.small {
    width: 100%;
    height: 45px;

    position: absolute;
    left: 0px;
    bottom: 0px;
}

.StreamViewCellLabelBackground {
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5)); /* Standard syntax */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')";
}

.StreamViewCellTitleLabel {
    position:absolute;
    left: 12px;
    top: -10px;
    right: 66px;
    height: 30px;

    color: white;
    font-size: 18px;
    white-space:nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.StreamViewCellTitleLabel.centered {
    position:absolute;
    left: 12px;
    /*top: -10px;*/
    right: 66px;
    height: 30px;

    color: white;
    font-size: 18px;
    white-space:nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.StreamViewCellSubtitleLabel {
    position: absolute;
    left: 25px;
    top: 18px;
    right: 66px;
    height: 18px;

    color: white;
    font-size: 13px;
}

.StreamViewCellPicIcon {
    position: absolute;
    left: 12px;
    top: 33px;
    width: 10px;
    height: 10px;

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ic_camera@2x.png', sizingMethod='scale')";
    background-image: url('../images/ic_camera@2x.png'), linear-gradient(transparent, transparent);
    background-size: cover;
}

.StreamViewCellChatButton {
    position: absolute;
    right: 0;
    bottom: 10px;
    width: 45px;
    height: 45px;

    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ic_message@2x.png', sizingMethod='scale')";
    background-image: url('../images/ic_message@2x.png'), linear-gradient(transparent, transparent);
    background-size: cover;
}

.StreamViewCellLikeButton {
    position: absolute;
    right: 45px;
    bottom: 10px;
    width: 45px;
    height: 45px;

    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ic_like_inactive@2x.png', sizingMethod='scale')";
    background-image: url('../images/ic_like_inactive@2x.png'), linear-gradient(transparent, transparent);
    background-size: cover;
}

.StreamViewCellCamButton {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 45px;
    height: 45px;

    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ic_cam_video_action.png', sizingMethod='scale')";
    background-image: url('../images/ic_cam_video_action.png'), linear-gradient(transparent, transparent);
    background-size: cover;
}

.StreamViewEmptyLabel {
    display: none;
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    padding: 100px 20px 20px 20px;

    text-align: center;
    color: #808080;
    font-size: 16px;
}

.StreamViewGoFilterButton {
    width:62px;
    height:62px;
    margin-left: auto;
    margin-right: auto;

    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ic_stream@2x.png', sizingMethod='scale')";
    background-image: url('../images/ic_stream@2x.png'), linear-gradient(transparent, transparent);
    background-size: cover;
}



/* Fonts */

.StreamViewCellTitleLabel {
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
}

.StreamViewCellSubtitleLabel, .StreamViewEmptyLabel {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
}


/* Responsive */

@media screen and (min-width: 768px) {
    .StreamViewCellImage:hover {
        /* Zoom-in when hovering with the mouse over the image */
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -moz-transform: scale(1.1);
        transform: scale(1.1);
    }
    .StreamViewCellImage,
    #MatchMeStreamView .StreamViewCellImage:hover {
        /* Zoom back to normal when not hovering */
        -webkit-transition: all 400ms ease-in;
        -ms-transition: all 400ms ease-in;
        -moz-transition: all 400ms ease-in;
        transition: all 400ms ease-in;

        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

@media screen and (max-width: 1300px) {
    /* 2 Columns */
    .StreamViewCell {
        padding-top: 45%; /* IE8 aspect ratio */
        width: calc((100vw - 534px) / 2);
        height: calc((100vw - 534px) / 2);
    }
}

@media screen and (max-width: 1023px) {
    /* 2 Columns */
    .StreamViewCell {
        width: calc((100vw - 481px));
        height: calc((100vw - 481px));
        margin: 0;
        margin-bottom: 3px;
    }
}

@media screen and (max-width: 767px) {
    .StreamView {
        position: relative;
        height: auto;
        padding-top: 0px;
    }
    .StreamViewCell {
        width: 100vw;
        height: 100vw;
        max-width: none;
        max-height: none;

        border-width: 0px;
        margin: 0px 0px 7px 0;
    }

    .DoubleCol .StreamViewCell {
        width: calc((100vw - 24px) / 2);
        height: calc((100vw - 24px) / 2);

        border-width: 0px;
        margin: 2px;
    }

    .StreamViewCellImage:before {
        /* Add gradient on top of the profile image */
        content: "";
        position: absolute;
        width : 100%;
        height: 100%;

        background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.6));
        background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.6));
        background: -ms-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.6));
        background: -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.6));
        background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.6));
    }
}