catalogue/static/catalogue/css/carousel.css

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