. */ .st-lesson .popUpStyle, .st-lesson .popUpQuizStyle, .st-lesson .dropDownStyle { position: absolute; visibility: hidden; display: none; z-index: 1000; max-width: 90vw; padding: 4px 6px; border: #000000 1px solid; border-radius: 4px; color: #000000; background-color: #ddddff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); text-align: center; font-size: 16px; line-height: 1.5; } .st-lesson .dropDownStyle { width: 300px; max-width: 90vw; } .st-rtl .popUpStyle, .st-rtl .popUpQuizStyle { direction: rtl; font-size: large; } /* The second language, appended inside the bubble by lang-audio.js. The two languages almost always run in opposite directions, so each gets its own line and its own explicit direction. Left on one line they would be reordered by the bidi algorithm and any trailing punctuation would jump to the wrong end. `isolate` keeps each side from influencing the other. Which direction to use follows from the course: the Arabic lessons (.st-rtl) gain an English gloss, every other course gains an Arabic one. */ .st-lesson .st-tr { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(0, 0, 0, .18); font-size: 92%; color: #333; direction: rtl; unicode-bidi: isolate; } .st-rtl .st-tr { direction: ltr; } /* -------------------------------------------------------------------------- Speakable words on the text lessons (lang-speak.js) -------------------------------------------------------------------------- The French text lessons are dense reference tables - 773 words across 30 pages - so a permanent speaker icon on every entry would be visual noise. Mark them the way a dictionary marks a pronunciation instead: a dotted underline, with the icon appearing only on hover, focus or tap. -------------------------------------------------------------------------- */ .st-lesson .st-say { cursor: pointer; border-bottom: 1px dotted #8a8ac0; /* the tap target must not collapse onto the neighbouring row */ display: inline-block; padding: 2px 1px; -webkit-tap-highlight-color: rgba(21, 37, 136, .15); } .st-lesson .st-say::after { content: "\1F50A"; /* speaker */ margin-left: .3em; font-size: 80%; opacity: 0; transition: opacity .12s ease; } .st-lesson .st-say:hover::after, .st-lesson .st-say:focus::after, .st-lesson .st-say:active::after { opacity: .75; } .st-lesson .st-say:hover, .st-lesson .st-say:focus { color: #152588; background: #eef0ff; border-radius: 4px; outline: none; } /* A word we hold a real recording of, rather than the device voice. */ .st-lesson .st-say-rec { border-bottom-style: solid; } /* Touch screens have no hover, so keep the affordance visible there. */ @media (hover: none) { .st-lesson .st-say::after { opacity: .5; } } /* -------------------------------------------------------------------------- 2. Additions - responsive pictures, tappable words, touch targets -------------------------------------------------------------------------- */ /* The lesson pictures are fixed-size GIFs (often 744px wide) with pixel hotspots. Letting them shrink is half the fix; lang-audio.js rescales the coordinates to match. */ .st-lesson img[usemap] { max-width: 100%; height: auto; } .st-lesson img { max-width: 100%; height: auto; } /* The lesson bodies are built from fixed-width markup - 183 tables, 137 rules and 67 pictures carry a width attribute wider than a phone screen. Any one of them stretches the whole page and pushes the heading off the edge, so cap them all. */ .st-lesson table, .st-lesson hr, .st-lesson td, .st-lesson object, .st-lesson iframe, .st-lesson embed { max-width: 100%; } /* A

ignores max-width: it will not shrink below the intrinsic width of its contents unless min-width is set explicitly. */ .st-lesson fieldset { min-width: 0; max-width: 100%; } /* One long unbroken word - a spelled-out number, a compound - is enough to widen the whole page on a phone. Let the word break instead. */ .st-lesson a.hover, .st-lesson .st-word { overflow-wrap: break-word; } /* -------------------------------------------------------------------------- Centring the old fixed-width layout tables -------------------------------------------------------------------------- These lessons wrap their layout table in or

, which sufficed in the quirks-mode era. The pages carry , so they render in STANDARDS mode - where those wrappers only set text-align:center, and that does NOT centre a block-level . The result is a fixed-width table (e.g. width=743) pinned to the left of a wide window with a large empty gap beside it. Auto side margins restore the intent. Scoped to tables the author already asked to be centred, so nothing deliberately left-aligned moves. -------------------------------------------------------------------------- */ /* Centre EVERY table that is not a cell of another table. Listing the possible parents rather than writing `table:not(td > table)` keeps this working in older browsers, which would drop the whole rule if they met a selector they could not parse. A nested table's parent is always a

, so leaving those two out is enough to protect the layout grids while centring everything else. This matters because the old markup is unbalanced: on the Arabic alphabet page the 760px wrapper is written inside , but the browser hoists it out to become a direct child of , where a `center > table` rule can never reach it - which is why that page stayed pinned to the left. */ .st-lesson > table, .st-lesson div > table, .st-lesson center > table, .st-lesson p > table, .st-lesson form > table, .st-lesson fieldset > table, .st-lesson blockquote > table, .st-lesson [align="center"] > table, .st-lesson [align="center"] > div > table, .st-lesson [align="center"] > p > table { margin-left: auto; margin-right: auto; } /* A rule with width="550" is centred artwork, not a layout column. */ .st-lesson hr { height: auto; margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------------------- Wide data tables on a narrow screen -------------------------------------------------------------------------- The grammar and vocabulary lessons are built on tables of 3-6 columns of text - irregular verbs, the describing-people sentence builder, the Coptic alphabet. A table like that cannot be squeezed into 390px: capping it at max-width:100% only forces the cells to their minimum content width, and the table still pushes the page sideways, which cuts the heading and the last columns off the screen. So give the TABLE its own horizontal scroll instead, and let the page keep its width. `display:block` is what makes the element scrollable; the rows inside still lay out as a table, so nothing about the content changes. Only marked tables are treated this way: leaf tables of mostly text with 8 or more cells. Layout wrappers and the picture grids are untouched. -------------------------------------------------------------------------- */ /* Centre every data table. These pages were exported from Word, which left tables wherever the page happened to put them - some flush left, some shoved right by an inline margin - so the same lesson could show one table on the left and the next on the right. A table shrinks to fit its content, so auto side margins centre it at any width. */ .st-lesson table.st-scroll { margin-left: auto; margin-right: auto; } @media (max-width: 860px) { .st-lesson table.st-scroll { display: block; width: auto !important; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Cells must keep their natural width, or the browser wraps every word to one letter per line rather than letting the table scroll. */ .st-lesson table.st-scroll td, .st-lesson table.st-scroll th { white-space: normal; word-break: normal; } } /* The "other translated articles" strip at the foot of each article page - 22 links across two lines, previously left hanging against whichever edge the surrounding paragraph happened to use. */ .st-lesson .st-articlelinks { max-width: 1000px; margin: 16px auto; padding: 0 10px; text-align: center; line-height: 2; } .st-lesson .st-articlelinks p { margin: 0; text-align: center; } /* -------------------------------------------------------------------------- Picture layout -------------------------------------------------------------------------- Lessons with several pictures put each one in its own

of a . Table cells share the full width between them, so on a wide screen the pictures are flung to the edges with a gap down the middle, and on a phone they are squeezed into a row of thumbnails. lang-audio.js marks such a table .st-mapgrid (and its cells .st-mapcell), which lets us drop the table layout and flow the pictures instead: centred, at their natural size, wrapping onto as many rows as they need. Using inline-block rather than flex keeps this working in older browsers, and nothing in the page markup has to change. -------------------------------------------------------------------------- */ .st-lesson table.st-mapgrid { display: block; width: auto !important; margin: 0 auto; text-align: center; border-collapse: collapse; } .st-lesson table.st-mapgrid > tbody, .st-lesson table.st-mapgrid > tbody > tr { display: block; } .st-lesson table.st-mapgrid td { display: inline-block; width: auto !important; max-width: 100%; padding: 6px 10px; vertical-align: top; text-align: center; } /* An empty spacer cell in one of these tables would otherwise add a stray gap. */ .st-lesson table.st-mapgrid td:empty { display: none; } .st-lesson .st-mapimg { display: inline-block; max-width: 100%; height: auto; } /* Single-picture lessons: just make sure the picture is centred too. */ .st-lesson img[usemap] { display: inline-block; } .st-lesson #bodytext { overflow-x: auto; } /* The audio player itself. */ .st-player { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; } .st-lesson audio#player { width: 260px; max-width: 100%; height: 36px; vertical-align: middle; } .st-lesson #MESSAGE { font-size: 13px; color: #a33; min-height: 1em; } /* Tappable word list generated under each picture. */ .st-wordlist { clear: both; margin: 18px auto 8px; max-width: 760px; padding: 10px 12px 14px; border: 1px solid #d7d7e6; border-radius: 8px; background: #fafaff; text-align: initial; } .st-wordlist-head { margin: 0 0 8px; font-family: tahoma, arial, sans-serif; font-size: 15px; font-weight: bold; color: #333; text-align: center; } .st-wordlist-items { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; justify-content: center; } .st-wordlist-items li { margin: 0; padding: 0; list-style: none; } .st-word { display: inline-flex; align-items: center; gap: 6px; /* 44px is the usual minimum comfortable touch target. */ min-height: 44px; padding: 6px 12px; border: 1px solid #c8c8dd; border-radius: 22px; background: #fff; color: #152588; font-family: tahoma, arial, sans-serif; font-size: 15px; line-height: 1.4; cursor: pointer; transition: background-color .12s ease, border-color .12s ease; } .st-word:hover, .st-word:focus-visible { background: #eef0ff; border-color: #8a8ac0; outline: none; } .st-word:active { background: #dfe3ff; } .st-word-icon { font-size: 11px; color: #6a6a9c; } .st-rtl .st-word { direction: rtl; font-size: 17px; } .st-rtl .st-wordlist { direction: rtl; } /* Hotspots are invisible by nature; give keyboard users something to see. */ .st-lesson area:focus-visible { outline: 3px solid #ff9900; } @media (max-width: 640px) { .st-wordlist { margin-left: 4px; margin-right: 4px; } .st-word { font-size: 14px; padding: 6px 10px; } .st-lesson .popUpStyle, .st-lesson .popUpQuizStyle { font-size: 15px; } } @media print { .st-wordlist, .st-player { display: none; } } /* -------------------------------------------------------------------------- Lesson navigation (previous / all lessons / next) -------------------------------------------------------------------------- Injected into every lesson page just after the site navbar and again just before the footer. The course order comes from the number already in each filename, so it matches the printed sequence. It matters most in the French and Italian courses: their index pages only list about a third of the lessons, so before this there was no way to reach the rest except by editing the URL. -------------------------------------------------------------------------- */ .st-lesson .st-lessonnav { display: flex; align-items: stretch; gap: 8px; max-width: 900px; margin: 16px auto; padding: 0 10px; font-family: tahoma, arial, sans-serif; clear: both; } .st-lesson .st-nav { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-height: 48px; /* comfortable touch target */ padding: 8px 12px; border: 1px solid #d7d7e6; border-radius: 10px; background: #fafaff; color: #152588; text-decoration: none; transition: background-color .12s ease, border-color .12s ease; } .st-lesson a.st-nav:hover, .st-lesson a.st-nav:focus-visible { background: #eef0ff; border-color: #8a8ac0; outline: none; } /* First and last lesson: keep the row balanced without a dead link. */ .st-lesson .st-nav.is-off { visibility: hidden; } .st-lesson .st-nav-index { flex: 0 0 auto; justify-content: center; background: #eef0ff; } .st-lesson .st-nav-next { justify-content: flex-end; text-align: end; } .st-lesson .st-nav-arrow { font-size: 20px; line-height: 1; color: #6a6a9c; } .st-lesson .st-nav-txt { display: flex; flex-direction: column; min-width: 0; } .st-lesson .st-nav-lbl { font-size: 12px; color: #6a6a9c; } .st-lesson .st-nav-name { font-size: 14px; font-weight: bold; /* Long lesson titles must not blow the row apart. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 560px) { .st-lesson .st-lessonnav { gap: 5px; padding: 0 6px; } .st-lesson .st-nav { padding: 6px 8px; } /* On a phone the arrows and the index button are enough. */ .st-lesson .st-nav-name { display: none; } } @media print { .st-lesson .st-lessonnav { display: none; } }