#content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #EEE; } #wiki { position: absolute; left: 50%; right: 0; top: 0; bottom: 0; } #wiki iframe { width: 100%; height: 100%; border: none; } body { margin: 0; overflow: hidden; } #controls { position: absolute; z-index:10; bottom: 0; display: none; } .links line { /*stroke: #aaa;*/ stroke: none; } .links line.active2 { stroke: red; } .links line.history { stroke: purple; } .active { stroke: red; } .category circle { fill: yellow; } .web circle { fill: purple; } .news circle { fill: lightgray; } .template circle { fill: lightgreen; } .discussion circle { fill: aqua; } svg { font: 10px sans-serif; } svg g.page { cursor: pointer; } svg g.page text { visibility: hidden; fill: #222; font: 10px sans-serif; } svg g.active text { visibility: visible; } svg g.mouse text { visibility: visible; } #cats { position: absolute; left: 0; bottom: 0; } #cats .ocontents { background: #FFFFFFDD; display: none; /*padding: 5px;*/ /*box-sizing: border-box;*/ } #cats.expanded .ocontents { display: block; } /* showall class */ #cats div.cat { display: none; } #cats div.cat span.spacing { display: none; } #cats div.cat.icon { display: block; } #cats.showall div.cat { display: block; } #cats.showall div.cat span.spacing { display: inline; } #cats .contents { overflow: auto; height: 50vh; min-width: 300px; } #cats .contents .scroll { } #cats .botright { position: absolute; right: 0; bottom: 0; } #cats .botright .thumb { position: absolute; left: 0; bottom: 0; width: 32px; height: 32px; background: #FFFFFFDD; } #cats div.cat span.icon { position: relative; top: 4px; display: inline-block; width: 18px; height: 18px; background-repeat: no-repeat; margin-right: 4px; } #cats div.cat span.count { padding: 0px 3px; background: #DDD; color: #444; font-size: 10px; margin-left: 4px; } #cats div.cat a { color: black; text-decoration: none; } use { fill: #EEE; stroke: black; } .active use { fill: #FFF; stroke: red; } .active text { stroke: black; } .active2 use { fill: #FFF; stroke: red; } .highlight use { fill: #FFF; stroke: orange; }