MediaWiki:Gadget-site-styles.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/**
* Styles placed here are loaded on both desktop and mobile views. On mobile it
* is loaded without using JS, so is good for critical styles that can't wait
* for [[MediaWiki:Mobile.css]] to be loaded (like the basic theme).
*
* Desktop-only styles should go in [[MediaWiki:Common.css]] or
* [[MediaWiki:Vector.css]] if alexscaves/Minecraft theme related.
* Non-critical mobile-only styles should go in [[MediaWiki:Mobile.css]].
*/
/* Minecraft font */
@font-face {
font-family: Minecraft;
src: url("https://minecraft.fandom.com/media/hydra/fonts/minecraft.eot?#iefix") format("embedded-opentype"),
url("https://minecraft.fandom.com/media/hydra/fonts/minecraft.woff") format("woff"),
url("https://minecraft.fandom.com/media/hydra/fonts/minecraft.ttf") format("truetype");
}
/** Responsive main page layout **/
#main-page.main-page {
display: grid;
grid-template-areas: "a" "b" "c" "d" "e" "f" "g" "h" "i" "j";
grid-template-columns: 1fr;
grid-gap: 2px;
}
@media screen and (min-width:990px) {
#main-page.main-page {
grid-template-areas: "a a a" "b b c" "d d d" "e f g" "h i j";
grid-template-columns: repeat(3, 1fr);
}
}
.fp-section {
background-color: #FCFCFC;
border: 1px solid #CCC;
vertical-align: top;
margin: 1px;
}
#fp-1 { grid-area: a; }
#fp-2 { grid-area: b; }
#fp-3 { grid-area: c; }
#fp-4 { grid-area: d; }
#fp-5 { grid-area: e; }
#fp-6 { grid-area: f; }
#fp-7 { grid-area: g; }
#fp-8 { grid-area: h; }
#fp-9 { grid-area: i; }
#fp-10 {grid-area: j; }
#fp-header.fp-header {
display: grid;
grid-template-areas: "aa" "ac" "ab";
grid-template-columns: 1fr;
}
@media screen and (min-width:990px) {
#fp-header.fp-header {
grid-template-areas: "aa ab" "ac ac";
grid-template-columns: 335px 1fr;
}
}
@media screen and (min-width:1350px) {
#fp-header.fp-header {
grid-template-columns: 1fr 2fr;
}
}
#fp-header-file { grid-area: aa; }
#fp-header-links { grid-area: ab; }
#fp-header-text { grid-area: ac; }
#fp-header-file {
margin: auto;
}
@media screen and (min-width:990px) {
#fp-header-file {
margin: auto 0;
}
}
#fp-header-links {
margin: auto 0;
}
#fp-header-links ul {
-ms-columns: 160px;
-moz-columns: 160px;
-webkit-columns: 160px;
columns: 160px;
-ms-column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
margin-top: 0;
}
/** Main page stylings **/
.edition-boxes p {
margin: 0 !important;
}
.edition-box > div {
margin: .4em auto;
}
@supports ((object-fit: contain) or (-o-object-fit: contain)) {
.edition-box img {
min-height: 50px;
-o-object-fit: contain;
object-fit: contain;
}
}
/** Template stylings **/
/* [[Template:Slot]]: [[File:InvSprite.png]] */
.invslot {
position: relative;
display: inline-block;
background: #8B8B8B no-repeat center center / 32px 32px;
border: 2px solid;
border-color: #373737 #FFF #FFF #373737;
width: 32px;
height: 32px;
font-size: 16px;
line-height: 1;
text-align: left;
vertical-align: bottom;
}
.invslot::before,
.invslot::after {
content: "";
position: absolute;
background-color: #8B8B8B;
height: 2px;
width: 2px;
pointer-events: none;
}
.invslot::before {
bottom: -2px;
left: -2px;
}
.invslot::after {
top: -2px;
right: -2px;
}
.invslot-large {
padding: 8px;
}
.invslot-item,
.invslot-item > a:first-child {
position: relative;
display: block;
margin: -2px;
padding: 2px;
width: 32px;
height: 32px;
}
.invslot-item-image > a.new:first-child {
background: url("https://alexscaves.wiki.gg/images/4/44/InvSprite.png") no-repeat content-box;
width: 32px;
height: 32px;
text-indent: -9999px;
overflow: hidden;
}
.invslot-stacksize {
position: absolute;
right: 0;
bottom: 0;
font-family: Minecraft, sans-serif !important;
font-weight: normal !important;
color: #FFF !important;
text-shadow: 2px 2px 0 #3F3F3F;
filter: dropshadow(color=#3F3F3F, offx=2, offy=2);
z-index: 2;
}
/* Plain slot with no border or background */
.invslot-plain {
background-color: transparent;
border: 0;
}
.invslot-plain::before,
.invslot-plain::after {
content: none;
}
.invslot-plain > .invslot-item,
.invslot-plain > .invslot-item > a:first-child {
margin: 0;
padding: 0;
}
/* [[Template:health]] */
.mc-hearts::before {
content: " (";
}
.mc-hearts::after {
content: ")";
}
/* Generic Minecraft interface styling: [[Module:UI]] */
.mcui {
display: inline-block;
position: relative;
background-color: #C6C6C6;
border: 2px solid;
border-color: #DBDBDB #5B5B5B #5B5B5B #DBDBDB;
padding: 6px;
text-align: left;
white-space: nowrap;
vertical-align: bottom;
}
.mcui-Crafting_Table > *,
.mcui-Furnace > * {
display: inline-block;
vertical-align: top;
}
.mcui-Altar_A1 > * {
display: inline-block;
vertical-align: top;
}
.mcui-Freezer_A1 > * {
display: inline-block;
vertical-align: top;
}
.mcui-Incubator_A1 > * {
display: inline-block;
vertical-align: top;
}
/* [[Template:Grid/Crafting Table]]:
[[File:Grid layout Arrow (small).png]], [[File:Grid layout Shapeless.png]], [[File:Grid layout Fixed.png]] */
.mcui-Crafting_Table .mcui-row {
display: block;
}
.mcui-Crafting_Table > .mcui-arrow {
background: url("https://alexscaves.wiki.gg/images/8/86/Grid_layout_Arrow_%28small%29.png") no-repeat;
width: 32px;
height: 26px;
margin: 40px 4px 0;
}
.mcui-Crafting_Table > .mcui-output {
margin-top: 28px;
}
.mcui-Crafting_Table > .mcui-icons {
position: absolute;
top: 6px;
right: 6px;
}
.mcui-Crafting_Table .mcui-shapeless,
.mcui-Crafting_Table .mcui-fixed {
display: inline-block;
background-repeat: no-repeat;
width: 19px;
height: 15px;
cursor: help;
}
.mcui-Crafting_Table .mcui-shapeless {
background-image: url("https://alexscaves.wiki.gg/images/a/a9/Grid_layout_Shapeless.png");
}
.mcui-Crafting_Table .mcui-fixed {
background-image: url("https://alexscaves.wiki.gg/images/b/b8/Grid_layout_Fixed.png");
}
/* [[Template:Grid/Furnace]]:
[[File:Grid layout Fire.png]], [[File:Grid layout Fire (in-active).png]]
[[File:Grid layout Furnace Progress.png]], [[File:Grid layout Furnace Progress (in-active).png]] */
.mcui-Furnace .mcui-fuel {
display: block;
background: url("https://alexscaves.wiki.gg/images/d/d8/Grid_layout_Fire.png") no-repeat;
width: 36px;
height: 36px;
}
.mcui-Furnace .mcui-fuel.mcui-inactive {
background-image: url("https://alexscaves.wiki.gg/images/a/ab/Grid_layout_Fire_%28in-active%29.png");
}
.mcui-Furnace > .mcui-arrow {
background: url("https://alexscaves.wiki.gg/images/8/8e/Grid_layout_Furnace_Progress.png") no-repeat;
width: 44px;
height: 32px;
margin: 36px 18px 0 14px;
}
.mcui-Furnace > .mcui-arrow.mcui-inactive {
background-image: url("https://alexscaves.wiki.gg/images/d/dc/Grid_layout_Furnace_Progress_%28in-active%29.png");
}
.mcui-Furnace > .mcui-output {
margin-top: 28px;
}
/* [[Template:Brewing Stand]]:
[[File:Grid layout Brewing Bubbles.gif]], [[File:Grid layout Brewing Bubbles (In-active).png]],
[[File:Grid layout Brewing Arrow.png]], [[File:Grid layout Brewing Arrow (In-active).png]],
[[File:Grid layout Brewing Paths.png]], [[File:Grid layout Brewing Empty.png]] */
.mcui-Brewing_Stand > * {
display: block;
}
.mcui-Brewing_Stand .invslot {
vertical-align: top;
}
.mcui-Brewing_Stand > .mcui-input {
text-align: center;
}
.mcui-Brewing_Stand > .mcui-input > .invslot {
margin-top: 3px;
}
.mcui-Brewing_Stand .mcui-bubbling,
.mcui-Brewing_Stand .mcui-arrow {
display: inline-block;
background-repeat: no-repeat;
width: 24px;
height: 57px;
}
.mcui-Brewing_Stand .mcui-bubbling {
background-image: url("https://alexscaves.wiki.gg/images/6/65/Grid_layout_Brewing_Bubbles.gif");
}
.mcui-Brewing_Stand > .mcui-input.mcui-inactive > .mcui-bubbling {
background-image: url("https://alexscaves.wiki.gg/images/d/db/Grid_layout_Brewing_Bubbles_%28In-active%29.png");
}
.mcui-Brewing_Stand .mcui-arrow {
background-image: url("https://alexscaves.wiki.gg/images/4/4b/Grid_layout_Brewing_Arrow.png");
}
.mcui-Brewing_Stand > .mcui-input.mcui-inactive > .mcui-arrow {
background-image: url("https://alexscaves.wiki.gg/images/5/59/Grid_layout_Brewing_Arrow_%28In-active%29.png");
}
.mcui-Brewing_Stand > .mcui-paths {
position: relative;
background: url("https://alexscaves.wiki.gg/images/8/82/Grid_layout_Brewing_Paths.png") no-repeat;
width: 60px;
height: 40px;
margin: -20px auto -16px;
z-index: 1;
}
.mcui-Brewing_Stand .mcui-output .invslot {
background-image: url("https://alexscaves.wiki.gg/images/5/59/Grid_layout_Brewing_Empty.png");
}
.mcui-Brewing_Stand .mcui-output2 {
margin: 14px 10px 0;
}
/* [[Template:Hotbar]] */
.mcui-Hotbar {
display: inline-block;
position: relative;
border: 0;
padding: 0;
background-color: transparent;
}
.mcui-Hotbar > .mcui-selector {
position: absolute;
top: -2px;
margin-left: -2px;
}
.mcui-Hotbar > .mcui-slots {
position: absolute;
top: 0;
left: 0;
margin: 2px;
}
.mcui-Hotbar .invslot {
margin: 4px;
}
/* [[Template:Loom]] */
.mcui-Loom > * {
display: inline-block;
vertical-align: top;
}
.mcui-Loom > .mcui-tapestry {
background: url("https://alexscaves.wiki.gg/images/6/64/Grid_layout_Loom.png") no-repeat;
width: 98px;
height: 108px;
}
.mcui-Loom > .mcui-loomArrow {
background: url("https://alexscaves.wiki.gg/images/7/71/Grid_layout_Loom_Arrow.png") no-repeat;
width: 54px;
height: 54px;
margin: 28px 4px 0 4px;
}
.mcui-Loom > .mcui-output {
margin-top: 38px;
}
.mcui-Loom .mcui-inputBanner {
margin: 22px 10px;
position: absolute;
}
.mcui-Loom .mcui-inputDye {
margin: 22px 50px;
position: absolute;
}
.mcui-Loom .mcui-inputPattern {
margin: 60px 30px;
position: absolute;
}
.mcui-Loom .mcui-bannerSprite {
margin-left: 4px;
}
/* [[Template:Grindstone]] */
.mcui-Grindstone > * {
display: inline-block;
vertical-align: top;
}
.mcui-Grindstone > .mcui-grindstone {
background: url("https://alexscaves.wiki.gg/images/d/de/Grid_layout_Grindstone.png") no-repeat;
width: 108px;
height: 112px;
}
.mcui-Grindstone .mcui-input1 {
margin: 6px 36px;
position: absolute;
}
.mcui-Grindstone .mcui-input2 {
margin: 48px 36px;
position: absolute;
}
.mcui-Grindstone > .mcui-arrow {
background: url("https://alexscaves.wiki.gg/images/d/dc/Grid_layout_Furnace_Progress_%28in-active%29.png") no-repeat;
width: 44px;
height: 34px;
margin: 36px 22px 0 22px;
}
.mcui-Grindstone > .mcui-output {
margin-top: 34px;
}
/* [[Template:Stonecutter]] */
.mcui-Stonecutter > * {
display: inline-block;
vertical-align: top;
}
.mcui-Stonecutter > .mcui-stonecutterArrow {
background: url("https://alexscaves.wiki.gg/images/9/97/Grid_layout_Stonecutter_Arrow.png") no-repeat;
width: 58px;
height: 60px;
margin: 9px 4px 0 4px;
}
.mcui-Stonecutter > .mcui-output {
margin: 28px 0 28px 0;
}
.mcui-Stonecutter > .mcui-input {
margin-top: 36px;
}
.mcui-Stonecutter .mcui-stonecutterSprite {
margin: 4px 0 0 5px;
}
/* [[Template:Infobox]], [[Template:Infobox row]] */
.notaninfobox {
position: relative;
clear: right;
margin: 0 0 1em 1em;
width: 300px;
font-size: 90%;
background: #FFF;
float: right;
border: 1px solid #CCC;
padding: 2px;
overflow: auto;
z-index: 1;
}
@media all and (max-width: 511px) {
.notaninfobox {
float: none;
margin-left: 0;
width: auto;
}
}
@media all and (max-width: 337px) {
.notaninfobox {
margin-left: -16px;
margin-right: -16px;
border-left: none;
border-right: none;
}
}
.notaninfobox > .infobox-title {
font-weight: bold;
text-align: center;
font-size: 120%;
}
.infobox-imagearea {
text-align: center;
padding: 4px;
}
.infobox-imagearea > div:not(:first-child) {
padding-top: 1em;
}
/* Horizontally centre animated images */
#mw-content-text .infobox-imagearea .animated {
display: inline-flex;
align-items: center;
}
.notaninfobox .infobox-rows {
display: table;
margin: 0 !important;
width: 100% !important;
border-collapse: separate !important;
border-spacing: 1px !important;
}
.infobox-rows > tbody > tr > th {
text-align: left;
white-space: nowrap;
}
#mw-content-text .infobox-rows p {
margin: 0;
}
/* Merge adjacent dls in the infobox (since they're usually supposed to be one, but the wiki screws up sometimes) */
.infobox-rows dl + dl {
margin-top: -.4em;
}
.infobox-rows dl:last-child {
margin-bottom: .2em;
}
.infobox-footer {
text-align: center;
}
/* [[Template:Sprite]] */
.sprite {
display: inline-block;
vertical-align: text-top;
height: 16px;
width: 16px;
background-repeat: no-repeat;
}
.sprite + .sprite-text {
padding-left: .312em;
}
/*
* [[Template:Sprites/InvSprite]]: [[File:InvSprite.png]]
* [[Template:Sprites/SlotSprite]]
*/
.inv-sprite,
.slot-sprite {
width: 32px;
height: 32px;
vertical-align: middle;
}
/* [[Template:Nbt/sprite]]: [[File:Nbtsheet.png]] */
.nbt-sprite {
background-image: url("https://alexscaves.wiki.gg/images/d/d0/Nbtsheet.png");
}
/* [[Template:Schematic]] */
.thumb .schematic {
margin: auto;
}
table.schematic {
border-collapse: collapse;
font-size: 32px;
}
span.schematic {
display: inline-block;
font-size: 32px;
}
table.schematic td {
vertical-align: top;
}
table.schematic td,
span.schematic {
background-color: #FFF;
border: 1px solid #CCC;
padding: 0;
width: 1em;
height: 1em;
overflow: hidden;
}
table.schematic td > div,
span.schematic {
position: relative;
}
table.schematic td > div .sprite,
table.schematic td > div .text,
span.schematic .sprite,
span.schematic .text {
position: absolute;
left: 0;
}
.schematic .text {
line-height: 1.5em;
font-size: 75%;
width: 100%;
color: black;
font-weight: bold;
text-align: center;
text-shadow: 0 0 2px #FFF;
}
/* [[Template:Layered blueprint]] */
.layered-blueprint {
position: relative;
}
.layered-blueprint-radio {
display: none;
}
.layered-blueprint-tab {
display: inline-block;
cursor: pointer;
margin-left: 100%;
border-left: 4px solid #252525;
padding: .2em .5em;
white-space: nowrap;
transition: color 200ms, border-color 200ms;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.layered-blueprint-tab:hover {
color: #80B640;
}
.layered-blueprint-radio:checked + .layered-blueprint-tab {
color: #80B640;
border-left-color: #80B640;
}
.layered-blueprint-layer {
position: absolute;
top: 0;
background-color: rgba(230,239,244,.6);
width: 100%;
height: 100%;
}
.layered-blueprint-radio:checked + .layered-blueprint-tab + .layered-blueprint-layer ~ .layered-blueprint-layer {
visibility: hidden;
}
/* [[Template:Sound]] */
.sound-audio {
display: block;
}
/** Misc stuff **/
/* The blue header used throughout the wiki */
.mcwiki-header {
background: #729FCF;
border: 1px solid #CCC;
border-bottom: 4px groove #999;
border-right: 4px groove #999;
padding: 5px;
}
/* Fix treeview overlapping floating content */
div.thumb {
position: relative;
z-index: 1;
}
/* Horizontal list */
#mw-content-text .hlist ul {
display: inline;
margin: 0;
padding: 0;
}
#mw-content-text .hlist li {
display: inline;
}
#mw-content-text .hlist li:not(:last-child) {
padding-right: .286em;
}
#mw-content-text .hlist li:not(:last-child)::after {
content: "";
display: inline-block;
position: relative;
left: .286em;
bottom: .214em;
background-color: #000;
height: 3px;
width: 3px;
}
#mw-content-text .hlist li li:first-child::before {
content: "(";
font-weight: normal;
}
#mw-content-text .hlist li li:last-child::after {
content: ")";
font-weight: normal;
}
#mw-content-text .hlist li li li {
font-size: x-small;
}
/* Element animator */
#mw-content-text .animated > *:not(.animated-active),
#mw-content-text .animated > .animated-subframe > *:not(.animated-active) {
display: none
}
#mw-content-text span.animated,
#mw-content-text span.animated.animated-visible > *,
#mw-content-text span.animated.animated-visible > .animated-subframe > * {
display: inline-block;
}
#mw-content-text div.animated.animated-visible > *,
#mw-content-text div.animated.animated-visible > .animated-subframe > * {
display: block;
}
/* Generic nowrap class */
.nowrap {
white-space: nowrap;
}
/* Hide noscript only elements */
.client-js .noscript {
display: none;
}
/* Remove bullets/numbers from a list */
#mw-content-text .list-style-none ul, .list-style-none ol {
list-style: none;
margin-left: 0;
}
/* Allow setting the text alignment of particular table columns */
.col-1-left td:nth-child(1),
.col-2-left td:nth-child(2),
.col-3-left td:nth-child(3),
.col-4-left td:nth-child(4),
.col-5-left td:nth-child(5),
.col-6-left td:nth-child(6),
.col-7-left td:nth-child(7),
.col-8-left td:nth-child(8),
.col-9-left td:nth-child(9) {
text-align: left;
}
.col-1-center td:nth-child(1),
.col-2-center td:nth-child(2),
.col-3-center td:nth-child(3),
.col-4-center td:nth-child(4),
.col-5-center td:nth-child(5),
.col-6-center td:nth-child(6),
.col-7-center td:nth-child(7),
.col-8-center td:nth-child(8),
.col-9-center td:nth-child(9) {
text-align: center;
}
.col-1-right td:nth-child(1),
.col-2-right td:nth-child(2),
.col-3-right td:nth-child(3),
.col-4-right td:nth-child(4),
.col-5-right td:nth-child(5),
.col-6-right td:nth-child(6),
.col-7-right td:nth-child(7),
.col-8-right td:nth-child(8),
.col-9-right td:nth-child(9) {
text-align: right;
}
/* Centre lists in custom CE TOC */
.toc.console-toc ul {
text-align: center;
}
/* Bold text in a table header cell shouldn't get extra bold */
b,
strong {
font-weight: bold;
}
/* Make the first heading row of a table stick to the top of the screen */
/* Won't work properly with rowspan headers, or colspan rows in the table */
.stikitable > * > tr:first-child > th {
position: -webkit-sticky;
position: sticky;
top: 0;
/* This fixes the borders for some reason */
background-clip: padding-box;
}
/* Add back the bottom border when stuck */
.stikitable > * > tr:first-child > th::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
border-bottom: 1px solid;
border-color: inherit;
}
/* Collapsible elements ([[MediaWiki:Gadget-site.js]]) */
.collapsible.collapsed > tr:not(:first-child),
.collapsible.collapsed > tbody > tr:not(:first-child),
.collapsible.collapsed > thead + tbody > tr:first-child,
.collapsible.collapsed > tbody + tbody > tr:first-child,
.collapsible.collapsed > tfoot > tr,
.collapsible.collapsed > .collapsible-content {
display: none;
}
.collapsetoggle {
display: inline-block;
font-weight: normal;
font-style: normal;
float: right;
text-align: right;
margin-left: .8em;
}
.collapsetoggle-left > tr > * > .collapsetoggle,
.collapsetoggle-left > * > tr > * > .collapsetoggle,
.collapsetoggle-left > * > .collapsetoggle,
.collapsetoggle-left > .collapsetoggle {
float: left;
text-align: left;
margin-right: .8em;
margin-left: 0;
}
.collapse-button-none > * > tr > * > .collapsetoggle,
.collapsetoggle-inline > tr > * > .collapsetoggle,
.collapsetoggle-inline > * > tr > * > .collapsetoggle,
.collapsetoggle-inline > * > .collapsetoggle,
.collapsetoggle-inline > .collapsetoggle {
float: none;
text-align:left;
}
.collapsetoggle-custom {
visibility: hidden;
}
/* Mark internal links as plain */
#mw-content-text a.external[href^="https://alexscaves.wiki.gg"],
#mw-content-text a.external[href^="//alexscaves.wiki.gg"] {
background: none;
padding-right: 0;
}
/* Show abusefilter error footer only once at the end */
.errorbox li:not(:last-child) .abusefilter-message-footer {
display: none;
}
/* Bulletless lists, for list semantics without the visuals */
.bulletless ul {
list-style-type: none;
list-style-image: none;
margin: 0;
}
/* Various styling for message boxes */
.msgbox {
display: flex;
background: #FCFCFC;
border: 1px solid #CCC;
box-sizing: border-box;
align-items: center;
width: auto;
padding: .4em .8em;
margin: 0 auto;
margin-bottom: 1em;
}
.msgbox + .msgbox {
border-top: none;
margin-top: -1em;
}
:not(.msgbox) + .msgbox,
.msgbox:first-of-type {
border-top-right-radius: .15em;
border-top-left-radius: .15em;
}
.msgbox #msgbox-iconimage,
.msgbox #msgbox-image {
margin: 0 1.5em 0 .5em;
}
.msgbox-mini {
padding: .4em .5em;
margin: 0 0;
margin-bottom: 1em;
}
.msgbox-mini #msgbox-icon {
align-self: flex-start;
}
.msgbox-mini #msgbox-iconimage,
.msgbox-mini #msgbox-image {
margin: 0 .4em 0 .5em;
}
.msgbox-mini #msgbox-text {
font-size: small;
}
.msgbox-red {
background: #FDD;
border-left: 4px solid #FAA;
}
.msgbox-orange {
background: #FEC;
border-left: 4px solid #DC8;
}
.msgbox-yellow {
background: #FFC;
border-left: 4px solid #DD8;
}
.msgbox-green {
background: #DFD;
border-left: 4px solid #9C9;
}
.msgbox-blue {
background: #DEF;
border-left: 4px solid #9CD;
}
.msgbox-magenta {
background: #FDF;
border-left: 4px solid #DAD;
}
.msgbox-purple {
background: #EEF;
border-left: 4px solid #AAD;
}
/* Key stylings */
kbd, .kbd-color {
text-align: center;
font-size: 80%;
font-family: inherit;
font-weight: 500;
border: 1px solid;
border-radius: 2px;
padding: .1em .4em;
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
kbd, .kbd-color {
text-shadow: 0 1px 0 #FFF;
color: #222;
background-color: #F8F9FA;
border-color: #C8CCD1;
box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 0 0 2px #FFF inset;
}