Difference between revisions of "MediaWiki:Common.css"

From Hackerspace ACKspace
Jump to: navigation, search
(made highlights more generic)
m (classname typo fix)
 
(55 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
/* CSS placed here will be applied to all skins */
 
/* CSS placed here will be applied to all skins */
 +
/********************************************************************/
 +
/* Limit table of contents levels with "toclimit-n" class container */
 +
.toclimit-1 .toclevel-1 ul,
 +
.toclimit-2 .toclevel-2 ul,
 +
.toclimit-3 .toclevel-3 ul,
 +
.toclimit-4 .toclevel-4 ul,
 +
.toclimit-5 .toclevel-5 ul,
 +
.toclimit-6 .toclevel-6 ul
 +
{
 +
display: none;
 +
}
 +
 +
/* show abbreviations on pointer down */
 +
abbr:active:after,
 +
abbr:focus:after
 +
{
 +
    content: " (" attr(title) ")";
 +
}
 +
 +
pre
 +
{
 +
    overflow-x: auto;
 +
}
 +
 +
 +
.image.fancybox > img
 +
{
 +
    max-width: 100%;
 +
    height: auto;
 +
}
 +
 +
/************/
 +
/* Carousel */
 +
.slideshow-container,
 +
.slideshow-container *,
 +
.dots,
 +
.dots *
 +
{box-sizing:border-box}
 +
 +
/* Slideshow container */
 +
.slideshow-container {
 +
  max-width: 1000px;
 +
  position: relative;
 +
  margin: auto;
 +
  overflow: hidden;
 +
  height: 30vh;
 +
}
 +
 +
/* Hide the images by default */
 +
.slideshow-container .mySlides {
 +
  display: none;
 +
}
 +
 +
.slideshow-container .mySlides img {
 +
  margin: -15% 0;
 +
}
 +
 +
/* Next & previous buttons */
 +
.slideshow-container .prev, .slideshow-container .next {
 +
  cursor: pointer;
 +
  position: absolute;
 +
  top: 50%;
 +
  width: auto;
 +
  margin-top: -22px;
 +
  padding: 16px;
 +
  color: white;
 +
  font-weight: bold;
 +
  font-size: 18px;
 +
  transition: 0.6s ease;
 +
  border-radius: 0 3px 3px 0;
 +
  user-select: none;
 +
}
 +
 +
/* Position the "next button" to the right */
 +
.slideshow-container .next {
 +
  right: 0;
 +
  border-radius: 3px 0 0 3px;
 +
}
 +
 +
/* On hover, add a black background color with a little bit see-through */
 +
.slideshow-container .prev:hover, .slideshow-container .next:hover {
 +
  background-color: rgba(0,0,0,0.8);
 +
}
 +
 +
/* Caption text */
 +
.slideshow-container .text {
 +
  color: #f2f2f2;
 +
  font-size: 15px;
 +
  padding: 8px 12px;
 +
  position: absolute;
 +
  bottom: 8px;
 +
  width: 100%;
 +
  text-align: center;
 +
}
 +
 +
/* Number text (1/3 etc) */
 +
.slideshow-container .numbertext {
 +
  color: #f2f2f2;
 +
  font-size: 12px;
 +
  padding: 8px 12px;
 +
  position: absolute;
 +
  top: 0;
 +
}
 +
 +
.slideshow-container .text,.slideshow-container .numbertext {
 +
text-shadow: 1px 1px black;
 +
}
 +
 +
/* The dots/bullets/indicators */
 +
.dot {
 +
  cursor: pointer;
 +
  height: 15px;
 +
  width: 15px;
 +
  margin: 0 2px;
 +
  background-color: #bbb;
 +
  border-radius: 50%;
 +
  display: inline-block;
 +
  transition: background-color 0.6s ease;
 +
}
 +
 +
.active, .dot:hover {
 +
  background-color: #717171;
 +
}
 +
 +
/* Fading animation */
 +
.slideshow-container .fade {
 +
  -webkit-animation-name: fade;
 +
  -webkit-animation-duration: 1.5s;
 +
  animation-name: fade;
 +
  animation-duration: 1.5s;
 +
}
 +
 +
@-webkit-keyframes fade {
 +
  from {opacity: .4}
 +
  to {opacity: 1}
 +
}
 +
 +
@keyframes fade {
 +
  from {opacity: .4}
 +
  to {opacity: 1}
 +
}
 +
 +
 +
/********************************************************/
 +
/* silly car-table css because people just don't get it */
 +
div.car
 +
{
 +
    display: inline-block;
 +
    padding: 0 2em 0 4em;
 +
    margin: 1em 0;
 +
    position: relative;
 +
}
 +
 +
div.car:before
 +
{
 +
    content:"";
 +
    position: absolute;
 +
    border-top: 0.5em solid black;
 +
    border-bottom: 0.5em solid black;
 +
    width: 3em;
 +
    left: 3em;
 +
    top: -0.5em;
 +
    bottom: -0.5em;
 +
    z-index: -1;
 +
}
 +
 +
div.car:after
 +
{
 +
    content:"";
 +
    position: absolute;
 +
    border-top: 0.5em solid black;
 +
    border-bottom: 0.5em solid black;
 +
    width: 3em;
 +
    right: 1em;
 +
    top: -0.5em;
 +
    bottom: -0.5em;
 +
    z-index: -1;
 +
}
 +
 +
div.car table
 +
{
 +
    box-sizing: border-box;
 +
    border-collapse: collapse;
 +
}
 +
 +
div.car td
 +
{
 +
    width: 6em;
 +
    height: 2.5em;
 +
    border: 0.05em solid black;
 +
    box-sizing: border-box;
 +
}
 +
 +
div.car td:empty
 +
{
 +
    background-color: lightgreen;
 +
}
 +
 +
div.car table:before
 +
{
 +
    position: absolute;
 +
    content: "";
 +
    border: 0.05em solid black;
 +
    border-right: none;
 +
    border-radius: 50% 0 0 50%;
 +
    top: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    width: 4em;
 +
    box-sizing: border-box;
 +
}
 +
 +
div.car table:after
 +
{
 +
    position: absolute;
 +
    content: "";
 +
    border: 0.05em solid black;
 +
    border-left: none;
 +
    border-radius: 0 0.5em 0.5em 0;
 +
    top: 0;
 +
    bottom: 0;
 +
    right: 0;
 +
    width: 2em;
 +
    box-sizing: border-box;
 +
}
 +
 +
/**********************************************************************/
 +
/* remove the form edit from the following pages:
 +
* Main page
 +
* Pizza-meet event page
 +
* ACKsession
 +
  because multiple forms and the calculated dates break form editing */
 +
.page-Main_Page #ca-formedit,
 +
.page-Pizza-meet #ca-formedit,
 +
.page-ACKsession #ca-formedit
 +
{display:none}
 +
 +
/********************************************************************/
 +
/* Progress (processing animation) */
 +
@keyframes progress
 +
{
 +
  0% { background-position: 0 0; }
 +
  100% { background-position: 50px 50px; }
 +
}   
 +
 +
.processing
 +
{
 +
  background-size:100px 100px;
 +
  background-image: linear-gradient(-45deg,
 +
    rgba(0,0,0,0.05) 25%, rgba(0,0,0,0) 25%,
 +
    rgba(0,0,0,0) 50%, rgba(0,0,0,0.05) 50%,
 +
    rgba(0,0,0,0.05) 75%, rgba(0,0,0,0) 75%);
 +
  animation: progress 2s linear infinite;
 +
}
 +
 +
/* disconnected state (fading) */
 +
@keyframes connecting
 +
{
 +
  0% {opacity:0;}
 +
  50% {opacity:0.5;}
 +
  100% {opacity:0;}
 +
}
 +
 +
.disconnected
 +
{
 +
  animation: connecting linear 1.4s infinite;
 +
}
 +
 +
/************/
 
/* Calendar */
 
/* Calendar */
 
table.calendar
 
table.calendar
Line 30: Line 299:
 
}
 
}
  
 +
