Wikipedia:Reference desk/header/styles.css

/** CSS for reference desk header */ .rd-header { color: var(--color-base, #202122); background-color: var(--background-color-neutral, #eaecf0); border: 1px solid var(--border-color-base, #a2a9b1); font:bold 20px arial,helvetica,sans-serif; text-align: center; margin-top: 0; margin-bottom: 6px; margin-left: 0; padding: 3px; } .rd-box { border:1px solid #aaa; box-sizing: border-box; background-color: var( --background-color-neutral-subtle, #f5f5f5); color: var(--color-base, #202122); margin: 0 0 6px 0; padding: 8px; text-align: left; width: 100%; } ul.rd-box { display: flex; flex-wrap: wrap; justify-content: space-evenly; padding: 0; } .rd-box > li { display: block; font-size: larger; margin: 0; } .rd-box > li > a { background-color: var(--background-color-neutral-subtle, #eaecf0); display: block; margin: 0; padding: 8px; } .rd-box > li > .selflink { border-bottom: 3px solid #aaa; padding-bottom: 0; } .rd-header a:link, .rd-header a:visited, .rd-header a:hover, ul.rd-box a:link, ul.rd-box a:visited, ul.rd-box a:hover { color: #00f; } @media screen and (max-width: 719px) { #refdesk-help-icon { display: none; }	ul.rd-box li { display: flex; flex: 1; justify-content: center; white-space: pre; } } @media screen and (min-width: 720px) { .rd-grid { display: grid; grid-template-columns: auto 8px 14em; grid-template-rows: auto auto auto auto auto; }	.rd-grid > :nth-child(2), .rd-grid > :nth-child(3), .rd-grid > :nth-child(4), .rd-grid > :nth-child(6), .rd-grid > :nth-child(7) { grid-column: 3; }	.rd-grid > :nth-child(5) { grid-row: 2 / 7; }	ul.rd-box { flex-direction: column; }	.rd-box > li > .selflink { background-color: var(--background-color-neutral, #eaecf0); border-left: 3px solid #aaa; padding-left: 5px; border-bottom: 0; padding-bottom: 0; }	.rd-ask-button { justify-content: start !important; } }

@media screen and (min-width: 720px) and (max-width: 1024px) { /* Inputs have a max-width 100%, which is good for single column but at smaller grid sizes, the input want to have a min-size that is	  too big to fit in the autosized 1st column causing the entire grid to overflow, if we don't do this hack. */	.rd-box input { max-width: 350px; } }

@supports not (display: grid) { ul.rd-box.rd-box { flex-direction: row; } }