7b47a0d8caf3a146c83413fe6dd82e3a779b2a00
[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       background: url(/static/test.jpg);
20       /* set real background image */ }
21       #catalogue-carousel #catalogue-carousel-links li a {
22         display: block;
23         width: 28.75em;
24         height: 14.688em;
25         background-image: url(/static/catalogue/img/carousel-left.png);
26         background-position: 100% 0;
27         background-repeat: no-repeat;
28         background-size: auto 14.688em;
29         /* left part of mask as background */ }
30   #catalogue-carousel #catalogue-carousel-switcher {
31     margin: 0;
32     padding: 3.125em 0 0 3.625em;
33     width: 11.375em;
34     height: 11.563em;
35     position: absolute;
36     right: 0;
37     top: 0;
38     list-style: none;
39     border-radius: 0 0.938em 0.938em 0;
40     background-color: #16a487;
41     background-image: url(/static/catalogue/img/carousel-right.png);
42     background-position: 0 0;
43     background-repeat: no-repeat;
44     background-size: auto 14.688em;
45     /* right part of mask as background */ }
46     #catalogue-carousel #catalogue-carousel-switcher li {
47       margin-bottom: .9em;
48       /* TODO: active sprites */ }
49       #catalogue-carousel #catalogue-carousel-switcher li a {
50         text-transform: uppercase;
51         color: #363a3e;
52         font-size: .9em;
53         font-weight: bold; }
54       #catalogue-carousel #catalogue-carousel-switcher li a.active {
55         color: white; }
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.png); }
61       #catalogue-carousel #catalogue-carousel-switcher li .activity:before {
62         content: url(/static/img/icons/activity.png); }
63       #catalogue-carousel #catalogue-carousel-switcher li .lesson-plan:before {
64         content: url(/static/img/icons/lesson-plan.png); }
65       #catalogue-carousel #catalogue-carousel-switcher li .reference:before {
66         content: url(/static/img/icons/reference.png); }