<?php echo <<<CSS

.toplinks {
	position: %%pinning%%;
	font-size: 1.4rem;
	top: 0.8rem;
	right: 1rem;
	z-index: 101;
}
.toplinks li {
	display: inline;
}
.toplinks li:not(:last-child)::after {
	content: " •";
}

.toplinks li a {
	color: %%toplinks_color%%;
}
.toplinks li a:visited {
	color: %%toplinks_visited_color%%;
}
.toplinks li a:hover {
	color: %%edit_bg%%; /* only color variable guaranteed to be white! */
}

.auto-section {
	position: %%pinning%%;
	font-size: 1.1rem;
	top: 3.5rem;
	right: .9rem;
	text-align: right;
	padding-left: 5rem;
	z-index: 99;
}
.auto-section-title {
	font-weight: 600;
	font-size: 1.3rem;
	color: %%toplinks_color%%;
	padding: 0.25rem 0 0.33rem;
}
.auto-section-links a {
	display: block;
}


/* menu switches here */
@media screen and (max-width: 920px) {

	.toplinks {
		top: 6.5rem;
		right: auto;
		margin: 0 5%;
		width: 100%;
		text-align: center;
		font-size: 1.5rem;
		max-width: 90%;
	}

	.auto-section {
		position: relative;
		text-align: left;
		top: 2rem;
		right: auto;
		padding: 0;
		margin: 2rem auto 4rem;
		width: 95%;
		border-top: .1rem %%h5_color%% dashed;
		border-bottom: .1rem %%h5_color%% dashed;
		padding: 0.25rem 0 1rem;
	}
	.auto-section-links, #pagelink-totop {
		display: inline;
	}
	.auto-section-links a {
		display: inline;
	}
	.auto-section-links a:not(:last-of-type)::after {
		content: " •";
	}
}


@media screen and (max-width: 800px) {
	.toplinks {
		top: 6.75rem;
	}
}


CSS;
?>