User:Torty3/common.css

/* Styles for Pagebanner template */ .topbanner { position: relative; max-width: 1800px; height: auto; padding-bottom:2px; } .topbanner img { max-width: 100%; height: auto; width: auto\9; } .topbanner-box { position: absolute; z-index: 2; margin-top: 1.5em; color: white; width: 50%; min-width: 20em; left: 2%; text-align: left; } .topbanner .name { position: absolute; z-index: 2; margin: 0.5em 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; }

/*** Styling table of contents into a alist and dropdown menus ***/

/* hide toc number */ .tocnumber { display: none; }

.alist { position: absolute; bottom: 8px; left: 0; z-index: 3; width:100%; }

.alist #toc ul, ul ul, ul ul ul { display: block; white-space: nowrap; margin: 0; padding: 2px 0px 0px 0px; } /* display of toc table, stretch across page */ .alist #toc { width: 100%; max-width: 170em; color: black; margin: 0; padding: 0; border: 0px none; border-spacing: 0px; } .alist.tocbox-s #toc { background-color: #e0e0e0; } .alist.tocbox-b #toc { color: white; background: rgb(16,16,16); background: rgba(0,0,0,0.5); } .alist.tocbox-w #toc { background: rgb(225,225,225); background: rgba(160,160,160,0.6); } /* links in the horizontal ToC should be black... */ .alist #toc a { color: black; font-size: 0.8em; font-weight: bold; text-decoration: none; } /* ... except when the ToC box is black ... */ .alist.tocbox-b #toc a { color: white; } /* ... or except when being hovered over */ .alist #toc a:hover { color: #bdddfd; text-decoration: underline; } /* input dot separators */ .alist #toc li.toclevel-1:after { content: "· "; font-weight: bold; padding: 0 0.25em; } .alist #toc li.toclevel-1:first-child { padding-left:2em; } .alist #toc li:last-child:after { content: none; } /* only display toclevel-2 on hover */ .alist #toc ul ul { display: none; }   .alist #toc ul li:hover > ul { display: block; } /* display of toclevel-1 */ .alist #toc ul { list-style: none; position: relative; display:block; }   .alist #toc ul:after { content: ""; clear: both; display: block; }   /* force horizontal menu */ .alist #toc ul li { float: left; }   .alist #toc ul li a { display:inline-block; padding: 1px 2px; }   /* display of toclevel-2 */ .alist #toc ul ul { background: rgb(134,144,157); border-radius: 0px; padding: 0; margin:0; position: absolute; top: 95%; }       .alist #toc ul ul li { float: none; border-bottom: 1px solid #8d97a3; position: relative; }       .alist #toc ul ul li a { display:block; padding: 2px 8px; color: #fff; }           .alist #toc ul ul li a:hover { background: #4b545f; }       /* display of toclevel-3 */ .alist #toc ul ul ul { position: absolute; left: 100%; top:0; margin:0; background: #919aa7; } /* don't display ToC title when in horizontal ToC */ .alist #toctitle { display: none; } .mf-mobile-only { display: none; } .alist #toc .toclevel-4, .alist #toc .toclevel-5, .alist #toc .toclevel-6 { display: none; } .alist .toggleNode { display: none; }

/* style info for icon box in the top right corner of the banner */ .iconbox { position: absolute; right: 0; padding: 3px; z-index: 3; background: rgb(16,16,16); background: rgba(0,0,0,0.7); border-bottom-left-radius: 5px; } /* hide toc levels if screen is too small */ @media (max-width: 800px) { .alist #toc .toclevel-2, .alist #toc .toclevel-3 { display: none; }   .topbanner .name { font-size: 2em; margin: 0.3em 0 0 0.2em; } }