MediaWiki:Wikia.css

/***google fonts***/ @import url('https://fonts.googleapis.com/css?family=Great+Vibes|Rock+Salt|Titillium+Web|Varela+Round|Cabin+Sketch|Fjalla+One|Roboto|Smythe|Flavors|Passion+One|Give+You+Glory|Amatic+SC|Chelsea+Market|Princess+Sofia'); @import url('https://fonts.googleapis.com/css?family=Abel|Abril+Fatface|Acme|Amatic+SC|Bebas+Neue|Caveat|Cinzel|Cormorant+Garamond|Dancing+Script|EB+Garamond|Fredoka+One|Indie+Flower|Jim+Nightshade|Kelly+Slab|Libre+Franklin|Lobster|Luckiest+Guy|Pacifico|Permanent+Marker|Prompt|Rajdhani|Shadows+Into+Light&display=swap'); @import url('https://fonts.googleapis.com/css?family=Handlee&display=swap'); /**Font face**/ @import url('https://fonts.googleapis.com/css?family=Great+Vibes|Rock+Salt|Titillium+Web|Varela+Round|Cabin+Sketch|Fjalla+One|Roboto|Smythe|Flavors|Passion+One|Give+You+Glory|Amatic+SC|Chelsea+Market|Princess+Sofia');

@font-face { font-family: 'Another Scream'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/1/17/Another_Scream.ttf) format("truetype"); } @font-face { font-family: 'Burning Wrath'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/7/7a/B_wrath.ttf) format("truetype"); } @font-face { font-family: 'Comical'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/6/68/Basic_Comical_Regular_NC.ttf) format("truetype"); } @font-face { font-family: 'Digital Delivery'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/2/26/CCDigitalDelivery-Regular.ttf) format("truetype"); } @font-face { font-family: 'Digital Delivery Bold'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/1/14/CCDigitalDelivery-Bold.ttf) format("truetype"); } @font-face { font-family: 'Digital Delivery Display'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/0/06/CCDigitalDelivery-Display.ttf) format("truetype"); } @font-face { font-family: 'EinsteinRomanOpti'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/4/48/EinsteinRomanOpti.ttf) format("truetype"); font-style: normal; } @font-face { font-family: 'Firefly'; src:url(https://vignette.wikia.nocookie.net/pmdrp/images/0/07/Firefly.ttf) format("truetype"); } @font-face { font-family: 'GrantRusticOpti'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/2/2d/GrantRusticOpti.ttf) format("truetype"); font-style: normal; } @font-face { font-family: 'Hylia Serif'; font-style: normal; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/4/4a/HyliaSerifBeta-Regular.ttf) format("truetype"); } @font-face { font-family: 'KHII MenuSp'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/9/97/KHII_MenuSp.TTF) format("truetype"); } @font-face { font-family: 'MarioSSS'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/4/46/Mario_and_Luigi.ttf) format("truetype"); } @font-face { font-family: 'Pixel or GO'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/9/9c/Pixel_Or_GTO.ttf) format("truetype"); } @font-face { font-family: 'PKMN-Mystery-Dungeon'; text-shadow: 1px 1px 0 black; src: local(PKMN-Mystery-Dungeon),local(PMD),url(https://vignette.wikia.nocookie.net/pmdrp/images/2/2e/PKMN-Mystery-Dungeon.ttf) format("truetype"); } @font-face { font-family: 'PRstart'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/c/c6/Prstartk.ttf) format("truetype"); } @font-face { font-family: 'Requiem'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/5/5f/Requiem.ttf) format("truetype"); } @font-face { font-family: 'Undertale'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/4/43/Undertale.ttf) format("truetype"); } @font-face { font-family: 'Undertale Condensed'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/7/7c/Undertale_Condensed.ttf) format("truetype"); } @font-face { font-family: 'Tiki Island'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/8/84/TikiIsland.ttf) format("truetype"); } @font-face { font-family: 'Triforce'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/7/73/Triforce.ttf) format("truetype"); } @font-face { font-family: 'Vergilius'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/8/8e/161_vergilius-regular.ttf) format("truetype"); } @font-face { font-family: 'Bearpaw'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/3/36/BEARPAW.ttf) format("truetype"); } @font-face { font-family: 'Friday13'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/d/de/Friday13.ttf) format("truetype"); } @font-face { font-family: 'Munber'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/8/8d/Cmunbmr.ttf) format("truetype"); } @font-face { font-family: 'Northmount'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/c/c4/NORTH-MOUNT.ttf) format("truetype"); } @font-face { font-family: 'American Typewriter'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/d/de/American_Typewriter_Regular.ttf) format("truetype"); } @font-face { font-family: 'Andale Mono'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/4/44/Andal_Mono.ttf) format("truetype"); } @font-face { font-family: 'Apple Chancery'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/1/11/Apple_Chancery_Regular.ttf) format("truetype"); } @font-face { font-family: 'Arial Rounded MT Bold'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/a/ad/Arial_Rounded_MT_Bold.ttf) format("truetype"); } @font-face { font-family: 'Bradley Hand'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/b/bf/Bradley_Hand.TTF) format("truetype"); } @font-face { font-family: 'Copperplate'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/c/cd/Copperplate_Regular.ttf) format("truetype"); } @font-face { font-family: 'Futura'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/f/f5/Futura.ttf) format("truetype"); } @font-face { font-family: 'Gill Sans'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/a/a9/GillSans.ttf) format("truetype"); } @font-face { font-family: 'Herculanum'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/d/d1/Herculanum.ttf) format("truetype"); } @font-face { font-family: 'Lucida Grande'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/4/4e/Lucida_Grande.ttf) format("truetype"); font-style: normal; } @font-face { font-family: 'Marker Felt'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/b/b2/Marker_Felt.ttf) format("truetype"); } @font-face { font-family: 'Monaco'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/a/ac/Monaco.ttf) format("truetype"); } @font-face { font-family: 'Optima'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/2/2b/Optima.ttf) format("truetype"); } @font-face { font-family: 'Osaka'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/d/dd/Osaka.ttf) format("truetype"); } @font-face { font-family: 'Skia'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/8/8c/SKIK.ttf) format("truetype"); } @font-face { font-family: 'Space Comics'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/a/a9/Space_Comics.ttf) format("truetype"); } @font-face { font-family: 'Zapfino'; src: url(https://vignette.wikia.nocookie.net/pmdrp/images/4/48/Zapfino.ttf) format("truetype"); } /*** google fonts ***/ @import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap'); @import url('https://fonts.googleapis.com/css?family=Oswald&display=swap'); @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); @import url('https://fonts.googleapis.com/css?family=Merriweather&display=swap'); @import url('https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap'); @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap'); @import url('https://fonts.googleapis.com/css?family=Russo+One&display=swap'); @import url('https://fonts.googleapis.com/css?family=Lemonada&display=swap'); @import url('https://fonts.googleapis.com/css?family=Sriracha&display=swap'); @import "/load.php?articles=MediaWiki:Fonts.css&only=styles&mode=articles"; /*****Imports*****/ @import "/load.php?mode=articles&articles=u:dev:MediaWiki:WhalePolls.css&only=styles"; @import "/load.php?mode=articles&articles=u:dev:MediaWiki:ModernLeaderboard.css&only=styles"; @import "/load.php?mode=articles&articles=u:dev:MediaWiki:NewCat%26LangBars.css&only=styles"; @import "/load.php?mode=articles&articles=u:dev:MediaWiki:MinimalistDiscussionsFeed.css&only=styles"; @import url("//dev.wikia.com/load.php?mode=articles&only=styles&articles=MediaWiki:FontAwesome.css"); @import "/load.php?mode=articles&articles=u:dev:MediaWiki:FandomIcons.css&only=styles"; @import "/load.php?mode=articles&articles=u:dev:MediaWiki:FandomizedBloglists/code.css&only=styles"; @import "/load.php?mode=articles&articles=u:dev:MediaWiki:DropdownMenu.css&only=styles"; @import "/load.php?mode=articles&articles=u:dev:MediaWiki:FandomizedTabs/tabbers.css&only=styles"; @import url("/load.php?mode=articles&only=styles&articles=u:dev:MediaWiki:ModernProfile/Masthead.css|u:dev:MediaWiki:ModernProfile/Wall.css"); @import "/load.php?mode=articles&articles=u:dev:MediaWiki:ActivityFeed.css&only=styles"; @import "/load.php?mode=articles&articles=u:dev:MediaWiki:FandomizedCategoryExhibition/code.css&only=styles"; /****************************************************************/ /*No ads?*/ .WikiaMainPageBanner, .wikia-ad, .FooterAd, /* For local navigation */ .wds-community-header .wds-tabs__tab-label a { text-transform: none; font-size: 16px; letter-spacing: .5px; } /*Wiki name font*/ .wds-community-header .wds-community-header__sitename a { color: #fff; font-family: 'another scream'; transition: color .2s; text-transform: none; font-size: 30px; letter-spacing: .5px; } /* Font */ .WikiaPageHeader > h1 { font-family: 'another scream', sans-serif; /* This changes the header on every article */ }
 * 1) WikiaArticleBottomAd,
 * 1) mixed-content-footer,
 * 2) TOP_LEADERBOARD { display:none !important; }

/* Spinning profile picture */ .masthead-avatar img { border:none !important; box-shadow:0px 3px 10px rgba(0, 0, 0, 0.2); } .masthead-avatar { border:none; } .masthead-avatar img { -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .masthead-avatar:hover img { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); border-radius: 150%; border-color:black; box-shadow: 0 0 50px black; transform: rotate(360deg); } /* Page Headers */ .WikiaPageHeader h1 { border-radius: 2pc 1pc; font-family: 'another scream'; font-weight: bold; word-spacing: 1px; }

