992e285b034501fbb5efcafa6ae99aaf939027ba
[edumed.git] / catalogue / static / catalogue / css / carousel.css
1 #catalogue-carousel {
2   float: left;
3   position: relative;
4   width: 43.75em;
5   height: 14.6875em;
6   overflow: hidden;
7   border-radius: 0.9375em;
8 }
9   #catalogue-carousel #catalogue-carousel-links {
10     width: 28.75em;
11     height: 14.6875em;
12     list-style: none;
13     margin: 0;
14     padding: 0; }
15     #catalogue-carousel #catalogue-carousel-links li {
16       display: block;
17       position: absolute;
18       top: 0;
19       left: 0;
20       height: 100%;
21       background-size: 100% 100%;
22       border-top-left-radius: 0.9375em 6.38%;
23       border-bottom-left-radius: 0.9375em 6.38%;
24       z-index: 100;
25       background-color: #888; }
26       #catalogue-carousel #catalogue-carousel-links li a.catalogue-carousel-link {
27         display: block;
28         overflow: hidden;
29         width: 28.75em;
30         height: 100%;
31         background: url(/static/catalogue/img/carousel-left.png) 100% 0 no-repeat;
32         background-size: 4.375em 100%; }
33         #catalogue-carousel #catalogue-carousel-links li a.catalogue-carousel-link .catalogue-carousel-note {
34           position: relative;
35           height: 100%;
36           color: white;
37           margin-top: 8.5em; }
38           #catalogue-carousel #catalogue-carousel-links li a.catalogue-carousel-link .catalogue-carousel-note div:before {
39             content: " ";
40             display: block;
41             position: absolute;
42             height: 100%;
43             width: 100%;
44             z-index: -1;
45             background-color: black;
46             opacity: 0.6; }
47           #catalogue-carousel #catalogue-carousel-links li a.catalogue-carousel-link .catalogue-carousel-note div p {
48             padding: .4em 3em 0 .5em; }
49             #catalogue-carousel #catalogue-carousel-links li a.catalogue-carousel-link .catalogue-carousel-note div p strong {
50               font-size: 1.2em;
51               display: block; }
52             #catalogue-carousel #catalogue-carousel-links li a.catalogue-carousel-link .catalogue-carousel-note div p .more {
53               position: absolute;
54               right: 4em;
55               top: 4.5em; }
56       #catalogue-carousel #catalogue-carousel-links li a.catalogue-carousel-link:active {
57         outline: none; }
58       #catalogue-carousel #catalogue-carousel-links li .attribution {
59         text-align: right;
60         font-size: .75em;
61         position: absolute;
62         right: 5em;
63         top: .1em;
64         color: white;
65         font-weight: bold;
66         text-shadow: 0 0 5px #000; }
67   #catalogue-carousel #catalogue-carousel-switcher {
68     margin: 0;
69     padding: 0.1875em 0 0 3.625em;
70     width: 11.375em;
71     height: 14.6875em;
72     position: absolute;
73     right: 0;
74     top: 0;
75     list-style: none;
76     border-radius: 0 0.9375em 0.9375em 0;
77     background-color: #ed7831;
78     background-image: url(/static/catalogue/img/carousel-right.png);
79     background-position: 0 0;
80     background-repeat: no-repeat;
81     background-size: auto 14.6875em;
82     /* right part of mask as background */ }
83     #catalogue-carousel #catalogue-carousel-switcher li {
84       margin-bottom: .4em;
85       font-size: .85em;
86       line-height: 1em; }
87       #catalogue-carousel #catalogue-carousel-switcher li a {
88         text-transform: uppercase;
89         color: #363a3e; }
90       #catalogue-carousel #catalogue-carousel-switcher li a:before {
91         vertical-align: top;
92         margin-right: 1.5em; }
93       #catalogue-carousel #catalogue-carousel-switcher li .knowledge:before {
94         content: url(/static/img/icons/knowledge_dark.png); }
95       #catalogue-carousel #catalogue-carousel-switcher li .activity:before {
96         content: url(/static/img/icons/activity_dark.png); }
97       #catalogue-carousel #catalogue-carousel-switcher li .lesson-plan:before {
98         content: url(/static/img/icons/lesson-plan_dark.png); }
99       #catalogue-carousel #catalogue-carousel-switcher li .reference:before {
100         content: url(/static/img/icons/reference_dark.png); }
101     #catalogue-carousel #catalogue-carousel-switcher li.activeSlide a {
102       color: white; }
103     #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .knowledge:before {
104       content: url(/static/img/icons/knowledge_white.png); }
105     #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .activity:before {
106       content: url(/static/img/icons/activity_white.png); }
107     #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .lesson-plan:before {
108       content: url(/static/img/icons/lesson-plan_white.png); }
109     #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .reference:before {
110       content: url(/static/img/icons/reference_white.png); }