MediaWiki:Common.css

/* ######################################################################## */ /* ### CSS placed here will be applied to all skins on the entire site. ### */ /* ### See also: MediaWiki:Monobook.css & MediaWiki:Wikia.css  ### */ /* ######################################################################## */

/* Styles for champion square sprite sheet. For maintainability, keep this as an import. */ /* @import url("http://leagueoflegends.wikia.com/index.php?title=MediaWiki:Champion-square.css&action=raw&ctype=text/css&templates=expand"); */

/* Hide from view, but allows screen readers to read. */ .hide { position: absolute !important; top: -9999px !important; left: -9999px !important; }

.WikiaPageHeader { margin-bottom: 12px; }

.wikia-photogallery-add { display: none !important; }

/* Image frames and captions. */ .WikiaArticle .thumbinner { background: inherit; border: none; }

.wikia-slideshow-images li img { border: none; }

body.ltr .thumbcaption { padding: .4em .75em; background: #101011; border-radius: 0 0 3px 3px; font-size: 85%; line-height: 1.35; }

body.ltr .magnify { margin-right: .5em; }

/* Give [[Media:]] file links a special icon */ a[href$=".mp3"].internal { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAAgUlEQVR4XpXRrQoCURBH8ftqPofBto9gFTTbTMJi2LxFNIogxsVqtaxNNNhEfsLlFtEy4fAPcxjmI+GLybqXqg5+av/EzPVBf2e0YtzyehchU0TkrI8Ma25PBnO6Cyl3KkCR5WhoTyz2TDdFBvzIywOzLbszVROSQ2MEFwydLvSUD8SWU67UN2OFAAAAAElFTkSuQmCC") no-repeat scroll right center transparent; padding-right: 13px; }

/* Make tags not increase line height */ .reference { line-height: 1em; }

/* Smaller text for tag */ ol.references { font-size: 11px; line-height: 16px; }

/* Disambiguation style table */ table.disambig { clear: both; margin: 0.9em 1em; border-top: 1px solid #555; border-bottom: 1px solid #555; background: transparent; }

/* Infobox template style */ .infobox { border: 1px solid #aaaaaa; background-color: #f9f9f9; margin-bottom: 0.5em; margin-left: 1em; padding: 0.5em; float: right; clear: right; } .infobox td, .infobox th { vertical-align: top; } .infobox caption { font-size: larger; margin-left: inherit; } .infobox.bordered { border-collapse: collapse; } .infobox.bordered td, .infobox.bordered th { border: 1px solid #aaaaaa; } .infobox.bordered .borderless td, .infobox.bordered .borderless th { border: 0; }

/* Abilities template/table style */

border-collapse: collapse; width: 100%; }
 * 1) abilities_table2 {

border: 1px solid #B2B2B2; padding: 5px; border-top-width: 2px; }
 * 1) abilities_table2 td, #abilities_table2 th {

border-width: 1px; }
 * 1) abilities_table2 .ability.innate_ability td {

text-align:center; font-size:11px; border-width: 2px 1px; }
 * 1) abilities_table2 .ability_header {

height: 80px; text-align: center; width: 100px; }
 * 1) abilities_table2 .abilityname {

width: 64px; height: 64px; }
 * 1) abilities_table2 .abilityname img {

font-size: 89%; }
 * 1) abilities_table2 .abilitylevel {

border-top-style: hidden; padding-top: 15px; }
 * 1) abilities_table2 .secondary > * {

background-color: #00004E; }
 * 1) abilities_table2 .innate_ability .abilityinfo, #abilities_table2 .innate_ability .abilitylevel {

background-color: #446CB3; }
 * 1) abilities_table2 .ultimate_ability .abilityinfo, #abilities_table2 .ultimate_ability .abilitylevel {

