/**
 * RSX Framework
 * Copyright 2015 Bell Canada
 * 
 * Thumbnails styles.
 */

.rsx-thumbnail {
    cursor: pointer;
}

.rsx-thumbnails {
    text-align: center;
}

    .rsx-thumbnails.rsx-thumbnails_underlined > .rsx-thumbnail.rsx-active {
        border-bottom: 2px solid #00549a;
    }

    .rsx-thumbnails > .rsx-thumbnail {
        display: inline-block;
        text-align: center;
        padding: 10px 0 30px 0;
    }

        .rsx-thumbnails > .rsx-thumbnail span,
        .rsx-thumbnails > .rsx-thumbnail img {
            padding-top: 10px;
            max-height: 100px;
        }

    .rsx-thumbnails img.rsx-thumbnail_small {
        max-height: 50px;
    }

@media (max-width: 519px) {
    .rsx-thumbnails > .rsx-thumbnail {
        padding-left: 10px;
    }
}

@media (min-width: 520px) and (max-width: 999px) {
    /* TBD: add tablet styles once mockups available */
}

/* thumbnails replaced with circles on mobile */

@media (max-width: 519px) {
    .rsx-thumbnails-bullets-xs > .rsx-thumbnail {
        padding-left: 5px;
        background: transparent !important;
        float: none !important;
        display: inline-block !important;
    }

        .rsx-thumbnails-bullets-xs > .rsx-thumbnail * {
            display: none !important;
        }

        .rsx-thumbnails-bullets-xs > .rsx-thumbnail:before {
            content: '';
            border-radius: 50%;
            border: 2px solid #709abd;
            display: inline-block;
            width: 15px;
            height: 15px;
            padding: 2px;
        }

        .rsx-thumbnails-bullets-xs > .rsx-thumbnail.rsx-active:before {
            background: #00549a;
            border-color: transparent;
        }

        .rsx-thumbnails-bullet_blue > .rsx-thumbnail.rsx-active:before {
            background: #00549a;
        }

        .rsx-thumbnails-bullets_white > .rsx-thumbnail.rsx-active:before {
            background: white;
        }

        .rsx-thumbnails-bullets-xs > .rsx-thumbnail.rsx-active {
            box-shadow: none !important;
        }

            .rsx-thumbnails-bullets-xs > .rsx-thumbnail.rsx-active:after {
                display: none !important;
            }
}