table.calendar .title
 +
{
 +
    text-decoration: overline underline;
 +
    cursor :help;
 +
}
  
 +
/****************/
 
/* switch table */
 
/* switch table */
 
table.switchtable tr td
 
table.switchtable tr td
Line 37: Line 312:
 
}
 
}
  
−
canvas#logo,
+
/********************************/
−
canvas.winternight
+
/* table strikeout/done feature */
 +
table.wikitable
 +
{
 +
    empty-cells: show;
 +
}
 +
 
 +
table.wikitable td
 +
{
 +
    position: relative;
 +
}
 +
 
 +
table.wikitable tr.strikeout,
 +
table.wikitable tr.done,
 +
table.wikitable td.na
 +
{
 +
    opacity: 0.4;
 +
}
 +
 
 +
table.wikitable tr.strikeout td:before,
 +
table.wikitable tr.done td:before
 +
{
 +
    content: " ";
 +
    position: absolute;
 +
    top: 50%;
 +
    left: 0;
 +
    border-bottom: 1px solid #111;
 +
    width: 100%;
 +
}
 +
 
 +
table td.hl-red
 +
{
 +
    background-color: rgba( 255, 0, 0, 0.2 );
 +
}
 +
 
 +
table td.hl-green
 +
{
 +
    background-color: rgba( 0, 255, 0, 0.2 );
 +
}
 +
 
 +
table td.hl-blue
 
{
 
{
−
     background: -moz-linear-gradient(top, rgba(0,0,68,0) 0%, rgba(0,0,68,1) 25%, rgba(0,0,68,1) 100%);
+
     background-color: rgba( 0, 0, 255, 0.2 );
−
    background: -webkit-linear-gradient(top, rgba(0,0,68,0) 0%,rgba(0,0,68,1) 25%,rgba(0,0,68,1) 100%);
 
−
    background: linear-gradient(to bottom, rgba(0,0,68,0) 0%,rgba(0,0,68,1) 25%,rgba(0,0,68,1) 100%);
 
−
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000044', endColorstr='#000044',GradientType=0 );
 
 
}
 
}
  
−
#nggyunglydngtaahy
+
table td.hl-yellow
 
{
 
{
−
background: #000 linear-gradient(95deg,rgba(113,3,180,0.8),rgba(83,42,230,0.8),rgba(38,149,220,0.8),rgba(65,204,180,0.8),rgba(255,207,123,0.8),rgba(254,129,0,0.8),rgba(197,52,81,0.8));
+
    background-color: rgba( 255, 255, 0, 0.2 );
−
background-size: 400% 100%;
+
}
  
−
-webkit-animation: homeCycle 10s ease infinite;
+
table td.hl-purple
−
animation: homeCycle 10s ease infinite;
+
{
 +
    background-color: rgba( 255, 0, 255, 0.2 );
 +
}
  
−
border: medium solid #FF0;
+
table td.hl-cyan
−
padding-top: 5px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px;
+
{
 +
    background-color: rgba( 0, 255, 255, 0.2 );
 +
}
  
−
color: #FFF;
+
/*******************************************/
−
text-align: center;
+
/* CSS span table rowspan only showing the first rowheader (assuming there are 2 column headers stacked, hence +3 */
 +
table.span tr>th.span2,
 +
table.span tr>th.span3,
 +
table.span tr>th.span4,
 +
table.span tr>th.span5
 +
{
 +
    display: none;
 
}
 
}
  
−
@-webkit-keyframes homeCycle
+
table.span tr:nth-of-type(2n+3)>th.span2,
 +
table.span tr:nth-of-type(3n+3)>th.span3,
 +
