$px: .0625em;

$ciemny: #363a3e;


#catalogue-carousel {
    float: left;
    position: relative;
    width: 700*$px;
    height: 235*$px;
    overflow: hidden;
    border-radius: 15*$px;

    #catalogue-carousel-links {
        width: 460*$px;
        height: 235*$px;
        list-style: none;
        margin: 0;
        padding: 0;

        li {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background-size: 100% 100%;
            border-top-left-radius: 15*$px 6.38%;
            border-bottom-left-radius: 15*$px 6.38%;
            z-index: 100;
            background-color: #888;

            a.catalogue-carousel-link {
                display: block;
                overflow: hidden;
                width: 460*$px;
                height: 100%;
                background: url(/static/catalogue/img/carousel-left.png) 100% 0 no-repeat;
                background-size: 70*$px 100%;
                
                .catalogue-carousel-note {
                    position: relative;
                    height: 100%;
                    color: white;
                    margin-top: 8.5em;

                    div {
                        &:before {
                            content: " ";
                            display: block;
                            position: absolute;
                            height: 100%;
                            width: 100%;
                            z-index: -1;
                            background-color: black;
                            opacity: 0.6;
                        }

                        p {
                            padding: .4em 3em 0 .5em;

                            strong {
                                font-size: 1.2em;
                                display: block;
                            }

                            .more {
                                position: absolute;
                                right: 4em;
                                top: 4.5em;
                            }
                        }
                    }
                }
            }
            a.catalogue-carousel-link:active {
                outline: none;
            }
            .attribution {
                text-align: right;
                font-size: .75em;
                position: absolute;
                right: 5em;
                top: .1em;
                color: white;
                font-weight: bold;
                text-shadow: 0 0 5px #000;
            }

        }
    }
    #catalogue-carousel-switcher {
        margin: 0;
        padding: 20*$px 0 0 58*$px;
        width: 240*$px - 58*$px;
        height: 235*$px - 20*$px;
        position: absolute;
        right: 0;
        top: 0;
        list-style: none;
        border-radius: 0 15*$px 15*$px 0;
        background-color: #ed7831;
        background-image: url(/static/catalogue/img/carousel-right.png);
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: auto 235*$px;
        
        /* right part of mask as background */

        li {
            margin-bottom: .5em;
            font-size: .85em;
            line-height: 1em;

            a {
                text-transform: uppercase;
                color: $ciemny;
            }
            a:before {
                vertical-align: top;
                margin-right: 1.5em;
            }
            .knowledge:before {content: url(/static/img/icons/knowledge_dark.png);}
            .activity:before {content: url(/static/img/icons/activity_dark.png);}
            .lesson-plan:before {content: url(/static/img/icons/lesson-plan_dark.png);}
            .reference:before {content: url(/static/img/icons/reference_dark.png);}
        }
        li.activeSlide {
            a {
                color: white;
            }
            .knowledge:before {content: url(/static/img/icons/knowledge_white.png);}
            .activity:before {content: url(/static/img/icons/activity_white.png);}
            .lesson-plan:before {content: url(/static/img/icons/lesson-plan_white.png);}
            .reference:before {content: url(/static/img/icons/reference_white.png);}
        }
    }


}