MediaWiki:GameSlider.css

.ui-widget-header { background: transparent; border: none; }

.scroll-bar { border-radius: 0px; }

.scroll-bar-wrap { width: auto; margin: 0 25px 4px 25px; padding: 4px; background: transparent; border: none; }

.ui-slider { border: 1px solid #333; box-shadow: 0 0 4px #333; background: transparent; }

.scroll-bar-wrap .ui-slider-handle { margin-top: 1.5px; background: black; border: none; }

.scroll-bar-wrap .ui-slider-handle:hover { cursor: pointer; }

.game-slider { overflow: hidden; white-space: nowrap; width: auto; }

.game-slider * { margin: 0; padding: 0; }

.game-slider figure { display: inline-block; }

.game-content-main { background: rgba(0,0,0,0.5) }

.game-content { width: 100%; height: 290px; padding: 5px }

.game-content > div.floatleft { margin-right: 5px; margin-bottom: 0 }

.game-content > h3 { font-size: 20px; margin-top: .2em; margin-bottom: .45em; padding-left: 7px }

.loader { position: absolute; top: 50%; left: 50%; border: 5px solid #f3f3f3; border-radius: 50%; border-top: 5px solid #3498db; width: 20px; height: 20px; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite }

@-webkit-keyframes spin { 0% {       -webkit-transform: rotate(0deg) }

100% {       -webkit-transform: rotate(360deg) } }

@keyframes spin { 0% {       transform: rotate(0deg) }

100% {       transform: rotate(360deg) } }

.game-slider a { position: relative }

.game-slider a.content-active::before { content: ""; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid rgba(0,0,0,0.5); position: absolute; top: 112px; left: 61px }

.portal_metro#portal_slider,.portal_metro#portal_slider .portal_body { border: none !important; border-radius: 0 !important }

.portal_metro .toc { display: none }

.portal_container { display: inline-block; margin-bottom: 15px; position: relative; width: 100% }

.portal_metro:before { background-color: rgb(0,0,0); content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -2 }

.portal_metro { border: none }

.portal_metro .portal_body { overflow: hidden; padding: 0 10px }

.portal_metro .portal_metro { border: none }

.portal_metro.ui-tabs .ui-tabs-panel { padding: 0 }

.portal_metro#portal_slider,.portal_metro#portal_slider .portal_body { padding: 0 }

.portal_metro [class^=portal_sliderlink] .mw-headline,.portal_metro [class^=portal_sliderlink] .portal_slidertext,.portal_metro .portal_header_text,.portal_vtab.ui-tabs-vertical .ui-tabs-nav li a,.portal_vtab.ui-tabs-vertical .ui-tabs-panel li a { font-family: "Segoe UI",Helvetica,Verdana; font-weight: normal; text-align: left; text-shadow: 0 0 2px rgba(64,0,0,0.5),-1px -1px rgba(64,0,0,0.5),1px 1px rgba(64,0,0,0.5); width: 100% }

.portal_metro [class^=portal_sliderlink] .mw-headline,.portal_metro [class^=portal_sliderlink] .portal_slidertext,.portal_metro .portal_header_text,.portal_vtab.ui-tabs-vertical .ui-tabs-nav li a { text-transform: uppercase }

.portal_metro .portal_header_text { font-size: 2em; padding-top: 15px }

.portal_metro [class^=portal_sliderlink] { font-size: 1.6em }

.portal_metro .portal_header { margin-bottom: 6px; padding: 0; position: relative }

.portal_metro .portal_header_text { border-bottom: none; padding-left: 15px }

.portal_metro .portal_headerlinks { font-size: 0.8em; padding-bottom: 2px; position: absolute; right: 1em; top: 1em; z-index: 1 }

.portal_metro .portal_header,.portal_metro .portal_header a:link,.portal_metro .portal_header a:visited,.portal_metro .portal_header a:hover,.portal_metro .portal_header a:active { color: rgb(192,0,0) }

.portal_metro [class^=portal_sliderlink] .portal_slidertext { bottom: 10px; left: 10px; position: absolute }

.portal_metro#portal_slider .portal_navlink { display: none }

.portal_metro#portal_slider { overflow: hidden; position: relative; height: 255px; margin-right: 10px }

.portal_metro#portal_slider .portal_navlink { bottom: 8px; display: block; left: 8px; position: absolute; z-index: 2 }

.portal_metro#portal_slider .portal_navlink img { opacity: 0.3 }

.portal_metro#portal_slider .portal_navlink img:hover { opacity: 0.8 }

.portal_metro#portal_slider .portal_header { height: 50px; position: absolute; right: 10px; width: 100px }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical { padding: 0 }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav { border: none }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel { left: 175px; position: absolute; top: 0; overflow-y: scroll; right: 0 }

.ui-tabs-panel::-webkit-scrollbar { width: 12px }

.ui-tabs-panel::-webkit-scrollbar:disabled { display: none }

.ui-tabs-panel::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.5) }

.ui-tabs-panel::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.25) }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav { float: left; padding: 0; width: 175px }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li { border-bottom-width: 1px !important; border-right-width: 0 !important; clear: left; cursor: pointer; margin: 0; top: 0; width: 100% }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding: 0 }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li a { background: none; display: block; font-size: 18px !important; padding: 0.35em 0 0.35em 0.5em; width: 100% }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected a { background: none; cursor: pointer; }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav:after { content: ""; height: 420px; overflow-y: hidden; width: 100% }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav:before { }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav:before,.portal_vtab.ui-tabs-vertical .ui-tabs-nav:after,.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-state-default { background-color: rgba(0,0,0,0.6); background-image: none; border: none }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-state-active { background-color: transparent }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-state-hover { background-color: transparent }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical { width: 100% }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { border-right-width: 1px; padding-bottom: 0 }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel ul { margin: 0; padding-left: 5px; }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel li { list-style: none; padding: 0.1em 0 0.1em 0.4em; }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel li a { color: rgb(255,255,255); display: block; font-size: 16px; }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel h2 { border-bottom: none; color: rgb(192,0,0); font-size: 1.4em; margin-top: 0; padding: 1em 0 0 1em; text-transform: uppercase }