MediaWiki:Custom-common.less/site.less

/** * This page is for stylings that are for classes that we create for our own use in certain site components * For fixes of site elements that are not created by us, consider using general.less

/************************************/ /** COMMON CLASSES FOR GENERAL USE **/ /************************************/

/* Custom text styling */ body .page-content .ct, body .page-content .centertext, body .page-content .centertxt { text-align: center; } body .page-content .lefttext, body .page-content .lefttxt { text-align: left; } body .page-content .righttext, body .page-content .righttxt { text-align: right; } body .size-small, body .smalltxt { font-size: small; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-align: bottom; } .bold { font-weight: bold; } .italic { font-style: italic; } .narrow { letter-spacing: -0.5px; } .monospace { font-family: Consolas, monospace; } .font-initial { font-family: initial; } .txt-nowrap { white-space: nowrap; } .txt-wrap { white-space: normal; } .cursor-help { cursor: help; } .superscript { vertical-align: super; } .subscript { vertical-align: sub; } .pixelated { image-rendering: pixelated; }

/* Custom padding/margins/widths/float */ body .p-margin { margin-bottom: 24px; } body .box-margin-1 { margin: 1em; } body .margin-centered { margin-left: auto; margin-right: auto; } .page-content .full-width-1 { min-width: 100%; } .page-content .full-width { margin-left: 0; margin-right: 0; width: 100%; width: -moz-available; width: -webkit-fill-available; width: fill-available; } .page-content .half-width { width: 50%; } .float-left { float: left; } .float-left-padded { float: left; margin-right: 25px; } .float-right { float: right; } .float-right-padded { float: right; margin-left: 25px; } .clear-left { clear: left; } .clear-right { clear: right; } .clear-both { clear: both; } .article-columns-2 { columns: 150px 2; } .article-columns-3 { columns: 100px 3; } .page-content .inline-block { display: inline-block; }

/* custom flexbox styling */ .display-flex { display: flex; } .simple-flexbox { display: flex; flex-wrap: wrap; } .display-table { display: table; }

/* custom table styling */ .page-content table { .table-section-separator, .table-section-separator-top { border-top: 3px solid var(--theme-border-color); &.thick { border-top-width: 5px; border-top-color: var(--theme-accent-color); }	}	.table-section-separator-bottom { border-bottom: 3px solid var(--theme-border-color); &.thick { border-bottom-width: 5px; border-bottom-color: var(--theme-accent-color); }	}	.table-section-separator-left { border-left: 3px solid var(--theme-border-color); &.thick { border-left-width: 5px; border-left-color: var(--theme-accent-color); }	}	.table-section-separator-right { border-right: 3px solid var(--theme-border-color); &.thick { border-right-width: 5px; border-right-color: var(--theme-accent-color); }	} } .table-nocollapse { display: table-row !important; } .table-vedbuttons { float: right; font-size: 11px; } .table-fixed { table-layout: fixed; } /* Vertical cell support */ .vertical th, .vertical td, td.vertical, th.vertical { writing-mode: vertical-rl; } /* Darkens every other row */ .oddrow tr:nth-of-type(odd)>td, tr.oddrow td { background: rgba(0, 0, 0, 0.2); } .oddrow2 tr:nth-of-type(odd)>td, tr.oddrow2 td { background: rgba(255, 255, 255, 0.15); }

/* Template:SkyDateCountdownWidget */ .skydate-countdown-active { color: green; }

/* Article Scrollbar Tweaks */ .article-scrollable { overflow: auto; } .article-scrollable, .table-wide-inner { /* Article Scrollbar Tweaks (Firefox) */ scrollbar-width: thin; /*scrollbar-color: #897e81 #50373a;*/ &::-webkit-scrollbar { width: 10px; height: 10px; }	&::-webkit-scrollbar-track { background-color: rgba(80, 55, 58, 0.5); }	&::-webkit-scrollbar-thumb { background-color: rgba(137, 126, 129, 0.5); }	&::-webkit-scrollbar-thumb:hover { background-color: rgba(110, 101, 104, 0.5); } }

/* Disables text highlighting on browsers */ .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Bull Character */ .bull-c::before { content: "\2022"; margin: 0 4px; }

