Template:Header structure/styles.css

/* Styles used by header templates (not just header) */

/* 
* main block
*/

/* The top level wrapper for the header main block. */
.wst-header-mainblock {
	margin: 4px auto 4px auto;
	padding: 0 3px;
	display: flex;
	align-items: center;
}

/* Common styles for back and forward links */
.wst-header-back, .wst-header-forward {
	display: flex;
	flex: 1 4 100%;
	min-width: min-content;
	align-items: center;
	font-size: .9em;
}
.wst-header-nav-empty {
	visibility: hidden;
}

/* The container for the back (previous) link. */
.wst-header-back {
	justify-content: flex-start;
	text-align: left;
}

/* The container for the central cell. */
.wst-header-central-cell {
	flex: 4 1 100%;
	max-width: max-content;
	text-align: center;
}

/* The container for the forward (next) link. */
.wst-header-forward {
	justify-content: flex-end;
	text-align: right;
}

@media(max-width:768px) {
	/* Put title on its own flexbox row */
	.wst-header-mainblock {
  		flex-wrap:wrap;
	}
	.wst-header-central-cell {
		flex:0 0 100%;
    	order:-2;
		width:auto;
	}
	.wst-header-back, .wst-header-forward {
		width:auto;
	}
}

/* 
* notes block
*/

/* The overall notes container. */
.wst-header-notes {
	display:inline-block;
	border-collapse:collapse;
	border-spacing:0;
	empty-cells:hide;
	font-size:.9em;
	line-height:1.4;
	margin:0 auto 4px auto;
	width:100%; 
}

/* Left-floated content. */
.wst-header-left {
	float:left;
}