MediaWiki:Common.css

/* Sitewide CSS stylesheet. Take care when making any changes as they'll be pushed to every user almost immediately. */

/* Pretty light-grey for visited links and other link stuffs. */

a.new:link { color: #BA0000 }

a:link { color: #3F56AD }

a:visited { color: #75735F }

/* fixes from w:MediaWiki:Common.css */

sup, sub { line-height: 1em; }

ol.references { font-size: 90%; }

.references-small { font-size: 80%; }

ol.references>li:target { background-color: #ddeeff; }

sup.reference:target { background-color: #ddeeff; }

/* Infobox styling */

.infobox { background: #ffffff; width: 260px; float: right; clear: right; margin: 0.5em 0 1em 0.5em; border: 1px solid black; padding: 2px; }

.infobox .section { background: #C0DFFF; color: black; font-weight: bold; font-size: 1.2em; text-align: center; padding: 3px; clear: both; }

.infobox tr { vertical-align: top; }

/* Adjust preformatted text size */

pre { font-size: 100%; }

/* Update table styling (Template:VersionTableStart, Template:PatchTableStart */

.updatetablehead { display: flex; border: 1px solid #aaa; background-color: #ffaea3; font-weight: bold; text-align: center; }

.updatetablebody { max-height: 300px; overflow-y: scroll; overflow-x: auto; border: 1px solid #aaa; border-top: none; }

/* Colours */

table.ambox-notice, td.ambox-notice { border-left: 10px solid #1e90ff; /* Blue */ }

table.ambox-notice-2, td.ambox-notice-2 { border-left: 10px solid #3f6180; /* Dark Blue */ }

table.ambox-delete, table.ambox-serious { background: #fee; /* Pink */ border: 1px solid #BB7070; }

td.ambox-delete, td.ambox-serious { border-left: 10px solid #b22222; /* Red */ }

table.ambox-content, td.ambox-content { border-left: 10px solid #f28500; /* Orange */ }

table.ambox-style, td.ambox-style { border-left: 10px solid #ffcc00; /* Yellow */ }

table.ambox-images, td.ambox-images { border-left: 10px solid #000000; /* Black */ }

table.ambox-protection, td.ambox-protection { border-left: 10px solid #bba; /* Gray-gold */ }

table.ambox-good, td.ambox-good { border-left: 10px solid #73D216; /* Green */ }

th.ambox-text, td.ambox-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.ambox-image { /* The left image cell */ border: none; padding: 2px 0 2px 0.9em; /* 0.9em left, 0px right */ text-align: center; }

td.ambox-image2 { /* The right image cell */ border: none; padding: 2px 0.9em 2px 0; /* 0px left, 0.9em right */ text-align: center; }

td.ambox-empty-cell { /* An empty narrow cell */ border: none; padding: 0px; width: 1px; }

/* Item Grid Styling on Item Grid*/

ul.shopnav { list-style: none; margin: 0px; }

ul.shopnav li { margin: 4px; box-shadow: 0px 0px 1px 2px green; }

/* Item List Styling on Items */

div.itemlist { display: flex; flex-wrap: wrap; font-weight: bold; }

div.itemlist>div { flex-basis: 400px; padding: 3px 0px; }

/* Hero Infostrip */

div.infostripe { display: flex; align-items: stretch; justify-content: center; overflow: hidden; text-align: center; vertical-align: top; color: white; font-size: 20px; text-shadow: 0 0 5px black; }

div.infostripe a, div.infostripe a:link, div.infostripe a:visited, div.infostripe a:hover, div.infostripe a:active { color: white; text-decoration: none; }

.gradient_gameplay { background: linear-gradient(15deg, rgb(178, 67, 67) 0%, rgb(198, 92, 73) 17%, rgb(191, 127, 78) 62%, rgb(168, 65, 62) 100%); }

.gradient_cosmetics { background: linear-gradient(15deg, rgb(74, 74, 74) 0%, rgb(105, 159, 159) 17%, rgb(171, 216, 214) 62%, rgb(74, 74, 74) 100%); ; }

.gradient_audio { background: linear-gradient(15deg, rgb(23, 84, 43) 0%, rgb(1, 164, 118) 17%, rgb(77, 185, 116) 62%, rgb(23, 84, 43) 100%); }

.gradient_history { background: linear-gradient(15deg, rgb(180, 114, 15) 0%, rgb(188, 185, 2) 17%, rgb(212, 216, 92) 62%, rgb(180, 114, 15) 100%); }

div.infostripe div { padding: 15px 25px 10px; border-left: 4px solid rgba(75, 75, 75, 0.5); border-right: 4px solid rgba(75, 75, 75, 0.5); margin: 0px -2px; }

/* Hero entry - used in hero tables and cosmetic infoboxes */

div.heroentry { width: 110px; height: 62px; padding: 1px; display: inline-block; overflow: hidden; text-align: center; }

div.heroentry div { position: relative; }

div.heroentrytext { pointer-events: none; width: 110px; height: 62px; top: -62px; display: flex; justify-content: center; align-items: flex-end; line-height: 15px; }

div.heroentrytext span { font-size: 12px; text-decoration: none; color: white; text-shadow: -1px 0 0.2em black, 0 1px 0.2em black, 1px 0 0.2em black, 0 -1px 0.2em black; }

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

/* Generate interpuncts */

.hlist dd:after, .hlist dt: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; }

/* Add parens around nested lists */

.hlist dl dl:before, .hlist ol ol:before, .hlist ul ul:before { content: "("; }

.hlist dl dl:after, .hlist ol ol:after, .hlist ul ul:after { content: ")"; }

/* 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:before { content: counter(level2) " "; }

/* Unbulleted lists */

.plainlist ul { line-height: inherit; list-style: none none; margin: 0; }

.plainlist ul li { margin-bottom: 0; }

/* Navbox styling */

table.navbox { /* Navbox container style */ border: 1px solid #b44335; background: #FEFEFF; width: 100%; margin: auto; clear: both; font-size: 88%; text-align: center; padding: 1px; }

table.navbox+table.navbox { /* Single pixel border between adjacent navboxes */ margin-top: -1px; /* (doesn't work for IE6, but that's okay)	  */ }

.navbox-title, .navbox-abovebelow, table.navbox th { text-align: center; /* Title and above/below styles */ padding-left: 1em; padding-right: 1em; }

table.navbox th a { color: #E4C62E; /* Should make the header links look better */ }

.navbox-group { /* Group style */ white-space: nowrap; text-align: right; font-weight: bold; padding-left: 1em; padding-right: 1em; }

.navbox, .navbox-subgroup { background: #FEFEFF; /* Background color */ }

.navbox-list { border-color: #FEFEFF; /* Must match background color */ }

.navbox-title, table.navbox th { background: #CD5F51; /* Level 1 color */ color: #fff; /* text colour */ }

.navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title { background: #FDE6E3; /* Level 2 color */ color: #2D2723; }

.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: #ffe8e5; /* Level 3 color */ }

.navbox tr { background-color: #FEFEFF; /* Standard cell background */ }

.navbox-even { background: #F2F2F2; /* Even row striping */ }

.navbox-odd { background: transparent; /* Odd row striping */ }

/* Make English link bold. */

li#n-English { font-weight: bold; }

/* Hide languages box per namespace & per page */

.ns-0.page-Dota_2_Wiki .portal#p-Languages,

/* Main Page exception */

.ns--1 .portal#p-Languages,

/* Special */

.ns-2 .portal#p-Languages,

/* User */

.ns-3 .portal#p-Languages,

/* User talk */

.ns-4 .portal#p-Languages,

/* Team Fortress Wiki */

.ns-5 .portal#p-Languages,

/* Team Fortress Wiki talk */

.ns-6 .portal#p-Languages,

/* File */

.ns-7 .portal#p-Languages,

/* File talk */

.ns-8 .portal#p-Languages,

/* MediaWiki */

.ns-9 .portal#p-Languages /* MediaWiki talk */

{	display: none; }

/* Put a chequered background behind images, only visible if they have transparency */

.gallerybox .thumb img, background: white url("https://hydra-media.cursecdn.com/dota2.gamepedia.com/5/5d/Checker-16x16.png") repeat; }
 * 1) file img {

.gallerybox .thumb img:hover, background: white url("https://hydra-media.cursecdn.com/dota2.gamepedia.com/b/b3/Checker-16x16_Dark.png") repeat; }
 * 1) file img:hover {

/* But not on articles, user pages, portals or with opt-out. */

.ns-0 .gallerybox .thumb img, .ns-2 .gallerybox .thumb img, .ns-100 .gallerybox .thumb img, .nochecker .gallerybox .thumb img { background: #f9f9f9; }

/* Give audio files linked with [[Media:]] a special icon */

a[href$=".wav"].internal, a[href$=".ogg"].internal { background: url("https://hydra-media.cursecdn.com/dota2.gamepedia.com/4/46/Icon_external_link_wav.png") center right no-repeat; padding-right: 16px; }

/* Main page title removal fix */

body.page-Dota_2_Wiki h1.firstHeading, body.page-Special_RecentChanges h1.firstHeading, body.page-Special_RecentChanges span.subpages { display: none; }

/* * Direction change on Arabic pages. * All mainspace pages (.ns-0), userspace (.ns-2) and the edit box of template pages (.ns-10) will have * the text direction set to RTL */

body.ns-0.lang-ar div#bodyContent, body.ns-2.lang-ar div#bodyContent, body.ns-10.lang-ar div#bodyContent { direction: rtl; }

/* Remove italics from Chinese pages */

.lang-zh-hans i, .lang-zh-hant i { font-style: normal !important; }

/* Miscellaneous fixes */

font-weight: bold; }
 * 1) wpSave {

/* Main Page styling */

.mp-content-table { width: 100%; background: #FEFEFF; /* Body background color	*/ border: 1px solid #b44335; /* Main border color		*/ margin: 0.5em 0; }

.mp-content-header { font-size: 140%; padding: 0.5em 0; color: #fff; background: #b44335; /* Header background color */ border: none; border-bottom: 1px solid #b44335; /* Main border color		*/ }

.mp-content-body { padding: 0.5em; }

/* Don't wordwrap top links on main page */

.mp-content-table ul>li a.external.text, .mp-content-table ul>li>b>a { white-space: nowrap; }

.mp-content-header-alt, .mp-title-gradient { color: #fff; background: #b44335; }

.mp-content-header-alt { font-size: 140%; font-weight: bold; border: none; border-bottom: 1px solid #b44335; /* Main border color		*/ text-align: left; color: #fff; padding: 0.5em; padding-left: 0.75em; margin: -0.5em -0.5em 0px; }

/* Main Page event-related stuff */

background: url('https://hydra-media.cursecdn.com/dota2.gamepedia.com/d/d3/Event_gradient.png'); }
 * 1) eventBg {

/* Auto-size main page index icons */

.mp-index-icon a img { width: 100%; min-width: 64px; max-width: 128px; /* Image sizes. Re-produce larger? */	height: auto; }

.mp-giant-banner { height: 300px; }

.mp-giant-banner img { width: 100%; height: 100%; }

.usermessage { margin-bottom: 39px !important; }
 * 1) mw-js-message,

/* - Banner images */

.mp-giant-fall2016 { /* 26 October 2016 */ background: url('https://hydra-media.cursecdn.com/dota2.gamepedia.com/6/64/Main_Page_Giant_Banner_Fall_2016.jpg') center top no-repeat #000; }

.mp-giant-darkmoon { /* 26 January 2017 */ background: url('https://hydra-media.cursecdn.com/dota2.gamepedia.com/8/8b/Dark_Moon_Banner.jpg') center top no-repeat #000; }

display: flex; flex-direction: row; }
 * 1) mp-layout {

flex: 1 1 auto; margin-right: 1em; }
 * 1) mp-layout #mp-left {

flex: 0 0 500px; }
 * 1) mp-layout #mp-right {

border: solid 1px #660000; margin-bottom: 1em; padding: 1em; }
 * 1) mp-layout .mp-block {

background: #000000; border: none; padding: 0; text-align: center; }
 * 1) mp-layout .mp-block#battle-pass {

height: 50px; color: #660000; text-align: center; font-weight: bold; font-size: 170%; border-bottom: solid 1px #cccccc; }
 * 1) mp-layout .mp-heading {

text-align: center; }
 * 1) mp-layout #heroes .mp-content {

.useful-articles-layout { display: flex; flex-wrap: wrap; }

.useful-articles-layout>div { flex: 0 0 33%; word-wrap: break-word; max-width: 33%; }

.useful-articles-layout>div>div:first-child { font-weight: bold; text-align: center; }

/* End Main Page style */

/* wikitable/prettytable class for skinning normal tables */

table.wikitable, table.prettytable { background: #FEFEFF; border: 1px #000000 solid; }

table.wikitable th, table.wikitable td, table.prettytable th, table.prettytable td { white-space: inherit; }

table.wikitable th, table.prettytable th { text-align: center; white-space: inherit; }

table.wikitable caption, table.prettytable caption { margin-left: inherit; margin-right: inherit; font-weight: bold; }

table.wikitable .subheader { color: black; background: #C9DCFF; text-align: left; }

table.wikitable .header { color: black; background-color: #ffaea3; }

table.wikitable .border { border: 1px #000000 solid; }

table.wikitable .borderless { border: 0px; }

table.wikitable .borderless td { border: 0px; }

table.wikitable .borderless th { border: 0px; }

table.prettytable code, table.wikitable code { background-color: transparent; }

/* Bring the wikitable cell padding back to what it was before an update */

table.wikitable>tr>th, table.wikitable>tr>td, table.wikitable>*>tr>th, table.wikitable>*>tr>td { padding: 1px 1px; }

/* User agnostic styling */

.mw-userlink { font-weight: bold; }

.burbg, .admbg, .modbg, .locbg { background-color: #70B04A; color: white; font-size: 0.7em; padding: 0 2px; }

.mw-userlink[title="User:"] { text-transform: lowercase; }
 * 1) pt-userpage a[href="/wiki/User:"],

/* Admin Lime Color */

.mw-userlink[title="User:Bu3ny"], .mw-userlink[title="User:ChocolateWaffle"], .mw-userlink[title="User:Hefaistus"], .mw-userlink[title="User:Kroocsiogsi"], .mw-userlink[title="User:Lagg5302"], .mw-userlink[title="User:Lancey34"], .mw-userlink[title="User:Lemoncream"], .mw-userlink[title="User:LingoSalad"], .mw-userlink[title="User:Hybridshiek"], .mw-userlink[title="User:JanMayen"], .mw-userlink[title="User:Medoke"], .mw-userlink[title="User:Molldust"], .mw-userlink[title="User:Mpcovcd"], .mw-userlink[title="User:Muriloricci"], .mw-userlink[title="User:Nickoladze"], .mw-userlink[title="User:Redefining history"], .mw-userlink[title="User:SevenFiveSeven"], .mw-userlink[title="User:Vi3trice"], .mw-userlink[title="User:WindPowa"] { color: #52D017 !important; }

/* Bot Purple Color */

a[class="mw-userlink"][title="User:RBotson"], a[class="mw-userlink"][title="User:KrooBot"], a[class="mw-userlink"][title="User:GuideBot"], a[class="mw-userlink"][title="User:HefBOT"], a[class="mw-userlink"][title="User:MedokBOT"], a[class="mw-userlink"][title="User:WindBOT"], a[class="mw-userlink"][title="User:FreemBOT"], a[class="mw-userlink"][title=""], .robot, .bot { color: #FE48AA; }

/* Sidebar */

body { min-width: 1000px; position: relative; }

div#bodyContent2 { margin-right: 320px; min-height: 920px; width: auto; font-size: 0.8em; line-height: 1.5em; }

/* Making sure vectorMenu is visible over sidebar */

.vectorMenu, .vectorMenu .menu { z-index: 1; }

/* For positioning icons at top-right, used in some templates */

.skin-vector div.topicon { position: absolute; z-index: 100; top: -50px; display: block !important; }

.skin-monobook div.topicon { position: absolute; z-index: 100; top: 10px; display: block !important; }

/* Disambig header Template:Disambignote */

.dablink { font-style: italic; padding-left: 1.5em; margin-bottom: 1em; }

/* Fixing vector/main-ltr.css putting a white background on the Quotation template */

table.quotation { background: transparent !important; }

/* Remove italics from Chinese pages */

.lang-zh-hans i, .lang-zh-hant i { font-style: normal !important; }

.toc { background: #fff; }

/* Fancy styling for Abilities */

.ico_active, .ico_passive, .ico_autocast { position: relative; display: inline-block; width: 128px; height: 128px; margin: 3px; vertical-align: top; }

.ico_active:before { position: absolute; width: 128px; height: 128px; content: ''; pointer-events: none; background: url('https://hydra-media.cursecdn.com/dota2.gamepedia.com/1/11/Overlay_active.png') no-repeat; }

.ico_autocast:before { position: absolute; width: 128px; height: 128px; content: ''; pointer-events: none; background: url('https://hydra-media.cursecdn.com/dota2.gamepedia.com/d/df/Overlay_autocast.png') no-repeat; }

.ico_passive:before { position: absolute; width: 128px; height: 128px; content: ''; pointer-events: none; background: url('https://hydra-media.cursecdn.com/dota2.gamepedia.com/6/6f/Overlay_passive.png') no-repeat; }

/* Alternating shading of table rows */

.oddrowsgray tr:nth-child(odd) { background-color: #ededed; }

/* Client-side image scaling */

.images40pxwidth img { width: 40px; height: auto; }

/* Role table styling */

.roletable caption { background: #CD5F51; color: #fff; }

.roletable th { text-align: center; }

/* Buy now button Template:Buy now store / Template:Buy now market */

.buynow_wrapper { height: 24px; }

.buynow_wrapper>a { width: 100%; text-decoration: none; color: #FFF; }

.buynow_button { display: block; padding-left: 30px; height: 24px; line-height: 24px; text-align: left; background: linear-gradient(0deg, #000 0%, #666 100%); font-size: 90%; text-decoration: none; color: #FFF; }

.buynow_button:hover { background: linear-gradient(0deg, #000 0%, #999 100%); }

.buynow_store:before { position: absolute; width: 24px; height: 24px; margin-left: -31px; content: ''; pointer-events: none; background: url('https://hydra-media.cursecdn.com/dota2.gamepedia.com/7/73/Button_buynow_store.png') no-repeat; }

.buynow_market:before { position: absolute; width: 24px; height: 24px; margin-left: -31px; content: ''; pointer-events: none; background: url('https://hydra-media.cursecdn.com/dota2.gamepedia.com/a/aa/Button_buynow_market.png') no-repeat; }

/* Remove demonstration looping video control bar */

.demonstration-video .k-player .control-bar { display: none !important; }

/* Tournament Bracket Styles */

.tournament-bracket { font-size: 90%; margin: 1em 2em 1em 1em; border: none; border-collapse: separate; border-spacing: 0; }

.tournament-bracket .round-title { border: 1px solid #aaa; background-color: #f2f2f2; text-align: center; }

.tournament-bracket .match-bye, .tournament-bracket .match-team, .tournament-bracket .match-team-top, .tournament-bracket .match-team-bottom { border: 1px solid #aaa; }

.tournament-bracket .match-bye { background-color: #DDDDDD; }

.tournament-bracket .match-score, .tournament-bracket .match-score-top, .tournament-bracket .match-score-bottom { background-color: #f2f2f2; border: 1px solid #aaa; text-align: center; }

.tournament-bracket .path-top, .tournament-bracket .path-right, .tournament-bracket .path-bottom, .tournament-bracket .path-left { border: 1px none black; }

.tournament-bracket .path-top { border-top-style: solid; }

.tournament-bracket .path-right { border-right-style: solid; }

.tournament-bracket .path-bottom { border-bottom-style: solid; }

.tournament-bracket .path-left { border-left-style: solid; }

color: #e38800; }
 * 1) mw-panel.collapsible-nav .portal h3#p-Partners-label {

/* Upcoming matches calendar */

padding-right: .5em; }
 * 1) mf-match-calendar .mp-content-header {

table.match-calendar { border: 0; margin: 0; background: #FEFBF6; }

table.match-calendar>*>td, table.match-calendar>*>tr>td { border-right: 0; border-left: 0; }

table.match-calendar td.team img { max-height: 24px; max-width: 24px; height: auto; width: auto; }

table.match-calendar>tr:first-of-type, table.match-calendar>*>tr:first-of-type { display: none; }

table.match-calendar>tr:nth-child(odd)>td, table.match-calendar>*>tr:nth-child(odd)>td { background: #FDE6E3; }

table.match-calendar>tr>td:nth-child(1), table.match-calendar>*>tr>td:nth-child(1) { width: 25%; }

table.match-calendar>tr>td:nth-child(2), table.match-calendar>*>tr>td:nth-child(2) { width: 25%; text-align: right; }

table.match-calendar>tr>td:nth-child(3), table.match-calendar>*>tr>td:nth-child(3) { width: 15px; }

table.match-calendar>tr>td:nth-child(4), table.match-calendar>*>tr>td:nth-child(4) { width: auto; text-align: left; }

table.match-calendar>tr>td:nth-child(5), table.match-calendar>*>tr>td:nth-child(5) { width: 10%; text-align: right; }

/* Front Page Tournament Table Dates */

div.dateformat { float: center; min-width: 35px; max-width: 70px; max-height: 25px; }

div.sdate { position: relative; left: 0; top: -1px; font-size: 81%; }

div.edate { position: relative; left: 0; top: -3px; font-size: 81%; }

/* Fix for webm autoloop spacing */

.autoloop {	display: block; }

/* Cosmetic label styles Template:Cosmetic */

.cosmetic-label { margin: 7px 5px 0px; vertical-align: top; text-align: center; display: inline-block; line-height: normal; }

.cosmetic-label>div { margin-bottom: 5px; }

/* Skill list styles Template:SkillListRich */

div.skilllist { width: 100%; }

div.skilllist-title { border: 1px solid #AAA; background-color: #FFAEA3; text-align: center; color: #000; font-size: 100%; font-weight: bold; }

div.skilllist ul { overflow: hidden; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }

li.skilllist-lite { list-style: none; display: inline-block; margin: 0; padding: 3px; box-sizing: border-box; border: 1px solid #AAA; vertical-align: top; text-align: left; font-weight: bold; font-size: 110%; color: white; text-decoration: none; }

li.skilllist-rich { list-style: none; display: inline-block; margin: 0; padding: 3px; box-sizing: border-box; border: 1px solid #AAA; background-color: #EFEFEF; vertical-align: top; text-align: left; }

div.skilllist-rich-head { padding: 3px 5px; border-bottom: 1px solid black; font-weight: bold; font-size: 110%; color: white; text-decoration: none; }

div.skilllist-rich-image { display: inline-block; vertical-align: top; width: 64px; }

div.skilllist-rich-desc { display: inline-block; vertical-align: top; padding: 3px 5px; max-width: calc(100% - 74px); }

li.skilllist-lite a, li.skilllist-lite a:link, li.skilllist-lite a:visited, li.skilllist-lite a:hover, li.skilllist-lite a:active, div.skilllist-rich-head a, div.skilllist-rich-head a:link, div.skilllist-rich-head a:visited, div.skilllist-rich-head a:hover, div.skilllist-rich-head a:active { color: white; text-decoration: none; }

/************************** * Desktop Specific Styles * **************************/

/* Skill list styles Template:SkillListRich */

div.skilllist-col1 ul li { width: 100%; flex: 1 0 100%; }

div.skilllist-col2 ul li { width: 50%; flex: 1 0 50%; }

div.skilllist-col3 ul li { width: calc(100%/3); flex: 1 0 calc(100%/3); }

div.skilllist-col4 ul li { width: 25%; flex: 1 0 25%; }

div.skilllist-col5 ul li { width: 20%; flex: 1 0 20%; }