Template:Dotted TOC page listing/sandbox/styles.css

.wst-dtpl {
	/* this is to work around CSS set by Minerva skin under 720px where display: block on tables */
	display:table;
    border-collapse:collapse;
    border-spacing:0 0;
    empty-cells:hide;
    width:100%;
}

.wst-dtpl-1-wrapper {
	position:relative;
	width:100%;
}

.wst-dtpl-entry-wrapper {
	max-width:80%;
	text-align:left;
	text-indent:-1em;
	margin-left:1em;
}

.wst-dtpl-entry-text {
	display:inline;
	position:relative;
	text-align:left;
	padding:0 0.5em 0 0;
	z-index:2;
}

.wst-dtpl-empty {
	position:absolute;
	left:0;
	bottom:0;
	width:1em;
	height:1em;
	z-index:1;
}

/* The default background is white to cover the dots */
.wst-dtpl-background {
	background:white;
	color:inherit;
}

.wst-dtpl-dots {
	position:absolute;
	right:0;
	bottom:0;
	width:100%;
	overflow:hidden;
	white-space:nowrap;
	text-align:right;
	z-index:0;
}
.wst-dtpl-dots > div {
	display:inline;
	float:right;
}

.wst-dtpl-page-cell {
	text-align:right;
	vertical-align:bottom;
	padding:0 0 0 0.5em;
	width:2em;
}

/* For environments where we know what the background is, inherit from the
 * parent container. For example AuxTOC. This is better than setting manually,
 * because, say, AuxTOC isn't coloured in all environments */
.wst-auxtoc .wst-dtpl-background,
.subheadertemplate .wst-dtpl-background {
	background:inherit;
	color:inherit;
}

.wst-dtpl_chaptertext {
	width:2.5em;
	max-width:2.5em;
	padding:0.0em 0.5em 0.0em 0.0em;
	vertical-align:top;
	text-align:right;
}

.wst-dtpl_col4defaults {
	text-align:right;
	vertical-align:bottom;
	width:2.0em;
	padding:0.0em 0.0em 0.0em 0.5em;
}