Template:Wy/th/Pagebanner/styles.css

.topbanner {
    position: relative;
    overflow: hidden;
    max-width: 1800px; 
    height: auto;
}

.topbanner img {
    min-width: 100%; /* found some cases where image doesn't stretch to cover the whole width */
    max-width: 100%;
    height: auto;
    width: auto;
}

.topbanner .name {
    position: absolute; 
    z-index: 2;
    margin: 0.6em 0 0 0.4em;
    padding: 8px 7px;
    font-size: 2.2em;
    background: rgb(16, 16, 16);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: white;
    white-space: nowrap;
    line-height: 0.9em;
}

.topbanner .bannerimage {
	margin: 0.5em -2.5em 0.5em 0;
}

.topbanner .iconbox {
	position: absolute;
	top: 0.5em;
	right: 0;
	padding: 3px;
	z-index: 3;
	background: rgb(16,16,16);
	background: rgba(0,0,0,0.7);
	border-bottom-left-radius: 5px;
}

/* ===== TABLE OF CONTENTS ZONE ===== */
/* move table of contents to the correct position with relation to the banner */
.bannertoc {
	position: relative;
	bottom: 2.45em;
	left: 0;
	z-index: 3;
}

/* hide the title and heading number from table of contents for banner */
.bannertoc .toctitle {
    display: none;
}

.bannertoc #toc .tocnumber {
    display: none;
}

/* fine placement correction */
.bannertoc #toc {
    width: calc(100% - 2em); /* 2em from padding-left */
    margin: 0 0 calc(-2.45em + 0.5em) 0; /* 0.5em for .bannerimage margin-bottom */
    padding: 0 0 0 2em;
    line-height: 1.6em;
    border: none;
    background: rgb(16, 16, 16);
    background: rgba(0, 0, 0, 0.5);
}

/* toclink placement correction */
.bannertoc #toc li.toclevel-1 {
	float: left;
	padding: 0 0 0 0.4em;
}

/* separation between toclinks */
.bannertoc #toc > ul > li::after {
	content: " ·";
    color: white;
    font-size: 0.8em;
    font-weight: bold;
}

.bannertoc #toc > ul > li:last-child:after {
    content: none;
}

/* background fade when hover for level-1 toclinks */
.bannertoc #toc li:hover {
	background: rgba(0,0,0,0.8) none repeat scroll 0% 0%;
}

/* toclinks font change */
.bannertoc #toc a {
    color: white;
    font-size: 0.8em;
    font-weight: bold;
}

/* and change toclinks font color again on hover */
.bannertoc #toc a:hover {
    color: #bdddfd;
}

/* makes sure dropdowns don't clip into the main toc part */
.bannertoc .toclevel-1 > ul {
	position: absolute;
    top: 1.8em;
}

/* basic setups for dropdowns */
.bannertoc .toclevel-2, 
.bannertoc .toclevel-3, 
.bannertoc .toclevel-4, 
.bannertoc .toclevel-5, 
.bannertoc .toclevel-6 {
    display: none;
    white-space: nowrap;
    transition: all 0.5s;
}

.bannertoc #toc > ul > li > ul {
	list-style: none;
    margin: 0 0 0 -0.4em;
    background: rgba(0,0,0,0.6) none repeat scroll 0% 0%;
    z-index: 4;
}

/* make dropdowns look good */
.bannertoc #toc li > ul > li {
	padding: 0 0.4em;
}

/* these are additional toc layers, should probably fly out to the right but my brain hurts, make them indented things for now */
/* they do stack on top of each other */
.bannertoc #toc li > ul > li > ul > li,
.bannertoc #toc li > ul > li > ul > li > ul > li,
.bannertoc #toc li > ul > li > ul > li > ul > li > ul > li,
.bannertoc #toc li > ul > li > ul > li > ul > li > ul > li > ul > li {
	padding: 0 0 0 0.25em;
}

/* show dropdown on hover */
.bannertoc #toc li:hover ul li {
	display: block;
}

/* this makes that toclinks on dropdown can be clicked on any part of its dropdown (if it's its housing, ofc) */
.bannertoc #toc > ul > li > ul li a {
	display: block;
}

/* [[Category:Wy/th]] */