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