MediaWiki:Wikia.css

@import url(https://fonts.googleapis.com/css?family=Play); @import url(https://fonts.googleapis.com/css?family=Rock+Salt); @import url(https://fonts.googleapis.com/css?family=Metal+Mania); @import url(https://fonts.googleapis.com/css?family=Felipa); @import url(https://fonts.googleapis.com/css?family=Bangers); @import url(https://fonts.googleapis.com/css?family=VT323); @import url(https://fonts.googleapis.com/css?family=Gloria+Hallelujah);

.tabbertab { border: none !important; padding: 0 !important; } .tabbernav { background: #000000; border: 3px solid #ffffff !important; padding: 0 !important; text-align: center; font-family: Helvetica Neue,Helvetica,Arial,sans-serif !important; border-radius: 4px; font-size: 15px !important; line-height: 15px !important; justify-content: space-between; display: flex; } .tabbernav li { font-size: 15px !important;; line-height: 15px !important; width: 100%; } .tabbernav li a { border: none !important; margin: 0 !important; padding: 5px 0 !important; background: transparent !important; color: #999 !important; font-size: 14px; transition-duration: 0.15s; cursor: default; font-weight: normal !important; font-size: 15px !important;; line-height: 15px !important; width: 100%; display: inline-block; } .tabbernav .tabberactive a, .tabbernav li a:hover { color: black !important; background: white !important; } .orange .tabbertab { border: none !important; padding: 0 !important; } .orange .tabbernav { background: #662900; border: 3px solid #ff6600 !important; padding: 0 !important; text-align: center; font-family: Helvetica Neue,Helvetica,Arial,sans-serif !important; border-radius: 4px; font-size: 15px !important; line-height: 15px !important; justify-content: space-between; display: flex; } .orange .tabbernav li { font-size: 15px !important;; line-height: 15px !important; width: 100%; } .orange .tabbernav li a { border: none !important; margin: 0 !important; padding: 5px 0 !important; background: transparent !important; color: #ff9966 !important; font-size: 14px; transition-duration: 0.15s; cursor: default; font-weight: normal !important; font-size: 15px !important;; line-height: 15px !important; width: 100%; display: inline-block; } .orange .tabbernav .tabberactive a, .orange .tabbernav li a:hover { color: #662900 !important; background: #ff6600 !important; } .red .tabbertab { border: none !important; padding: 0 !important; } .red .tabbernav { background: #660000; border: 3px solid #ff0000 !important; padding: 0 !important; text-align: center; font-family: Helvetica Neue,Helvetica,Arial,sans-serif !important; border-radius: 4px; font-size: 15px !important; line-height: 15px !important; justify-content: space-between; display: flex; } .red .tabbernav li { font-size: 15px !important;; line-height: 15px !important; width: 100%; } .red .tabbernav li a { border: none !important; margin: 0 !important; padding: 5px 0 !important; background: transparent !important; color: #ff6666 !important; font-size: 14px; transition-duration: 0.15s; cursor: default; font-weight: normal !important; font-size: 15px !important;; line-height: 15px !important; width: 100%; display: inline-block; } .red .tabbernav .tabberactive a, .red .tabbernav li a:hover { color: #660000 !important; background: #ff0000 !important; } .purple .tabbertab { border: none !important; padding: 0 !important; } .purple .tabbernav { background: #290066; border: 3px solid #6600ff !important; padding: 0 !important; text-align: center; font-family: Helvetica Neue,Helvetica,Arial,sans-serif !important; border-radius: 4px; font-size: 15px !important; line-height: 15px !important; justify-content: space-between; display: flex; } .purple .tabbernav li { font-size: 15px !important;; line-height: 15px !important; width: 100%; } .purple .tabbernav li a { border: none !important; margin: 0 !important; padding: 5px 0 !important; background: transparent !important; color: #cc99ff !important; font-size: 14px; transition-duration: 0.15s; cursor: default; font-weight: normal !important; font-size: 15px !important;; line-height: 15px !important; width: 100%; display: inline-block; } .purple .tabbernav .tabberactive a, .purple .tabbernav li a:hover { color: #290066 !important; background: #6600ff !important; } .blue .tabbertab { border: none !important; padding: 0 !important; } .blue .tabbernav { background: #002966; border: 3px solid #0066ff !important; padding: 0 !important; text-align: center; font-family: Helvetica Neue,Helvetica,Arial,sans-serif !important; border-radius: 4px; font-size: 15px !important; line-height: 15px !important; justify-content: space-between; display: flex; } .blue .tabbernav li { font-size: 15px !important;; line-height: 15px !important; width: 100%; } .blue .tabbernav li a { border: none !important; margin: 0 !important; padding: 5px 0 !important; background: transparent !important; color: #66ccff !important; font-size: 14px; transition-duration: 0.15s; cursor: default; font-weight: normal !important; font-size: 15px !important;; line-height: 15px !important; width: 100%; display: inline-block; } .blue .tabbernav .tabberactive a, .blue .tabbernav li a:hover { color: #002966 !important; background: #0066ff !important; } .green .tabbertab { border: none !important; padding: 0 !important; } .green .tabbernav { background: #006600; border: 3px solid #00ff00 !important; padding: 0 !important; text-align: center; font-family: Helvetica Neue,Helvetica,Arial,sans-serif !important; border-radius: 4px; font-size: 15px !important; line-height: 15px !important; justify-content: space-between; display: flex; } .green .tabbernav li { font-size: 15px !important;; line-height: 15px !important; width: 100%; } .green .tabbernav li a { border: none !important; margin: 0 !important; padding: 5px 0 !important; background: transparent !important; color: #99ff99 !important; font-size: 14px; transition-duration: 0.15s; cursor: default; font-weight: normal !important; font-size: 15px !important;; line-height: 15px !important; width: 100%; display: inline-block; } .green .tabbernav .tabberactive a, .green .tabbernav li a:hover { color: #006600 !important; background: #00ff00 !important; } .yellow .tabbertab { border: none !important; padding: 0 !important; } .yellow .tabbernav { background: #666600; border: 3px solid #ffff00 !important; padding: 0 !important; text-align: center; font-family: Helvetica Neue,Helvetica,Arial,sans-serif !important; border-radius: 4px; font-size: 15px !important; line-height: 15px !important; justify-content: space-between; display: flex; } .yellow .tabbernav li { font-size: 15px !important;; line-height: 15px !important; width: 100%; } .yellow .tabbernav li a { border: none !important; margin: 0 !important; padding: 5px 0 !important; background: transparent !important; color: #ffffcc !important; font-size: 14px; transition-duration: 0.15s; cursor: default; font-weight: normal !important; font-size: 15px !important;; line-height: 15px !important; width: 100%; display: inline-block; } .yellow .tabbernav .tabberactive a, .yellow .tabbernav li a:hover { color: #666600 !important; background: #ffff00 !important; }

.thirteenbg { background-image:url('https://vignette.wikia.nocookie.net/ben10fanfiction/images/b/b7/13bg.png/revision/latest'); }

.WikiHeader .wordmark { -moz-transform: rotate(0deg) scale(1) skew(180deg) translate(0px); -moz-transition: All 0.6863s ease; -o-transform: rotate(0deg) scale(1) skew(180deg) translate(0px); -o-transition: All 0.6863s ease; -webkit-transform: rotate(0deg) scale(1) skew(180deg) translate(0px); -webkit-transition: All 0.6863s ease; color: #708090; font-weight: bold; margin-bottom: 10px; width: 250px; word-wrap: break-word; } .WikiHeader .wordmark:hover { -webkit-transform: rotate(1deg) scale(1.090) skew(180deg) translate(0px); -moz-transform: rotate(1deg) scale(1.090) skew(180deg) translate(0px); -ms-transform: rotate(1deg) scale(1.090) skew(180deg) translate(0px); -o-transform: rotate(1deg) scale(1.090) skew(180deg) translate(0px); }

.hoverzoom { -moz-transform: rotate(0deg) scale(1) skew(180deg) translate(0px); -moz-transition: All 0.6863s ease; -o-transform: rotate(0deg) scale(1) skew(180deg) translate(0px); -o-transition: All 0.6863s ease; -webkit-transform: rotate(0deg) scale(1) skew(180deg) translate(0px); -webkit-transition: All 0.6863s ease; } .hoverzoom:hover { -webkit-transform: rotate(1deg) scale(1.090) skew(180deg) translate(0px); -moz-transform: rotate(1deg) scale(1.090) skew(180deg) translate(0px); -ms-transform: rotate(1deg) scale(1.090) skew(180deg) translate(0px); -o-transform: rotate(1deg) scale(1.090) skew(180deg) translate(0px); }


 * {box-sizing: border-box}

/* Container needed to position the overlay. Adjust the width as needed */ .container2 { position: relative; width: 33%; max-width: 200px; }

/* Make the image to responsive */ .image { display: block; width: 100%; height: auto; }

/* The overlay effect - lays on top of the container and over the image */ .overlay { position: absolute; bottom: 0; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.5); /* Black see-through */ color: #f1f1f1; width: 100%; transition: .5s ease; opacity:0; color: white; font-size: 20px; padding: 20px; text-align: center; }

/* When you mouse over the container, fade in the overlay title */ .container2:hover .overlay { opacity: 1; }