/* General hide class to be used as necessary (pair to .mobile-hide) */ .desktop-hide { display: none !important; }

/* Blank Cells */ th .blankCell, td .blankCell { display: flex; cursor: not-allowed; background: rgba(150, 150, 150, 0.15); text-align: center; font-size: 65%; color: transparent; /* We only want to show what is in ::after, but still want an actual character in the template so the character is selectable */ position: absolute; top: 0; bottom: 0; left: 0; right: 0; &:after { content: "∅"; flex: 1; align-self: center; color: rgba(185, 185, 185, 0.55); } }

/* Dimmer */ /* Note: This is for use in scripts. Appending this to document.body will work */ @keyframes hsw-dimmer-effect { from { opacity: 0; }	to { opacity: 0.8; } } .hsw-site-dimmer { content: ''; position: fixed; z-index: -2; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; opacity: 0; transition: opacity .7s linear 0s; }

/***********************************/ /** SPECIFIC STYLING FOR ELEMEMTS **/ /***********************************/

/* Message Boxes */ /* Partly attributed to: Minecraft Wiki (minecraft.fandom.com) */ .messagebox { background: #2b1517; border-left: 4px solid @theme-buttons; padding: .4em .8em; font-size: 14px; display: block; margin: 5px 7% 5px 7%; overflow: auto; border-spacing: 0.7em; border-top-right-radius: .5em; border-top-left-radius: .5em; } .messagebox-mini { padding: .4em .5em; margin: 0 0; margin-bottom: 1em; } .messagebox-mini + .mbox { margin-top: -.6em; } .messagebox-left { text-align: left; } .messagebox-narrow-wrapper { text-align: center; overflow-x: hidden; margin-left: 5%; margin-right: 5%; padding: 1px 5px; } .messagebox-image:not(.messagebox-image-right) { padding-right: 12px; } .messagebox-image-right { padding-left: 12px; } .messagebox-disambiguations { color: #222; font-size: 95%; text-align: center; margin: 6px auto; padding: 0 10px; border: 3px double #625; border-radius: 10px; background: #9B7070; display: table; } .messagebox.messagebox-blue { background-color: var(--custom-background-blue-highlight); border-left-color: var(--custom-border-blue-highlight); } .messagebox.messagebox-green { background-color: var(--custom-background-green-highlight); border-left-color: var(--custom-border-green-highlight); } .messagebox.messagebox-orange { background-color: var(--custom-background-orange-highlight); border-left-color: var(--custom-border-orange-highlight); } .messagebox.messagebox-purple { background-color: var(--custom-background-purple-highlight); border-left-color: var(--custom-border-purple-highlight); } .messagebox.messagebox-red { background-color: var(--custom-background-red-highlight); border-left-color: var(--custom-border-red-highlight); } .messagebox.messagebox-yellow { background-color: var(--custom-background-yellow-highlight); border-left-color: var(--custom-border-yellow-highlight); } .messagebox.messagebox-magenta { background-color: var(--custom-background-magenta-highlight); border-left-color: var(--custom-border-magenta-highlight); } .messagebox.messagebox-gray { background-color: var(--custom-background-grey); border-left-color: var(--custom-border-grey); } .messagebox-warn, .messagebox-error { margin: 0 7%; padding: .4em .8em; border-top-right-radius: .5em; border-top-left-radius: .5em; } .messagebox-warn { background-color: #905f00; } .messagebox-error { background-color: #7F0000; } .darkmsgbox { margin: 6px auto 6px auto; .darkmsgbox-image { padding: 15px; color: black; background: #754242; box-shadow: 0 0 5px #c15926; border: 1px solid; border-color: #c15926; }	.darkmsgbox-text { color: white; background: #542e2e; padding: 3px 8px; box-shadow: 0 0 5px #c15926; border: 1px solid; border-color: #c15926; }	.darkmsgbox-bottom { text-align: center; background-color: #2c1e20; box-shadow: 0 0 5px #c15926; border: 1px solid; border-color: #c15926; } }

/* AF Warning Styles */ .afwarning-box { display: flex; align-items: center; justify-content: space-evenly; margin-left: 2%; margin-right: 2%; padding: 10px; border-radius: 30px; background-color: #872525; &.disallow { background-color: #543c3f; }	&.warn { background-color: #843d0a; }	&.default { background-color: #872525; }	.afwarning-mark { opacity: 75%; }	.afwarning-main { margin-left: 1em; margin-right: 2em; max-width: 50%; }	.afwarning-title { font-size: 2.3em; } }

/* Custom widgetbox styling */ .custom-widgetbox-gold { display: block; border: 2px solid #ed9a01; border-radius: 5px; padding: 10px; text-align: center; .custom-widgetbox-image { font-size: 1em; background-color: #2d1616; padding: .4em; text-align: center; }	.custom-widgetbox-bottomtext { padding-top: 1em; } }

/* Custom Buttons */ .page-content .full-width-button { margin-bottom: 24px; text-align: center; font-weight: bold; width: 98%; width: -moz-available; width: -webkit-fill-available; width: fill-available; +* {		margin-top: -24px; width: 100%; .table-wide-inner, .wikitable { margin-top: 0; }	} } .page-content .button.article-button-submit { padding: 10px 20px !important; font: bold 100% arial; transition: all 0.5s; &:after { content: ''; position: relative; opacity: 0; top: 0; right: -20px; color: white; display: inline; transition: 0.5s; }	&:hover { background-color: #16a34a; background-image: none; border: 1px solid #16a34a; }	&:hover:after { content: '\00bb'; opacity: 1; right: 0; padding-left: 12px; } } .button.large, .button .large { padding: 4px 12px; font: bold 100% arial; margin: 4px; } .page-content .tablecollapse-button { padding: 0px 3px !important; margin: 1px; float: right; }

/* Delete Box */ .delete-box { padding: 15px; margin: 5px; background-color: #7f1d1d; text-align: center; hr { margin: 0.1em 3px; border: 0.5px solid tan; }	.button { padding: 10px; font-size: 1em; font-weight: bold; width: 100%; height: 100%; }	.delete-box-buttons { margin-left: 2%; margin-right: 2%; font-size: 14px; td:first-of-type { text-align: left; }		td:last-of-type { margin-right: 2em; }	}	.delete-box-reason { font-size: 14px; } }

/* Comment id */ .comment-id-display, .reply-id-display { color: var(--theme-page-text-color); text-align: right; } .comment-id-display abbr, .reply-id-display abbr { font-size: .8em; text-align: right; cursor: default; text-decoration: none; padding: .4em 1em;

&:hover { background-color: rgba(254, 195, 86, .1); color: var(--theme-link-color); } } .comment-id-display { margin: 0 1em; }

/* Article Comments Notice */ text-align: left; margin-top: 1em; line-height: 1.8em; border: thin solid #F55; padding: 1em; }
 * 1) articleCommentsNotice {

/* Fetchur request styling */ .article-fetchur-request { overflow-x: hidden; font-size: medium; }

/* Preloaded Styles for Tooltips Editor */ .editTooltips-Loading { padding: 1em; outline: #a2a2a2 groove; border: thin transparent solid; } .editTooltips-Loading img { max-width: 100%; height: auto; }

/* Preloaded Styles for JSCalculator */ .jcConfig { display: none; } .jcLoadspace { width: 40%; border: 1px var(--theme-accent-color) solid; margin: 2em 0; padding: 2em; color: var(--theme-accent-color); }

/* Gemstone slots */ .gemstone-slot { position: relative; display: inline-flex; width: 25px; height: 25px; line-height: 25px; border: 1px solid currentColor; border-radius: 3px; justify-content: center; align-items: center; cursor: help; a { color: currentColor; cursor: help; width: 100%; text-align: center; }	.gemstone-slot-lock { position: absolute; bottom: -2px; right: -2px; font-size: 10px; line-height: 1;

&:after { content: '🔒'; }	} } .gemstone-slot-list { display: flex; gap: 3px; justify-content: center; }

/* Username Styling */ /* Bureaucrats */ .user-link-bcrat { color: #ff3f43 !important; text-shadow: 0 0 4px #ff3f43 !important; font-weight: bold; } /* Admins */ .user-link-admin { font-weight: bold; color: #a431fc !important; text-shadow: 0 0 4px #a431fc !important; } /* Code Editors */ .user-link-codeeditor { font-weight: bold !important; color: #5874f3 !important; text-shadow: 0 0 3px #5265ba !important; } /* Content moderators */ .user-link-mod { font-weight: bold; color: #7FFFD4 !important; text-shadow: 0 0 3px #397561 !important; } /* Discussion moderators */ .user-link-dmod { font-weight: bold; color: #1f9921; text-shadow: 0 0 3px #648264; } /* Rollbackers */ .user-link-rollback { font-weight: bold; color: #ff992b !important; text-shadow: 0 0 4px #a36726 !important; } /* Bots */ .user-link-bot { font-weight: bold; color: darkgray !important; text-shadow: 0 0 3px gray !important; }

/* Rarity/Tier Styling */ .tier-rare { text-shadow: 0 0 4px #000; }

/* Highlight table */ /* Mediawiki:Highlight.js */ .lighttable tr.highlight-over { background-color: #552a21; color: white; cursor: pointer; } .lighttable tr.highlight-on { background-color: #c15926; color: white; cursor: pointer; } .highlight-over .tier-rare, .highlight-on .tier-rare { text-shadow: none; }

/* Documentation Boxes */ .hsw-documentation { font-family: Arial, sans-serif, Rubik, Helvetica; clear: both; .hsw-documentation-titlebox { padding: 18px 8px 2px 8px; border-top: 1.3px solid black; border-left: 1.3px solid black; border-right: 1.3px solid black; margin: 4px 4px 0 4px; box-shadow: 0 0 2px black; .hsw-documentation-icon { float: left; }		.hsw-documentation-header { font: bold x-large Arial; margin-left: 7px; text-align: center; }		.hsw-documentation-actions { font-size: small; margin-left: 7px; }		.hsw-documentation-tnote { font-size: small; font-style: italic; }		hr { background-color: #daa9ad; border: 0; height: 1px; margin-bottom: 3px; margin-top: 0; width: 100%; }		p { margin: 0; }	}	.hsw-documentation-body { background-color: rgba(120,120,120,0.05); box-shadow: 0 0 2px black; padding: 0.5em; margin: 0 4px 0 4px; border-left: 1.3px solid black; border-right: 1.3px solid black; clear: both; .hsw-documentation-main-idk { display: none; }		.hsw-documentation-main-pd { clear: both; margin-bottom: 5px; }	}	.hsw-documentation-bottombox { padding: 2px 8px; border-left: 1.3px solid black; border-right: 1.3px solid black; border-bottom: 1.3px solid black; margin: 0 4px 4px 4px; box-shadow: 0 0 2px black; .hsw-documentation-hdtw { margin: 5px; font-weight: bold; }	}	.hsw-documentation-jtc, .hsw-documentation-btt { float: right; font: italic small Arial; margin-top: 4px; a { color: white; }	} }

/* Keypress */ .keypress-diagram { white-space: nowrap; padding: 1px 6px; border: 1px solid #CCC; border-radius: 3px; box-shadow: 0.1em 0.2em 0.2em rgba(0, 0, 0, 0.2); font-size: 0.85em; font-family: Arial,Helvetica,sans-seri; }

/* Rightbox */ .hsw-rightbox { &.small { border: 1px solid #5e484a; background: #251214; margin: 5px 2px 2px 5px; padding: 14px; float: right; text-align: center; font-size: 75%; box-shadow: 0 0 5px #c15926; border: 1px solid; border-color: #c15926; }	&.medium { float: right; width: 240px; margin: .1em .1em .5em .25em; padding: 4px; }	.hsw-rightbox-sep { border-bottom: 1px solid #555; padding: 0 3px; clear: right; }	.hsw-rightbox-image { border-right: 0; padding: 0 12px; }	.hsw-rightbox-content { border-left: 0; width: 100%; padding: 0 5px 0 0; } } .hsw-luabox { float: right; width: 240px; margin: .1em .1em .5em .25em; padding: 4px; box-shadow: 0 0 5px #c15926; border: 1px solid; border-color: #c15926 !important; background-color: #2c1e20 !important; .hsw-luabox-list { list-style-type: disc; margin: 0 0 0 15px; white-space: nowrap; }	.hsw-luabox-actions { font-size: small; } }	border-left: 0; width: 100%; padding: 12px 12px 12px 0 !important; }	border-right: 0; padding: 0 12px !important; } .hsw-userbox-list { padding: 2.5px } .hsw-shortcut-list { font-weight: bold; } .hsw-archivebox { margin: 7px 0; border: 2px solid black; box-shadow: 0 0 15px #000000; float: right; .hsw-archivebox-header { color: white; background: #542e2e; padding: 1.5px; }	.hsw-archivebox-content { border: 4.5px outset #555; padding: 2px 15px; background: #542e2e; }	.hsw-archivebox-text { border: 2.5px outset #555; padding: 0 15px; background: #542e2e; text-align: center; }	.hsw-archivebox-list { padding: 4px 14px; border-top: 2px solid #775454; }	.hsw-archivebox-search { padding: 4px; border-top: 2px solid #775454; }	.mw-ui-input { font-size: small; }	.mw-ui-button { height: 32px !important; } } .hsw-archivelist { .hsw-archivelist-actions { font-size: 10px; } }
 * 1) content .hsw-luabox .hsw-luabox-content {
 * 1) content .hsw-luabox .hsw-luabox-icon {

.article-new-feature { color: white; background: red; padding: 1px 3px; border-radius: 5px; border: 2px dotted darkred; text-decoration: underline dotted; }

/* Template:ArmorStats Styling */ table.armorstats2x2 { margin-right: 0; } .armorstats2x2 th { min-width: 184px; } .armorstats2x2 .as2x2-icon { padding: 0 3px; } .armorstats2x2 .as2x2-item-stats { padding: 0 5px; } .armorstats2x2 .as2x2-item-stats ul { line-height: inherit; list-style: none none; margin: 0; }

/* Edittools styling */ margin-top: 3em; margin-bottom: 0.7em; }	background-color: rgba(120, 120, 120, 0.05); border-radius: 6px; padding: 12px; font-size: small; a { font-family: monospace; }	hr { color: #e6e6e6; }	.mw-charinsert-item { min-width: 1.2em; } }	float: right; }
 * 1) editpage-custom-description {
 * 1) editpage-specialchars {
 * 1) editpage-custom-footer {

/* Recent change link box styling */ font-family: Arial; background-color: rgba(120, 120, 120, 0.05); border-radius: 6px; padding: 12px; border: .5px solid #e6e6e6; hr { background-color: #e6e6e6; border: 0; height: 1px; } }
 * 1) recentchange-custom-links {

/* Hide Pagestyles */ .pageStyles { display: none !important; }

/* SkyDate Countdown Widget */ .skydate-countdown-widget { float: right; clear: right; margin: 0 0 5px 10px; min-width: 23em; table { border: 3px solid orange; width: 100%; }	.sdcw-title, .sdcw-subtitle { padding: 0 1.2em; div { font-weight: bold; text-align: center; font-family: Consolas, monospace; }	}	.sdcw-title div { font-size: 1.3em; }	.sdcw-subtitle div { font-size: .8em; }	.sdcw-legend { width: 8.5em; } } .skydate-countdown-widget-wrapper { display: flex; flex-direction: column; min-width: 22em; float: right; clear: right; }

/* Treeview */ /* Attributed to: Minecraft Wiki (minecraft.fandom.com) */ .page-content .treeview { margin-top: 0.3em; overflow-x: auto; .treeview-header { padding-left: 3px; font-weight: bold; &:last-child { border-color: #636363 !important; border-left-style: dotted; }		&:not(:last-child):before { content: none; }		&:last-child:before { border-bottom: 0; }	}	ul, li { &, &:last-child { margin: 0; padding: 0; list-style-type: none; list-style-image: none; }	}	li li { &, &:last-child { position: relative; padding-left: 13px; margin-left: 7px; border-left: 1px solid #636363; }		&:before { content: ""; position: absolute; top: 0; left: -.8px; width: 11px; height: 11px; border-bottom: 1px solid #636363; }		&:last-child:not(.treeview-continue) { border-color: transparent; &:before { border-left: 1px solid #636363; width: 10px; }		}	} }

/* Tutorial box styling */ .tutorial-box-buttons { display: flex; justify-content: space-evenly; align-items: center; } .tutorial-box-inputbox { margin: 0 1em; max-width: 20em; }

/** Element custom styling **/ /* preformatted text custom styling */ pre.dark, pre .dark { background-color: #002b36; } /* horizontal rule custom styling */ hr.tan-line, hr .tan-line { margin: 0.1em 2px; border: 0.5px solid tan; } hr.weak-line, hr .weak-line { background-color: #5e484a; border: 0; height: 1px; }

/* code block custom styling */ .inset-code { background-color: #cacaca; padding: 1px 1px; border-radius: 3px; font-family: monospace; color: black; border: 1.1px solid #383838; display: inline; position: relative; vertical-align: bottom; white-space: pre; }

/* Color Preview & Color Display styling */ .color-preview-box { position: relative; display: inline-block; background: #3f3233; padding: 0 10px; line-height: 30px; } .color-preview-block { position: relative; display: inline-block; top: 5px; height: 23px; width: 23px; margin-right: 5px; border: 1px solid white; border-radius: 12px; } .color-display-table { display: grid; grid-template-columns: max-content max-content; gap: 2px 16px; margin: 1em 0; .col-name { text-align: right; } } .color-display-block { padding: 0 8px; display: inline; }

/* No article text styling */ .noarticletext-header { font: bold 150% Arial; border-bottom: 1px solid #5e484a; padding-bottom: .5em; margin: 1em 0; } .noarticletext-block { hr { margin-top: 2em; } }

/* Page Header styling */ .article-pageheader { margin: 1em auto; width: 70%; box-shadow: 0 0 5px #fff; } .article-pageheader-title { text-align: center; padding: 1em 4em; font-size: 110%; background: #c15926; } .article-pageheader-body { background-color: #392124; padding: 2em 4em 1.5em 4em; }

/* Good article, featured article (Project:GA) */ .article-featured-article-icon { background-color: #654321; padding: 0 6px; img { vertical-align: sub; } }

/* Pet display styling */ .article-petlevelstats-title { width: 70%; font-size: 3em; white-space: nowrap; padding: 0 1em !important; } .article-petlevelstats-level { font-size: 1.6em; } .article-petlevelstats-tier { font-size: 1.6em; } .article-petlevelstats-slot { float: right; } .page-content table.wikitable tr td.article-petlevelstats-main { padding: 1em 2em 0 2em !important; } .article-petstats-title { font-size: 1.6em; text-align: center; margin: .5em 0; } .article-petstats-abilities { list-style-type: circle; line-height: inherit; } .article-petstats-helditem { list-style-type: none; line-height: inherit; }

/* Minion page styling */ .mw-parser-output table tr td.article-msTable-crafting { padding: 0; } .article-msTable-cumulative { display: flex; justify-content: space-between; align-items: center; } .article-minion-smallTabs { min-width: 3.8em; } .article-minion-coolLabel { font: bold 100% times new roman; }

/* Used by Template:PotionPageRow */ .mw-parser-output table.potions-table { height: 0; // This is required for 100% height to work later on in the table tr { height: 100%; }   .potion-seperator-cell { border-bottom: 5px solid var(--theme-accent-color); }   // specificity here needed to ovveride previous specificity tr td.levels-data-cell { padding: 0; border-left-width: 5px; }	.potions-subtable { margin: 0; width: 100%; height: 100%; border: 0; background: transparent; text-align: center; tr { height: auto; }		td, th { line-height: 1.3; // Remove outer table border &:first-child { border-left: 0; }			&:last-child { border-right: 0; }		}		// Remove outer table border tr:first-of-type td, tr:first-of-type th { border-top: 0; }		tr:last-of-type td, tr:last-of-type th, td[rowspan] { border-bottom: 0; }	} }

/* Dungeon-related styling */ .article-unfilled { opacity: .2; } .article-essence-table { border: 3px solid gray; .article-essence-table-legend { font-size: small; } } .wikitable tr th.article-essence-table-header { white-space: nowrap; padding: 1em 2em; }

/* Stat styling */ .article-stat-shadow { text-shadow: 1px 1px 1px black; }

/* TOC styling */ .article-custom-toc { width: 55%; p { margin-bottom: 0; }	.content { border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; margin: 10px 0; padding: 10px 0; max-height: 400px; overflow: auto; .inner { columns: 100px 3; }	} }

/* Game icons */ .page-content .staticon { vertical-align: text-bottom; }