MediaWiki:Common.css

/* ============================      Font Styling ============================ */

@font-face { font-family: 'RiskofRainSquare'; font-style: normal; font-weight: normal; src:	url('http://img1.wikia.nocookie.net/__cb20140629035051/risk-of-rain/images/8/84/RiskofRainSquare.eot?') format('embedded-opentype'), local("RiskofRain Square"), url('http://img2.wikia.nocookie.net/__cb20140629035051/risk-of-rain/images/4/45/RiskofRainSquare.woff') format('woff'), url('http://img3.wikia.nocookie.net/__cb20140629035051/risk-of-rain/images/e/e3/RiskofRainSquare.ttf') format('ttf'); }

.Unicode { font-family: "Arial Unicode MS", "Lucida Sans Unicode"; }

/* ============================      Item Portraits ============================ */

.itemPortrait { background: black; border: 3px solid #646673; /* overflow: hidden; */ width: 93px; height: 93px; text-align: center; } .itemPortrait > span { display: block; margin-left: calc(-1 *((100% - 93px)/2)); -webkit-transform:translateY(-3px) translateX(-3px); /* Saf3.1+, Chrome */ -moz-transform:translateY(-3px) translateX(-3px); /* FF3.5+ */ -ms-transform:translateY(-3px) translateX(-3px); /* IE 9 */ -o-transform:translateY(-3px) translateX(-3px); /* Opera 10.5+ */ transform:translateY(-3px) translateX(-3px);

} .itemPortrait > span > a > img { display: inline-block; vertical-align:middle; }

/* ============================      Drone Infobox Hovering Animation ============================ */

.DroneHover { width:100px; position:relative; /* Safari and Chrome: */ -webkit-animation:DroneHoverAnimation .525s ease-in-out infinite alternate; /* Saf3.1+, Chrome */ -moz-animation:DroneHoverAnimation .525s ease-in-out infinite alternate; /* FF3.5+ */ -ms-animation:DroneHoverAnimation .525s ease-in-out infinite alternate; /* IE 9 */ -o-animation:DroneHoverAnimation .525s ease-in-out infinite alternate; /* Opera 10.5+ */ animation:DroneHoverAnimation .525s ease-in-out infinite alternate; }

@keyframes DroneHoverAnimation { 0%  {top:-7px;} 100% {top:7px;} }

@-webkit-keyframes DroneHoverAnimation /* Safari and Chrome */ { 0%  {top:-7px;} 100% {top:7px;} }

/* ============================      Arms Race Visual (Shows Drone Upgrade) ============================ */ .DroneHover > a > img { position:relative; left:0px; top:6px; z-index:1; }

.ArmsRaceDroneUpgrade > img { position:absolute; left:79%; bottom:39%; z-index:0; margin-top: -48px; margin-left: -48px; }

/** * Switch Infobox -- Allows multiple infoboxes to be seamlessly switched. * Required template: http://runescape.wikia.com/wiki/Template:Switch_infobox * Required script: http://runescape.wikia.com/wiki/User:Matthew2602/SwitchInfobox.js */ /* Fixes a weird bug with the MW parser that creates lots of blank paragraphs */ .switch-infobox > p, .switch-infobox-triggers > p { display: none; } .switch-infobox > p:first-child, .switch-infobox-triggers > p:first-child { display: block; } /* Only show the item that the user has toggled to */ .switch-infobox > .item { display: none; } .switch-infobox > .item.showing { display: block; } /* Only show the loading button if the switch infobox is still loading */ .switch-infobox > .loading-button { display: none; } .switch-infobox.loading > .loading-button { display: inline-block; } /* Only show the switch triggers if the switch infobox is finished loading */ .switch-infobox.loading > .switch-infobox-triggers { display: none; } /* Slight style changes to the switch triggers */ .infobox .switch-infobox-triggers { text-align: center; font-weight: normal; margin-bottom: -5px; } /** * Gives a nice custom style to .button's used in the switch infobox in monobook, * because the current one doesn't fit in with * the appearance of the rest of the page. .skin-monobook .switch-infobox > .loading-button, .skin-monobook .switch-infobox-triggers > .trigger { padding: 0 4px; border: 1px solid #666; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(50%, #c8c8c8)); background: -webkit-linear-gradient(top, #e6e6e6, #c8c8c8 50%); background: -moz-linear-gradient(top, #e6e6e6, #c8c8c8 50%); background: -ms-linear-gradient(top, #e6e6e6, #c8c8c8 50%); background: linear-gradient(top, #e6e6e6, #c8c8c8 50%); border-radius: 5px; color: #000; font-family: inherit; font-weight: inherit; font-size: inherit; } /* Stops button titles splitting with multiple words */ .trigger.button { white-space: pre; }