table.span tr:nth-of-type(4n+3)>th.span4,
 +
table.span tr:nth-of-type(5n+3)>th.span5
 
{
 
{
−
     0% {background-position: 0% 50%}
+
     display: table-cell;
−
    50% {background-position: 100% 50%}
+
}
−
    100% {background-position: 0% 50%}
 
−
}  
 
  
−
@keyframes homeCycle
+
/*************************/
 +
/* Special ACKspace Logo */
 +
canvas#logo,
 +
canvas.winternight
 
{
 
{
−
     0% {background-position: 0% 50%}
+
     background: -moz-linear-gradient(top, rgba(0,0,68,0) 0%, rgba(0,0,68,1) 25%, rgba(0,0,68,1) 100%);
−
     50% {background-position: 100% 50%}
+
     background: -webkit-linear-gradient(top, rgba(0,0,68,0) 0%,rgba(0,0,68,1) 25%,rgba(0,0,68,1) 100%);
−
     100% {background-position: 0% 50%}
+
     background: linear-gradient(to bottom, rgba(0,0,68,0) 0%,rgba(0,0,68,1) 25%,rgba(0,0,68,1) 100%);
 +
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000044', endColorstr='#000044',GradientType=0 );
 
}
 
}
  
 +
/**************************/
 
/* Hide main page heading */
 
/* Hide main page heading */
 
body.page-Main_Page h1.firstHeading { display: none; }
 
body.page-Main_Page h1.firstHeading { display: none; }
  
 +
/***************************************************************/
 
/* reserve extra space for transcluded (featured) page headers */
 
/* reserve extra space for transcluded (featured) page headers */
 
body.page-Main_Page h6 { font-size: 130%; padding-top: 2em; margin-top: 1em; border-top: 1px solid #ddd; }
 
body.page-Main_Page h6 { font-size: 130%; padding-top: 2em; margin-top: 1em; border-top: 1px solid #ddd; }
  
 +
/************************/
 
/* shadow under iframes */
 
/* shadow under iframes */
 
iframe
 
iframe
Line 89: Line 418:
 
}
 
}
  
 +
/****************/
 +
/* button style */
 +
.button
 +
{
 +
    line-height: 300%;
 +
}
 +
 +
.button a
 +
{
 +
    padding: 10px;
 +
    border:2px outset #eee;
 +
    border-radius: 6px;
 +
    background-color: #fefefe;
 +
    font-weight: bold;
 +
    text-decoration: none;
 +
}
 +
 +
.button:hover a
 +
{
 +
    background-color: #eee;
 +
    /*padding: 11px 9px 9px 11px;*/
 +
}
 +
 +
 +
/******************************************/
 
/* get rid of some ugly mediawiki styling */
 
/* get rid of some ugly mediawiki styling */
 
#mw-head-base,
 
#mw-head-base,
Line 156: Line 510:
 
}
 
}
  
−
/* table strikeout/done feature */
+
/******************************************/
−
table.wikitable
+
/* dynamic layout */
 +
.spaceAPI {float: right}
 +
 
 +
@media screen and (max-width: 35em)
 
{
 
{
−
     empty-cells: show;
+
     /* full-width space api */
 +
    .spaceAPI {float: none}
 +
    #p-personal>ul {padding:0 !important}
 +
    #right-navigation {margin:0 !important}
 
}
 
}
  
−
table.wikitable td
+
@media screen and (max-width: 45em)
 +
{
 +
    /* hide logo */
 +
    #logo {display: none}
 +
    #content {margin-top: 2.5em !important}
 +
}
 +
@media screen and (max-width: 55em)
 +
{
 +
    /* nav bar inline (at the bottom) */
 +
    .mw-body {margin-left: 0}
 +
    #mw-panel {position: static}
 +
}
 +
@media screen and (max-width: 73em)
 +
{
 +
    /* map (state) below intro text */
 +
    .button {color: blue}
 +
}
 +
/******************************************/
 +
/* handle languages */
 +
/* remove external link */
 +
.tabs a.external
 
{
 
{
−
     position: relative;
+
     background-image: none !important;
 +
    padding: 0.2em !important;
 +
    background-color: #f3f3f3;
 
}
 
}
  
 +
html[lang|="nl"] .lang:not([lang="nl"]),
 +
html[lang|="en"] .lang:not([lang="en"]),
 +
html[lang|="de"] .lang:not([lang="de"]),
 +
html[lang|="li"] .lang:not([lang="li"])
 +
{
 +
    display: none
 +
}
  
−
table.wikitable tr.strikeout,
+
html[lang|="nl"] .tabs a.external[href$="nl"],
−
table.wikitable tr.done,
+
html[lang|="en"] .tabs a.external[href$="en"],
−
table.wikitable td.na
+
html[lang|="de"] .tabs a.external[href$="de"]
 +
html[lang|="li"] .tabs a.external[href$="li"]
 
{
 
{
−
     opacity: 0.4;
+
     /*background-color: red;
 +
    color: white !important;*/
 +
    font-weight: bold;
 
}
 
}
  
−
table.wikitable tr.strikeout td:before,
+
/******************************************/
−
table.wikitable tr.done td:before
+
/* image gallery carousel */
 +
 
 +
ul.gallery.mw-gallery-packed-overlay.carousel
 
{
 
{
−
     content: " ";
+
     overflow: hidden;
−
     position: absolute;
+
     white-space: nowrap;
−
    top: 50%;
+
     height: 30vmin;
−
    left: 0;
 
−
    border-bottom: 1px solid #111;
 
−
     width: 100%;
 
 
}
 
}
  
−
table td.hl-red
+
ul.gallery.mw-gallery-packed-overlay.carousel,
 +
ul.gallery.mw-gallery-packed-overlay.carousel *
 
{
 
{
−
     background-color: rgba( 255, 0, 0, 0.2 );
+
     margin: 0;
 +
    padding: 0;
 +
    border: 0;
 
}
 
}
  
