FANDOM


/*
  1.  */
  2. /* Carousel -------------------------------------------------
  3.  * For WikiJPop in spanish version
  4.  *
  5.  * Required Slider.js
  6.  */
  7. .carousel{
  8.     overflow:hidden;
  9.     width:100%;
  10.     padding:0
  11. }
  12. .panes{
  13.     list-style:none;
  14.     position:relative;
  15.     padding: 0;
  16.     margin-left: 0;
  17.     width:300%; /* Number of panes * 100% */
  18.     overflow:hidden; /* This is used solely to clear floats, it does not add functionality. */
  19. }
  20.  
  21. .carousel .floatright {
  22.         position: absolute;
  23.         z-index: 1000;
  24.         right: 0px;
  25.         top: 50%
  26. }
  27.  
  28. .carousel .floatleft {
  29.         position: absolute;
  30.         z-index: 1000;
  31.         top: 50%;
  32.         margin-left: 20px;
  33. }
  34.  
  35. .panes > li{
  36.     position:relative;
  37.     float:left;
  38.     padding: 0;
  39.     margin-left: 0;
  40.     width:33.333333333333333333333333333333333%; /* 100 / number of panes */
  41. }
  42. .carousel img{
  43.     display:block;
  44.     width:100%;
  45.     max-width:100%;
  46. }
  47. .carousel h2{
  48.     font-size:1em;
  49.     padding: 8px 7px;
  50.     position:absolute;
  51.     border:0px;
  52.     top:5em;
  53.     text-align:left;
  54.     max-width: 300px;
  55.     color:#fff;
  56.     background-color:rgba(0,0,0,0.5);
  57. }
  58. @keyframes carousel{
  59.     0%    { left:-1.7%; }
  60.     12.5%   { left:-1.7%; }
  61.     25% { left:-101.7%; }
  62.     37.5% { left:-101.7%; }
  63.     50%   { left:-201.7%; }
  64.     62.5%   { left:-201.7%; }
  65.     75% { left:-101.7%; }
  66.     87.5% { left:-101.7%; }
  67.     100%  { left:-1.7%; }
  68. }
  69. /* Safari and Chrome */
  70. @-webkit-keyframes carousel{
  71.     0%    { left:-1.7%; }
  72.     12.5%   { left:-1.7%; }
  73.     25% { left:-101.7%; }
  74.     37.5% { left:-101.7%; }
  75.     50%   { left:-201.7%; }
  76.     62.5%   { left:-201.7%; }
  77.     75% { left:-101.7%; }
  78.     87.5% { left:-101.7%; }
  79.     100%  { left:-1.7%; }
  80. }
  81. /* Fade in arrows */
  82. .greydout {
  83.   -webkit-opacity: 0.5;
  84.   -moz-opacity: 0.5;
  85.   -khtml-opacity: 0.5;
  86.   filter: alpha(opacity=50);
  87.   opacity: 0.5;
  88. -webkit-transition: all 0.25s ease;
  89.   -moz-transition: all 0.25s ease;
  90.   -ms-transition: all 0.25s ease;
  91.   -o-transition: all 0.25s ease;
  92.   transition: all 0.25s ease;
  93. }
  94. .greydout:hover {
  95.   -webkit-opacity: 1;
  96.   -moz-opacity: 1;
  97.   -khtml-opacity: 1;
  98.   filter: alpha(opacity=50);
  99.   opacity: 1;
  100. }
  101.  
  102. /* BEGIN Main Page carousel code */
  103.  
  104. .jcarousel {
  105.     position: relative;
  106.     overflow: hidden;
  107. }
  108.  
  109. .jcarousel-wrapper {
  110.         max-width: 1700px;
  111.     margin: 0;
  112.     position: relative;
  113. }
  114.  
  115. .jcarousel .jcarousel-list {
  116.     width: 20000em;
  117.     position: relative;
  118.     margin: 0;
  119.     padding: 0;
  120. }
  121.  
  122. .jcarousel .jcarousel-item {
  123.     float: left;
  124. }
  125.  
  126. .jcarousel-item img {
  127.     display: block;
  128.     max-width: 100%;
  129.     height: auto !important;
  130. }
  131.  
  132. .jcarousel-control-prev,
  133. .jcarousel-control-next {
  134.     position: absolute;
  135.     bottom: 40%;
  136.     width: 30px;
  137.     height: 30px;
  138.     text-align: center;
  139.     background: rgba(255, 255, 255, .5);
  140.     color: #fff;
  141.     text-decoration: none;
  142.     text-shadow: 0 0 1px #000;
  143.     font: 24px/27px Arial, sans-serif;
  144.     -webkit-border-radius: 30px;
  145.        -moz-border-radius: 30px;
  146.             border-radius: 30px;
  147.     -webkit-box-shadow: 0 0 2px #999;
  148.        -moz-box-shadow: 0 0 2px #999;
  149.             box-shadow: 0 0 2px #999;
  150. }
  151.  
  152. .jcarousel-control-prev:hover,
  153. .jcarousel-control-next:hover {
  154.     background: rgba(255, 255, 255, .8);
  155. }
  156.  
  157. .jcarousel-control-prev {
  158.     left: 15px;
  159. }
  160.  
  161. .jcarousel-control-next {
  162.     right: 15px;
  163. }
  164.  
  165. .jcarousel-control-prev a,
  166. .jcarousel-control-next a {
  167.     text-decoration:none;
  168.     color:#888;
  169. }
  170. .jcarousel-control-prev a:hover,
  171. .jcarousel-control-next a:hover {
  172.     text-decoration:none;
  173.     color:#333;
  174. }
  175.  
  176. .jcarousel-control-prev:hover span,
  177. .jcarousel-control-next:hover span {
  178.     display: block;
  179. }
  180.  
  181. .jcarousel-control-prev.inactive,
  182. .jcarousel-control-next.inactive {
  183.     opacity: .5;
  184.     cursor: default;
  185. }
  186.  
  187. .jcarousel-pagination {
  188.     position: absolute;
  189.     bottom: 10px;
  190.     right: 15px;
  191. }
  192.  
  193. .jcarousel-pagination a {
  194.     text-decoration: none;
  195.     display: inline-block;
  196.     font-size: 11px;
  197.     line-height: 14px;
  198.     min-width: 14px;
  199.     background: #fff;
  200.     color: #555;
  201.     border-radius: 14px;
  202.     padding: 3px;
  203.     text-align: center;
  204.     margin-right: 2px;
  205.     opacity: .75;
  206. }
  207.  
  208. .jcarousel-pagination a.active {
  209.     background: rgba(0, 0, 0, .6);
  210.     color: #fff;
  211.     opacity: 1;
  212.     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
  213. }
  214.  
  215. /* DDCCXXX */
  216. .banner-image {
  217.     position: relative;
  218.     overflow: hidden;
  219.     max-width: 1700px;
  220.     height: auto;
  221.     margin-bottom: .6em;
  222. }
  223.  
  224. .banner-image img {
  225.     max-width: 100%;
  226.     height: auto;
  227.     width: auto\9;
  228. }
  229.  
  230. .banner-box {
  231.     position: absolute;
  232.     z-index: 2;
  233.     margin-top: 2.5em;
  234.     width: 50%;
  235.     min-width: 20em;
  236. }
  237.  
  238. .banner-box-wide {
  239.     width: 80%
  240. }
  241.  
  242. .banner-box-left,
  243. .banner-box-right {
  244.         padding: 6px 8px;
  245.         background: rgba(255,255,255,.2);
  246.         border-radius: 1px;
  247.         text-shadow: none;
  248.         width: 40%;
  249. }
  250.  
  251. .banner-box-left {
  252.     left: 3%;
  253.     text-align: left;
  254. }
  255.  
  256. .banner-box-right {
  257.     right: 3%;
  258.     text-align: right;
  259. }
  260.  
  261. .banner-box-welcome {
  262.     left: 1em;
  263.     text-align: center;
  264.     width: 40%;
  265.     white-space: nowrap;
  266. }
  267.  
  268. .banner-box a {
  269.     color: white !important;
  270.     font-weight: bold;
  271.     text-shadow:0px 0px 2px rgba(0, 0, 0, .6);
  272. }
  273.  
  274. .banner-box .name {
  275.     font-size: 2em;
  276.     white-space: nowrap;
  277.     line-height: 1.2em;
  278. }
  279.  
  280. .banner-box .type {
  281.     font-size: 1.2em;
  282.     line-height: .9em;
  283. }
  284.  
  285. .banner-box .stats {
  286.     font-size: 1em;
  287.     margin-top: 1.7em;
  288. }
  289.  
  290. .banner-box .quote {
  291.     font-size: 1em;
  292.     line-height: 1.1em;
  293. }
  294.  
  295. .banner-box .welcome a {
  296.     font-size: 1.5em;
  297. }
  298.  
  299. .banner-box .welcome {
  300.     font-size: 2.1em;
  301. }
  302.  
  303. .banner-box .nav-tip {
  304.     font-size: 1.5em;
  305.     margin-top: 1.5em;
  306.     margin-bottom: 1.5em;
  307. }
  308.  
  309. .banner-box .welcome-map-nav {
  310.     font-size: 1.25em;
  311. }
  312.  
  313. .banner-box ul {
  314.     font-size: 1.25em;
  315. }
  316.  
  317. .banner-box ul li {
  318.     display: inline;
  319. }
  320.  
  321. .banner-box ul li:before {
  322.     content: " • ";
  323. }
  324.  
  325. .banner-box ul li:nth-of-type(1):before {
  326.     content: " ";
  327. }
  328. /*
*/

Start a Discussion Discussions about ResponsiveSlider/code.css

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.