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: url(/static/catalogue/img/carousel-left.png) 100% 0 no-repeat;
  29         background-size: 4.375em 100%; }
  30         #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note {
  31           position: relative;
  32           height: 100%;
  33           color: white;
  34           margin-top: 12em; }
  35           #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note p:before {
  36             content: " ";
  37             display: block;
  38             position: absolute;
  39             height: 100%;
  40             width: 100%;
  41             z-index: -1;
  42             background-color: black;
  43             opacity: 0.6; }
  44           #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note p {
  45             margin: 0; }
  46             #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note p em {
  47               margin: 0 .2em 0 .5em;
  48               font-style: normal;
  49               font-size: 1.5em; }
  50             #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note p strong {
  51               margin-left: .5em;
  52               font-size: 2em; }
  53   #catalogue-carousel #catalogue-carousel-switcher {
  54     margin: 0;
  55     padding: 3.125em 0 0 3.625em;
  56     width: 11.375em;
  57     height: 11.563em;
  58     position: absolute;
  59     right: 0;
  60     top: 0;
  61     list-style: none;
  62     border-radius: 0 0.938em 0.938em 0;
  63     background-color: #ed7831;
  64     background-image: url(/static/catalogue/img/carousel-right.png);
  65     background-position: 0 0;
  66     background-repeat: no-repeat;
  67     background-size: auto 14.688em;
  68     /* right part of mask as background */ }
  69     #catalogue-carousel #catalogue-carousel-switcher li {
  70       margin-bottom: .9em; }
  71       #catalogue-carousel #catalogue-carousel-switcher li a {
  72         text-transform: uppercase;
  73         color: #363a3e;
  74         font-size: .9em;
  75         font-weight: bold; }
  76       #catalogue-carousel #catalogue-carousel-switcher li a:before {
  77         vertical-align: top;
  78         margin-right: 1.5em; }
  79       #catalogue-carousel #catalogue-carousel-switcher li .knowledge:before {
  80         content: url(/static/img/icons/knowledge_dark.png); }
  81       #catalogue-carousel #catalogue-carousel-switcher li .activity:before {
  82         content: url(/static/img/icons/activity_dark.png); }
  83       #catalogue-carousel #catalogue-carousel-switcher li .lesson-plan:before {
  84         content: url(/static/img/icons/lesson-plan_dark.png); }
  85       #catalogue-carousel #catalogue-carousel-switcher li .reference:before {
  86         content: url(/static/img/icons/reference_dark.png); }
  87     #catalogue-carousel #catalogue-carousel-switcher li.activeSlide a {
  88       color: white; }
  89     #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .knowledge:before {
  90       content: url(/static/img/icons/knowledge_white.png); }
  91     #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .activity:before {
  92       content: url(/static/img/icons/activity_white.png); }
  93     #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .lesson-plan:before {
  94       content: url(/static/img/icons/lesson-plan_white.png); }
  95     #catalogue-carousel #catalogue-carousel-switcher li.activeSlide .reference:before {
  96       content: url(/static/img/icons/reference_white.png); }