Template:Simple navbox/styles.css

/* navbox styling */
.simple-navbox, .simple-navbox.NavFrame {
  display: flex;
  flex-flow: column;
  clear: both;
  margin: 1em auto 0;
  border: 1px solid #aaaaaa;
  background: #fff;
  padding: 3px;
  font-size: 95%;
  text-align: center;
}
.simple-header, .simple-navbox .simple-header.NavHead {
  background-color: #efefef;
  padding: 0 2px;
  font-size: 112%;
  font-weight: bold;
  flex: 1;
}
.simple-header a, .simple-header.NavHead a {
  color: inherit !important;
}
.simple-content-container {
  margin: 3px 0px;
  gap: 3px;
}
.simple-content {
  flex: 100%;
}

/* group1, list1 table styling */
table.simple-group-container {
  margin: 0 auto;
}
td.simple-group {
  text-align: right;
  padding-right: 3px;
  font-weight: bold;
  vertical-align: top;
  white-space: nowrap;
  width: 1%;
}
td.simple-list {
  text-align:left;
}
td.simple-group:after {
  content: ":";
}
tr.simple-group-row:not(:last-child) td.simple-list {
  border-bottom: 1px solid #d9d9d9;
}

/* list is put in seperate p to prevent first line bulleted list problems when in parameters */
.simple-list p, .simple-content p {
  margin:0;
}

/* overly complicated method of having outer image style templates of which this wiki is so fond of */
.simple-outer {
display: grid;
grid-template-columns: auto 1fr;
grid-auto-rows: auto 1fr;
grid-column-gap: 3px;
grid-row-gap: 0px;
}
.simple-outer .simple-outer-image {grid-area: 1 / 1 / 3 / 2;}
.simple-outer .simple-header .NavHead { grid-area: 1 / 2 / 2 / 3; }
.simple-outer .simple-content-container { grid-area: 2 / 2 / 3 / 3; }

/* so all navboxes in page stick together */
div.navbox ~ div.navbox,
div.navbox ~ div.NavFrame,
div.navbox ~ .simple-navbox,
.simple-navbox ~ .simple-navbox, 
.simple-navbox ~ div.NavFrame, 
.simple-navbox ~ div.navbox,
div.NavFrame ~ div.NavFrame,
div.NavFrame ~ div.navbox, 
div.NavFrame ~ .simple-navbox {
  margin-top: 0em;
}

/* mobile responsive nonsense */
@media screen and (max-width:768px) {
    .simple-content-container {
        flex-flow:column-reverse nowrap !important;
    }
    td.simple-group {
        white-space:normal !important;
    }
}