Module:Portal bar/sandbox/styles.css

.portal-bar-sand { font-size: 88%; font-weight: bold; display:flex; justify-content: center; align-items: baseline; }

.portal-bar-bordered-sand { padding: 0 2em; background-color: #fdfdfd; border: 1px solid #a2a9b1; clear: both; margin: 1em auto 0; }

.portal-bar-related-sand { font-size: 100%; justify-content: flex-start; }

.portal-bar-unbordered-sand { padding: 0 1.7em; margin-left: 0; }

.portal-bar-header-sand { margin: 0 1em 0 0.5em; flex: 0 0 auto; min-height: 24px; }

.portal-bar-content-sand { display:flex; flex-flow: row wrap; flex:0 1 auto; padding: 0.15em 0; column-gap: 1em; align-items: baseline; margin: 0; list-style: none; }

.portal-bar-content-related-sand { margin: 0; list-style: none; }

.portal-bar-item-sand { display:inline-block; margin:0.15em 0.2em; min-height:24px; line-height:24px; }

@media screen and (max-width:768px) { .portal-bar-sand { font-size: 88%; font-weight: bold; display:flex; flex-flow: column wrap; align-items: baseline; }	.portal-bar-header-sand { text-align: center; flex:0; padding-left: 0.5em; margin: 0 auto; }	.portal-bar-related-sand { font-size: 100%; align-items: flex-start; }

.portal-bar-content-sand { display:flex; flex-flow: row wrap; align-items: center; flex:0; column-gap: 1em; border-top: 1px solid #a2a9b1; margin: 0 auto; list-style: none; }	.portal-bar-content-related-sand { border-top: none; margin: 0; list-style: none; } }

.navbox + link + .portal-bar-sand, .navbox + style + .portal-bar-sand, .navbox + link + .portal-bar-bordered-sand, .navbox + style + .portal-bar-bordered-sand, .sister-bar-sand + link + .portal-bar-sand, .sister-bar-sand + style + .portal-bar-sand, .portal-bar-sand + .navbox-styles + .navbox, .portal-bar-sand + .navbox-styles + .sister-bar-sand { margin-top: -1px; }