User:StealingTime!/global.css/NavigationButton.css

.navigation-button { position: relative; border: 2px solid black; background: rgb(166, 75, 6); -webkit-box-shadow:2px 2px 10px 0px black; -moz-box-shadow:2px 2px 10px 0px black; box-shadow:2px 2px 10px 0px black; -webkit-border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .navigation-caption { position: absolute; top: 15px; top: -o-calc(10%); top: -moz-calc(10%); top: -webkit-calc(10%); top: calc(10%); width: 95%; width: -o-calc(100% - 10px); width: -moz-calc(100% - 10px); width: -webkit-calc(100% - 10px); width: calc(100% - 10px); left: 5px; text-align: center; font-family: ClashofClans, Verdana, Arial, Helvetica, sans-serif; font-weight: bold; padding: 1px; background: rgba(255, 255, 255, 0.5); background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.5)), color-stop(50%, rgba(255,255,255,0.75)), color-stop(75%, rgba(255,255,255,0.5)), color-stop(100%, rgba(255,255,255,0))); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0) 100%); background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0) 100%); z-index: 20; color: white; text-shadow: 0px -2px #000, 2px -2px #000, 2px 0px #000, 2px 2px #000, 0px 2px #000, -2px 2px #000, -2px 0px #000, -2px -2px #000, 2px 4px #000, 4px 4px #000, 4px 2px #000; } .navigation-image img { position: relative; -o-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 3px solid white; } .navigation-overlay img, .navigation-overlay-nonav img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 99; opacity: 0.5; filter: alpha(opacity=50); } .navigation-overlay img:hover, .navigation-overlay-nonav img { opacity: 0.0; filter: alpha(opacity=0); } .navigation-background { position: absolute; width: 95%; width: -o-calc(100% - 10px); width: -moz-calc(100% - 10px); width: -webkit-calc(100% - 10px); width: calc(100% - 10px); height: 50%; top: 0px; left: 5px; background: rgb(255, 153, 51); color: rgb(255, 153, 51); -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }