/* trackpipe/public/css/discover/fan_controls.css */

/* similar to parts of tralbum_common.css - pulled out for more-general use with other modules */

.collect-item .collection-btn {
    white-space: nowrap;
}

.collect-item .collect-item-icon, .collect-item .inverted-collect-item-icon {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 13px;
    top: 2px;
    XXXmargin: 0 0 0 10px;
}
.collect-item .wishlist-msg .collect-item-icon {
    background-position: 0px -73px;
}
.collect-item .wishlisted-msg .collect-item-icon {
    background-position: -28px -73px;
}
.collect-item .purchased-msg .collect-item-icon {
    background-position: -42px -73px;
}

.collect-item.wishlisted .wishlist-msg,
.collect-item .wishlisted-msg {
    display: none;
}
.collect-item.wishlisted .wishlisted-msg {
    display: inline;
}

/* link underline control: we want to avoid extraneous underlines in the whitespace between the icon and text,
   and potentially just after the text. To do that, the text to be underlined on hover should be tagged with 
   the "txt" classname. */
.collect-item .collection-btn a {
    text-decoration: none;
}
.collect-item .collection-btn a:hover {
    text-decoration: none;
}
.collect-item .collection-btn a:hover .txt {
    text-decoration: underline;
}
.collect-item .collection-btn a.txt:hover,
.collect-item .collection-btn a.view:hover {
    text-decoration: underline;
}

.collect-item.disabled {
    opacity: 0.4;
}
.collect-item .purchased-msg {
    display: none;
}
.collect-item.purchased .purchased-msg,
.collect-item.pledged .pledged-msg {
    display: inline;
}
.collect-item.purchased .wishlist-msg, .collect-item.purchased .wishlisted-msg, .collect-item.purchased .buy-now {
    display: none;
}

.follow-fan.following .follow-msg,
.follow-fan .following-msg {
    display: none;
}

.follow-fan.following .following-msg {
    display: inline;
}

.follow-fan-btn {
    display: inline-block;
    min-width: 80px;
    padding: 6px 5px 5px 5px;
    border: solid 1px #dedede;
    border-radius: 4px;
    font-size: inherit;
    font-weight: bold;
    line-height: 1em;
    text-align: center;
    outline: none;
    cursor: pointer;
    color: #408294;
    background-color: #fafafa;
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.05) 0%,rgba(0, 0, 0, 0) 100%);
    background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
}

.follow-fan-btn:hover{
    text-decoration:none;
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.15) 0%,rgba(0, 0, 0, 0) 100%);
    background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
}

.following .follow-fan-btn {
    border: solid 1px #3d7c8f;
    color: #fff;
    background-color: #408294;
    background-image: -webkit-linear-gradient(bottom, rgba(51, 104, 126, 0.8), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(bottom, rgba(51, 104, 126, 0.8), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(bottom, rgba(51, 104, 126, 0.8) 0%,rgba(0, 0, 0, 0) 100%);
    background-image: linear-gradient(bottom, rgba(51, 104, 126, 0.8), rgba(0, 0, 0, 0));
}

.following .follow-fan-btn:hover {
    border: solid 1px #7f7f7f;
    background-color: #777;
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0%,rgba(0, 0, 0, 0) 100%);
    background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.following .follow-fan-btn:hover:after {
    content: "Unfollow"; /* UISTRING */
}

.following .follow-fan-btn:hover .following-msg {
    display: none;
}

.follow-button.disabled {
    opacity: 0.4;
}