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