User:BF10/global.css

@import url('//dev.wikia.com/load.php?mode=articles&articles=u:dev:MediaWiki:ClassicCommunityCentralTheme/code.css&only=styles');

/* ================  Navigational "bounce" effect ================ */ /* Adapted from User:CzechOut from w:c:kateprice. Credit to Spongebob Wiki */ .bounceme { position:relative; float:left; width:300px; height:200px; margin:10px; overflow:hidden; text-align:left; -webkit-box-shadow:1px 1px 2px #e6e6e6; -moz-box-shadow:1px 1px 2px #e6e6e6; box-shadow:1px 1px 2px #e6e6e6; background-color:#f5f5f5; } .bounceme img { width:auto; height:200px; } .bounceme .info { position:absolute; top:-220px; width:300px; height:200px; overflow:hidden; background-color:rgba(254,204,32,0.98); } .bounceme .info #heading { display:block; text-decoration:none; color:white; text-transform:uppercase; text-align: center; font-size: 11pt; padding: 6px; background: rgba(0, 0, 0, 0.6); margin: 20px 0 0 0; border-top:2px solid white; border-bottom:2px solid white; } .bounceme .info #text { font-size: 10pt; position: relative; color: black; padding: 5px; text-align: center; } .bounceme .info #button { text-decoration:none; font-size: 10pt; color: white; padding:0px 3px; text-align: center; background: rgba(0, 0, 0, 0.6); margin:0 auto; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; -icab-border-radius:5px; -o-border-radius:5px; white-space:nowrap; } .bounceme:hover .info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; top: 0px; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; -webkit-animation: bounceY 0.7s linear; -moz-animation: bounceY 0.7s linear; -ms-animation: bounceY 0.7s linear; animation: bounceY 0.7s linear; }

@-moz-keyframes bounceY { 0% { -moz-transform: translateY(-205px);} 40% { -moz-transform: translateY(-100px);} 65% { -moz-transform: translateY(-52px);} 82% { -moz-transform: translateY(-25px);} 92% { -moz-transform: translateY(-12px);} 55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);} } @-webkit-keyframes bounceY { 0% { -webkit-transform: translateY(-205px);} 40% { -webkit-transform: translateY(-100px);} 65% { -webkit-transform: translateY(-52px);} 82% { -webkit-transform: translateY(-25px);} 92% { -webkit-transform: translateY(-12px);} 55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);} } @keyframes bounceY { 0% { transform: translateY(-205px);} 40% { transform: translateY(-100px);} 65% { transform: translateY(-52px);} 82% { transform: translateY(-25px);} 92% { transform: translateY(-12px);} 55%, 75%, 87%, 97%, 100% { transform: translateY(0px);} }