Difference between revisions of "MediaWiki:Common.css"
m (adjusted animation timing) |
m (classname typo fix) |
||
(49 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) */ | /* Progress (processing animation) */ | ||
@keyframes progress | @keyframes progress | ||
Line 30: | Line 268: | ||
} | } | ||
+ | /************/ | ||
/* Calendar */ | /* Calendar */ | ||
table.calendar | table.calendar | ||
Line 66: | Line 305: | ||
} | } | ||
+ | /****************/ | ||
/* switch table */ | /* switch table */ | ||
table.switchtable tr td | table.switchtable tr td | ||
Line 72: | Line 312: | ||
} | } | ||
− | + | /********************************/ | |
− | + | /* 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 | + | background-color: rgba( 0, 255, 0, 0.2 ); |
− | |||
− | |||
− | |||
} | } | ||
− | + | table td.hl-blue | |
{ | { | ||
− | background: | + | 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 */ | /* 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 124: | 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 191: | Line 510: | ||
} | } | ||
− | /* | + | /******************************************/ |
− | + | /* 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%;} | |
− | { | ||
− | |||
− | |||
} | } |
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%;} }