top: 0;
left: 0;
height: 100%;
- background-image: url(/static/test.jpg);
- /* set real background image */
background-size: 100% 100%;
border-top-left-radius: 0.938em 6.38%;
border-bottom-left-radius: 0.938em 6.38%; }
#catalogue-carousel #catalogue-carousel-links li a {
display: block;
+ overflow: hidden;
width: 28.75em;
height: 100%;
- background-image: url(/static/catalogue/img/carousel-left.png);
- background-position: 100% 0;
- background-repeat: no-repeat;
- background-size: 4.375em 100%;
- /* left part of mask as background */ }
+ background: url(/static/catalogue/img/carousel-left.png) 100% 0 no-repeat;
+ background-size: 4.375em 100%; }
+ #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note {
+ position: relative;
+ height: 100%;
+ color: white;
+ margin-top: 12em; }
+ #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note p:before {
+ content: " ";
+ display: block;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ z-index: -1;
+ background-color: black;
+ opacity: 0.6; }
+ #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note p {
+ margin: 0; }
+ #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note p em {
+ margin: 0 .2em 0 .5em;
+ font-style: normal;
+ font-size: 1.5em; }
+ #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note p strong {
+ margin-left: .5em;
+ font-size: 2em; }
+ #catalogue-carousel #catalogue-carousel-links li a:active {
+ outline: none; }
#catalogue-carousel #catalogue-carousel-switcher {
margin: 0;
padding: 3.125em 0 0 3.625em;
top: 0;
list-style: none;
border-radius: 0 0.938em 0.938em 0;
- background-color: #16a487;
+ background-color: #ed7831;
background-image: url(/static/catalogue/img/carousel-right.png);
background-position: 0 0;
background-repeat: no-repeat;
background-size: auto 14.688em;
/* right part of mask as background */ }
#catalogue-carousel #catalogue-carousel-switcher li {
- margin-bottom: .9em;
- /* TODO: active sprites */ }
+ margin-bottom: .9em; }
#catalogue-carousel #catalogue-carousel-switcher li a {
text-transform: uppercase;
color: #363a3e;
font-size: .9em;
font-weight: bold; }
- #catalogue-carousel #catalogue-carousel-switcher li a.active {
- color: white; }
#catalogue-carousel #catalogue-carousel-switcher li a:before {
vertical-align: top;
margin-right: 1.5em; }
#catalogue-carousel #catalogue-carousel-switcher li .knowledge:before {
- content: url(/static/img/icons/knowledge.png); }
+ content: url(/static/img/icons/knowledge_dark.png); }
#catalogue-carousel #catalogue-carousel-switcher li .activity:before {
- content: url(/static/img/icons/activity.png); }
+ content: url(/static/img/icons/activity_dark.png); }
#catalogue-carousel #catalogue-carousel-switcher li .lesson-plan:before {
- content: url(/static/img/icons/lesson-plan.png); }
+ content: url(/static/img/icons/lesson-plan_dark.png); }
#catalogue-carousel #catalogue-carousel-switcher li .reference:before {
- content: url(/static/img/icons/reference.png); }
+ content: url(/static/img/icons/reference_dark.png); }
+ #catalogue-carousel #catalogue-carousel-switcher li.activeSlide a {
+ color: white; }
+ #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .knowledge:before {
+ content: url(/static/img/icons/knowledge_white.png); }
+ #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .activity:before {
+ content: url(/static/img/icons/activity_white.png); }
+ #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .lesson-plan:before {
+ content: url(/static/img/icons/lesson-plan_white.png); }
+ #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .reference:before {
+ content: url(/static/img/icons/reference_white.png); }