Das body-Element ist absolut positioniert und füllt das ganze Fenster. Überlaufenden Inhalt sollte es nicht geben, sicherheitshalber wird überlaufender Inhalt verborgen.
Die class-Wörter grey und black bestimmen die Hintergrundfarbe das body-Elements. Für das dritte class-Wort cleary in dieser Reihe gibt es keine Regeln, zu black wird auch die Textfarbe gesetzt.
Verweise (a-Elemente) werden in der Voreinstellung oft blau dargestellt. Die Regel color: currentcolor für a-Elemente zeigt Verweise in der normalen Textfarbe an. Auf schwarzem Hintergrund erscheinen Verweise weiß wie der übrige Text. Als Verweise dienen auch span-, li- und p-Elemente mit dem Attribut x-l.
Ein Element wird verborgen und angezeigt, indem im Attributt class die Wörter hide und show ausgetauscht werden.
Das Fenster ist unterteilt in eine Kopfzeile (ID head) und einen Inhaltsbereich (ID d_cont. Weitere Elemente (Verweisfeld, Hife, Hinweisfeld) werden nur in bestimmten Fällen angezeigt.
Die Kopfzeile wird „flexibel” angezeigt (display: flex;). Von links nach rechts folgen das Logo, der Titel der Bildergeschichte, ein Abstand und fünf Schaltknöpfe.
Den Abstand repräsentiert ein span-Element mit dem class-Wort spacer, dass flexibel den verfügbaren Platz zwischen dem Logo und dem Titel auf der linken Seite und den Schaltknöpfen auf der rechten Seite einnimmt (flex-grow: 1).
Der Kopfzeile wird verborgen und wieder angezeigt, indem im Attribut class die Wörter show und hide ausgetauscht werden.
Der Inhaltsbereich („Tafelhalter”) ist das div-Element mit der ID d_cont. Er ist absolut unter der Kopfzeile positioniert. Am Anfang, bei einer Änderung der Fenstergröße oder beim Verbergen oder Anzeigen der Kopfzeile wird die obere Grenze des Inhaltsbereichs per ECMAscript neu gesetzt.
Die Kindelemente sind „Tafeln”, von denen immer nur eine Tafel sichtbar ist. Es gibt drei Arten von Tafeln: Pinwand, Textabschnitt und Bilderschau.
Eine Pinwand ist ein div-Element, dessen class-Attribut das Wort pinw enthält. Pinwände sind die Übersichtsseite und Bilderabschnitte. Eine Pinwand ist absolut positioniert und füllt den gesamten Inhaltsbereich aus. Seine Kindelemente sind img-, div- und ul-Elemente. Ihr Attribut class enthält das Wort fc. Sie sind absolut positionert, reagieren auf Klicks und können fokussiert werden. Ihre Lage und Reihenfolge werden pseudozufällig bestimmt.
Der letzte Eintrag (li-Element) in der letzten Verweisliste der Übersichtsseite oder in der Verweisliste eines Bilderabschnitts enthält drei Symbole, die als Verweise dienen. Das Attribut class enthält das Wort sym. Die Symbole sind span-Elemente, die „flexibel” über die Breite der Liste verteilt werden.
Das Attribut class eines Textabschnitts (ohne Bilder) enthält das Wort snim. Er wird ganz normal dargestellt mit einem kleinen Innenabstand links und rechts.
Am Ende eines Textabschnitts steht eine Reihe von Verweisbildern, das sind Vorschaubilder, die auf Bilderabschnitte verweisen. Das Attribut class dieser img-Elemente enthält das Wort thb.
Das div-Element zur Bilderschau mit der ID d_vw enthält zwei absolut positionierte Kindelemente, die beide den ganzen verfügbaren Platz ausfüllen. Das umfassende div-Element dient nur dazu, die Bilderschau ein- und auszuschalten. Der Inhalt beider Kindelemente wird „flexibel” angezeigt.
Das erste (untere) Element enthält das Bild (img-Element) mit der ID ds_img, das zentriert angezeigt wird. Das img-Element füllt die verfügbare Höhe und die Breite zu 98% aus. Die CSS-Eigenschaft object-fit steuert, wie das Bild in diesem Feld dargestellt wird.
Wenn das Attribut class das Wort shrink enthält, gilt object-fit: scale-down. Andernfalls gilt object-fit: contain. Das Bild wird dann vergrößert, falls die natürliche Höhe des Bildes kleiner ist als die Höhe des Feldes und die natürliche Breite kleiner ist als die Breite des Feldes. Das Bild in jedem Fall so dargestellt, dass es in das Feld passt.
Das zweite (obere) Element mit der ID d_vw_ctrl enthält zwei div-Elemente („Leisten”) mit Symbolen zur Steuerung der Bilderschau. Jedes Symbol ist in einem p-Element enthalten. Die beiden Leisten liegen an der linken und rechten Seite.
Eine Leiste sollte nur dann zu sehen sein, wenn der Mauszeiger über ihr liegt. Aber ein unsichtbares Element reagiert nicht auf die Maus. Deshalb werden die enthaltenen p-Elemente sichtbar, wenn der Mauszeiger über einer Leiste liegt.
body-ElementsDie weiteren Kind-Elemente des body-Elements (Verweisfeld mit der ID d_hints, Hinweisfeld mit der ID d_hint, Hilfe mit dem Wort hlp im Attribut class) werden absolut positioniert und nur in bestimmten Fällen angezeigt. Sie werden verborgen, wenn die Taste Escape gedrückt wird oder wenn der Mauszeiger das Feld verläßt. Alle diese Elemente sind durch eine besondere Hintergrundfarbe hervorgehoben.