−
table td.hl-green
+
ul.gallery.mw-gallery-packed-overlay.carousel *
 
{
 
{
−
     background-color: rgba( 0, 255, 0, 0.2 );
+
     width:100% !important;
 +
    height: auto;
 
}
 
}
  
−
table td.hl-blue
+
ul.gallery.mw-gallery-packed-overlay.carousel img
 
{
 
{
−
     background-color: rgba( 0, 0, 255, 0.2 );
+
     margin-top: -25% !important;
 
}
 
}
  
−
table td.hl-yellow
+
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child
 
{
 
{
−
     background-color: rgba( 255, 255, 0, 0.2 );
+
     animation-iteration-count: infinite;
 +
    animation-direction: alternate;
 +
    animation-timing-function: ease-in-out;
 
}
 
}
  
−
table td.hl-purple
+
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(2){animation-name: carousel1;animation-duration: 10s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(3){animation-name: carousel2;animation-duration: 15s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(4){animation-name: carousel3;animation-duration: 20s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(5){animation-name: carousel4;animation-duration: 25s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(6){animation-name: carousel5;animation-duration: 30s}
 +
 
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(7){animation-name: carousel6;animation-duration: 35s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(8){animation-name: carousel7;animation-duration: 40s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(9){animation-name: carousel8;animation-duration: 45s}
 +
 
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(10){animation-name: carousel9;animation-duration: 50s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(11){animation-name: carousel10;animation-duration: 55s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(12){animation-name: carousel11;animation-duration: 60s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(13){animation-name: carousel12;animation-duration: 65s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(14){animation-name: carousel13;animation-duration: 70s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(15){animation-name: carousel14;animation-duration: 75s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(16){animation-name: carousel15;animation-duration: 80s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(17){animation-name: carousel16;animation-duration: 85s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(18){animation-name: carousel17;animation-duration: 90s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(19){animation-name: carousel18;animation-duration: 95s}
 +
 
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(20){animation-name: carousel19;animation-duration: 100s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(21){animation-name: carousel20;animation-duration: 105s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(22){animation-name: carousel21;animation-duration: 110s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(23){animation-name: carousel22;animation-duration: 115s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(24){animation-name: carousel23;animation-duration: 120s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(25){animation-name: carousel24;animation-duration: 125s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(26){animation-name: carousel25;animation-duration: 130s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(27){animation-name: carousel26;animation-duration: 135s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(28){animation-name: carousel27;animation-duration: 140s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(29){animation-name: carousel28;animation-duration: 145s}
 +
 
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(30){animation-name: carousel29;animation-duration: 150s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(31){animation-name: carousel30;animation-duration: 155s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(32){animation-name: carousel31;animation-duration: 160s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(33){animation-name: carousel32;animation-duration: 165s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(34){animation-name: carousel33;animation-duration: 170s}
 +
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(35){animation-name: carousel34;animation-duration: 175s}
 +
 
 +
@keyframes carousel1
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -100%;}
 +
}
 +
@keyframes carousel2
 +
{
 +
    0%  {margin-left: 0%;}
 +
    50% {margin-left: -100%;}
 +
    100% {margin-left: -200%;}
 +
}
 +
@keyframes carousel3
 +
{
 +
    0%  {margin-left: 0%;}
 +
    33% {margin-left: -100%;}
 +
    66% {margin-left: -200%;}
 +
    100% {margin-left: -300%;}
 +
}
 +
@keyframes carousel4
 +
{
 +
    0%  {margin-left: 0%;}
 +
    25%  {margin-left: -100%;}
 +
    50% {margin-left: -200%;}
 +
    75% {margin-left: -300%;}
 +
    100% {margin-left: -400%;}
 +
}
 +
@keyframes carousel5
 +
{
 +
    0%  {margin-left: 0%;}
 +
    20% {margin-left: -100%;}
 +
    40% {margin-left: -200%;}
 +
    60% {margin-left: -300%;}
 +
    80% {margin-left: -400%;}
 +
    100% {margin-left: -500%;}
 +
}
 +
@keyframes carousel6
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -600%;}
 +
}
 +
@keyframes carousel7
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -700%;}
 +
}
 +
@keyframes carousel8
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -800%;}
 +
}
 +
@keyframes carousel9
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -900%;}
 +
}
 +
@keyframes carousel10
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -1000%;}
 +
}
 +
@keyframes carousel11
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -1100%;}
 +
}
 +
@keyframes carousel12
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -1200%;}
 +
}
 +
@keyframes carousel13
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -1300%;}
 +
}
 +
@keyframes carousel14
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -1400%;}
 +
}
 +
@keyframes carousel15
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -1500%;}
 +
}
 +
@keyframes carousel16
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -1600%;}
 +
}
 +
@keyframes carousel17
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -1700%;}
 +
}
 +
@keyframes carousel18
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -1800%;}
 +
}
 +
@keyframes carousel19
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -1900%;}
 +
}
 +
@keyframes carousel20
 +
{
 +
    0%  {margin-left: 0%;}
 +
    5%  {margin-left: -100%;}
 +
    10%  {margin-left: -200%;}
 +
    15%  {margin-left: -300%;}
 +
    20%  {margin-left: -400%;}
 +
    25%  {margin-left: -500%;}
 +
    30%  {margin-left: -600%;}
 +
    35%  {margin-left: -700%;}
 +
    40%  {margin-left: -800%;}
 +
    45%  {margin-left: -900%;}
 +
    50%  {margin-left: -1000%;}
 +
    55%  {margin-left: -1100%;}
 +
    60%  {margin-left: -1200%;}
 +
    65%  {margin-left: -1300%;}
 +
    70%  {margin-left: -1400%;}
 +
    75%  {margin-left: -1500%;}
 +
    80%  {margin-left: -1600%;}
 +
    85%  {margin-left: -1700%;}
 +
    90%  {margin-left: -1800%;}
 +
    95%  {margin-left: -1900%;}
 +
    100% {margin-left: -2000%;}
 +
}
 +
