3392bb2c54c5325b7687ab74a31d90ca22af9b91
[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-image: url(/static/test.jpg);  set real background image */
21       background-size: 100% 100%;
22       border-top-left-radius: 0.938em 6.38%;
23       border-bottom-left-radius: 0.938em 6.38%; }
24       #catalogue-carousel #catalogue-carousel-links li a {
25         display: block;
26         overflow: hidden;
27         width: 28.75em;
28         height: 100%;
29         background-image: url(/static/catalogue/img/carousel-left.png);
30         background-position: 100% 0;
31         background-repeat: no-repeat;
32         background-size: 4.375em 100%; }
33   #catalogue-carousel #catalogue-carousel-switcher {
34     margin: 0;
35     padding: 3.125em 0 0 3.625em;
36     width: 11.375em;
37     height: 11.563em;
38     position: absolute;
39     right: 0;
40     top: 0;
41     list-style: none;
42     border-radius: 0 0.938em 0.938em 0;
43     background-color: #ed7831;
44     background-image: url(/static/catalogue/img/carousel-right.png);
45     background-position: 0 0;
46     background-repeat: no-repeat;
47     background-size: auto 14.688em;
48     /* right part of mask as background */ }
49     #catalogue-carousel #catalogue-carousel-switcher li {
50       margin-bottom: .9em; }
51       #catalogue-carousel #catalogue-carousel-switcher li a {
52         text-transform: uppercase;
53         color: #363a3e;
54         font-size: .9em;
55         font-weight: bold; }
56       #catalogue-carousel #catalogue-carousel-switcher li a:before {
57         vertical-align: top;
58         margin-right: 1.5em; }
59       #catalogue-carousel #catalogue-carousel-switcher li .knowledge:before {
60         content: url(/static/img/icons/knowledge_dark.png); }
61       #catalogue-carousel #catalogue-carousel-switcher li .activity:before {
62         content: url(/static/img/icons/activity_dark.png); }
63       #catalogue-carousel #catalogue-carousel-switcher li .lesson-plan:before {
64         content: url(/static/img/icons/lesson-plan_dark.png); }
65       #catalogue-carousel #catalogue-carousel-switcher li .reference:before {
66         content: url(/static/img/icons/reference_dark.png); }
67     #catalogue-carousel #catalogue-carousel-switcher li.activeSlide a {
68       color: white; }
69     #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .knowledge:before {
70       content: url(/static/img/icons/knowledge_white.png); }
71     #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .activity:before {
72       content: url(/static/img/icons/activity_white.png); }
73     #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .lesson-plan:before {
74       content: url(/static/img/icons/lesson-plan_white.png); }
75     #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .reference:before {
76       content: url(/static/img/icons/reference_white.png); }