MediaWiki:Common.css

/***** CSS placed here will be applied to all skins on the entire site. *****/

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

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

@font-face { font-family: 'RiskofRainFont'; font-style: normal; font-weight: normal; src:	url('http://img2.wikia.nocookie.net/__cb20141031081405/risk-of-rain/images/4/4a/RiskofRainFont.eot') format('embedded-opentype'), local("RiskofRainFont"), url('http://img1.wikia.nocookie.net/__cb20141031081417/risk-of-rain/images/7/70/RiskofRainFont.woff') format('woff'), url('http://img4.wikia.nocookie.net/__cb20141031081340/risk-of-rain/images/d/dd/RiskofRainFont.ttf') format('ttf'); }

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

/* ============================      H1 Formatting ============================ */ h1 { font-family: "RiskofRainSquare"; }

/* ============================      Cross-browser Compatability for aligning using margin ============================ */

body { margin: 0; }

/* ============================      Main Page Welcome Background Image ============================ */ .mainPageWelcomeLogo { background-image:url("http://img2.wikia.nocookie.net/__cb20140731003638/risk-of-rain/images/b/b7/Falling_spaceship.png"); background-repeat:no-repeat; background-size:contain; } /* ============================      Custom Border Image ============================ */

.customBorder { border: 22px solid #373842; border-left-color: #615452; border-right-color: #31323B; border-bottom-color: #373842; border-top-color: #373842; margin:0 auto; padding: 0; -webkit-border-image: url("http://img3.wikia.nocookie.net/__cb20140731014119/risk-of-rain/images/5/55/Risk_of_Rain_Wiki_Header_Border.png") 22 22 repeat; /* Safari */ -o-border-image: url("http://img3.wikia.nocookie.net/__cb20140731014119/risk-of-rain/images/5/55/Risk_of_Rain_Wiki_Header_Border.png") 22 22 repeat; /* Opera */ border-image: url("http://img3.wikia.nocookie.net/__cb20140731014119/risk-of-rain/images/5/55/Risk_of_Rain_Wiki_Header_Border.png") 22 22 repeat; background-color: #2E2C32; background-clip:padding-box; }

/* ============================      CharacterSelectModule background image ============================ */ .characterSelectModule { background-image: url("http://img1.wikia.nocookie.net/__cb20140201161721/risk-of-rain/images/1/19/Locker.png"); background-repeat: repeat; }

/* ============================      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; z-index:1; }

.ArmsRaceDroneUpgrade > img { position:absolute; left:79%; bottom:44%; 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; }

/* ============================      Hidden Mobile Elements ============================ */  .mobile-only { display: none; } /* ============================      Achievement Leaderboard Medal Font Color ============================ */  .bronze {      color:#804000; }  .silver {      color:#696969; }  .gold {      color:#B8860B; } /* Main CSS class of the tooltip */ .main-tooltip { border: 9px double rgba(0, 0, 0, .8) !important; background-clip: padding-box; padding: 2px 5px; background-color: rgba(0, 0, 0, .8); font-family:'RiskofRainFont'; } /* ============================      Portable Infobox Themes ============================ */ .portable-infobox.pi-theme-item { background:#6A7D84; background-image: -moz-linear-gradient(left, #2c2d3e 0%, #2c2d3e 5%, #3a404e 5%, #3a404e 20%, #3a404e 20%, #4a575c 20%, #4a575c 80%, #3a404e 80%, #3a404e 80%, #3a404e 95%, #2c2d3e 95%, #2c2d3e 100%); /* FF3.6+ */ background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,#2c2d3e), color-stop(5%,#2c2d3e), color-stop(5%,#3a404e), color-stop(20%,#3a404e), color-stop(20%,#3a404e), color-stop(20%,#4a575c), color-stop(80%,#4a575c), color-stop(80%,#3a404e), color-stop(80%,#3a404e), color-stop(95%,#3a404e), color-stop(95%,#2c2d3e), color-stop(100%,#2c2d3e)); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(left, #2c2d3e 0%,#2c2d3e 5%,#3a404e 5%,#3a404e 20%,#3a404e 20%,#4a575c 20%,#4a575c 80%,#3a404e 80%,#3a404e 80%,#3a404e 95%,#2c2d3e 95%,#2c2d3e 100%); /* Chrome10+,Safari5.1+ */ background-image: -o-linear-gradient(left, #2c2d3e 0%,#2c2d3e 5%,#3a404e 5%,#3a404e 20%,#3a404e 20%,#4a575c 20%,#4a575c 80%,#3a404e 80%,#3a404e 80%,#3a404e 95%,#2c2d3e 95%,#2c2d3e 100%); /* Opera 11.10+ */ background-image: -ms-linear-gradient(left, #2c2d3e 0%,#2c2d3e 5%,#3a404e 5%,#3a404e 20%,#3a404e 20%,#4a575c 20%,#4a575c 80%,#3a404e 80%,#3a404e 80%,#3a404e 95%,#2c2d3e 95%,#2c2d3e 100%); /* IE10+ */ background-image: linear-gradient(to right, #2c2d3e 0%,#2c2d3e 5%,#3a404e 5%,#3a404e 20%,#3a404e 20%,#4a575c 20%,#4a575c 80%,#3a404e 80%,#3a404e 80%,#3a404e 95%,#2c2d3e 95%,#2c2d3e 100%); /* W3C */ border-color:#6A7D84 #302E39 #302E39 #302E39; border-style:solid; border-width:0px 10px medium 10px; border-radius: 70px 70px 5px 5px; color:white; } /* Adds padding to the wrapper to make space for a shadow */ padding: 3px 7px 2px 3px; } /* Hides tooltips with redlinks, not yet loaded ones and elements containing tooltip contents for advanced tooltips */ .has-redlinks, .tooltip-loading, .advanced-tooltip .tooltip-contents { display: none; } .tooltips-init-complete { cursor: help; } /* Mark redirects in Special:Allpages and Special:Watchlist */ .allpagesredirect { font-style: italic; } .allpagesredirect:after { color: #808080; content: " (redirect)" } .watchlistredir { font-style: italic; }
 * 1) tooltip-wrapper {