/**Staff special tag colors**/ /****************B1ackbear****************/ a[href="/wiki/User:B1ackbear_AJ"], a[href="/wiki/Message_Wall:B1ackbear_AJ"], a[href="/wiki/User_blog:B1ackbear_AJ"], a[href="/wiki/Special:Contributions/B1ackbear_AJ"], a[href$=":B1ackbear_AJ"], a[href$="/B1ackbear_AJ"] { color:#4F2671; font-weight: bold; }

/* CodeBoxes */ .WikiaArticle pre { background: #ffffff; padding: 2px; border-radius: 5px; margin: 0 5px; }

/* Link Glow */ a:hover { -webkit-transition: all 300ms; -moz-transition: all 300ms; -ms-transition: all 300ms; -o-transition: all 300ms; transition: all 300ms; font-weight: bold; }

.zoom_img img{ -moz-transition:-moz-transform 0.1s ease-in; -webkit-transition:-webkit-transform 0.1s ease-in; -o-transition:-o-transform 0.1s ease-in; transition:transform 0.1 ease-in; }

.zoom_img img:hover{ -moz-transform:scale(2); -webkit-transform:scale(2); -o-transform:scale(2); transform:scale(2); }

.typing{ margin: 10px 0 0 10px; width: 1000px; white-space:nowrap; overflow:hidden; animation: type 10s steps(100, end); -webkit-animation:type 10s steps(100, end); -moz-animation:type 10s steps(100, end); -o-animation:type 10s steps(100, end); }

@keyframes type{ from { width: 0; } } @-webkit-keyframes type{ from { width: 0; } } @-moz-keyframes type{ from { width: 0; } } @-o-keyframes type{ from { width: 0; } }

.sealoff { postion:relative; width:100%; height:400px; overflow:hidden; } .wrapper { position: relative; top: 100%; left: 0%; width: 100%; animation: 60s credits linear infinite; -webkit-animation: 60s credits linear infinite; -ms-animation: 60s credits linear infinite; -o-animation:60s credits linear infinite; -moz-animation:60s credits linear infinite; animation-direction:normal; -webkit-animation-direction:normal; -ms-animation-direction:normal; -o-animation-direction:normal; -moz-animation-direction:normal; }

@keyframes credits { 0% {   top: 100%; } 100% {    top: -100%; } }

@-webkit-keyframes credits { 0% {   top: 100%; } 100% {    top: -100%; } } @-ms-keyframes credits { 0% {   top: 100%; } 100% {    top: -100%; } }

@-o-keyframes credits { 0% {   top: 100%; } 100% {    top: -100%; } }

@-moz-keyframes credits { 0% {   top: 100%; } 100% {    top: -100%; } }

h1 > .rail-module{ text-transform: uppercase; }

.WikiaRail .rail-module { padding: 20px 15px 15px; margin: 0 0 30px 0; } /**Table of contents**/ .WikiaArticle .toc { font-family: 'another scream'; } /*Remove fan feed*/ display: none; } /*article comments-counter-header*/ text-transform: uppercase; font-weight: bold; font-family: another scream; } /* Notifications at the bottom of the website */ .WikiaNotifications li div { box-shadow: none; background-image: none; max-width: 200px; padding: 16px; border-radius: 0; } .WikiaNotifications li div a { font-weight: bold; } .WikiaNotifications li div a:hover { filter: brightness(85%); transition: .3s; }
 * 1) mixed-content-footer {
 * 1) article-comments-counter-header,
 * 2) article-comments-counter-recent {

/** Custum swing animation**/ .swing { transform-origin: 50% 0; animation: swing 3.5s ease-in-out forwards infinite; } @keyframes swing { 0%{transform: rotate(10deg);} 50%{transform: rotate(-5deg)} 100%{transform: rotate(10deg);} } .cedar ul.tabbernav li a { background-image:linear-gradient(to left, #B1D2C7, #75968B)!important; font-family:cabin sketch !important; color:#fff !important; text-shadow: none !important; font-size: 16px !important; font-weight:bold !important; } .cedar ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; text-decoration:none !important; } .cedar ul.tabbernav li.tabberactive a { background:linear-gradient(#75968B, #75968B) !important; color:#fff !important; text-decoration:none !important; font-weight:bold !important; } .fennec ul.tabbernav li a { background-image:linear-gradient(to left, #995437, #ce8567)!important; font-family:cabin sketch !important; color:#fff !important; text-shadow: none !important; font-size: 16px !important; font-weight:bold !important; } .fennec ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; text-decoration:none !important; } .fennec ul.tabbernav li.tabberactive a { background:linear-gradient(#EECCB7, #FCDBCE) !important; color:#fff !important; text-decoration:none !important; font-weight:bold !important; } /**Custom slide show**/ .cleanSlideshow .wikia-slideshow-prev span { background:rgba(0, 0, 0, 0.8)!important; color:black !important; background-image:none !important; overflow:hidden !important; position:relative; width:15px !important; } .cleanSlideshow .wikia-slideshow-prev .chevron { background-image:url(https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/e/e1/Hmmmmmmm..png); background-position:center left; position:relative; left:12px; background-repeat:none; } .cleanSlideshow .wikia-slideshow-next span { background:rgba(0, 0, 0, 0.8)!important; color:black !important; background-image:none !important; overflow:hidden !important; position:relative; width:15px !important; } } /**underlined hover**/ .underline-on-hover:hover { text-decoration: underline; } /******************** TABBERS ********************/ ul.tabbernav li a { background:#534741 !important; /**	padding:2px; padding-left:4px !important; padding-right:4px !important; **/ border:none !important; font-family:digital delivery !important; padding:2px 12px !important; box-shadow:1px 2px 2px rgba(0,0,0,0.9) !important; color:#F8F7EA !important; text-shadow:1px 1px 2px rgba(0,0,0,0.9) !important; font-size: 13px !important; cursor:default; text-decoration:none !important; font-weight:normal !important; } ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; text-decoration:none !important; } ul.tabbernav li:last-of-type a { border-top-right-radius: 3px; border-bottom-right-radius: 3px; text-decoration:none !important; } .tabberlive .tabbertab { border: none !important; border-radius: 3px !important; background: transparent !important; padding:10px 10px 5px 10px !important; text-decoration:none !important; } ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 3px 0 !important; text-align:center; margin: 0 0 -10px 0 !important; text-decoration:none !important; } ul.tabbernav li a:active { background: #382f2c !important; text-decoration:none !important; } ul.tabbernav li.tabberactive a { background:linear-gradient(#90BA55, #667A46) !important; color:#F8F7EA !important; text-decoration:none !important; font-weight:normal !important; } ul.tabbernav li.tabberactive a:active { background:linear-gradient(#90BA55, #667A46) !important; color:#F8F7EA !important; text-decoration:none !important; font-weight:normal !important; } /***************************************************/

/** Hover class **/ .appear { display:none; } .disappear { display:block; } .set-appear:hover .appear { display: block; } .set-appear:hover .disappear { display:none !important; } /** Custom animations **/ .shift700px { transition: all 1.0s ease-out; animation-name: shift; animation-duration: 10s; } @keyframes shift { 0%  {bottom:-700px} 100% {bottom:0px} } .wiggle { position:absolute; } .wiggle:hover { animation-name: wiggle; animation-duration: 2s; animation-iteration-count: infinite; } @keyframes wiggle { 0% {transform:rotate(0deg)} 16.6% {transform:rotate(20deg)} 33.2% {transform:rotate(-20deg)} 49.8% {transform:rotate(20deg)} 66.4% {transform:rotate(-20deg)} 83% {transform:rotate(20deg)} 100%{transform:rotate(0deg)} } .lavalamp { background-size: 500% 500%; animation: flow 50s ease infinite; } @keyframes flow { 0%{background-position:50% 0%} 50%{background-position:50% 100%} 100%{background-position:50% 0%} } /** Link customization**/ .noLinkUnderline a { text-decoration:none !important; } .ulink:hover { animation-name:fadeIn; animation-duration:0.5s; animation-fill-mode:forwards; } /******************************************/ /**random creature that i forgot what it is**/ @keyframes fadeIn { 0% {border-bottom:5px solid transparent;} 100% {border-bottom:5px solid white;} } /** More animations**/ .sparrowCell { color:#fff; background:#fff; width:94%; position:relative; left:3px; border:1px solid #fff; padding:5px; padding-top:7px; padding-bottom:7px; border-radius:10px; font-family:digital delivery bold; margin-top:2px; } .sparrowCell:hover { background-image:linear-gradient(rgba(239, 130, 54, 0.2), rgba(239, 130, 54, 0.2)); color:#fff !important; border:1px solid #000; cursor: pointer; } .sparrowCell a { color:#fff !important; } .sparrowCell a:hover { color:#fff !important; } .scale { padding-left: 15px; padding-right: 15px; font-size: 20px; transition: 1000ms; } .scale:hover { padding-left:25px; padding-right: 25px; font-size: 23px; } .KH2Menu:hover { animation-name:glo; animation-duration:0.5s; animation-fill-mode:forwards; } @keyframes glo { from { position:relative; left:0px; color:silver; box-shadow:none; background-image:linear-gradient(transparent, transparent); } to { position:relative; left:30px; color:white; background-image:linear-gradient(transparent, rgba(61, 1, 1, 0.7), rgba(61, 1, 1, 0.7)); box-shadow: 6px -1px 10px #FFF958, 5px 0px 20px #F94E1A, 3px 3px 0px #AC0403, -3px -3px 0px #AC0403, 3px -3px 0px #AC0403, -3px 3px 0px #AC0403; } } .maLinkbel a { color:#2193b0 !important; } .maLinkbel a:hover { color:#2193b0 !important; text-decoration:underline dashed #2193b0; } .maLinkbel2 a { color:#3A3A3A !important; } .maLinkbel2 a:hover { color:#3A3A3A !important; text-decoration:underline dashed #3A3A3A; }   .hp a:hover { text-decoration:underline dashed #EF8236; } /**flicker animation**/ .flicker { animation: flicker 1s linear infinite; animation-timing-function:steps(1,end) } @keyframes flicker { 0%  {opacity:1} 33% {opacity:0} 100% {opacity:0} } .flickerhov:hover { animation: flickerhov 1s linear infinite; animation-timing-function:steps(1,end); color: yellow !important; } @keyframes flickerhov { 0%  {opacity:1} 33% {opacity:0} 100% {opacity:0} } /**spin animation**/ .spin { animation-name: spin; animation-duration: 5000ms; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes spin { from { transform:rotate(0deg); }   to { transform:rotate(360deg); } } .scroll-down { height: 50px; overflow: hidden; position: relative; } .scroll div { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateY(100%); -webkit-transform:translateY(100%); transform:translateY(100%); /* Apply animation to this element */ -moz-animation: scroll-down 30s linear infinite; -webkit-animation: scroll-down 30s linear infinite; animation: scroll-down 30s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes scroll-down { 0% { -moz-transform: translateY(100%); } 100% { -moz-transform: translateY(-100%); } } @-webkit-keyframes scroll-down { 0% { -webkit-transform: translateY(100%); } 100% { -webkit-transform: translateY(-100%); } } @keyframes scroll-down { 0% { -moz-transform: translateY(100%); /* Browser bug fix */ -webkit-transform: translateY(100%); /* Browser bug fix */ transform: translateY(100%); } 100% { -moz-transform: translateY(-100%); /* Browser bug fix */ -webkit-transform: translateY(-100%); /* Browser bug fix */ transform: translateY(-100%); } } .zoom { transition: transform .2s; /* Animation */ } .zoom:hover { transform: scale(1.2); /* (120% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ } .backnforth { x-transition: all 1s ease-in-out; animation: bnf 1.7s infinite; } @keyframes bnf { 0% {   left: 0; } 50% {    left: 530px; } 100% {    left: 0; } }

/***** POES animations *****/ .POESlavalampActive { background-size: 300% 300%; animation: flow 10s ease infinite; } .POESlavalamp { background-size: 300% 300%; animation: flow 10s ease infinite; } .POESlavalamp:hover { color:black !important; background: rgba(15, 154, 198, 0.7) !important; text-shadow:0px 0px 5px rgba(255, 255, 255, 0.6); } @keyframes flow { 0%{background-position:50% 0%} 50%{background-position:50% 100%} 100%{background-position:50% 0%} } .shimmer { animation-name: shimmer; opacity:0; animation-duration:2s; animation-iteration-count:infinite; animation-duration:4s; animation-delay:2s; transform:rotate(-70deg); width:150px; height:10px; animation-timing-function:ease-in-out; background:rgba(255,255,255,0.6); box-shadow:0px 0px 20px rgba(255,255,255,0.8); position:absolute; } @keyframes shimmer { from {top:0px;left:-100px;opacity:0;} to {top:0px;left:1000px;opacity:1;} } .poesLink a { color: #f7fafc !important; text-decoration:none !important; } .poesLink a:hover { color:black !important; text-decoration:none !important; } .POESsetTooltip:hover .POEStooltip { display: block; } .POEStooltip { background-image:linear-gradient(-50deg, rgba(15, 154, 198, 0.87), rgba(0, 79, 117, 0.87)); padding:0px; color:#f7fafc; display:none; border-radius:2px; width:500px; z-index:100; border:1px solid black; box-shadow:0px 15px 20px rgba(0,0,0,0.3); } .POEStabber ul.tabbernav li a { background-image:linear-gradient(-50deg, #0f9ac6,    #004F75) !important; border:1px solid black !important; font-family:big caslon !important; text-transform:uppercase; padding:12px 15px !important; box-shadow: none !important; color:#f7fafc !important; text-shadow:none !important; font-size: 13px !important; cursor:default; line-height:50px; text-decoration:none !important; margin-bottom:5px !important; } .POEStabber ul.tabbernav li a:hover { color:black !important; background: rgba(15, 154, 198, 0.7) !important; text-shadow:0px 0px 5px rgba(255, 255, 255, 0.6); } .POEStabber ul.tabbernav li:first-child a { border-top-left-radius: 0px; border-bottom-left-radius: 0px; text-decoration:none !important; } .POEStabber ul.tabbernav li:last-of-type a { border-top-right-radius: 0px; border-bottom-right-radius: 0px; text-decoration:none !important; } .POEStabber .tabberlive .tabbertab { border: none !important; border-radius: 3px !important; background: transparent !important; padding:5px 5px 5px 5px !important; text-decoration:none !important; } .POEStabber ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 3px 0 !important; text-align:center; margin: 0 0 -10px 0 !important; text-decoration:none !important; line-height:20px; } .POEStabber ul.tabbernav li a:active { color:white !important; background: rgba(15, 154, 198, 0.7) !important; text-shadow:5px 5px 5px rgba(255, 255, 255, 0.6); } .POEStabber ul.tabbernav li.tabberactive a { color:black !important; background: rgba(15, 154, 198, 0.7) !important; text-shadow:0px 0px 5px rgba(255, 255, 255, 0.6); text-decoration:none !important; } .POEStabber ul.tabbernav li.tabberactive a:active { color:black !important; background: rgba(15, 154, 198, 0.7) !important; text-shadow:0px 0px 5px rgba(255, 255, 255, 0.6); text-decoration:none !important; } /************************************************/ /**random animations**/ .customlink a:hover { text-decoration:none; border-bottom:2px solid black; } .cleanLink a:hover { text-decoration:none; } .charguide .toc { background:rgba(255, 255, 255, 0.3) !important; border:1px solid grey !important; } .charguide a { color: #4c4c4c !important; } .charguide a:hover { text-decoration:none; color:#eabd6b !important; font-family:digital delivery bold !important; } .policyTOC a { color:#a0683d !important; } .policyTOC a:hover { color:#6E4B38 !important; } .hoverurr:hover { color:#85ba7c !important } .greyLink a { color:black !important; } .greyLink a:hover { text-decoration:none !important; color:grey !important; } .whiteLink a { color:white !important; } .whiteLink a:hover { color:white; } .saving span { animation-name: flicker; /** accesses the flicker animation **/ /** Defines the speed and opacity of the animation and makes it loop.**/ animation-duration: 1.4s; animation-iteration-count: infinite; animation-fill-mode: both; } .saving span:nth-child(2) { /** Delays the second character typed!**/ animation-delay: .2s; } .saving span:nth-child(3) { /**Delays the third character typed!**/ animation-delay: .4s; } @keyframes horizontalScroll { 100% {    -webkit-transform: translateX(-200%); } } .horizontalScroll { animation: horizontalScroll 60s linear infinite; animation-duration: 4s; } @keyframes bounce { from { bottom:0px; } to  { bottom:30px; } } .bounce { animation: bounce 0.4s; animation-direction: alternate; animation-iteration-count: infinite; } .ripple { background-position: center; transition: background 0.8s; } .ripple:hover { background: white radial-gradient(circle, rgba(255, 255, 225, 0.05) 1%, transparent 1%) center/25000%; } .ripple:active { background-color: rgba(255, 255, 225, 0.05); background-size: 200%; transition: background 0s; } .fadein { animation-name:fadein; animation-duration: 1s; animation-delay:0.5s; animation-fill-mode:forwards; position:relative; opacity:0; } @keyframes fadein { from {bottom:150px; opacity:0;} to {bottom:0px;opacity:1;} } .upbump { position:relative; transition: 0.3s; bottom:0px; } .upbump:hover { bottom:10px; transform:scale(1.007); } .shiftLeft { position:relative; left:1000px; animation-name:shiftLeft; animation-duration:0.7s; animation-delay:0.6s; animation-fill-mode:forwards; } @keyframes shiftLeft { from {left:1000px;} to {left:0px;} } .flip { transform:rotate(0deg); transition:0.3s; transform-origin: 40% 45%; } .flip:active { transform:rotate(180deg); } .reverseflip { transform:rotate(0deg); transition:0.3s; transform-origin: 60% 47%; } .reverseflip:active { transform:rotate(-420deg); } .fadein2 { animation-name:fadein2; animation-duration: 1s; animation-delay:0.5s; animation-fill-mode:forwards; position:relative; opacity:0; } @keyframes fadein2 { from {top:20px; opacity:0;} to {top:px;opacity:1;} } .fadein3 { animation-name:fadein3; animation-duration: 1s; animation-delay:0.5s; animation-fill-mode:forwards; position:relative; opacity:0; } @keyframes fadein3 { from {top:80px; opacity:0;} to {top:px;opacity:1;} } .spcshimmer { animation-name: spcshimmer; opacity:0; animation-duration:2s; animation-iteration-count:infinite; animation-duration:3.5s; animation-delay:2s; transform:rotate(-70deg); width:inheritpx; height:40px; animation-timing-function:ease-in-out; background:rgba(255,255,255,0.2); box-shadow:1px 1px 60px rgba(255,255,255,0.2), -1px -1px 60px rgba(255,255,255,0.2); position:absolute; z-index:100; } @keyframes spcshimmer { from {top:0px;left:-500px;opacity:0;} to {top:0px;left:1000px;opacity:1;} } .spcglow { transition:.3s; } .spcglow:hover { box-shadow: 2px 2px 30px rgb(255, 207, 53), -2px -2px 30px #7f3a00, -0px -0px 20px rgba(255, 255, 255, 0.3),  0px 1px 1px #fff3c9, 1px 0px 1px #fff3c9, -1px 0px 1px #fff3c9, 0px -1px 1px #fff3c9; transition:.3s; } .mouse ul.tabbernav li a { background-image:linear-gradient(to left, #99A49E, #818A82)!important; font-family:cabin sketch !important; color:#32352f !important; text-shadow: none !important; font-size: 16px !important; font-weight:bold !important; } .mouse ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; text-decoration:none !important; } .mouse ul.tabbernav li.tabberactive a { background:linear-gradient(#F3CCC6, #b7a09a) !important; color:#f9f9f9 !important; text-decoration:none !important; font-weight:bold !important; } .rpgtext { transition:.5s; text-shadow:1px 1px 10px blue, -1px -1px 10px blue; } .rotate { transition:.5s; background-image:radial-gradient(red, red); background:red; } .rpgtext:hover .rotate { animation-name:rotate; animation-duration:1s; animation-iteration-count:1; transition:.5s; } .rpgtext:hover { transition:.5s; text-shadow:1px 1px 10px fuchsia, -1px -1px 10px fuchsia; } @keyframes rotate { 0%{transform:rotateY(0deg) rotate(45deg);background-image:radial-gradient(red, red);} 50% {background-image:radial-gradient(white, red);} 60% {background-image:radial-gradient(rgba(255, 255, 255, 0.8), red);} 70% {background-image:radial-gradient(rgba(255, 255, 255, 0.6), red);} 80% {background-image:radial-gradient(rgba(255, 255, 255, 0.4), red);} 90% {background-image:radial-gradient(rgba(255, 255, 255, 0.2), red);} 100% {transform:rotateY(360deg) rotate(45deg);background-image:radial-gradient(red, red);} } .spcmap { transition:.5s; position:relative; left:0px; } .spcmap:hover { left:20px; } .spell ul.tabbernav li a { background-image:linear-gradient(to left, #4c0b13, #2b0409)!important; font-family:helvetica !important; color:#f2f3ff !important; text-shadow: none !important; font-size: 16px !important; } .spell ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; text-decoration:none !important; } .spell ul.tabbernav li.tabberactive a { background:linear-gradient(#1c0000, #260000) !important; color:mistyrose !important; text-decoration:none !important; } /************************************************************/ /** FUWA Animations **/ .fuwaCell { position:relative; left:0px; transition:0.3s; border:1px solid transparent; border-left:none; border-right:none; } .fuwaIcon { position:relative; left:0px; transition:0.3s; } .fuwaIcon2 { transition:0.3s; position:absolute; top:0px; } .fuwaIcon2:hover { top:-3px; text-shadow:0px 0px 0px #E7BA6C; } .fuwaCell:hover .fuwaIcon { position:relative; left:4px; transition:0.3s; } .fuwaIconModule { transition:0.3s; cursor:pointer; } .fuwaIconCaption { color:#f2f0b8; transition:0.3s; text-shadow:none; position:relative; left:0px; top:0px; } .fuwaIconModule:hover .fuwaIconCaption { color:#dbd87c; text-decoration:none; text-shadow:5px 0px 1px #F59661,10px 0px 1px #E7BA6C; top:-5px; left:0px; } .fuwaCell:hover { border:1px solid rgba(219, 216, 124, 0.7); } .fuwa a { color:#f2f0b8; transition:0.3s; text-shadow:none; position:relative; left:0px; top:0px; } .fuwa a:hover { color:#dbd87c; text-decoration:none; text-shadow:5px 0px 1px #F59661,10px 0px 1px #E7BA6C; top:2px; left:2px; } .fuwaFakeLink { color:#f2f0b8; transition:0.3s; text-shadow:none; position:relative; left:0px; top:0px; cursor:pointer; } .fuwaFakeLink:hover { color:#dbd87c; text-decoration:none; text-shadow:5px 0px 1px #F59661,10px 0px 1px #E7BA6C; top:2px; left:2px; } .fuwaWindow { animation-name:fuwaGrow; animation-duration:1s; animation-fill-mode:forwards; animation-delay:0.5s; width:80.65%; border:5px solid #E1B973; border-bottom:10px solid #E1B973; border-right:none; box-shadow:42px 0px 0px #E1B973, 77px 0px #E89A6B, 77px 12px #E89A6B,0px 12px #E89A6B, 107px 25px #EB6067, 107px 0px #EB6067, 0px 25px #EB6067, 110px 40px #C04E52, 110px 0px #C04E52, 0px 50px #C04E52; border-radius:10px; border-top-left-radius:0px; margin-top:0px !important; height:510px !important; opacity:0; } @keyframes fuwaGrow { from{opacity:0;position:relative;left:1000px} to {opacity:1;position:relative;left:0px;} } .fuwaWindow a { color:#dbd87c; transition:0.3s; text-shadow:none; position:relative; left:0px; top:0px; } .fuwaWindow a:hover { color:#E7BA6C; text-decoration:none; text-shadow:5px 0px 1px #ffd1d3,10px 0px 1px #cee2d7; top:2px; left:2px; } .fuwa a:active { top:4px; left:4px; } .fuwaFakeLink:active { top:4px; left:4px; } .fuwaIconModule:active .fuwaIconCaption { color:#dbd87c; text-decoration:none; text-shadow:5px 0px 1px #F59661,10px 0px 1px #E7BA6C; top:0px; left:0px; } .fuwaIcon2:active { top:0px; text-shadow:0px 0px 0px #E7BA6C; } .fuwaCloseBT { position:relative; bottom:0px; transition:0.3s; } .fuwaCloseBT:hover { bottom:3px; } .fuwaCloseBt:active { bottom:0px; } /*****************************************************/ /**delta**/ .delta a { color:white !important; } .delta a:hover { text-decoration:none; color:#f0ea2e !important; } .deltaCell .set-appear:hover { border:3px solid #f0ea2e !important; } .delta .typewriter { position: relative; top: 50%; width: 24em; margin: 0 auto; font-size: 180%; text-align: center; white-space: nowrap; overflow: hidden; transform: translateY(-50%); } .delta .animate-type { animation: typewriter 3s steps(44) 0.5s 1 normal both; } @keyframes typewriter{ from{width: 0;} to{width: 24em;} } /**************************************/ /********random*******/ .roundVid img { border-radius:20px !important; } .christmas #toc { font-family:monaco; border:1px dotted #5AB144; color:#123017; } .christmas #toc h2 { font-family:give you glory; font-weight:bold; font-size:14pt; } .christmas #toc a { color:#E43D32; } /***Page columns***/ .leftPage { position:relative; left:351px; animation-name:page-turn; animation-duration:1s; animation-delay:0.5s; animation-iteration-count:1; animation-fill-mode:forwards; } @keyframes page-turn { from {position:relative;left:351px;} to {position:relative;left:0px;} } .rightPage { opacity:0; animation-name:page-appear; animation-duration:1s; animation-delay:0.4s; animation-iteration-count:1; animation-fill-mode:forwards; } @keyframes page-appear { from {opacity:0;} to {opacity:1;} } /**** More animations ****/ .shake { animation-name:shake; animation-duration:1.5s; animation-iteration-count:infinite; position:relative; animation-direction:alternate; } @keyframes shake { 0% {transform:rotate(0deg);right:0px;} 20% {transform:rotate(-1deg);right:2px;} 40% {transform:rotate(0deg);right:0px;} 65% {transform:rotate(-0.5deg);right:0.5px;} 70% {transform:rotate(0deg);right:0px;} 80% {transform:rotate(0deg);right:0px;} 90% {transform:rotate(-0.5deg);right:1px;} 100% {transform:rotate(0deg);right:0px;} } .revshake { animation-name:shake; animation-duration:1.5s; animation-iteration-count:infinite; position:relative; animation-direction:alternate-reverse; } @keyframes revshake { 0% {transform:rotate(0deg);left:0px;} 20% {transform:rotate(1deg);left:2px;} 40% {transform:rotate(0deg);left:0px;} 65% {transform:rotate(0.5deg);left:0.5px;} 70% {transform:rotate(0deg);left:0px;} 80% {transform:rotate(0deg);left:0px;} 90% {transform:rotate(0.5deg);left:1px;} 100% {transform:rotate(0deg);left:0px;} } /**** magick *****/ .magick ul.tabbernav li a { background:linear-gradient(120deg, #310074, #5600C1) !important; border:none !important; font-family:Hoefler Text !important; text-transform:uppercase; font-weight:bold; padding:14px 50px !important; padding-bottom:10px !important; box-shadow:1px 2px 2px rgba(0,0,0,0.9) !important; color:#0A0939 !important; text-shadow:1px 0px #7246B7, 0px 1px #7246B7, -1px 0px #7246B7, 0px -1px #7246B7 !important; font-size: 13pt !important; cursor:default; text-decoration:none !important; font-weight:normal !important; } .magick ul.tabbernav li:first-child a { border-top-left-radius: 10px; border-bottom-left-radius: 10px; text-decoration:none !important; } .magick ul.tabbernav li:last-of-type a { border-top-right-radius: 10px; border-bottom-right-radius: 10px; text-decoration:none !important; } .magick ul.tabbernav li.tabberactive a { background:linear-gradient(to bottom right, #0A0939, #1e1d63) !important; color:#7C66C1 !important; text-shadow:0px 1px #020111, 1px 0px #020111, -1px 0px #020111, 0px -1px #020111 !important; text-decoration:none !important; font-weight:normal !important; } .magick ul.tabbernav li.tabberactive a:active { color:#F8F7EA !important; text-decoration:none !important; font-weight:normal !important; } .magick ul.tabbernav li.tabberactive a:active { background:linear-gradient(120deg, #4a14ad, #34016C) !important; color:#160344 !important; text-decoration:none !important; font-weight:normal !important; } .magick ul.tabbernav li a:active { background:linear-gradient(120deg, #4a14ad, #34016C) !important; color:#160344 !important; text-shadow:1px 0px #7246B7, 0px 1px #7246B7, -1px 0px #7246B7, 0px -1px #7246B7 !important; } .setup-transition { opacity:0; animation: setup-transition 1s linear 0.3s; animation-fill-mode:forwards; } @keyframes setup-transition { from {opacity:0} to {opacity:1} } .collapse-transition { left:1000px; animation: collapse-transition 1.8s linear -0.3s; animation-fill-mode:forwards; } @keyframes collapse-transition { from {left:1000px} to {left:-1500px} } .magick a { color:#A495BF; transform:scale; transition:0.3s; position:relative; text-shadow:none; } .magick a:hover { text-decoration:none; text-shadow:2px 0px 10px rgba(255, 255, 255, 0.5); transform:scale(1.5); } .pulse { animation:pulse 2.2s linear 0s infinite; border-radius:100%; width:20px; height:20px; background:white; box-shadow:10px 10px 50px rgba(255, 255, 255, 0.5), -10px -10px 50px rgba(255, 255, 255, 0.5), -10px 10px 50px rgba(255, 255, 255, 0.5), 10px -10px 50px rgba(255, 255, 255, 0.5); z-index:2; position:absolute; } @keyframes pulse { 0% {box-shadow:10px 10px 50px rgba(255, 255, 255, 0.4), -10px -10px 50px rgba(255, 255, 255, 0.4), -10px 10px 50px rgba(255, 255, 255, 0.4), 10px -10px 50px rgba(255, 255, 255, 0.4);} 50% {box-shadow:10px 10px 70px rgba(255, 255, 255, 0.8), -10px -10px 70px rgba(255, 255, 255, 0.8), -10px 10px 70px rgba(255, 255, 255, 0.8), 10px -10px 70px rgba(255, 255, 255, 0.8);} 100% {box-shadow:10px 10px 50px rgba(255, 255, 255, 0.4), -10px -10px 50px rgba(255, 255, 255, 0.4), -10px 10px 50px rgba(255, 255, 255, 0.4), 10px -10px 50px rgba(255, 255, 255, 0.4);} } .pulse2 { animation:pulse2 2.2s linear 0s infinite; border-radius:100%; width:20px; height:20px; background:white; z-index:2; position:absolute; } @keyframes pulse2 { 0% {box-shadow:10px 10px 50px rgba(255, 255, 255, 0.1), -10px -10px 50px rgba(255, 255, 255, 0.1), -10px 10px 50px rgba(255, 255, 255, 0.1), 10px -10px 50px rgba(255, 255, 255, 0.1);} 50% {box-shadow:10px 10px 70px rgba(255, 255, 255, 0.2), -10px -10px 70px rgba(255, 255, 255, 0.2), -10px 10px 70px rgba(255, 255, 255, 0.2), 10px -10px 70px rgba(255, 255, 255, 0.2);} 100% {box-shadow:10px 10px 50px rgba(255, 255, 255, 0.1), -10px -10px 50px rgba(255, 255, 255, 0.1), -10px 10px 50px rgba(255, 255, 255, 0.1), 10px -10px 50px rgba(255, 255, 255, 0.1);} } .fubsig { margin-left:3px; position:relative; top:0px; left:0px; transition:0.2s; } .fubsig:hover { top:-2px; left:0.5px; } .fubsig a { color:#C96833; } /****** LINKS ******/ /** Creates a link effect for text that isn't actually a link **/ .burrow .fakelink:hover { color:lightyellow; text-shadow:3px 3px 8px rgba(252, 231, 147, 0.3), -3px 3px 8px rgba(252, 231, 147, 0.3), -3px 3px 8px rgba(252, 231, 147, 0.3), -3px -3px 8px rgba(252, 231, 147, 0.3), 2px 2px 57px #9B6541, 2px -2px 57px #9B6541, -2px 2px 57px #9B6541, -2px -2px 57px #9B6541; animation: firefly-hover-2 3s linear 0s infinite; } /* Keeps images from taking on link effects */ .burrow .image a:hover { animation: none; } .burrow .fakelink { color:lightyellow; text-shadow:1px 1px 5px rgba(252, 231, 147, 0.3), -1px 1px 5px rgba(252, 231, 147, 0.3), -1px 1px 5px rgba(252, 231, 147, 0.3), -1px -1px 5px rgba(252, 231, 147, 0.3); position:relative; top:0px; left:0px; transition:0.3s; cursor:pointer; } /* Modifies links */ .burrow a { color:lightyellow; text-shadow:1px 1px 5px rgba(252, 231, 147, 0.3), -1px 1px 5px rgba(252, 231, 147, 0.3), -1px 1px 5px rgba(252, 231, 147, 0.3), -1px -1px 5px rgba(252, 231, 147, 0.3); position:relative; top:0px; left:0px; transition:0.3s; } .burrow a:hover { color:lightyellow; text-shadow:3px 3px 8px rgba(252, 231, 147, 0.3), -3px 3px 8px rgba(252, 231, 147, 0.3), -3px 3px 8px rgba(252, 231, 147, 0.3), -3px -3px 8px rgba(252, 231, 147, 0.3), 2px 2px 57px #9B6541, 2px -2px 57px #9B6541, -2px 2px 57px #9B6541, -2px -2px 57px #9B6541; animation: firefly-hover-2 3s linear 0s infinite; } /****** HOVER EFFECTS ******/ /** Buttons **/ .buttonleft { transition:0.3s; position:relative; top:0px; left:0px; } .buttonleft:hover { left:-4px; top:-4px } .buttoncenter { transition:0.3s; position:relative; top:0px; left:0px; } .buttoncenter:hover { top:-4px; } .buttonright { transition:0.3s; position:relative; top:0px; left:0px; } .buttonright:hover { left:4px; top:-4px } /* Plot Books */ .bookleft { transition:0.3s; position:relative; top:0px; left:0px; opacity: 1 !important; } .bookleft:hover { transform:scale(1.1); left:8px; top:8px } .bookright { transition:0.3s; position:relative; top:0px; left:0px; opacity: 1 !important; } .bookright:hover { transform:scale(1.1); left:-8px; top:8px } .inactivebook { transition:0.3s; cursor:w-resize; opacity:0.6; } .inactivebook:hover { opacity:0.4; } /* Set Appear/Appear */ .firefly-appear { display:none; color:lightyellow; opacity:1 !important; text-shadow:1px 1px 5px rgba(252, 231, 147, 0.3), -1px 1px 5px rgba(252, 231, 147, 0.3), -1px 1px 5px rgba(252, 231, 147, 0.3), -1px -1px 5px rgba(252, 231, 147, 0.3); } .firefly-set-appear:hover .firefly-appear { display:block; animation: firefly-hover 3s linear 0s infinite; position:relative; top:-5px; } /**ANIMATIONS **/ /* Animation to roll background down applications section */ .burrow .transition { animation:transition 3s ease-out 0.1s; animation-fill-mode:forwards; } @keyframes transition { from {top:0px;} to {top:-1500px;} } /* Firefly Banner Movement Animations */ .firefly-large { animation: fireflylarge 9s linear 0s infinite alternate; position:relative; transform:scale(1); opacity:1; cursor:pointer; } @keyframes fireflylarge { 0% {top:0px;left:0px;opacity:1;} 10% {top:10px;left:50px;opacity:0;} 25% {top:-10px;left:100px;opacity:1;} 40% {top:0px;left:150px;opacity:1;} 55% {top:10px;left:250px;opacity:1;} 65% {top:-5px;left:350px;opacity:0.5;} 75% {top:2px;left:450px;opacity:1;} 90% {top:10px;left:600px;opacity:1;} 95% {top:2px;left:630px;opacity:0.2;} 100% {top:-5px;left:650px;opacity:1} } .firefly-large:hover { animation-play-state: paused; } .firefly-large2 { animation: fireflylarge2 9s linear 0s infinite alternate-reverse; position:relative; transform:scale(1); opacity:1; cursor:pointer; } @keyframes fireflylarge2 { 0% {top:0px;left:0px;opacity:0;} 10% {top:5px;left:70px;opacity:1;} 25% {top:-5px;left:120px;opacity:1;} 40% {top:-10px;left:170px;opacity:0.5;} 55% {top:20px;left:270px;opacity:1;} 65% {top:40px;left:370px;opacity:1;} 75% {top:20px;left:470px;opacity:0;} 90% {top:0px;left:620px;opacity:1;} 95% {top:-2px;left:650px;opacity:0.7;} 100% {top:-5px;left:670px;opacity:1} } .firefly-large2:hover { animation-play-state: paused; } .firefly-large3 { animation: fireflylarge3 8.5s linear 0s infinite alternate-reverse; position:relative; transform:scale(1); opacity:1; cursor:pointer; } @keyframes fireflylarge3 { 0% {top:0px;left:0px;opacity:0;} 10% {top:5px;left:50px;opacity:1;} 25% {top:-5px;left:100px;opacity:1;} 40% {top:-10px;left:150px;opacity:0.5;} 55% {top:20px;left:250px;opacity:1;} 65% {top:40px;left:350px;opacity:1;} 75% {top:20px;left:450px;opacity:0;} 90% {top:0px;left:600px;opacity:1;} 95% {top:-2px;left:630px;opacity:0.7;} 100% {top:-5px;left:650px;opacity:1} } .firefly-large3:hover { animation-play-state: paused; } /* Firefly Glow Animations */ .firefly-glow { position:relative; box-shadow:5px 5px 15px #FCE793, -5px -5px 15px #FCE793, 5px -5px 15px #FCE793, -5px 5px 15px #FCE793; } .firefly-glow:hover { animation: firefly-glow 3s linear 0s infinite; top:0px; } @keyframes firefly-glow { 0% {box-shadow:5px 5px 15px #FCE793, -5px -5px 15px #FCE793, 5px -5px 15px #FCE793, -5px 5px 15px #FCE793;top:0px;left:0px} 25% {box-shadow:5px 5px 30px #FCE793, -5px -5px 30px #FCE793, 5px -5px 30px #FCE793, -5px 5px 30px #FCE793;top:-10px;left:1px} 50% {box-shadow:1px 1px 10px #FCE793, -1px -1px 10px #FCE793, 1px -1px 10px #FCE793, -1px 1px 10px #FCE793;top:2px;left:0px} 75% {box-shadow:5px 5px 30px #FCE793, -5px -5px 30px #FCE793, 5px -5px 30px #FCE793, -5px 5px 30px #FCE793;top:-10px;left:-1px} 100% {box-shadow:5px 5px 15px #FCE793, -5px -5px 15px #FCE793, 5px -5px 15px #FCE793, -5px 5px 15px #FCE793;top:0px;left:0px} } .firefly-still-glow { animation: firefly-still-glow 3s linear 0s infinite; box-shadow:5px 5px 15px #FCE793, -5px -5px 15px #FCE793, 5px -5px 15px #FCE793, -5px 5px 15px #FCE793; } @keyframes firefly-still-glow { 0% {box-shadow:5px 5px 15px #FCE793, -5px -5px 15px #FCE793, 5px -5px 15px #FCE793, -5px 5px 15px #FCE793} 25% {box-shadow:5px 5px 30px #FCE793, -5px -5px 30px #FCE793, 5px -5px 30px #FCE793, -5px 5px 30px #FCE793} 50% {box-shadow:1px 1px 10px #FCE793, -1px -1px 10px #FCE793, 1px -1px 10px #FCE793, -1px 1px 10px #FCE793} 75% {box-shadow:5px 5px 30px #FCE793, -5px -5px 30px #FCE793, 5px -5px 30px #FCE793, -5px 5px 30px #FCE793} 100% {box-shadow:5px 5px 15px #FCE793, -5px -5px 15px #FCE793, 5px -5px 15px #FCE793, -5px 5px 15px #FCE793} } /* Firefly Hover Animations */ .firefly-hover { animation: firefly-hover 3s linear 0s infinite; position:relative; top:-5px; left:0px; } @keyframes firefly-hover { 0% {top:-5px;left:0px} 25% {top:-6px;left:1px} 50% {top:-4px;left:0px} 75% {top:-6px;left:-1px} 100% {top:-5px;left:0px} } .firefly-hover-2 { position:relative; animation: firefly-hover-2 3s linear 0s infinite; } @keyframes firefly-hover-2 { 0% {top:0px;left:0px} 25% {top:-1px;left:1px} 50% {top:1px;left:0px} 75% {top:-1px;left:-1px} 100% {top:0px;left:0px} } .firefly-still { animation: firefly-glow 3s linear 0s infinite; position:relative; } .firefly-still:hover { animation-play-state: paused; } @keyframes firefly-hover { 0% {top:-5px;left:0px} 25% {top:-6px;left:1px} 50% {top:-4px;left:0px} 75% {top:-6px;left:-1px} 100% {top:-5px;left:0px} } .firefly-text { display:block; padding-top:7px; animation: firefly-hover 3s linear 0s infinite; position:relative; top:-5px; } /* Miscellaneous Animations */ .typewriter { animation:typing 3.5s steps(38, end); animation-fill-mode:forwards; width: 0px; margin:0 auto; overflow: hidden; white-space: nowrap; } @keyframes typing { from {width: 0;} to {width: 100%;} } .blink { animation: blink normal 2.5s infinite; -webkit-animation-fill-mode:forwards; opacity:0; transform:scale(0); } @keyframes blink { 0% {opacity:0;transform:scale(0)} 50% {opacity:1;transform:scale(1)} 100% {opacity:0;transform:scale(0)} } /** Causes a swing animation effect **/ .swing { transform-origin: 50% 0; animation: swing 3.5s ease-in-out forwards infinite; } @keyframes swing { 0%{transform: rotate(10deg);} 50%{transform: rotate(-5deg)} 100%{transform: rotate(10deg);} } .cedar ul.tabbernav li a { background-image:linear-gradient(to left, #B1D2C7, #75968B)!important; font-family:cabin sketch !important; color:#fff !important; text-shadow: none !important; font-size: 16px !important; font-weight:bold !important; } .cedar ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; text-decoration:none !important; } .cedar ul.tabbernav li.tabberactive a { background:linear-gradient(#75968B, #75968B) !important; color:#fff !important; text-decoration:none !important; font-weight:bold !important; } .fennec ul.tabbernav li a { background-image:linear-gradient(to left, #995437, #ce8567)!important; font-family:cabin sketch !important; color:#fff !important; text-shadow: none !important; font-size: 16px !important; font-weight:bold !important; } .fennec ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; text-decoration:none !important; } .fennec ul.tabbernav li.tabberactive a { background:linear-gradient(#EECCB7, #FCDBCE) !important; color:#fff !important; text-decoration:none !important; font-weight:bold !important; }

.cleanSlideshow .wikia-slideshow-prev span { background:rgba(0, 0, 0, 0.8)!important; color:black !important; background-image:none !important; overflow:hidden !important; position:relative; width:15px !important; } .cleanSlideshow .wikia-slideshow-prev .chevron { background-image:url(https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/e/e1/Hmmmmmmm..png); background-position:center left; position:relative; left:12px; background-repeat:none; } .cleanSlideshow .wikia-slideshow-next span { background:rgba(0, 0, 0, 0.8)!important; color:black !important; background-image:none !important; overflow:hidden !important; position:relative; width:15px !important; } .cleanSlideshow .wikia-slideshow-next .chevron { background-image:url(https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/e/e1/Hmmmmmmm..png); background-position:center left; transform:scaleX(-1); position:relative; left:0px; background-repeat:none; } .cleanSlideshow .wikia-slideshow-images-wrapper { background:rgba(0, 0, 0, 0.1) !important; } .cleanSlideshow .wikia-slideshow-image-caption { line-height:10px !important; } .fennecFakeLink { color:#995437 !important; } .fennecFakeLink:hover { text-decoration:none !important; color:#ce8567 !important; } .fennecLink a { color:#995437 !important; } .fennecLink a:hover { text-decoration:none !important; color:#ce8567 !important; } .underline-on-hover:hover { text-decoration: underline; } .wisp .header { animation:fadeinwisp 2.5s ease-in 1 forwards; position:relative; top:0px; left:0px; opacity:0; } @keyframes fadeinwisp { 0% {opacity:0;top:-50px} 10% {left:-5px} 20% {left:0px} 30% {left:5px} 40% {left:0px} 50% {left:-5px} 60% {left:0px} 70% {left:5px} 80% {left:0px} 90% {left:-5px} 100% {opacity:1;top:0px;left:0px} } .wisp-header-hover { animation:wisphoverheader 3s linear infinite; position:relative; top:0px; left:0px; } @keyframes wisphoverheader { 0% {top:0px} 12.5% {top:2px;left:-2px} 25% {top:0px} 37.5% {top:-2px;left:2px} 50% {top:0px} 67.5%{top:2px;left:2px} 75% {top:0px} 87.7% {top:-2px;left:-2px} 100% {top:0px} } .wisp-hover { animation:wisphover 1s linear infinite; position:relative; top:0px; } @keyframes wisphover { 0% {top:0px} 25% {top:1px} 50% {top:0px} 75% {top:-1px} 100% {top:0px} } .content-tab { opacity:0.2; transition:0.7s; } .content-tab:hover { opacity:1; } /** WISP ANIMATIONS **/ .wisp-animate-hover { animation:wisp-anim-hover 6s linear 1s infinite alternate; position:relative; opacity:0.9; top:0px; left:0px; } @keyframes wisp-anim-hover { 0% {top:0px;transform:rotate(0deg);opacity:0.9;} 25% {top:20px;left:5px;transform:rotate(1deg);opacity:1} 50% {top:0px;transform:rotate(0deg);opacity:1} 75% {top:20px;left:-5px;transform:rotate(-1deg);opacity:0.9} 100% {top:0px;transform:rotate(0deg);opacity:1;} } /** cupid **/ .cupid { position:relative; transform:scale(1); transition:0.3s; top:0px; left:0px; } .cupid:hover { transform:scale(1.2); top:-40px; left:40px; } .cupid-tail { animation:wisp-anim-hover-tail 2.5s linear infinite alternate; transform-style: preserve-3d; transform-origin:bottom right; top:0px; left:0px; transition:0.3s; } .cupid:hover .cupid-tail { animation:anim-hover-tail-special 0.3s linear 1; animation-fill-mode:forwards; } @keyframes anim-hover-tail-special { from {transform:inherit;} to {transform: rotate(10deg)rotateY(70deg)scale(1.55)} } .cupid:hover .wisp-hover-vibrate { animation:wisp-hover-vibrate 3s linear infinite; transform-style: preserve-3d; position:relative; top:0px; left:0px; transition:0.5s; } @keyframes wisp-hover-vibrate { 0% {top:0px;left:0px;transform:rotate(0deg)rotateY(0deg)} 25% {top:10px;left:15px;transform:rotate(-2deg)rotateY(1deg)} 50% {top:0px;left:0px;transform:rotate(0deg)rotateY(0deg)} 75% {top:10px;left:-15px;transform:rotate(1deg)rotateY(-5deg)} 100% {top:0px;left:0px;transform:rotate(0deg)rotateY(0deg)} } @keyframes wisp-anim-hover-tail { 0% {top:0px;transform:rotate(0deg)rotateY(0deg))} 25% {top:20px;left:30px;transform:rotate(20deg)rotateY(30deg)} 50% {top:0px;transform:rotate(0deg)rotateY(0deg)} 75% {top:-20px;left:5px;transform:rotate(-5deg)rotateY(-20deg)} 100% {top:0px;transform:rotate(0deg)rotateY(0deg)} } .cupid-head { animation:wisp-anim-hover-small 8s linear infinite alternate; position:absolute; transform:rotate(0deg); transition:0.7s; top:0px; left:0px; } .cupid:hover .cupid-head { transform:rotate(-30deg); opacity:1; top:10px; left:5px; } .cupid-pupils { animation:wisp-anim-hover-pupils 4s linear infinite alternate; position:absolute; opacity:1; top:0px; left:0px; transition:0.7s; } @keyframes wisp-anim-hover-pupils { 0% {top:0px;} 25% {top:-5px;left:2px} 50% {top:0px} 75% {top:-2px;left:5px} 100% {top:0px} } .cupid:hover .cupid-pupils { animation:wisp-anim-hover-pupils-special 0.37s linear infinite; transform:scale(0.96); opacity:1; top:-5px; left:5px; } @keyframes wisp-anim-hover-pupils-special { 0% {top:-5px;left:5px} 100% {top:-6px;left:6px} } @keyframes wisp-anim-hover-small { 0% {top:0px;} 25% {top:5px;left:2px} 50% {top:0px} 75% {top:5px;left:-2px} 100% {top:0px} } /** nox **/ .nox { transform:scale(1); transition:0.2s; left:0px; top:0px; } .nox:hover { transform:scale(1.1); left:50px; top:-50px; } .nox-back-left { animation:wisp-anim-hover-back-left 4s linear infinite alternate; transform:rotate(0deg); transition:0.6s; } .nox:hover .nox-back-left { transform:rotate(-10deg); opacity:1; } .nox-back-right { transform:rotate(0deg); transition:0.6s; left:0px; } .nox:hover .nox-back-right { animation-play-state:paused; transform:rotate(20deg); opacity:1; top:-2px; left:35px; } @keyframes wisp-anim-back-right { 0% {top:0px;} 25% {top:10px;left:2px;transform:rotate(-4deg)scaleY(1.1)} 50% {top:0px;transform:rotate(0deg)scaleY(1)} 75% {top:5px;left:-2px;transform:rotate(2deg)scaleX(1.05)} 100% {top:0px} } .nox-head { animation:wisp-anim-hover-small 8s linear infinite alternate; transition:1s; } .nox:hover .nox-head { transform:rotate(-10deg); opacity:1; } .nox-eye { transform:scaleY(0); opacity:0; transform-origin:50% 60%; transition:0.1s; } .nox:hover .nox-eye { animation:wisp-anim-hover-eye 3s linear infinite; transform:scaleY(1); opacity:1; } @keyframes wisp-anim-hover-eye { 0% {top:0px;} 25% {top:1px;left:1px} 50% {top:0px} 75% {top:1px;left:-1px} 100% {top:0px} } .nox:hover .nox-pupil { animation:wisp-anim-hover-pupil 3s linear infinite; transform:scale(0.7); opacity:1; } @keyframes wisp-anim-hover-pupil { 0% {top:3px;} 25% {top:1px;left:1px} 50% {top:5px} 75% {top:-1px;left:-1px} 100% {top:3px} } .nox-body { animation:wisp-anim-hover-body 3s linear infinite; transition:1s; transform-origin:bottom right; } @keyframes wisp-anim-hover-body { 0% {top:6px} 25% {left:1px;transform:rotate(-1deg)scaleY(.99)scaleX(1)} 50% {top:5px;;transform:rotate(0deg)scaleY(1)} 75% {top:6px;left:1px;transform:rotate(1deg)scaleY(.99)scaleX(1.02)} 100% {top:5px;transform:rotate(0deg)scaleY(1)scaleX(1)} } /** wisp **/ .wisp a { position:relative; text-decoration: none !important; color:rgba(202, 247, 238, 0.97); text-shadow:0px 1px 2px rgba(202, 247, 238, 0.97); transition:0.4s; top:0px; left:0px; } .wisp a:hover { text-shadow:2px 2px 10px rgba(202, 247, 238, 0.97), -2px -2px 10px rgba(202, 247, 238, 0.97); top:-1px; left:1px; } .wisp .cleanLink a { position:relative; text-decoration: none !important; color:rgba(202, 247, 238, 0.97); text-shadow:1px 1px #010316, -1px 1px #010316, 1px -1px #010316, -1px -1px #010316; transition:0.4s; top:0px; left:0px; } .wisp .cleanLink a:hover { text-shadow:1px 1px #010316, -1px 1px #010316, 1px -1px #010316, -1px -1px #010316; top:-1px; left:0px; } .wisp-icon-hover { animation:wisp-icon-hover 2s linear infinite; position:relative; top:0px; } @keyframes wisp-icon-hover { 0% {top:0px} 25% {top:-1px} 50% {top:0px} 75% {top:-1px} 100% {top:0px} } .wisp ul.tabbernav li a { background:linear-gradient(-60deg, #09859b, #045b77) !important; border:1px solid #00192A !important; font-family:requiem !important; padding:2px 12px !important; box-shadow:1px 1px 10px rgba(202, 247, 238, 0.9) !important; color:rgba(226, 255, 249, 0.9) !important; text-shadow:1px 1px 2px rgba(0,0,0,0.9) !important; font-size: 14.5px !important; cursor:default; text-decoration:none !important; font-weight:normal !important; } .wisp ul.tabbernav li:first-child a { border-top-left-radius: 2px; border-bottom-left-radius: 2px; text-decoration:none !important; } .wisp ul.tabbernav li:last-of-type a { border-top-right-radius: 2px; border-bottom-right-radius: 2px; text-decoration:none !important; } .wisp .tabberlive .tabbertab { border: none !important; background: transparent !important; padding:5px!important; text-decoration:none !important; } .wisp ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 3px 0 !important; text-align:center; margin: 0 0 -10px 0 !important; text-decoration:none !important; } .wisp ul.tabbernav li a:active { background:#025c7c !important; color:rgba(226, 255, 249, 0.7) !important; text-decoration:none !important; } .wisp ul.tabbernav li.tabberactive a { background:linear-gradient(160deg, #00192A, #045b77) !important; color:rgba(226, 255, 249, 0.95) !important; text-decoration:none !important; font-weight:normal !important; } .wisp ul.tabbernav li.tabberactive a:active { background:linear-gradient(#90BA55, #667A46) !important; text-decoration:none !important; font-weight:normal !important; } .reliq-head { animation:wisp-anim-hover-head 3s linear infinite alternate; } .reliq-tail { animation:wisp-anim-hover-tail-2 2.5s linear infinite alternate; transform-style: preserve-3d; transform-origin:bottom right; } @keyframes wisp-anim-hover-tail-2 { 0% {top:0px;left:0px;transform:rotate(0deg)rotateY(0deg))} 25% {top:20px;left:10px;transform:rotate(20deg)rotateY(30deg)} 50% {top:0px;transform:rotate(0deg)rotateY(0deg)} 75% {top:20px;left:5px;transform:rotate(5deg)rotateY(7deg)} 100%{top:0px;left:0px;transform:rotate(0deg)rotateY(0deg)} } @keyframes wisp-anim-hover-head { 0% {top:0px;transform:rotate(0deg)} 25% {top:5px;left:2px;transform:rotate(-5deg);} 50% {top:0px;transform:rotate(0deg)} 75% {top:5px;left:-2px;transform:rotate(5deg)} 100% {top:0px;transform:rotate(0deg)} } .wisp-simple ul.tabbernav li a {   background:none !important;    border:none !important;    font-family:requiem !important;    padding:0px 12px !important;    box-shadow:none !important;	color:rgba(226, 255, 249, 0.9) !important;    text-shadow:0px 1px 5px rgba(202, 247, 238, 0.97) !important;    font-size: 13px !important;    cursor:default;    text-decoration:none !important; font-weight:normal !important; } .wisp-simple .tabberlive .tabbertab { padding:0px!important; } .wisp-simple ul.tabbernav li a:active { background:none !important; color:white !important; text-decoration:none !important; } .wisp-simple ul.tabbernav li.tabberactive a { background:none !important; color:azure !important; text-decoration:none !important; font-weight:normal !important; } /**claire and ouray**/ .claire ul.tabbernav li a { background:none !important; font-family:times !important; color:#1a2a37 !important; text-shadow: none !important; font-size: 16px !important; font-weight:bold !important; } .claire ul.tabbernav li:first-child a { text-decoration:none !important; } .claire ul.tabbernav li.tabberactive a { background:none !important; color:#1a2a37 !important; text-decoration:none !important; font-weight:bold !important; } .ouraytabber ul.tabbernav li a { background:#5CCECF !important; font-family:Arial Rounded MT Bold !important; padding:15px 12px !important; color:#fff !important; font-size: 12pt !important; text-decoration:none !important; margin-bottom:20px !important; width:100% !important; } .ouraytabber ul.tabbernav li a:hover { color:#fff !important; background: #FFB3B7 !important; } .ouraytabber ul.tabbernav li:first-child a { text-decoration:none !important; } .ouraytabber ul.tabbernav li:last-of-type a { text-decoration:none !important; } .ouraytabber .tabberlive .tabbertab { border: none !important; background: transparent !important; padding:6px 5px 5px 5px !important; text-decoration:none !important; } .ouraytabber ul.tabbernav { background: transparent; padding: 20px 0 !important; text-align:center; margin: 0 0 -10px 0 !important; text-decoration:none !important; line-height:40px; } .ouraytabber ul.tabbernav li a:active { color:white !important; background:#FFB3B7 !important; } .ouraytabber ul.tabbernav li.tabberactive a { color:#fff !important; background:#FFB3B7 !important; text-decoration:none !important; } .ouraytabber ul.tabbernav li.tabberactive a:active { color:#fff !important; background:#FFB3B7 !important; text-decoration:none !important; } /**********************************************/ .bcglow { font-size: 60pt; color:#6F6FB2; text-align: center; -webkit-animation: glow 1.5s ease-in-out infinite alternate; -moz-animation: glow 1.5s ease-in-out infinite alternate; animation: glow 1.5s ease-in-out infinite alternate; } @-webkit-keyframes glow { from { text-shadow: 1px 1px 10px #DFC6BF, -1px 1px 10px #DFC6BF, -1px 1px 10px #DFC6BF, -1px -1px 10px #DFC6BF; } to { text-shadow: 1px 1px 20px #d3b5ad, -1px 1px 20px #d3b5ad, -1px 1px 20px #d3b5ad, -1px -1px 20px #d3b5ad; } } /** boreal **/ .boreal ul.tabbernav li a { background-image:linear-gradient(to bottom left, #30274f, #615392)!important; font-family:Requiem !important; color:#fff !important; text-shadow: none !important; font-size: 16px !important; font-weight:bold !important; text-transform:uppercase; padding:14px 50px !important; padding-bottom:10px !important; } .boreal ul.tabbernav li:first-child a { border-top-left-radius: 8px; border-bottom-left-radius: 8px; text-decoration:none !important; } .boreal ul.tabbernav li:last-of-type a { border-top-right-radius: 8px; border-bottom-right-radius: 8px; text-decoration:none !important; } .boreal ul.tabbernav li.tabberactive a { background:linear-gradient(#dec4df, #cabfdf) !important; color:#f9f9f9 !important; text-decoration:none !important; font-weight:bold !important; } .bcLink a { color:#000 !important; } .bcLink a:hover { text-decoration:none !important; color:#000 !important; text-shadow:3px 3px 8px rgba(103, 84, 147, 0.3), -3px 3px 8px rgba(103, 84, 147, 0.3), -3px 3px 8px rgba(103, 84, 147, 0.3), -3px -3px 8px rgba(6, 47, 96, 0.3), 2px 2px 57px rgba(6, 47, 96, 0.3), 2px -2px 57px rgba(6, 47, 96, 0.3), -2px 2px 57px rgba(6, 47, 96, 0.3), -2px -2px 57px rgba(6, 47, 96, 0.3) !important; } /*sage*/ .sage ul.tabbernav li a { background-image:linear-gradient(#a6da93, #759c67, #5c7c50)!important; font-family:EinsteinRomanOpti !important; color:#234924 !important; font-size: 15px !important; font-weight:bold !important; text-shadow: 0 0 5px #a9de95, 0 1px #a9de95, 1px 0 #a9de95, 0 -1px #a9de95 !important; border:1px solid #234924 !important; border-radius:5px !important; padding:4px !important; box-shadow:none !important; } .sage ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; text-decoration:none !important; } .sage ul.tabbernav li.tabberactive a { background:#A6DA93 !important; color:#234924 !important; font-weight:bold !important; text-decoration:none !important; } .sage ul.tabbernav li a:hover { color:#FFFFFF !important; transition:1.3s !important; position:relative !important; top:-1.2px !important; text-decoration:none !important; } .sage2 ul.tabbernav li a { background-image:linear-gradient(#2A582D, #113D13, #001101)!important; font-family:EinsteinRomanOpti !important; color:#001101 !important; font-size: 15px !important; font-weight:bold !important; text-shadow: 0 0 5px #507F53, 0 1px #507F53, 1px 0 #507F53, 0 -1px #507F53 !important; border:1px solid #001101 !important; border-radius:5px !important; padding:4px !important; box-shadow:none !important; } .sage2 ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; text-decoration:none !important; } .sage2 ul.tabbernav li.tabberactive a { background:#2A582D !important; color:#001101 !important; font-weight:bold !important; text-decoration:none !important; } .sage2 ul.tabbernav li a:hover { color:#000000 !important; transition:1.3s !important; position:relative !important; top:-1.2px !important; text-decoration:none !important; } /**************sc**************/ .sclink a { color:#8DB97D !important; position:relative; transition:1s; } .sclink a:hover { text-decoration:none !important; color:#8DB97D !important; text-shadow: 0 0 5px #EAFFE2 !important; top:-1px; } .scglow { color: #234924; text-align: center; -webkit-animation: sageglow 2s ease-in-out infinite alternate; -moz-animation: sageglow 2s ease-in-out infinite alternate; animation: sageglow 2s ease-in-out infinite alternate; text-shadow: 0 0 5px #a9de95, 0 1px #a9de95, 1px 0 #a9de95, 0 -1px #a9de95; } @-webkit-keyframes sageglow { from { text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #B4DAA8, 0 0 12px #B4DAA8, 0 0 18px #B4DAA8, 0 0 24px #B4DAA8, 0 0 30px #B4DAA8; } to { text-shadow: 0 0 6px #fff, 0 0 9px #CDECC3, 0 0 12px #CDECC3, 0 0 18px #CDECC3, 0 0 24px #CDECC3, 0 0 30px #CDECC3, 0 0 36px #CDECC3; } } .scanimation { animation:scanimation 2.5s linear infinite; position:relative; top:0px; } @keyframes scanimation { 0% {top:0px} 25% {top:2.5px} 50% {top:0px} 75% {top:-2.5px} 100% {top:0px} } /*********ash*********/ .ashglow { font-size: 60pt; color:#692f18; text-align: center; -webkit-animation: glow 1.5s ease-in-out infinite alternate; -moz-animation: glow 1.5s ease-in-out infinite alternate; animation: glow 1.5s ease-in-out infinite alternate; } @-webkit-keyframes glow { from { text-shadow: 1px 1px 10px #ffd9b8, -1px 1px 10px #ffd9b8, -1px 1px 10px #ffd9b8, -1px -1px 10px #ffd9b8; } to { text-shadow: 1px 1px 20px #ffd9b8, -1px 1px 20px #ffd9b8, -1px 1px 20px #ffd9b8, -1px -1px 20px #ffd9b8; } } .ashtabber ul.tabbernav li a { background-image:linear-gradient(to bottom left, #784018, #693815)!important; font-family:Requiem !important; color:#fff !important; text-shadow: none !important; font-size: 16px !important; font-weight:bold !important; text-transform:uppercase; padding:14px 50px !important; padding-bottom:10px !important; } .ashtabber ul.tabbernav li:first-child a { border-top-left-radius: 8px; border-bottom-left-radius: 8px; text-decoration:none !important; } .ashtabber ul.tabbernav li:last-of-type a { border-top-right-radius: 8px; border-bottom-right-radius: 8px; text-decoration:none !important; } .ashtabber ul.tabbernav li.tabberactive a { background:linear-gradient(#bd723c, #a36131) !important; color:#fff !important; text-decoration:none !important; font-weight:bold !important; } /***fs***/ .fshover { transition: transform .2s; } .fshover:hover { transform: scale(1.08); text-decoration:none; transition:1.1s; } .fsanimation { position:relative; top:0px; } .fsanimation:hover { animation:fsanimation 2.5s linear infinite; position:relative; top:0px; } @keyframes fsanimation { 0% {top:-1px;} 50% {top:2px;} 100% {top:-1px;} } .fsanimation2 { position:relative; top:0px; animation:fsanimation2 2.5s linear infinite; } @keyframes fsanimation2 { 0% {top:-2px;} 50% {top:4px;} 100% {top:-2px;} } .fsLink a { color: #696057; text-decoration:none; } .fsLink a:hover { color:#696057; text-decoration:none; } .fsbutton { transition:0.3s; position:relative; top:0px; left:0px; } .fsbutton:hover { left:4px; top:4px } /***lunar***/ .lunartab ul.tabbernav li a { background-image:linear-gradient(to bottom left, #30265A, #231b42)!important; font-family:firefly !important; color:#a792f4 !important; text-shadow: none !important; font-size: 19.5px !important; font-weight:bold !important; text-transform:uppercase; padding:20px 50px !important; padding-bottom:20px !important; } .lunartab ul.tabbernav li:first-child a { border-top-left-radius: 8px; border-bottom-left-radius: 8px; text-decoration:none !important; } .lunartab ul.tabbernav li:last-of-type a { border-top-right-radius: 8px; border-bottom-right-radius: 8px; text-decoration:none !important; } .lunartab ul.tabbernav li.tabberactive a { background:linear-gradient(#a792f4, #937fdb) !important; color:#30265A !important; text-decoration:none !important; font-weight:bold !important; } .lunarglow { animation: lunarglow 5s linear 0s infinite; box-shadow:5px 5px 15px #a792f4, -4px -5px 16px #a792f4, 5px -5px 15px #a792f4, -5px 5px 16px #a792f4; opacity:0.8; } @keyframes lunarglow { 0% {box-shadow:5px 5px 15px #a792f4, -5px -5px 15px #a792f4, 5px -5px 15px #a792f4, -5px 5px 15px #a792f4} 25% {box-shadow:5px 5px 30px #a792f4, -5px -5px 32px #a792f4, 5px -5px 30px #a792f4, -5px 5px 30px #a792f4} 50% {box-shadow:1px 1px 10px #a792f4, -1px -1px 10px #a792f4, 1px -1px 10px #a792f4, -1px 1px 10px #a792f4} 75% {box-shadow:5px 5px 32px #a792f4, -5px -5px 30px #a792f4, 5px -5px 30px #a792f4, -5px 5px 32px #a792f4} 100% {box-shadow:5px 5px 15px #a792f4, -5px -5px 15px #a792f4, 5px -5px 14px #a792f4, -5px 5px 14px #a792f4} } /**** LC *****/ .lcsimple ul.tabbernav li a { background-image:linear-gradient(to bottom left, #30265A, #231b42)!important; font-family:serif !important; color:#a792f4 !important; text-shadow: none !important; font-size: 16px !important; font-weight:bold !important; } .lcsimple ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; text-decoration:none !important; } .lcsimple ul.tabbernav li.tabberactive a { background:linear-gradient(#a792f4, #937fdb) !important; color:#30265A !important; text-decoration:none !important; font-weight:bold !important; } body.page-User_Ouray .WikiaArticle { position:relative; bottom:35px; } body.page-User_Ouray .WikiaUserPagesHeader .tabs { position:relative; z-index:10000; } body.page-User_CitrusFriend .WikiaArticle { position:relative; bottom:35px; } body.page-User_CitrusFriend .WikiaUserPagesHeader .tabs { position:relative; z-index:10000; } .waspfadein{ animation:waspfade 0.5s ease-in 1 forwards; position:relative; top:0px; opacity:0; } @keyframes waspfade { 0% {opacity:0;} 100% {opacity:1;} } .wfbutton { transition:0.3s; position:relative; top:0px; left:0px; } .wfbutton:hover { left:-4px; top:4px } /*****************************************/ /**removes the arrow on external links when the class is used**/ .external:after { display: none !important; } /*wiki tabbers*/ .wikitab1 ul.tabbernav li a { background-color:#131313 !important; font-family:Verdana !important; color:#FFFFFF !important; font-size: 14px !important; padding:3px 4px !important; box-shadow:none !important; text-shadow:none !important; } .wikitab1 ul.tabbernav li:first-child a { border-top-left-radius: 4px; border-bottom-left-radius: 4px; text-decoration:none !important; } .wikitab1 ul.tabbernav li:last-of-type a { border-top-right-radius: 4px; border-bottom-right-radius: 4px; text-decoration:none !important; } .wikitab1 ul.tabbernav li.tabberactive a { background:#000000 !important; color:#FFFFFF !important; text-decoration:none !important; } .wikitab1 ul.tabbernav li.tabberactive a:active { background:#000000 !important; color:#FFFFFF !important; text-decoration:none !important; } .wikitab1 ul.tabbernav li a:hover { background-color:#000000 !important; text-decoration:none !important; } /*Wiki tab 2*/ .wikitab2 ul.tabbernav li a { background-color:#FFFFFF !important; font-family:Georgia !important; color:#000000 !important; font-size: 16px !important; padding:3px 4px !important; box-shadow:none !important; text-shadow:none !important; } .wikitab2 ul.tabbernav li:first-child a { border-top-left-radius: 4px; border-bottom-left-radius: 4px; text-decoration:none !important; } .wikitab2 ul.tabbernav li:last-of-type a { border-top-right-radius: 4px; border-bottom-right-radius: 4px; text-decoration:none !important; } .wikitab2 ul.tabbernav li.tabberactive a { background:#F1F1F1 !important; color:#000000 !important; text-decoration:none !important; } .wikitab2 ul.tabbernav li.tabberactive a:active { background:#F1F1F1 !important; color:#000000 !important; text-decoration:none !important; } .wikitab2 ul.tabbernav li a:hover { background-color:#F1F1F1 !important; text-decoration:none !important; } /*wiki tab 3*/ .wikitab3 ul.tabbernav li a { background:#69A25B !important; font-family:varela round !important; color:#0F140E !important; font-size: 15px !important; padding:3px 4px !important; box-shadow:none !important; text-shadow:none !important; } .wikitab3 ul.tabbernav li:first-child a { border-top-left-radius: 5px; border-bottom-left-radius: 5px; text-decoration:none !important; } .wikitab3 ul.tabbernav li:last-of-type a { border-top-right-radius: 5px; border-bottom-right-radius: 5px; text-decoration:none !important; } .wikitab3 ul.tabbernav li.tabberactive a { background:#56854B !important; color:#050604 !important; text-decoration:none !important; } .wikitab3 ul.tabbernav li.tabberactive a:active { background:#56854B !important; color:#050604 !important; text-decoration:none !important; } .wikitab3 ul.tabbernav li a:hover { background-color:#56854B !important; color:#050604 !important; text-decoration:none !important; } /*wiki tab 4*/ .wikitab4 ul.tabbernav li a { background:#5D85A7 !important; font-family:Arial Rounded MT Bold !important; color:#17212A !important; font-size: 15px !important; padding:3px 4px !important; box-shadow:none !important; text-shadow:none !important; } .wikitab4 ul.tabbernav li:first-child a { border-top-left-radius: 5px; border-bottom-left-radius: 5px; text-decoration:none !important; } .wikitab4 ul.tabbernav li:last-of-type a { border-top-right-radius: 5px; border-bottom-right-radius: 5px; text-decoration:none !important; } .wikitab4 ul.tabbernav li.tabberactive a { background:#456581 !important; color:#17212A !important; text-decoration:none !important; } .wikitab4 ul.tabbernav li.tabberactive a:active { background:#456581 !important; color:#17212A !important; text-decoration:none !important; } .wikitab4 ul.tabbernav li a:hover { background-color:#456581 !important; color:#17212A !important; text-decoration:none !important; } /*wiki tab 5*/ .wikitab5 ul.tabbernav li a { background:#80588E !important; font-family:digital delivery !important; color:#FFFFFF !important; font-size: 15px !important; padding:3px 4px !important; box-shadow:none !important; text-shadow:none !important; } .wikitab5 ul.tabbernav li:first-child a { border-top-left-radius: 5px; border-bottom-left-radius: 5px; text-decoration:none !important; } .wikitab5 ul.tabbernav li:last-of-type a { border-top-right-radius: 5px; border-bottom-right-radius: 5px; text-decoration:none !important; } .wikitab5 ul.tabbernav li.tabberactive a { background:#63426E !important; color:#FFFFFF !important; text-decoration:none !important; } .wikitab5 ul.tabbernav li.tabberactive a:active { background:#63426E !important; color:#FFFFFF !important; text-decoration:none !important; } .wikitab5 ul.tabbernav li a:hover { background-color:#63426E !important; color:#FFFFFF !important; text-decoration:none !important; } /*wiki tab 6*/ .wikitab6 ul.tabbernav li a { background:#9C2323 !important; font-family:EinsteinRomanOpti !important; color:#FFFFFF !important; font-size: 16px !important; padding:3px 4px !important; box-shadow:none !important; text-shadow:none !important; } .wikitab6 ul.tabbernav li:first-child a { border-top-left-radius: 5px; border-bottom-left-radius: 5px; text-decoration:none !important; } .wikitab6 ul.tabbernav li:last-of-type a { border-top-right-radius: 5px; border-bottom-right-radius: 5px; text-decoration:none !important; } .wikitab6 ul.tabbernav li.tabberactive a { background:#801D1D !important; color:#FFFFFF !important; text-decoration:none !important; } .wikitab6 ul.tabbernav li.tabberactive a:active { background:#801D1D !important; color:#FFFFFF !important; text-decoration:none !important; } .wikitab6 ul.tabbernav li a:hover { background-color:#801D1D !important; color:#FFFFFF !important; text-decoration:none !important; } /*******************************************************/ /** SPECIAL CSS ANIMATION CLASS ACTIONS **/ /* enlarge on hover */ .zoom { transition: transform .2s; /* Animation */ } .zoom:hover { transform: scale(1.2); /* (120% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ } /* move to the left */ .shiftLeft { transition: all 1.0s ease-out; } .shiftLeft:hover { transform: translateX(260px); } /* hides an object's overflow until it is hovered over */ .revealOverflow { overflow:hidden; transition: all 1.0s ease-out; } .revealOverflow:hover { overflow:visible; transition: all 1.0s ease-out; } /* makes text scroll from bottom to top */ .scroll-down { height: 50px; overflow: hidden; position: relative; } .scroll div { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateY(100%); -webkit-transform:translateY(100%); transform:translateY(100%); /* Apply animation to this element */ -moz-animation: scroll-down 30s linear infinite; -webkit-animation: scroll-down 30s linear infinite; animation: scroll-down 30s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes scroll-down { 0% { -moz-transform: translateY(100%); } 100% { -moz-transform: translateY(-100%); } } @-webkit-keyframes scroll-down { 0% { -webkit-transform: translateY(100%); } 100% { -webkit-transform: translateY(-100%); } } @keyframes scroll-down { 0% { -moz-transform: translateY(100%); /* Browser bug fix */ -webkit-transform: translateY(100%); /* Browser bug fix */ transform: translateY(100%); } 100% { -moz-transform: translateY(-100%); /* Browser bug fix */ -webkit-transform: translateY(-100%); /* Browser bug fix */ transform: translateY(-100%); } } /** Saturates text by applying an opaque white background over the section, hides background upon hover **/ .saturate { position:absolute; background: white; opacity:0.5; } .saturate:hover { display:none; } /** Hover over set-appear by assigning it with the id value for any text under the appear class to appear **/ .set-appear:hover .appear { display: block; } .appear { display:none; }
 * hover .tada {

display:block; } .tada { display:none; }

.spin { animation-name: spin; animation-duration: 5000ms; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes spin { from { transform:rotate(0deg); }   to { transform:rotate(360deg); } } /** Animates something back and forth **/ .backnforth { x-transition: all 1s ease-in-out; animation: bnf 1.7s infinite; } @keyframes bnf { 0% {   left: 0; } 50% {    left: 530px; } 100% {    left: 0; } } /* New Mainpage Boxes */ line-height: 22px; margin: 0; padding-left: 25px; } .mp-color { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #9B78B0; padding: 4px 10px; margin-top: 10px; margin-bottom: 15px; -webkit-box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.07); -moz-box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.07); box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.07); border-top: 10px solid #9B78B0; border-bottom: 10px solid #9B78B0; color: #ffffff; } .mp-color .mp-content { margin: 10px 0; } /* Old Mainpage Boxes */ .mainpage-box { padding: 30px; margin: 15px 0px; color: #ffffff; } .polygonPink1 { background-image: url("https://vignette.wikia.nocookie.net/fortnite/images/6/67/Fortnite_polygon1.svg/revision/latest?cb=20171124174231") ! important; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; } .polygonPink2 { background-image: url("https://vignette.wikia.nocookie.net/fortnite/images/4/4a/Fortnite_polygon2.svg/revision/latest?cb=20171124174337") ! important; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; } /* Mainpage Navigation */ .imgUnder { overflow: visible; display: inline-block; position: relative; } .imgOver { display: block; visibility: hidden; width: inherit; height: inherit; overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .imgUnder:hover .imgOver { visibility: visible !important; } /* default settings for div table */ .divTable{ display: table; } .divTableRow { display: table-row; } .divTableCell, .divTableHead { display: table-cell; padding: 10px; } .divTableBody { display: table-row-group; } /* T A B B E R */ .tabber{ size: 9px!important; padding:0px; color: white; border: rgba(0,0,0,0.3); } .tabber a{   padding:0px; color: white; border: rgba(0,0,0,0.3); } .tabberlive { /* tabber wrapper style */ padding:0px; color: white; border: rgba(0,0,0,0.3); } .tabberlive > .tabbertab:not(.tabbertabhide) { /* tabber visible content */ padding:0px; color: white; border: rgba(0,0,0,0.3); } .tabberlive > .tabbernav > li > a { /* tabber tabs */ background: rgba(0,0,0,0.3); color: white; border: rgba(0,0,0,0.3); } .tabberlive > .tabbernav > li.tabber > a:hover { /* tabber tabs when being hovered */ background:#1e1e1e; color: white; border: rgba(0,0,0,0.3); } .tabberlive > .tabbernav > li > a:hover { /* tabber tabs when being hovered */ background:#1e1e1e; color: white; border: rgba(0,0,0,0.3); } .tabberlive > .tabbernav > li > a:active { /* tabber tabs when being clicked */ background:#1e1e1e; color: white; /*   padding:0px;*/ border: rgba(0,0,0,0.3); } .tabberlive > .tabbernav > li.tabberactive > a { /* selected tabber tab */ background: rgba(0,0,0,0.5); /*    margin-bottom: 10px!important;*/ color: white; border: rgba(0,0,0,0.3); } .tabberlive > .tabbernav > li.tabberactive > a:hover { /* selected tabber tab when being hovered */ background: rgba(0,0,0,0.3); color: white; border: rgba(0,0,0,0.3); } .tabberlive > .tabbernav > li.tabberactive > a:active { /* selected tabber tab when being clicked */ background: rgba(0,0,0,0.3); color: white; border: rgba(0,0,0,0.3); } ul.tabbernav li a { font-family: inherit; color: #b0b0b0 !important; font-weight: normal !important; text-shadow: 1px 1px 7px #b0b0b0 !important; } ul.tabbernav li.tabberactive a { font-weight: normal !important; color: white !important; } /***************************************************/
 * 1) mp-contents .mp-content {