@keyframes carousel21
 +
{
 +
    0%  {margin-left: 0%;}
 +
    5%  {margin-left: -100%;}
 +
    10%  {margin-left: -210%;}
 +
    15%  {margin-left: -310%;}
 +
    20%  {margin-left: -420%;}
 +
    25%  {margin-left: -520%;}
 +
    30%  {margin-left: -630%;}
 +
    35%  {margin-left: -730%;}
 +
    40%  {margin-left: -840%;}
 +
    45%  {margin-left: -940%;}
 +
    50%  {margin-left: -1050%;}
 +
    55%  {margin-left: -1150%;}
 +
    60%  {margin-left: -1260%;}
 +
    65%  {margin-left: -1360%;}
 +
    70%  {margin-left: -1470%;}
 +
    75%  {margin-left: -1570%;}
 +
    80%  {margin-left: -1680%;}
 +
    85%  {margin-left: -1780%;}
 +
    90%  {margin-left: -1890%;}
 +
    95%  {margin-left: -1990%;}
 +
    100% {margin-left: -2100%;}
 +
}
 +
@keyframes carousel22
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -2200%;}
 +
}
 +
@keyframes carousel23
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -2300%;}
 +
}
 +
@keyframes carousel24
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -2400%;}
 +
}
 +
@keyframes carousel25
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -2500%;}
 +
}
 +
@keyframes carousel26
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -2600%;}
 +
}
 +
@keyframes carousel27
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -2700%;}
 +
}
 +
@keyframes carousel28
 +
{
 +
    0%  {margin-left: 0%;}
 +
    100% {margin-left: -2800%;}
 +
}
 +
@keyframes carousel29
 
{
 
{
−
     background-color: rgba( 255, 0, 255, 0.2 );
+
     0%  {margin-left: 0%;}
 +
    100% {margin-left: -2900%;}
 
}
 
}
−
 
+
@keyframes carousel30
−
table td.hl-cyan
 
 
{
 
{
−
     background-color: rgba( 0, 255, 255, 0.2 );
+
     0%  {margin-left: 0%;}
 +
    100% {margin-left: -3000%;}
 
}
 
}
−
 
+
@keyframes carousel31
−
/* button style */
 
−
.button
 
 
{
 
{
−
     line-height: 300%;
+
     0%  {margin-left: 0%;}
 +
    100% {margin-left: -3100%;}
 
}
 
}
 +
@keyframes carousel32
 +
{
 +
    0%  {margin-left: 0%;}
  
−
.button a
+
    100% {margin-left: -3200%;}
 +
}
 +
@keyframes carousel33
 
{
 
{
−
     padding: 10px;
+
     0%  {margin-left: 0%;}
−
     border:2px outset #eee;
+
    3.125% {margin-left: -100%;}
−
     border-radius: 6px;
+
    6.25% {margin-left: -200%;}
−
     background-color: #fefefe;
+
     9.375% {margin-left: -300%;}
−
     font-weight: bold;
+
     12.5% {margin-left: -400%;}
−
     text-decoration: none;
+
     15.625% {margin-left: -500%;}
 +
     15.625% {margin-left: -500%;}
 +
 
 +
     100% {margin-left: -3300%;}
 
}
 
}
 +
@keyframes carousel34
 +
{
 +
    0%  {margin-left: 0%;}
 +
    3.03% {margin-left: -100%;}
 +
    6.06% {margin-left: -200%;}
 +
    9.09% {margin-left: -300%;}
 +
    12.12% {margin-left: -400%;}
 +
    15.15% {margin-left: -500%;}
  
−
.button:hover a
+
    100% {margin-left: -3400%;}
−
{
 
−
    background-color: #eee;
 
−
    /*padding: 11px 9px 9px 11px;*/
 
 
}
 
}

Latest revision as of 10:01, 11 December 2023

/* CSS placed here will be applied to all skins */
/********************************************************************/
/* Limit table of contents levels with "toclimit-n" class container */
.toclimit-1 .toclevel-1 ul,
.toclimit-2 .toclevel-2 ul,
.toclimit-3 .toclevel-3 ul,
.toclimit-4 .toclevel-4 ul,
.toclimit-5 .toclevel-5 ul,
.toclimit-6 .toclevel-6 ul
{
	display: none;
}

/* show abbreviations on pointer down */
abbr:active:after,
abbr:focus:after
{
    content: " (" attr(title) ")";
}

pre
{
    overflow-x: auto;
}


.image.fancybox > img
{
    max-width: 100%;
    height: auto;
}

/************/
/* Carousel */
.slideshow-container,
.slideshow-container *,
.dots,
.dots *
{box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  overflow: hidden;
  height: 30vh;
}

/* Hide the images by default */
.slideshow-container .mySlides {
  display: none;
}

.slideshow-container .mySlides img {
  margin: -15% 0;
}

