/** Minecraft skin **/ /* Minecraft font */ @font-face { font-family: Minecraft; src: url(//hydra-media.cursecdn.com/hydra/fonts/minecraft.woff) format('woff'), url(//hydra-media.cursecdn.com/hydra/fonts/minecraft.ttf) format('truetype'); } /* Give the background the stone and grass texture: [[File:Mobile-background.png]] [[File:Background HiDPI.png]] */ .header { margin-top: 0; border-top: none; } #mw-mf-page-center, .overlay-header-container { background-color: #202020 !important; background-image: url(//hydra-media.cursecdn.com/minecraft.gamepedia.com/6/6a/Mobile-header.png), url(//hydra-media.cursecdn.com/minecraft.gamepedia.com/d/de/Background_HiDPI.png) !important; background-size: 48px auto !important; background-repeat: repeat-x, repeat !important; border: none !important; } .overlay-header-container { padding-bottom: 26px; top: 0 !important; } .overlay-content { padding-top: 26px; } .search-overlay .overlay-header, .search-overlay .results, .search-overlay .search-feedback { background: none !important; } input.search { background: none !important; } input.search::-webkit-input-placeholder { color: #6D6D6D; } input.search:-ms-input-placeholder { color: #6D6D6D; } input.search::-ms-input-placeholder { color: #6D6D6D; } #content { margin-top: 26px; } .heading-holder { padding-top: 10px; } /* Give the main content area its healthy blue glow */ body, #content, .search-overlay { background-color: #E6EFF4 !important; border: none; } .search-overlay { background-position: 0 3.35em !important; } #bodyContent:first-child { padding-top: 10px; } #footer, #footer a:active { color: #FFF; } #footer a { color: #BFBFBF; } /* Fix dumb default styling */ .content { clear: both; } .content .navbox { display: table !important; } .content code, .content pre { background-color: #f9f9f9; border: 1px solid #ddd; color: black; } .content code { border-radius: 2px; } @media all and (max-width: 768px) { .gallerybox .thumb > div { margin: 15px !important; width: auto !important; } } /* Use black bullet points, instead of blue circles: [[File:List bullet.svg]] */ .content ul { list-style-image: url(//hydra-media.cursecdn.com/minecraft.gamepedia.com/3/39/List_bullet.svg); } /** Template stylings **/ /* [[Template:Inventory 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; } .invslot-item-image > a.new:first-child { background: url(//hydra-media.cursecdn.com/minecraft.gamepedia.com/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; } /* 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; } /* [[Template: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(//hydra-media.cursecdn.com/minecraft.gamepedia.com/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(//hydra-media.cursecdn.com/minecraft.gamepedia.com/a/a9/Grid_layout_Shapeless.png); } .mcui-Crafting_Table .mcui-fixed { background-image: url(//hydra-media.cursecdn.com/minecraft.gamepedia.com/b/b8/Grid_layout_Fixed.png); } /* [[Template: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(//hydra-media.cursecdn.com/minecraft.gamepedia.com/d/d8/Grid_layout_Fire.png) no-repeat; width: 36px; height: 36px; } .mcui-Furnace .mcui-fuel.mcui-inactive { background-image: url(//hydra-media.cursecdn.com/minecraft.gamepedia.com/a/ab/Grid_layout_Fire_%28in-active%29.png); } .mcui-Furnace > .mcui-arrow { background: url(//hydra-media.cursecdn.com/minecraft.gamepedia.com/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(//hydra-media.cursecdn.com/minecraft.gamepedia.com/d/dc/Grid_layout_Furnace_Progress_%28in-active%29.png); } .mcui-Furnace > .mcui-output { margin-top: 28px; } /* [[Шаблон:Варка]]: [[Файл:Grid layout Brewing Bubbles.gif]], [[Файл:Grid layout Brewing Bubbles (In-active).png]], [[Файл:Grid layout Brewing Arrow.png]], [[Файл:Grid layout Brewing Arrow (In-active).png]], [[Файл:Grid layout Brewing Paths.png]], [[Файл:Grid layout Brewing Empty.png]], [[Файл:Grid layout Brewing Blaze.png]], [[Файд:Grid layout Brewing Blaze (In-active).png]] */ .mcui-Brewing_Stand > * { display: block; } .mcui-Brewing_Stand .invslot { vertical-align: top; } .mcui-Brewing_Stand > .mcui-input > .invslot { margin-top: 3px; } .mcui-Brewing_Stand .mcui-blaze { background-image: url(//hydra-media.cursecdn.com/minecraft-ru.gamepedia.com/b/b0/Grid_layout_Brewing_Blaze.png?version=da14e19a1a78d4ae49b079262e5cc00f); width: 92px; height: 69px; position: relative; z-index: 1; margin-left: -2px; display: inline-block; background-repeat: no-repeat; } .mcui-Brewing_Stand > .mcui-input.mcui-inactive > .mcui-blaze { background-image: url(//hydra-media.cursecdn.com/minecraft-ru.gamepedia.com/2/26/Grid_layout_Brewing_Blaze_%28In-active%29.png?version=3e06c348e34911f5833f89482dc11263); } .mcui-Brewing_Stand .mcui-bubbling, .mcui-Brewing_Stand .mcui-arrow { display: inline-block; background-repeat: no-repeat; width: 24px; } .mcui-Brewing_Stand .mcui-bubbling { background-image: url(//hydra-media.cursecdn.com/minecraft-ru.gamepedia.com/6/65/Grid_layout_Brewing_Bubbles.gif); height: 57px; margin-left: -30px; margin-right: 4px; } .mcui-Brewing_Stand > .mcui-input.mcui-inactive > .mcui-bubbling { background-image: url(//hydra-media.cursecdn.com/minecraft-ru.gamepedia.com/d/db/Grid_layout_Brewing_Bubbles_%28In-active%29.png); } .mcui-Brewing_Stand .mcui-arrow { background-image: url(//hydra-media.cursecdn.com/minecraft-ru.gamepedia.com/4/4b/Grid_layout_Brewing_Arrow.png?version=35b9ec184334b5e416d068cb3872fe01); margin-right: 22px; height: 59px; } .mcui-Brewing_Stand > .mcui-input.mcui-inactive > .mcui-arrow { background-image: url(//hydra-media.cursecdn.com/minecraft-ru.gamepedia.com/5/59/Grid_layout_Brewing_Arrow_%28In-active%29.png?version=24380532f1bf937b34d8ff0522afe74f); } .mcui-Brewing_Stand > .mcui-paths { background: url(//hydra-media.cursecdn.com/minecraft-ru.gamepedia.com/8/82/Grid_layout_Brewing_Paths.png?version=1449d27b56db29327df6f4c51d687737) no-repeat; position: relative; width: 60px; height: 50px; margin: -32px 0 -16px 112px; z-index: 1; } .mcui-Brewing_Stand .mcui-output { margin-left: 78px; } .mcui-Brewing_Stand .mcui-output .invslot { background-image: url(//hydra-media.cursecdn.com/minecraft-ru.gamepedia.com/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:Infobox]], [[Template:Infobox row]] */ .notaninfobox { clear: right; margin: 0 0 1em 1em; max-width: 300px; font-size: 90%; background: #FFF; float: right; border: 1px solid #CCC; padding: 2px; overflow: auto; } @media all and (max-width: 511px) { .notaninfobox { float: none; margin-left: 0; max-width: none; } } @media all and (max-width: 337px) { .notaninfobox { margin-left: -16px; margin-right: -16px; border-left: none; border-right: none; } } .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; } .infobox-rows { margin: 0 !important; width: 100%; border: 0; border-collapse: separate !important; border-spacing: 2px !important; } .infobox-rows > tbody > tr > th { text-align: left; white-space: nowrap; } .infobox-rows p { margin: 0; } .infobox-rows * { border: 0; } .infobox-rows audio { width: 184px; } .infobox-footer { text-align: center; } /* [[Template:Navbox]] */ .navbox { background: #FFF; border: 1px solid #CCC; margin: 1em auto 0; clear: both; width: 100%; } .navbox .navbox-top { white-space: nowrap; background-color: #CCC; padding: 0 3px; text-align: center; } .navbox-navbar, .navbox-navbar-mini { float: left; font-size: 80%; } .navbox-title { padding: 0 10px; font-size: 110%; } .navbox th { background-color: #EEE; padding: 0 10px !important; text-align: right; } .navbox td { width: 100%; padding: 0 0 0 2px !important; } .navbox table { margin: -1px -1px -1px -3px !important; width: auto; } .navbox table td, .navbox table th { border: 1px solid #CCC; } /* [[Template:Sprite]] */ .sprite { display: inline-block; vertical-align: text-top; height: 16px; width: 16px; background-repeat: no-repeat; } .sprite + .sprite-text { padding-left: 0.312em; } /* [[Template:CommentSprite]]: [[File:CommentCSS.png]] */ .comment-sprite { background-image: url(//hydra-media.cursecdn.com/minecraft.gamepedia.com/9/9c/CommentCSS.png); } /* [[Template:BlockSprite]]: [[File:BlockCSS.png]] */ .block-sprite { background-image: url(//hydra-media.cursecdn.com/minecraft.gamepedia.com/d/df/BlockCSS.png); } /* [[Template:EntitySprite]]: [[File:EntityCSS.png]] */ .entity-sprite { background-image: url(//hydra-media.cursecdn.com/minecraft.gamepedia.com/4/40/EntityCSS.png); } /* [[Template:ItemSprite]]: [[File:ItemCSS.png]] */ .item-sprite { background-image: url(//hydra-media.cursecdn.com/minecraft.gamepedia.com/f/f5/ItemCSS.png); } /* [[Template:Schematic]]: [[File:SchematicSprite.png]] */ .schematic-sprite { background-image: url(//hydra-media.cursecdn.com/minecraft.gamepedia.com/c/c2/SchematicSprite.png); background-size: 32em auto; width: 1em; height: 1em; } /* [[Template:InvSprite]]: [[File:InvSprite.png]] */ .inv-sprite { background-image: url(//hydra-media.cursecdn.com/minecraft.gamepedia.com/4/44/InvSprite.png); width: 32px; height: 32px; vertical-align: middle; } /* [[Template:Nbt/sprite]]: [[File:Nbtsheet.png]] */ .nbt-sprite { background-image: url(//hydra-media.cursecdn.com/minecraft.gamepedia.com/d/d0/Nbtsheet.png); } .thumb .schematic { margin: auto; } table.schematic { border-collapse: collapse; font-size: 32px; width: auto; } 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 > span, span.schematic > span { 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: 0.2em 0.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; } @-webkit-keyframes layered-blueprint-fade-in { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } } @keyframes layered-blueprint-fade-in { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } } .layered-blueprint-layer { position: absolute; top: 0; background-color: rgba(230, 239, 244, 0.6); width: 100%; height: 100%; -webkit-animation: layered-blueprint-fade-in 200ms; animation: layered-blueprint-fade-in 200ms; } @-webkit-keyframes layered-blueprint-fade-out { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } @keyframes layered-blueprint-fade-out { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } .layered-blueprint-radio:checked + .layered-blueprint-tab + .layered-blueprint-layer ~ .layered-blueprint-layer { visibility: hidden; -webkit-animation: layered-blueprint-fade-out 200ms; animation: layered-blueprint-fade-out 200ms; } /* Alternating table rows, primarily used with [[Template:Infobox row]] */ .alternaterows tr:nth-child(even), .infobox-rows tr:nth-child(even) { background-color: #F9F9F9; } /* The blue header used throughout the wiki */ .mcwiki-header { background: #729FCF; border: 1px solid #ccc; border-bottom: 4px groove #999999; border-right: 4px groove #999999; padding: 5px; } /* Turn a list into a tree view style (See [[.minecraft]]) */ .treeview { margin-top: 0.3em; } .treeview .treeview-header { padding-left: 3px; font-weight: bold; } .treeview .treeview-header:last-child { border-color: #636363 !important; border-left-style: dotted; } .treeview .treeview-header:not(:last-child):before { content: none; } .treeview .treeview-header:last-child:before { border-bottom: 0; } .treeview ul, .treeview li { margin: 0; padding: 0; list-style-type: none; list-style-image: none; } .treeview li li { position: relative; padding-left: 13px; margin-left: 7px; border-left: 1px solid #636363; } .treeview li li:before { content: ""; position: absolute; top: 0; left: -1px; width: 11px; height: 11px; border-bottom: 1px solid #636363; } .treeview li li:last-child:not(.treeview-continue) { border-color: transparent; } .treeview li li:last-child:not(.treeview-continue):before { border-left: 1px solid #636363; width: 10px; } .nbttree-inherited { background-color: #E6E6FA; } /* Simulate link styling for JS only links */ .jslink { color: #0645AD; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .jslink:hover { text-decoration: underline; cursor: pointer; } .jslink:active { color: #FAA700; } /* Horizontal list */ .content .hlist ul { display: inline; padding: 0; } .content .hlist li { display: inline-block; margin: 0; white-space: nowrap; } .content .hlist li:not(:last-child) { padding-right: 0.313em; } .content .hlist li:not(:last-child):after { content: ""; display: inline-block; position: relative; left: 0.313em; bottom: 0.234em; background-color: #000; height: 3px; width: 3px; } .content .hlist li > ul li:first-child:before { content: "("; } .content .hlist li > ul li:last-child:after { content: ")"; margin-right: -0.313em; } .content .hlist li li li { font-size: x-small; } /* Generic styling for animation class */ .content .animated > *:not(.active):not(.skip), .content .paused > *:not(.active):not(.skip) { display: none; } /* Generic nowrap class */ .nowrap { white-space: nowrap; } /* Hide noscript only elements */ .noscript { display: none; } /* Try to use nearest neighbour scaling for pixelated images */ .pixel-image, .invslot-item-image, .sprite, .mcui-fuel, .mcui-arrow, .mcui-arrow + img, .mcui-blaze, .mcui-bubbling, .mcui-paths, .mcui-icons > span, .invslot { image-rendering: optimizeSpeed; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: crisp-edges; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; } /* Remove bullets/numbers from a list */ .list-style-none ul, .list-style-none ol { list-style: none; margin-left: 0; } /* Set wikitable background to its intended color */ .wikitable { background: #F9F9F9; } /* Hide things on mobile (the extension is meant to do this automatically, but it doesn't work) */ .nomobile { display: none; } /* Make sure the logo fits */ #mcw-logo img { max-width: 100%; height: auto; } /* Кнопка "Вверх": [[Файл:Scroll_top_HiDPI.png]] */ #scroll-top { display: none; background: url(//hydra-media.cursecdn.com/minecraft-ru.gamepedia.com/f/fb/Scroll_top_HiDPI.png) no-repeat; background-size: 50px; height: 50px; width: 50px; cursor: pointer; position: fixed; right: 20px; bottom: 20px; z-index: 10000; } #scroll-top:hover { background-position: 0 -50px; } /* [[Шаблон:Сетка/Ячейка]] */ .grid { display: inline-block; position: relative; text-align: left !important; background-color: #8B8B8B; height: 32px; width: 32px; padding: 2px; vertical-align: bottom; } .grid.output { height: 48px; width: 48px; } .grid.hidden { background-color: transparent; padding: 0px; z-index: 10; } .grid .border { display: block; margin: -2px 0 0 -2px; border-style: solid none none solid; border-width: 2px; border-color: #373737; height: 100%; } .grid .border span { display: block; margin-right: -2px; border-style: none solid solid none; border-width: 2px; border-color: #FFFFFF; height: 100%; } .grid .image, .grid .default-image { position: absolute; line-height: 16px; top: 2px; width: 32px; } .grid.output .image { top: 10px; left: 10px; } .grid.hidden .image { top: 0; } .grid .image > a.new, .gridsprite > a.new { background-image: url("//hydra-media.cursecdn.com/minecraft-ru.gamepedia.com/3/35/Grid_Unknown.png"); display: block; width: 32px; height: 32px; outline: none; text-indent: -99999px; } .grid .number { display: block; margin: -12px -4px 0 0; text-align: right; font-family: Minecraft; font-size: 16px; pointer-events: none; } .grid .number .selflink, .grid .number a { color: #3F3F3F; text-decoration: none; font-weight: normal; } .grid .image a.new + .number, .sprite a.new + .number { display: none; } .grid .number span { position: absolute; right: -2px; bottom: 2px; color: #FFFFFF; } .gridsprite { display:inline-block; position: relative; text-align: left !important; height: 32px; width: 32px; vertical-align: bottom; background-color: transparent; padding: 0; z-index: 10; line-height: 16px; } .gridsprite .number { display: block; margin: -12px -4px 0 0; text-align: right; font-family: Minecraft; font-size: 16px; pointer-events: none; } .gridsprite .number a { color: #3F3F3F; text-decoration: none; font-weight: normal; } .gridsprite .number span { position: absolute; right: -2px; bottom: -2px; color: #FFFFFF; } .grid-Crafting_Table, .grid-Furnace, .grid-Brewing_Stand table, .grid-generic { background: #C6C6C6; border: outset 2px #999; padding: 6px; text-align: left !important; } .grid-Crafting_Table td, .grid-Furnace td, .grid-Brewing_Stand td, .grid-generic td { border: none; padding: 0; } /* [[Шаблон:Сетка/Крафт]] */ .grid-Crafting_Table .arrow, .grid-Crafting_Table .shapeless { text-align: center; vertical-align: bottom; } .grid-Crafting_Table .arrow { width: 40px; padding-bottom: 5px; } .grid-Crafting_Table .shapeless span { cursor: help; } /* [[Шаблон:Сетка/Печка]] */ .grid-Furnace .arrow, .grid-Furnace .output { text-align: center; vertical-align: middle; } .grid-Furnace .arrow { padding-right: 18px !important; padding-left: 14px !important; } /* [[Шаблон:Сетка/Варка]] */ .grid-Brewing_Stand { position: relative; width: 144px; } .grid-Brewing_Stand .bubbles { text-align: right; } .grid-Brewing_Stand .input { padding: 3px 0 !important; vertical-align: top; } .grid-Brewing_Stand .output1 { padding: 4px 10px 14px 0 !important; } .grid-Brewing_Stand .output2 { padding-top: 18px !important; } .grid-Brewing_Stand .output3 { padding: 4px 0 14px 10px !important; } .grid-Brewing_Stand .paths { position: absolute; bottom: 42px; left: 42px; z-index: 5; } .content table.grid-Furnace, .content table.grid-Brewing_Stand, .content table.grid-Crafting_Table { width: unset!important; display: table!important; margin: unset!important } table.grid-Furnace, table.grid-Brewing_Stand, table.grid-Crafting_Table { border-collapse: unset!important } .switcher-container .oo-ui-popupToolGroup .oo-ui-popupToolGroup-handle { color: white; background-color: #347bff; } .switcher-container .oo-ui-popupToolGroup.oo-ui-widget-enabled .oo-ui-popupToolGroup-handle:not(:hover):not(:active) .oo-ui-icon-advanced, .switcher-container .oo-ui-popupToolGroup.oo-ui-widget-enabled .oo-ui-popupToolGroup-handle:not(:hover):not(:active) .oo-ui-indicator-down { -webkit-filter: invert(100%); filter: invert(100%); } .switcher-container .oo-ui-popupToolGroup-handle { height: 2.55em; } .oo-ui-toolbar-bar { border: none!important } .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted; } .tooltip .tooltiptext { visibility: hidden; background-color: #fff; text-align: center; border-radius: 3px; padding: 3px 7px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -55px; opacity: 0; transition: opacity .3s; border: 1px solid #aaa; } .tooltip .tooltiptext:before, .tooltip .tooltiptext:after { content: ""; position: absolute; bottom: -10px; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #fff transparent transparent transparent; } .tooltip .tooltiptext:before { border-top-color: #777; bottom: -11px; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }