﻿#socialFeedPage {
    clear:both;
}

#socialFeedPage ul.filters {
    margin:0px 0px 20px 0px;
    padding:0px 0px 20px 0px;
    border-bottom:1px solid #EEE;
}

#socialFeedPage ul.filters li {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size:14px;
    text-transform:uppercase;
    margin:0px;
    padding:0px 10px 0px 10px;
    color:#333;
}

#socialFeedPage ul.filters li a {
    text-decoration: none;
    color: #333;
}

#socialFeedPage .feedLoading {
    height:320px;
    background-image:url(/images/socialFeedLoading.gif);
    background-position:center center;
    background-repeat:no-repeat;
}

#socialFeedPage .cards {
    visibility: hidden;
    -webkit-column-count: 1;
    -webkit-column-gap:   10px;
    -moz-column-count:    1;
    -moz-column-gap:      10px;
    column-count:         1;
    column-gap:           10px;
}

#socialFeedPage .card {
    position:relative;
    display: inline-block;

    width:100%;

	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;

    font-family: 'Roboto', sans-serif;
    box-sizing:border-box;
    padding:14px;
    border:1px solid #CCC;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    margin-bottom:10px;
    background-position:right top;
    background-repeat:no-repeat;
}

#socialFeedPage .card .inner {
    visibility: hidden;
}

#socialFeedPage .card.Facebook {
    background-image:url(/images/facebookCorner.png);
}

#socialFeedPage .card.Twitter {
    background-image:url(/images/twitterCorner.png);
}

#socialFeedPage .card.Instagram {
    background-image:url(/images/instagramCorner.png);
}

#socialFeedPage .card.Pinterest {
    background-image:url(/images/pinterestCorner.png);
}

#socialFeedPage .card .profile {
    margin-bottom:20px;
}

#socialFeedPage .card .profile .image {
    float:left;
    width:24px;
    height:24px;
    margin-right:10px;
}

#socialFeedPage .card .profile .name {
    float:left;
    font-family: 'Roboto Slab', serif;
    font-size:14px;
}

#socialFeedPage .card .profile .name a {
    text-decoration:none;
    color:#333;
}

#socialFeedPage .card .posted {
    font-size:12px;
    color:#666;
    margin-top:20px;
}

#socialFeedPage .card .posted a:link,
#socialFeedPage .card .posted a:visited {
    color:#666;
    text-decoration:underline;
}

#socialFeedPage .card .posted a:active,
#socialFeedPage .card .posted a:hover {
    color:#666;
    text-decoration:none;
}

#socialFeedPage .card .content {
    word-wrap: break-word;
}

#socialFeedPage .card .content .retweet {
    background-image:url(/images/retweetIcon.png);
    background-repeat:no-repeat;
    background-position:left center;
    padding-left:16px;
    font-size:12px;
    color:#666;
    margin-bottom:5px;
}

#socialFeedPage .card .content .link {
    margin-top:10px;
}

#socialFeedPage .card .content .link a {
    color:#666;
}

#socialFeedPage .card .content .image {
    margin-bottom:10px;
}

#socialFeedPage .card .content img {
    width: 100% !important;
    height: auto !important;
}

#socialFeedPage .card .content .text,
#socialFeedPage .card .content .caption {
    font-family: 'Roboto Slab', serif;
    font-size:14px;
    line-height:20px;
    color:#333;
}

#socialFeedPage .card .content .nested {
    margin-top:20px;
    padding:10px;
    border:1px solid #EEE;
}

#socialFeedPage .card .content .nested .text {
    font-family: 'Roboto Slab', serif;
    font-size:12px;
    line-height:18px;
    color:#333;
}

#socialFeedPage .card .content .nested .name {
    margin-bottom: 10px;
}

#socialFeedPage .card .content .nested .user .image {
    display:inline-block;
    width:36px;
    height:36px;
    margin-right:10px;
}

#socialFeedPage .card .content .nested .user .name {
    display:inline-block;
    font-family: 'Roboto', sans-serif;
    font-size:14px;
    margin-bottom: 0px;
}

#socialFeedPage .card .content a {
    color:#333;
    text-decoration:none;
}

@media only screen and (min-width: 481px) {
    #socialFeedPage .cards {
        -webkit-column-count: 2;
        -webkit-column-gap:   10px;
        -moz-column-count:    2;
        -moz-column-gap:      10px;
        column-count:         2;
        column-gap:           10px;  
    }
}

@media only screen and (min-width: 769px) {
    #socialFeedPage .cards {
        -webkit-column-count: 3;
        -webkit-column-gap:   10px;
        -moz-column-count:    3;
        -moz-column-gap:      10px;
        column-count:         3;
        column-gap:           10px;  
    }
}