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("RiskofRainSquare"), 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'); }

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

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

/* ============================      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; } /* ============================      Header Border Image ============================ */

.customHeader { border: 22px solid transparent; margin:0 auto; padding: 0; min-width: 256px; max-width: 1227px; width: 85.33333333333333%; width: -webkit-calc(100% - 44px); width: -moz-calc(100% - 44px); width: calc(100% - 44px); text-align:center; -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; }

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

/* ============================      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; }