/* Next & previous buttons */
.slideshow-container .prev, .slideshow-container .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.slideshow-container .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.slideshow-container .prev:hover, .slideshow-container .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.slideshow-container .text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.slideshow-container .numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.slideshow-container .text,.slideshow-container .numbertext {
text-shadow: 1px 1px black;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.slideshow-container .fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


/********************************************************/
/* silly car-table css because people just don't get it */
div.car
{
    display: inline-block;
    padding: 0 2em 0 4em;
    margin: 1em 0;
    position: relative;
}

div.car:before
{
    content:"";
    position: absolute;
    border-top: 0.5em solid black;
    border-bottom: 0.5em solid black;
    width: 3em;
    left: 3em;
    top: -0.5em;
    bottom: -0.5em;
    z-index: -1;
}

div.car:after
{
    content:"";
    position: absolute;
    border-top: 0.5em solid black;
    border-bottom: 0.5em solid black;
    width: 3em;
    right: 1em;
    top: -0.5em;
    bottom: -0.5em;
    z-index: -1;
}

div.car table
{
    box-sizing: border-box;
    border-collapse: collapse;
}

div.car td
{
    width: 6em;
    height: 2.5em;
    border: 0.05em solid black;
    box-sizing: border-box;
}

div.car td:empty
{
    background-color: lightgreen;
}

div.car table:before
{
    position: absolute;
    content: "";
    border: 0.05em solid black;
    border-right: none;
    border-radius: 50% 0 0 50%;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4em;
    box-sizing: border-box;
}

div.car table:after
{
    position: absolute;
    content: "";
    border: 0.05em solid black;
    border-left: none;
    border-radius: 0 0.5em 0.5em 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 2em;
    box-sizing: border-box;
}

/**********************************************************************/
/* remove the form edit from the following pages:
 * Main page
 * Pizza-meet event page
 * ACKsession
   because multiple forms and the calculated dates break form editing */
.page-Main_Page #ca-formedit,
.page-Pizza-meet #ca-formedit,
.page-ACKsession #ca-formedit
{display:none}

/********************************************************************/
/* Progress (processing animation) */
@keyframes progress
{
  0% { background-position: 0 0; }
  100% { background-position: 50px 50px; }
}    

.processing
{
  background-size:100px 100px;
  background-image: linear-gradient(-45deg,
     rgba(0,0,0,0.05) 25%, rgba(0,0,0,0) 25%, 
     rgba(0,0,0,0) 50%, rgba(0,0,0,0.05) 50%,
     rgba(0,0,0,0.05) 75%, rgba(0,0,0,0) 75%);
  animation: progress 2s linear infinite;
}

/* disconnected state (fading) */
@keyframes connecting
{
  0% {opacity:0;}
  50% {opacity:0.5;}
  100% {opacity:0;}
}

.disconnected
{
  animation: connecting linear 1.4s infinite;
}

/************/
/* Calendar */
table.calendar
{
    border: 2px solid gray;
    border-collapse: collapse;
    background-color: #f9f9f9;
}

table.calendar th
{
    background-color: #f2f2f2;
}

table.calendar th,
table.calendar td
{
    border: 1px solid #aaa;
    padding: 0.2em 0.4em;
}

table.calendar .na
{
    opacity: 0.5;
}

table.calendar .now
{
    font-weight: bold;
}

table.calendar .title
{
    text-decoration: overline underline;
    cursor :help;
}

/****************/
/* switch table */
table.switchtable tr td
{
    width: 72px;
}

/********************************/
/* table strikeout/done feature */
table.wikitable
{
    empty-cells: show;
}

table.wikitable td
{
    position: relative;
}

table.wikitable tr.strikeout,
table.wikitable tr.done,
table.wikitable td.na
{
    opacity: 0.4;
}

table.wikitable tr.strikeout td:before,
table.wikitable tr.done td:before
{
    content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    border-bottom: 1px solid #111;
    width: 100%;
}

table td.hl-red
{
    background-color: rgba( 255, 0, 0, 0.2 );
}

table td.hl-green
{
    background-color: rgba( 0, 255, 0, 0.2 );
}

table td.hl-blue
{
    background-color: rgba( 0, 0, 255, 0.2 );
}

table td.hl-yellow
{
    background-color: rgba( 255, 255, 0, 0.2 );
}

table td.hl-purple
{
    background-color: rgba( 255, 0, 255, 0.2 );
}

table td.hl-cyan
{
    background-color: rgba( 0, 255, 255, 0.2 );
}

/*******************************************/
/* CSS span table rowspan only showing the first rowheader (assuming there are 2 column headers stacked, hence +3 */
table.span tr>th.span2,
table.span tr>th.span3,
table.span tr>th.span4,
table.span tr>th.span5
{
    display: none;
}

table.span tr:nth-of-type(2n+3)>th.span2,
table.span tr:nth-of-type(3n+3)>th.span3,
table.span tr:nth-of-type(4n+3)>th.span4,
table.span tr:nth-of-type(5n+3)>th.span5
{
    display: table-cell;
}

/*************************/
/* Special ACKspace Logo */
canvas#logo,
canvas.winternight
{
    background: -moz-linear-gradient(top, rgba(0,0,68,0) 0%, rgba(0,0,68,1) 25%, rgba(0,0,68,1) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,68,0) 0%,rgba(0,0,68,1) 25%,rgba(0,0,68,1) 100%);
    background: linear-gradient(to bottom, rgba(0,0,68,0) 0%,rgba(0,0,68,1) 25%,rgba(0,0,68,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000044', endColorstr='#000044',GradientType=0 );
}

/**************************/
/* Hide main page heading */
body.page-Main_Page h1.firstHeading { display: none; }

/***************************************************************/
/* reserve extra space for transcluded (featured) page headers */
body.page-Main_Page h6 { font-size: 130%; padding-top: 2em; margin-top: 1em; border-top: 1px solid #ddd; }

/************************/
/* shadow under iframes */
iframe
{
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
    box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
}

/****************/
/* button style */
.button
{
    line-height: 300%;
}

.button a
{
    padding: 10px;
    border:2px outset #eee;
    border-radius: 6px;
    background-color: #fefefe;
    font-weight: bold;
    text-decoration: none;
}

.button:hover a
{
    background-color: #eee;
    /*padding: 11px 9px 9px 11px;*/
}


/******************************************/
/* get rid of some ugly mediawiki styling */
#mw-head-base,
#content,
#footer,
div.vectorTabs,
div.vectorTabs ul li,
div.vectorTabs li a
{
    background-image: none;
}

div.vectorTabs ul li:hover
{
    background-color: #f9f9f9;
}

div.vectorTabs li a,
div.vectorTabs li a span,
#mw-panel div.portal div.body ul li a,
#mw-panel div.portal div.body ul li a:visited
{
    color: #333;
}

div.vectorTabs li a:hover,
div.vectorTabs li a:hover span,
#mw-panel div.portal div.body ul li a:hover,
#mw-panel div.portal div.body ul li a:focus
{
    color: #633;
}

div.vectorTabs li a:hover,
div.vectorTabs li a:hover span
{
    margin-top: 0.05em;
}

#mw-panel div.portal div.body ul li a,
#mw-panel div.portal div.body ul li a:visited
{
    text-decoration: none;
    display: block;
    line-height: 1.2em;
    padding: 0.6em;
    border-radius: 5px;
}

#mw-panel div.portal h5
{
    text-shadow: 1px 1px 3px rgba(150, 150, 150, 0.3);
    font-size: 85%;
}

#mw-panel div.portal div.body ul li a:hover,
#mw-panel div.portal div.body ul li a:focus
{
    background-color: #f0eeee;
    padding-left: 0.65em;
}

/* avoid icon collision */
a.feedlink
{
    background-position: right 10px center;
}

/******************************************/
/* dynamic layout */
.spaceAPI {float: right}

@media screen and (max-width: 35em)
{
    /* full-width space api */
    .spaceAPI {float: none}
    #p-personal>ul {padding:0 !important}
    #right-navigation {margin:0 !important}
}

@media screen and (max-width: 45em)
{
    /* hide logo */
    #logo {display: none}
    #content {margin-top: 2.5em !important}
}
@media screen and (max-width: 55em)
{
    /* nav bar inline (at the bottom) */
    .mw-body {margin-left: 0}
    #mw-panel {position: static}
}
@media screen and (max-width: 73em)
{
    /* map (state) below intro text */
    .button {color: blue}
}
/******************************************/
/* handle languages */
/* remove external link */
.tabs a.external
{
    background-image: none !important;
    padding: 0.2em !important;
    background-color: #f3f3f3;
}

html[lang|="nl"] .lang:not([lang="nl"]),
html[lang|="en"] .lang:not([lang="en"]),
html[lang|="de"] .lang:not([lang="de"]),
html[lang|="li"] .lang:not([lang="li"])
{
    display: none
}

html[lang|="nl"] .tabs a.external[href$="nl"],
html[lang|="en"] .tabs a.external[href$="en"],
html[lang|="de"] .tabs a.external[href$="de"]
html[lang|="li"] .tabs a.external[href$="li"]
{
    /*background-color: red;
    color: white !important;*/
    font-weight: bold;
}

/******************************************/
/* image gallery carousel */

ul.gallery.mw-gallery-packed-overlay.carousel
{
    overflow: hidden;
    white-space: nowrap;
    height: 30vmin;
}

ul.gallery.mw-gallery-packed-overlay.carousel,
ul.gallery.mw-gallery-packed-overlay.carousel *
{
    margin: 0;
    padding: 0;
    border: 0;
}

ul.gallery.mw-gallery-packed-overlay.carousel *
{
    width:100% !important;
    height: auto;
}

ul.gallery.mw-gallery-packed-overlay.carousel img
{
    margin-top: -25% !important;
}

ul.gallery.mw-gallery-packed-overlay.carousel li:first-child
{
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(2){animation-name: carousel1;animation-duration: 10s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(3){animation-name: carousel2;animation-duration: 15s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(4){animation-name: carousel3;animation-duration: 20s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(5){animation-name: carousel4;animation-duration: 25s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(6){animation-name: carousel5;animation-duration: 30s}

ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(7){animation-name: carousel6;animation-duration: 35s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(8){animation-name: carousel7;animation-duration: 40s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(9){animation-name: carousel8;animation-duration: 45s}

ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(10){animation-name: carousel9;animation-duration: 50s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(11){animation-name: carousel10;animation-duration: 55s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(12){animation-name: carousel11;animation-duration: 60s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(13){animation-name: carousel12;animation-duration: 65s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(14){animation-name: carousel13;animation-duration: 70s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(15){animation-name: carousel14;animation-duration: 75s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(16){animation-name: carousel15;animation-duration: 80s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(17){animation-name: carousel16;animation-duration: 85s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(18){animation-name: carousel17;animation-duration: 90s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(19){animation-name: carousel18;animation-duration: 95s}

ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(20){animation-name: carousel19;animation-duration: 100s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(21){animation-name: carousel20;animation-duration: 105s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(22){animation-name: carousel21;animation-duration: 110s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(23){animation-name: carousel22;animation-duration: 115s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(24){animation-name: carousel23;animation-duration: 120s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(25){animation-name: carousel24;animation-duration: 125s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(26){animation-name: carousel25;animation-duration: 130s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(27){animation-name: carousel26;animation-duration: 135s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(28){animation-name: carousel27;animation-duration: 140s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(29){animation-name: carousel28;animation-duration: 145s}

ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(30){animation-name: carousel29;animation-duration: 150s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(31){animation-name: carousel30;animation-duration: 155s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(32){animation-name: carousel31;animation-duration: 160s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(33){animation-name: carousel32;animation-duration: 165s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(34){animation-name: carousel33;animation-duration: 170s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(35){animation-name: carousel34;animation-duration: 175s}

@keyframes carousel1
{
    0%   {margin-left: 0%;}
    100% {margin-left: -100%;}
}
@keyframes carousel2
{
    0%   {margin-left: 0%;}
    50% {margin-left: -100%;}
    100% {margin-left: -200%;}
}
@keyframes carousel3
{
    0%   {margin-left: 0%;}
    33% {margin-left: -100%;}
    66% {margin-left: -200%;}
    100% {margin-left: -300%;}
}
@keyframes carousel4
{
    0%   {margin-left: 0%;}
    25%   {margin-left: -100%;}
    50% {margin-left: -200%;}
    75% {margin-left: -300%;}
    100% {margin-left: -400%;}
}
@keyframes carousel5
{
    0%   {margin-left: 0%;}
    20% {margin-left: -100%;}
    40% {margin-left: -200%;}
    60% {margin-left: -300%;}
    80% {margin-left: -400%;}
    100% {margin-left: -500%;}
}
@keyframes carousel6
{
    0%   {margin-left: 0%;}
    100% {margin-left: -600%;}
}
@keyframes carousel7
{
    0%   {margin-left: 0%;}
    100% {margin-left: -700%;}
}
@keyframes carousel8
{
    0%   {margin-left: 0%;}
    100% {margin-left: -800%;}
}
@keyframes carousel9
{
    0%   {margin-left: 0%;}
    100% {margin-left: -900%;}
}
@keyframes carousel10
{
    0%   {margin-left: 0%;}
    100% {margin-left: -1000%;}
}
@keyframes carousel11
{
    0%   {margin-left: 0%;}
    100% {margin-left: -1100%;}
}
@keyframes carousel12
{
    0%   {margin-left: 0%;}
    100% {margin-left: -1200%;}
}
@keyframes carousel13
{
    0%   {margin-left: 0%;}
    100% {margin-left: -1300%;}
}
@keyframes carousel14
{
    0%   {margin-left: 0%;}
    100% {margin-left: -1400%;}
}
@keyframes carousel15
{
    0%   {margin-left: 0%;}
    100% {margin-left: -1500%;}
}
@keyframes carousel16
{
    0%   {margin-left: 0%;}
    100% {margin-left: -1600%;}
}
@keyframes carousel17
{
    0%   {margin-left: 0%;}
    100% {margin-left: -1700%;}
}
@keyframes carousel18
{
    0%   {margin-left: 0%;}
    100% {margin-left: -1800%;}
}
@keyframes carousel19
{
    0%   {margin-left: 0%;}
    100% {margin-left: -1900%;}
}
@keyframes carousel20
{
    0%   {margin-left: 0%;}
    5%   {margin-left: -100%;}
    10%   {margin-left: -200%;}
    15%   {margin-left: -300%;}
    20%   {margin-left: -400%;}
    25%   {margin-left: -500%;}
    30%   {margin-left: -600%;}
    35%   {margin-left: -700%;}
    40%   {margin-left: -800%;}
    45%   {margin-left: -900%;}
    50%   {margin-left: -1000%;}
    55%   {margin-left: -1100%;}
    60%   {margin-left: -1200%;}
    65%   {margin-left: -1300%;}
    70%   {margin-left: -1400%;}
    75%   {margin-left: -1500%;}
    80%   {margin-left: -1600%;}
    85%   {margin-left: -1700%;}
    90%   {margin-left: -1800%;}
    95%   {margin-left: -1900%;}
    100% {margin-left: -2000%;}
}
@keyframes carousel21
{
    0%   {margin-left: 0%;}
    5%   {margin-left: -100%;}
    10%   {margin-left: -210%;}
    15%   {margin-left: -310%;}
    20%   {margin-left: -420%;}
    25%   {margin-left: -520%;}
    30%   {margin-left: -630%;}
    35%   {margin-left: -730%;}
    40%   {margin-left: -840%;}
    45%   {margin-left: -940%;}
    50%   {margin-left: -1050%;}
    55%   {margin-left: -1150%;}
    60%   {margin-left: -1260%;}
    65%   {margin-left: -1360%;}
    70%   {margin-left: -1470%;}
    75%   {margin-left: -1570%;}
    80%   {margin-left: -1680%;}
    85%   {margin-left: -1780%;}
    90%   {margin-left: -1890%;}
    95%   {margin-left: -1990%;}
    100% {margin-left: -2100%;}
}
@keyframes carousel22
{
    0%   {margin-left: 0%;}
    100% {margin-left: -2200%;}
}
@keyframes carousel23
{
    0%   {margin-left: 0%;}
    100% {margin-left: -2300%;}
}
@keyframes carousel24
{
    0%   {margin-left: 0%;}
    100% {margin-left: -2400%;}
}
@keyframes carousel25
{
    0%   {margin-left: 0%;}
    100% {margin-left: -2500%;}
}
@keyframes carousel26
{
    0%   {margin-left: 0%;}
    100% {margin-left: -2600%;}
}
@keyframes carousel27
{
    0%   {margin-left: 0%;}
    100% {margin-left: -2700%;}
}
@keyframes carousel28
{
    0%   {margin-left: 0%;}
    100% {margin-left: -2800%;}
}
@keyframes carousel29
{
    0%   {margin-left: 0%;}
    100% {margin-left: -2900%;}
}
@keyframes carousel30
{
    0%   {margin-left: 0%;}
    100% {margin-left: -3000%;}
}
@keyframes carousel31
{
    0%   {margin-left: 0%;}
    100% {margin-left: -3100%;}
}
@keyframes carousel32
{
    0%   {margin-left: 0%;}

    100% {margin-left: -3200%;}
}
@keyframes carousel33
{
    0%   {margin-left: 0%;}
    3.125% {margin-left: -100%;}
    6.25% {margin-left: -200%;}
    9.375% {margin-left: -300%;}
    12.5% {margin-left: -400%;}
    15.625% {margin-left: -500%;}
    15.625% {margin-left: -500%;}

    100% {margin-left: -3300%;}
}
@keyframes carousel34
{
    0%   {margin-left: 0%;}
    3.03% {margin-left: -100%;}
    6.06% {margin-left: -200%;}
    9.09% {margin-left: -300%;}
    12.12% {margin-left: -400%;}
    15.15% {margin-left: -500%;}

    100% {margin-left: -3400%;}
}
Retrieved from "https://ackspace.nl/w/index.php?title=MediaWiki:Common.css&oldid=9637"