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