Template:Town nav/styling.css

/* Set the background colours for the nav buttons */
.neutral.townnav {
  background-color: #f6f5f3;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  border-bottom: 2px solid #3d3d3f;
}

html.skin-citizen-dark .neutral.townnav {
background-color:#161a24;
border-bottom: 2px solid #f6f5f3;
box-shadow: -4px 4px 8px 0px rgba(225, 225, 225, 0.1);
}

/* Set the text colours */
.white-p.townnav {
  color: white;
  font-size:100%;
  text-align:center;
  font-weight: bold;
}

.white-p.townnav a {
  color: white;
  text-decoration: none;
}
.black-p.townnav {
  color: #3d3d3f;
  font-size:100%;
  text-align:center;
  font-weight: bold;
  margin:auto;
}

html.skin-citizen-dark .black-p.townnav {
	color:white;
}

.black-p.townnav a {
  color: #3d3d3f;
  text-decoration: none;
}

html.skin-citizen-dark .black-p.townnav a {
	color:white;
}
/* Flexbox styles for the nav container */
.town-nav-container {
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;

}

/* Set each button to cover a third of the screen on desktop */
@media all and ( min-width: 720px ) {
.townnav {
  flex-basis: 10%;
  box-sizing: border-box;
  padding: 3px;
  text-align: center;
  color: white;
  text-decoration: none;
  justify-content:space-between;
}
}
@media all and ( max-width: 720px ) {
.townnav {
  flex-basis: 23%;
  box-sizing: border-box;
  text-align: center;
  color: white;
  text-decoration: none;
  justify-content:space-between;
  margin-bottom:20px;
}
}