height: 54px; width: 54px; } padding-left: 20px; width: 85px; }
 * 1) abilities_table2 .subeffect .abilityname img {
 * 1) abilities_table2 .subeffect .abilityname {

/* Dablinks */ .dablink { font-style: italic; padding-left: 2em; margin-bottom: 0.5em; }

/* Ambox styling */ .ambox { font-size: 95%; width: 80%; margin: 0 auto; border: 1px #AAA solid; border-left: 10px solid #bba; border-collapse: collapse; background-color: transparent; } table.ambox + table.ambox {     /* Single border between stacked boxes. */   margin-top: -1px; } .ambox-blue { border-left: 10px solid #0000FF;      /* Blue (notice) */ } .ambox-red { border-left: 10px solid #b22222;      /* Red (delete/serious) */ } .ambox-orange { border-left: 10px solid #f28500;      /* Orange (content) */ } .ambox-yellow { border-left: 10px solid #f4c430;      /* Yellow (style) */ } .ambox-purple { border-left: 10px solid #9932cc;      /* Purple (merge) */ } .ambox-gray { border-left: 10px solid #cccccc;         /* Gray (protection) */ } .ambox-green { border-left: 10px solid #228b22;      /* Green */ } .ambox-image {                          /* The left image cell */ width: 60px; padding: 2px 0px 2px 0.5em;           /* 0.5em left, 0px right */ text-align: center; } .ambox-info { padding: 0.25em 0.5em; }

/* Mbox styling */ th.mbox-text, td.mbox-text {  /* The message body cell(s) */ border: none; padding: 0.25em 0.9em;    /* 0.9em left/right */ width: 100%;              /* Make all mboxes the same width regardless of text length */ } td.mbox-image {               /* The left image cell */ border: none; padding: 2px 0 2px 0.9em; /* 0.9em left, 0px right */ text-align: center; } td.mbox-imageright {          /* The right image cell */ border: none; padding: 2px 0.9em 2px 0; /* 0px left, 0.9em right */ text-align: center; } td.mbox-empty-cell {          /* An empty narrow cell */ border: none; padding: 0px; width: 1px; }

table.ombox { margin: 4px 10%; border-collapse: collapse; border: 1px solid #cccccc;      /* Default "notice" gray */ background: transparent; }

table.ombox-notice { border: 1px solid #cccccc;      /* Gray */ } table.ombox-speedy { border: 2px solid #b22222;   /* Red */ background: #fee;            /* Pink */ } table.ombox-delete { border: 2px solid #b22222;   /* Red */ } table.ombox-content { border: 1px solid #f28500;   /* Orange */ } table.ombox-style { border: 1px solid #f4c430;   /* Yellow */ } table.ombox-style { border: 1px solid #4aa02c;   /* Green */ } table.ombox-style { border: 1px solid #0000FF;   /* Blue */ } table.ombox-move { border: 1px solid #9932cc;   /* Purple */ } table.ombox-protection { border: 2px solid #bba;      /* Gray-gold */ }

/* These mbox-small classes must be placed after all other ambox/tmbox/ombox etc classes. "body.mediawiki" is so   they override "table.ambox + table.ambox" above. */ body.mediawiki table.mbox-small {  /* For the "small=yes" option. */   clear: right; float: right; margin: 4px 0 4px 1em; width: 238px; font-size: 88%; line-height: 1.25em; } body.mediawiki table.mbox-small-left {  /* For the "small=left" option. */   margin: 4px 1em 4px 0; width: 238px; border-collapse: collapse; font-size: 88%; line-height: 1.25em; }

/* Standard Navigationsleisten, aka box hiding thingy from .de. Documentation at NavFrame. */ div.NavFrame { margin: 0; padding: 4px; border: 1px solid #aaa; text-align: center; border-collapse: collapse; font-size: 95%; } div.NavFrame + div.NavFrame { border-top-style: none; border-top-style: hidden; } div.NavPic { background-color: #fff; margin: 0; padding: 2px; /* @noflip */ float: left; } div.NavFrame div.NavHead { height: 1.6em; font-weight: bold; background-color: #ccf; position: relative; } div.NavFrame p, div.NavFrame div.NavContent, div.NavFrame div.NavContent p { font-size: 100%; } div.NavEnd { margin: 0; padding: 0; line-height: 1px; clear: both; } a.NavToggle { position: absolute; top: 0; /* @noflip */ right: 3px; font-weight: normal; font-size: 90%; }

/* Styling for permission requests */ .permission-request { width: 100%; border:1px solid #ECFCF4; margin-top: 5px; padding: 5px }

/* Show achievement points in a darker color */ color:#000000; }
 * 1) about-achievements span {

/* Forum formatting (by -Algorithm & -Splaka) */ .forumheader { border: 1px solid #aaa; margin-top: 1em; padding: 12px; } .forumlist td.forum_title a { padding-left: 20px; } .forumlist td.forum_title a.forum_new { font-weight: bold; background: url(/images/4/4e/Forum_new.gif) center left no-repeat; padding-left: 20px; } .forumlist td.forum_title a.forum_new:visited { font-weight: normal; background: none; padding-left: 20px; } .forumlist th.forum_title { padding-left: 20px; }

/* Recent changes byte indicators */ .mw-plusminus-pos { color: #006500; } .mw-plusminus-neg { color: #8B0000; }

/* Image frame fix */ div.tright, div.tleft { border: 1px solid silver; }

div.thumbinner { background: inherit; border: none; color: inherit; }  color:inherit; }
 * 1) article div.thumb {

/* Permit full width layout for subpages of main page. */ body[class*="page-League_of_Legends_Wiki_"] #WikiaMainContent { width: inherit; } body[class*="page-League_of_Legends_Wiki_"] #WikiaRail { display: none; } body[class*="page-League_of_Legends_Wiki_"] #wikiPreview { margin-right: 0; }

/* Tooltips */

.htt .tooltip-content .tooltip-hide, .hidden { display:none; }

.tooltip-ready { visibility:hidden; display:block; z-index:999; }

/* === Babel === */

div.babelbox { float: right; margin-left: 1em; margin-bottom: 0.5em; width: 246px; border: 1px solid #99B3FF; padding: 2px 0 2px 0; } .lang-blockN, .lang-block0, .lang-block1, .lang-block2, .lang-block3 { margin: 2px 4px 2px 4px; /* t, l, b, r */ width:238px; border-collapse: collapse; } td.lang-codeN, td.lang-code0, td.lang-code1, td.lang-code2, td.lang-code3 { text-align:center; font-size:14pt; width:45px; height:45px; } td.lang-descriptionN, td.lang-description0, td.lang-description1, td.lang-description2, td.lang-description3 { font-size:8pt; padding:4pt; line-height:1.25em; }

.lang-block0 { border:1px solid #FFB3B3; } td.lang-code0 { background-color: #FFB3B3; color: black; } td.lang-description0 { background-color: #FFE0E8; color: black; }

.lang-block1, .lang-block2, .lang-block3  { border:1px solid #99B3FF; } td.lang-code1, td.lang-code2, td.lang-code3 { background-color: #99B3FF; color: black; } td.lang-description1, td.lang-description2, td.lang-description3 { background-color: #E0E8FF; color: black; }

.lang-blockN { border:1px solid #6EF7A7; } td.lang-codeN { background-color: #6EF7A7; color: black; } td.lang-descriptionN { background-color: #C5FCDC; color: black; }

/*********************************** * New main page prototype styles. * ***********************************/ ..mainpage #left { padding: 1em; background: #333; border-radius: 4px; }

/* Welcome. */ .mainpage #welcome { overflow: hidden; padding: 1em; background: #222; box-shadow: 0 0 4px #444; border-radius: 64px; line-height: 1.6; text-align: center; }

/* Navigation. */ .mainpage #navigation { overflow: hidden; margin: 2em 0; border: 1px solid #555; border-width: 1px 0; border-radius: 8px; padding: 2em 0 1.5em; background: #444; box-shadow: 0 0 4px #222; font-size: 80%; font-weight: bold; text-align: center; text-shadow: 0 1px 0 #222; } .mainpage #navigation li { min-width: 60px; width: 60px; list-style: none; display: inline-block; } .mainpage #navigation img { border-radius: 24px; box-shadow: 0 0 6px #222; } .mainpage #navigation img:hover { box-shadow: 0 0 4px #aac, 0 0 6px #222; } .mainpage #navigation img[src$="TwitterLogo.png"] { border-radius: 0; box-shadow: none; }

/* Champions. */ .mainpage #champions { overflow: hidden; padding: 1em; background: #222; box-shadow: 0 0 3px #444; border-radius: 4px; } .mainpage #champions a { text-shadow: 0 1px 0 #111; } .mainpage #champions h2 { margin: 0; border-bottom: 1px solid #333; padding-bottom: .7em; padding-top: 0; text-align: center; }

/* Champion roster. */ .mainpage #roster { border-top: 1px solid #181818; border-bottom: 1px solid #333; } .mainpage .WikiaArticle .champion_roster { width: 608px; margin: 0 auto; padding: 1.15em 4px; } .mainpage .champion_roster li { overflow: hidden; margin: 1px; border-radius: 1000px; box-shadow: 0 0 4px #111; } .mainpage .champion_roster li:hover { box-shadow: 0 0 3px #aac, 0 0 4px #111; }

.WikiaArticle .champion_roster { margin: 0; overflow: hidden; } .champion_roster li { float: left; list-style: none; }

/* Free champion rotation. */ .mainpage #rotation { border-top: 1px solid #181818; } .mainpage #rotation > h3 { float: left; width: 50%; margin: 0 0 0 -7px; text-align: right; } .mainpage #rotation > #rotationweek { float: left; margin: 0 0 0 7px; width: 50%; }

ol.free_champion_rotation, ul.free_champion_rotation, .free_champion_rotation { clear:both; overflow: hidden; margin: -6px 0 0 0; padding-top: 6px; font-size: 80%; text-align: center; } .free_champion_rotation li { min-width:60px; display: inline-block; width: 9.9%; list-style: none; } .free_champion_rotation img { border-radius: 1000px; box-shadow: 0 0 6px #000; } .free_champion_rotation img:hover { box-shadow: 0 0 4px #aac, 0 0 6px #000; } .free_champion_rotation .character_icon span, .break .character_icon span { display: block; }

/* Featured champion. */ .mainpage .main-page-tag-rcs .thumbinner { margin: 0 0 1.5em 0; padding: 0; }

/* Blogs. */ .mainpage .WikiaBlogListingBox { clear: both; margin: 0 auto; padding: 0; border: none !important; } .mainpage .WikiaBlogListingBox blockquote { padding: 0; } .mainpage .WikiaBlogListingBox ul { margin-bottom: 0; padding: 0; background: #001; border-radius: 3px; } .mainpage .WikiaBlogListingBox > ul > .WikiaBlogListingPost { padding: 9px 10px 7px 10px; list-style: none; } .mainpage .WikiaBlogListingBox .author-details img { position: absolute; margin: 0; width: 32px; height: 32px; top: 9px; left: 10px; } .mainpage .WikiaBlogListingBox > ul > .WikiaBlogListingPost > h1, .mainpage .WikiaBlogListingBox > ul > .WikiaBlogListingPost > .author-details > span { margin: 0; padding-left: 44px; line-height: 1.25; } .mainpage .WikiaBlogListingBox ul+a { float: right; margin-top: .5em; text-transform: lowercase; } .mainpage .WikiaBlogListingBox .commentslikes { bottom: 9px; right: 2px; } .mainpage .WikiaBlogListingBox blockquote { display: none; }

/* Main page centre column. */ .mainpage #centre > div { overflow: hidden; clear: both; margin-bottom: 1.5em; padding: 1em; background: #222; border-radius: 0 0 4px 4px; }

.mainpage #centre h2, .mainpage #onsale h2, .mainpage #newskins h2 { margin: 1em 0 0 0; padding: .4em .7em; border: 0; background: #444; border-radius: 4px 4px 0 0; text-shadow: 0 1px 0 #222; }

/* New skins. */ .mainpage #onsale, .mainpage #newskins { clear:both; } .mainpage #centre .skin_portrait, .mainpage #onsale .skin_portrait, .mainpage #newskins .skin_portrait { margin: 0; padding: 8px 0; width: 14.28% !important; border-radius: 4px; } .mainpage #centre .skin_portrait:hover, .mainpage #skinsale .skin_portrait:hover, .mainpage #newskins .skin_portrait:hover { background: #333; }

.skin_portrait { float: left; margin: 0 .5em; text-align: center; } .skin_portrait > div { position: relative; top: 3px; } .skin_portrait > .date { font-size: 80%; text-transform: uppercase; color: #bbb; }

/* Tabber */

.tabberlive .tabbertab h2, .tabberlive .tabbertab h3 { display: block !important; }

ul.tabbernav li a:link { color: #FFFFFF !important; }

ul.tabbernav li a:hover { color: #FFFFFF !important; background: #000077 !important; border-color: #FFFFFF !important; }

ul.tabbernav li.tabberactive a { background-color: #000077 !important; }

ul.tabbernav li a { background: #000077 !important; border: 1px solid #000055 !important; margin-left: 0px !important; margin-right: 3px; }

.tabberlive .tabbertab { border: none !important; }

ul.tabbernav { border-bottom: none !important; }

/* === Userboxes === */ table.userbox { float:left; margin:0.2em; padding:0; border-width:1px; border-style:solid; } table.userbox td.left, table.userbox td.right { text-align:center; vertical-align:middle; font-size:1.6em; padding:0; } table.userbox td.main { padding:0 4px; vertical-align:middle; line-height:125%; font-size:0.9em; }

table.userbox { border-color:#aaa; background:#f8f8f8; } table.userbox td.left, table.userbox td.right { background:#d8d8d8; }

/* semantically "clear:both" -- http://css-tricks.com/snippets/css/clear-fix/ */ .group:before, .group:after, .clearfix:before, .clearfix:after { content:""; display:table; } .group:after, .clearfix:after { clear:both; } .group, .clearfix { zoom:1; /* For IE 6/7 (trigger hasLayout) */ }

/** ==TLIST - Simulating a tablular list== **/

/* The wider this is, the more columns will fit in it. */ .tlist { width: 660px; } .tlist ul { margin: 0 auto; padding: 0; } /* The wider this li is, the fewer columns there will be */ .tlist li { text-align: center; float: left; list-style: none; }

.multicolumn_8 li { width:12.5%; } .multicolumn_5 li { width:20.0%; } .multicolumn_4 li { width:25.0%; } .multicolumn_3 li { width:33.3%; } .multicolumn_2 li { width:50.0%; }

/* Style for horizontal lists (separator following item) */ .skin-monobook .hlist dl, .skin-modern .hlist dl, .skin-vector .hlist dl { line-height: 1.5em; } .hlist dl, .hlist ol, .hlist ul { margin: 0; } .hlist dd, .hlist dt, .hlist li { display: inline; margin: 0; } /* Display nested lists inline */ .hlist dl dl, .hlist ol ol, .hlist ul ul { display: inline; } /* Nowrap list items */ .hlist dd, .hlist dt, .hlist li { white-space: nowrap; white-space: normal !ie; /* IE < 8 no-wraps entire list, so disable it */ } /* But allow parent list items to be wrapped */ .hlist dd dl, .hlist dt dl, .hlist li ol, .hlist li ul { white-space: normal; } /* Generate interpuncts */ .hlist dt:after { content: ":"; } .hlist dd:after, .hlist li:after { content: " ·"; font-weight: bold; } .hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after { content: none; } /* for IE 8 */ .hlist dd.hlist-last-child:after, .hlist dt.hlist-last-child:after, .hlist li.hlist-last-child:after { content: none; } /* Add parens around nested lists */ .hlist dl dl dd:first-child:before, .hlist ol ol li:first-child:before, .hlist ul ul li:first-child:before { content: "("; } .hlist dl dl dd:last-child:after, .hlist ol ol li:last-child:after, .hlist ul ul li:last-child:after {   content: ")"; font-weight: normal; } /* For IE8 */ .hlist dl dl dd.hlist-last-child:after, .hlist ol ol li.hlist-last-child:after, .hlist ul ul li.hlist-last-child:after { content: ")";   font-weight: normal; } /* Put numbers in ordered lists */ .hlist.hnum ol li {    counter-increment: level1; } .hlist.hnum ol li:before {    content: counter(level1) " "; } .hlist.hnum ol ol li {    counter-increment: level2; } .hlist.hnum ol ol li:first-child:before {    content: "(" counter(level2) " "; } .hlist.hnum ol ol li:before { content: counter(level2) " "; } /* Unbulleted lists */ .plainlist ul { line-height: inherit; list-style: none none; margin: 0; } .plainlist ul li { margin-bottom: 0; } /* Default style for navigation boxes */ .navbox {                    /* Navbox container style */ border: 1px solid #aaa; width: 100%; margin: auto; clear: both; font-size: 88%; text-align: center; padding: 1px; } .navbox-inner, .navbox-subgroup { width: 100%; } .navbox th, .navbox-title, .navbox-abovebelow { text-align: center;      /* Title and above/below styles */ padding-left: 1em; padding-right: 1em; } th.navbox-group {            /* Group style */ white-space: nowrap; /* @noflip */ text-align: right; } .navbox, .navbox-subgroup { background: #fdfdfd;     /* Background color */ } .navbox-list { border-color: #fdfdfd;   /* Must match background color */ } .navbox th, .navbox-title { background: #ccccff;     /* Level 1 color */ } .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: #ddddff;     /* Level 2 color */ } .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: #e6e6ff;     /* Level 3 color */ } .navbox-even { background: #f7f7f7;     /* Even row striping */ } .navbox-odd { background: transparent; /* Odd row striping */ } table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */ margin-top: -1px;         /* (doesn't work for IE6, but that's okay)       */ } .navbox .hlist td dl, .navbox .hlist td ol, .navbox .hlist td ul, .navbox td.hlist dl, .navbox td.hlist ol, .navbox td.hlist ul { padding: 0.125em 0;      /* Adjust hlist padding in navboxes */ } ol + table.navbox, ul + table.navbox { margin-top: 0.5em;       /* Prevent lists from clinging to navboxes */ } /* Navbox dark theme*/ .oasis-dark-theme .navbox, .oasis-dark-theme .navbox-subgroup { background: inherit;     /* Background color */ } .oasis-dark-theme .navbox-list { border-color: inherit;   /* Must match background color */ } .oasis-dark-theme .navbox th, .oasis-dark-theme .navbox-title { background: inherit;     /* Level 1 color */ } .oasis-dark-theme .navbox-abovebelow, .oasis-dark-theme th.navbox-group, .oasis-dark-theme .navbox-subgroup .navbox-title { background: inherit;     /* Level 2 color */ } .oasis-dark-theme .navbox-subgroup .navbox-group, .oasis-dark-theme .navbox-subgroup .navbox-abovebelow { background: inherit;     /* Level 3 color */ } .oasis-dark-theme .navbox-even { background: inherit;     /* Even row striping */ } .oasis-dark-theme .navbox-odd { background: transparent; /* Odd row striping */ } /* Force text wrapping in PRE tags */ pre { white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */ white-space: -pre-wrap;     /* Opera 4 - 6 */ white-space: -o-pre-wrap;   /* Opera 7 */ white-space: pre-wrap;      /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */ word-wrap: break-word;      /* IE 5.5+ */ }