.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]] */