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;
}

/* The container for the back (previous) link. */
.wst-header-back {
	flex-grow:1;
	display:flex;
	align-items:center;
}

/* The container for the central cell. */
.wst-header-central-cell {
	flex-grow:4;
	text-align:center;
}

/* The container for the forward (next) link. */
.wst-header-forward {
	flex-grow:1;
	justify-content:flex-end;
	display:flex;
	align-items:center;
	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;
}