}
caption {
margin: 1ex;
-}
-caption aside {
- position: absolute;
- margin-left: 1ex;
- font-weight: normal;
- display: inline;
- font-size: 91%; /* 100% */
- margin-top: .3ex; /* align with 110% baseline */
+
+ aside {
+ position: absolute;
+ margin-left: 1ex;
+ font-weight: normal;
+ display: inline;
+ font-size: 91%; /* 100% */
+ margin-top: .3ex; /* align with 110% baseline */
+ }
}
hr {
margin: 0;
}
-.section ul {
- margin-bottom: 1ex;
-}
-.section h2 {
- margin: 0 1ex;
- clear: both;
-}
-.section table {
- float: left;
- position: relative; /* prevents buggy hovering in table if caption present in gecko */
- margin: 1ex 1ex 2ex;
-}
-.section .section {
- float: left;
-}
-#charset .section table {
- margin: -0.5ex 0 1ex; /* headers provide sufficient spacing already */
+.section {
+ ul {
+ margin-bottom: 1ex;
+ }
+ h2 {
+ margin: 0 1ex;
+ clear: both;
+ }
+ table {
+ float: left;
+ position: relative; /* prevents buggy hovering in table if caption present in gecko */
+ margin: 1ex 1ex 2ex;
+ }
+ .section {
+ float: left;
+ }
+ #charset & table {
+ margin: -0.5ex 0 1ex; /* headers provide sufficient spacing already */
+ }
}
p {
padding: 1em;
margin: 2ex auto;
clear: both;
-}
-.error > * {
- margin-bottom: 1ex;
-}
-.error > *:last-child {
- margin-bottom: 0;
+
+ > * {
+ margin-bottom: 1ex;
+ }
+ > *:last-child {
+ margin-bottom: 0;
+ }
}
ul {
margin: 2ex auto;
white-space: pre-wrap;
overflow-wrap: break-word;
-}
-body > pre {
- width: 78ch;
- tab-size: 4;
- -moz-tab-size: 4;
- padding: 0 1em;
- border-width: 0 1px;
- border-style: solid;
- white-space: pre;
- font-size: 1.9vmin; /* cover full width at most */
+
+ body > & {
+ width: 78ch;
+ tab-size: 4;
+ -moz-tab-size: 4;
+ padding: 0 1em;
+ border-width: 0 1px;
+ border-style: solid;
+ white-space: pre;
+ font-size: 1.9vmin; /* cover full width at most */
+ }
}
code {
white-space: nowrap;
display: grid;
grid: auto-flow / 1fr 1fr;
clear: both;
-}
-.section dl > dt {
- grid-column: 1;
- text-align: right;
+
+ & > dt {
+ grid-column: 1;
+ text-align: right;
+ }
}
dt code {
white-space: normal;
.row4 {margin-left: 10em} /* should actually align to next key on row1 */
/* ...however rows>=1 are shifted a bit, to make space */
-table.keys tr {
- clear: both; /* start new row (screen row) */
- display: block;
-}
-table.keys tbody {
- /* start new row block (keyboard row) */
- clear: both;
- padding-top: 1ex;
- display: block;
+h3 {
+ display: none; /* semantic details (non-css/js) */
}
-table.keys th,
-h3 {display: none} /* semantic details (non-css/js) */
-.keys .mode {display: none} /* initially hidden (only show interactively (js)) */
+.keys {
+ @at-root #{selector-unify(table, &)} {
+ display: block;
+ border-spacing: 0;
+ border-collapse: collapse;
+ white-space: nowrap;
+ text-align: left;
-table.keys {
- display: block;
- border-spacing: 0;
- border-collapse: collapse;
- white-space: nowrap;
- text-align: left;
-}
-
-/* individual keys */
+ tr {
+ clear: both; /* start new row (screen row) */
+ display: block;
+ }
+ tbody {
+ /* start new row block (keyboard row) */
+ clear: both;
+ padding-top: 1ex;
+ display: block;
+ }
+ th {
+ @extend h3;
+ }
+ }
-dl.legend dt,
-.keys td {
- display: inline-block;
- white-space: normal;
- width: 6.2em;
- line-height: 2.25ex; /* a little terser (seems to be gecko's default anyway) */
- height: 4.5ex; /* 2 lines */
- overflow: hidden;
- margin: 0 2px -1px;
- padding: 0;
- text-align: center;
- border: 1px solid #000;
- border-radius: 4px;
- -moz-border-radius: 4px;
- text-transform-variation: text;
-}
-.keys td b {
- float: left;
- font-size: 200%;
- line-height: 2.5ex; /* inherits otherwise */
- padding-left: 2px;
-}
-.keys .row0 td { /* omni-present esc */
- width: 8.5em;
-}
+ /* individual keys */
-/* fine tuning of special occurrences */
+ .mode {
+ @extend h3; /* initially hidden (only show interactively (js)) */
+ }
+ @at-root {
+ dl.legend dt,
+ & td {
+ display: inline-block;
+ white-space: normal;
+ width: 6.2em;
+ line-height: 2.25ex; /* a little terser (seems to be gecko's default anyway) */
+ height: 4.5ex; /* 2 lines */
+ overflow: hidden;
+ margin: 0 2px -1px;
+ padding: 0;
+ text-align: center;
+ border: 1px solid #000;
+ border-radius: 4px;
+ -moz-border-radius: 4px;
+ text-transform-variation: text;
+ }
+ }
+ td b {
+ float: left;
+ font-size: 200%;
+ line-height: 2.5ex; /* inherits otherwise */
+ padding-left: 2px;
+ }
+ .row0 td { /* omni-present esc */
+ width: 8.5em;
+ }
-.keys td b[title] { /* mnemonic hover */
- cursor: help;
-}
-.keys td[onclick]:hover { /* link */
- cursor: pointer;
-}
-.keys td a { /* key link */
- color: inherit;
- text-decoration: none;
- display: block;
- height: 100%;
-}
+ /* fine tuning of special occurrences */
-.keys .meta td b,
-.keys .ctrl td b,
-.keys .lead td b { /* char with ctrl or leading key */
- font-size: 100%; /* space is too limited for 2+ double-sized chars */
- line-height: 5ex; /* keep double height though */
-}
-.keys .meta td b small,
-.keys .ctrl td b small { /* meta key indicator */
- font-size: 70%;
- font-weight: normal; /* nice and subtle */
-}
+ td b[title] { /* mnemonic hover */
+ cursor: help;
+ }
+ td[onclick]:hover { /* link */
+ cursor: pointer;
+ }
+ td a { /* key link */
+ color: inherit;
+ text-decoration: none;
+ display: block;
+ height: 100%;
+ }
-/* enlarged keys */
+ .meta, .ctrl, .lead {
+ td b { /* char with ctrl or leading key */
+ font-size: 100%; /* space is too limited for 2+ double-sized chars */
+ line-height: 5ex; /* keep double height though */
+ }
+ }
+ .meta, .ctrl {
+ td b small { /* meta key indicator */
+ font-size: 70%;
+ font-weight: normal; /* nice and subtle */
+ }
+ }
-.keys.big td {
- width: 1em;
- min-width: auto;
- height: 2.25ex;
- font-size: 200%;
- font-size: calc(7vmin - 4px); /* fit 12 keys to page */
- overflow: visible;
- position: relative;
- padding: 0;
- margin: 0 .2vw -1px;
-}
+ /* enlarged keys */
+
+ &.big {
+ td {
+ width: 1em;
+ min-width: auto;
+ height: 2.25ex;
+ font-size: 200%;
+ font-size: calc(7vmin - 4px); /* fit 12 keys to page */
+ overflow: visible;
+ position: relative;
+ padding: 0;
+ margin: 0 .2vw -1px;
+ }
-/* override row alignments */
-.keys.big tbody {
- font-size: calc(1.4vmin); /* enlarged td conversion */
-}
-.keys.big .row2 {margin-left: 7em}
-.keys.big .row3 {margin-left: 8em}
-.keys.big .row4 {margin-left: 10em}
-.keys.big .row0 {
- display: none; /* headerless */
-}
+ /* override row alignments */
+ tbody {
+ font-size: calc(1.4vmin); /* enlarged td conversion */
+ }
+ .row2 {margin-left: 7em}
+ .row3 {margin-left: 8em}
+ .row4 {margin-left: 10em}
+ .row0 {
+ display: none; /* headerless */
+ }
-.keys.big td b {
- position: absolute; /* overlay */
- z-index: 1;
- top: -1.2ex; /* halfway over shift */
- left: 0;
- right: 0;
- font-size: 50%;
- opacity: .5;
- color: #FFF;
- line-height: 2.25ex;
-}
-.keys.big.cmp td b,
-.keys.big .ctrl td b,
-.keys.big .meta td b,
-.keys.big .shift td b {
- display: none;
+ td b {
+ position: absolute; /* overlay */
+ z-index: 1;
+ top: -1.2ex; /* halfway over shift */
+ left: 0;
+ right: 0;
+ font-size: 50%;
+ opacity: .5;
+ color: #FFF;
+ line-height: 2.25ex;
+ }
+ &.cmp, .ctrl, .meta, .shift {
+ td b {
+ display: none;
+ }
+ }
+ }
}
/* tables */
/* character table */
-.glyphs thead th, .glyphs td {
- width: 1.6em; /* regular interval */
-}
-.glyphs tbody td {
- font-size: 112%;
-}
-.glyphs.big tbody td {
- font-size: 200%;
-}
-.glyphs .glyphs {
- margin: 0.5ex 0; /* nested in legend */
-}
-.glyphs .glyphs td {
- font-size: 100%;
+.glyphs {
+ thead th, td {
+ width: 1.6em; /* regular interval */
+ }
+ tbody td {
+ font-size: 112%;
+ }
+ &.big tbody td {
+ font-size: 200%;
+ }
+ & & {
+ margin: 0.5ex 0; /* nested in legend */
+ td {
+ font-size: 100%;
+ }
+ }
}
.cover td {
/* colour map */
-table.color td {
- border: 1px solid #555;
- font-weight: normal;
- padding: 0 8px;
-}
-table.color td samp {
- margin: 0 -8px 0 8px;
- font-family: inherit;
- float: right;
-}
-table.color td samp ~ samp {
-}
-table.color td samp small {
- font: 100% monospace;
- padding: 0 .5ex;
+table.color {
+ td {
+ & {
+ border: 1px solid #555;
+ font-weight: normal;
+ padding: 0 8px;
+ }
+ samp {
+ margin: 0 -8px 0 8px;
+ font-family: inherit;
+ float: right;
+ }
+ samp ~ samp {
+ }
+ samp small {
+ font: 100% monospace;
+ padding: 0 .5ex;
+ }
+ }
}
/* digraphs map */
table.dimap {
table-layout: fixed; /* prevent resizing, notably in msie6 */
}
-.dimap thead th, .dimap td {
- /* below-maximum size (but still average enough to be regular) so we can fit more */
- width: 1.2em; /* msie only looks at the first row */
- min-width: 1em; /* prevents gecko from restricting to page width */
-}
-.dimap th {
- text-align: center; /* row headers are also glyph-sized */
+.dimap {
+ thead th, td {
+ /* below-maximum size (but still average enough to be regular) so we can fit more */
+ width: 1.2em; /* msie only looks at the first row */
+ min-width: 1em; /* prevents gecko from restricting to page width */
+ }
+ th {
+ text-align: center; /* row headers are also glyph-sized */
+ }
}
-.mapped tbody, .mapped colgroup,
-.dimap tbody, .dimap colgroup {
- border: 2px double #888; /* major character group grid */
-}
-.mapped tbody,
-.dimap tbody {
- border-width: 2px 0; /* horizontal group dividers */
-}
-.mapped colgroup,
-.dimap colgroup {
- border-width: 0 2px; /* vertical divides */
+.mapped,
+.dimap {
+ tbody, colgroup {
+ border: 2px double #888; /* major character group grid */
+ }
+ tbody {
+ border-width: 2px 0; /* horizontal group dividers */
+ }
+ colgroup {
+ border-width: 0 2px; /* vertical divides */
+ }
}
/* digraph selection */
-moz-column-width: 24em;
-webkit-column-width: 24em;
column-width: 24em;
-}
-.diinfo > div {
- overflow: hidden;
- column-break-inside: avoid;
- -webkit-column-break-inside: avoid;
- position: relative; z-index: 1; /* webkit bug */
+
+ & > div {
+ overflow: hidden;
+ column-break-inside: avoid;
+ -webkit-column-break-inside: avoid;
+ position: relative; z-index: 1; /* webkit bug */
+ }
}
/* glyph cell overlay (digraph labels) */
-.glyphs.dilabel td {
- padding: 0;
- padding-bottom: 1.1ex; /* reserve space for label */
- vertical-align: bottom;
-}
-.glyphs.dilabel small {
- font-size: 50%;
- display: block;
- margin-top: 0.2ex;
- margin-bottom: -2.2ex; /* take cell padding */
-}
-.glyphs.dilabel small.digraph {
- background: #000;
- color: #FFF;
- opacity: 0.3;
-}
-.glyphs.dilabel small.value {
- background: #600;
- color: #FFF;
- opacity: 0.3;
+.glyphs.dilabel {
+ td {
+ padding: 0;
+ padding-bottom: 1.1ex; /* reserve space for label */
+ vertical-align: bottom;
+ }
+ small {
+ font-size: 50%;
+ display: block;
+ margin-top: 0.2ex;
+ margin-bottom: -2.2ex; /* take cell padding */
+ }
+ small.digraph {
+ background: #000;
+ color: #FFF;
+ opacity: 0.3;
+ }
+ small.value {
+ background: #600;
+ color: #FFF;
+ opacity: 0.3;
+ }
}
/* character properties */
.u-invalid {background: #BBB} /* invalid, impossible */
/* foreground representation */
-#digraphs .u-l4 {color: #080} /* partial */
-#digraphs .u-l5 {color: #4C0} /* experimental */
-#digraphs .u-l2 {color: #A44; color: rgba(128, 0, 0, .6)} /* unofficial */
-#digraphs .u-l1 {color: #D00; color: rgba(255, 0, 0, .8)} /* missing */
+#digraphs {
+ .u-l4 {color: #080} /* partial */
+ .u-l5 {color: #4C0} /* experimental */
+ .u-l2 {color: #A44; color: rgba(128, 0, 0, .6)} /* unofficial */
+ .u-l1 {color: #D00; color: rgba(255, 0, 0, .8)} /* missing */
+}
/* support percentage (browser cells) */
.p0 {opacity: .6}
.help {
display: table;
width: 100%;
-}
-.help > * {
- display: table-cell;
- width: 20%;
- vertical-align: top;
-}
-.left dl.legend {
- margin-left: 6.4em; /* a bit over 6.2em to allow for borders+padding (border-sizing would work too) */
-}
-.left dl.legend dt {
- margin-left: -6.4em; /* msie<=6 multiply this by two for some reason */
- float: left;
- clear: left;
-}
-.left dl.legend dd {
- float: left; /* align next to dt (except msie<=7 does just the opposite) */
-}
-.right dl.legend {
- margin-right: 6.4em;
-}
-.right dl.legend dt {
- margin-right: -6.4em;
- float: right;
- clear: right;
+ & > * {
+ display: table-cell;
+ width: 20%;
+ vertical-align: top;
+ }
}
-.right dl.legend dd {
- float: right;
+
+.left {
+ dl.legend {
+ & {
+ margin-left: 6.4em; /* a bit over 6.2em to allow for borders+padding (border-sizing would work too) */
+ }
+ dt {
+ margin-left: -6.4em; /* msie<=6 multiply this by two for some reason */
+ float: left;
+ clear: left;
+ }
+ dd {
+ float: left; /* align next to dt (except msie<=7 does just the opposite) */
+ }
+ }
}
.right {
- text-align: right;
+ dl.legend {
+ & {
+ margin-right: 6.4em;
+ }
+ dt {
+ margin-right: -6.4em;
+ float: right;
+ clear: right;
+ }
+ dd {
+ float: right;
+ }
+ }
+ & {
+ text-align: right;
+ }
}
/* help/legend */
-dl.legend dt {
- margin: 0 0 1px; /* distinct keys */
- height: auto; /* not key-height */
- padding: 2px 0;
-}
-dl.legend dd {
- margin: 3px 0.4em 0; /* align text (add dt border+padding height) */
- padding: 0;
+dl.legend {
+ dt {
+ margin: 0 0 1px; /* distinct keys */
+ height: auto; /* not key-height */
+ padding: 2px 0;
+ }
+ dd {
+ margin: 3px 0.4em 0; /* align text (add dt border+padding height) */
+ padding: 0;
+ }
}
dl.legend-options dt {
ul.legend-set {
clear: right;
padding-top: 1ex;
-}
-ul.legend-set li {
- margin: 6px 0; /* similar to dl legends */
+
+ li {
+ margin: 6px 0; /* similar to dl legends */
+ }
}
.legend {
margin-top: 1em;
-}
-.legend table {
- width: 100%;
-}
-.legend td {
- padding: 0 0.2em;
+
+ table {
+ width: 100%;
+ }
+ td {
+ padding: 0 0.2em;
+ }
}
/* images */
figure {
margin: 0;
position: relative;
-}
-figure img {
- vertical-align: bottom;
- width: 100%;
+
+ img {
+ vertical-align: bottom;
+ width: 100%;
+ }
}
@media (min-width: 60em) {
display: grid;
grid: auto-flow dense / repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 1px;
-}
-.gallery li, .gallery ul {
- display: contents;
-}
-.gallery figure {
- overflow: hidden;
- box-sizing: border-box;
- hyphens: auto;
- max-width: 900px;
-}
-.gallery figcaption > small {
- display: inline-block;
-}
-@media (min-width: 403px) and (min-height: 266px) {
- /* able to fit 2 cells of 200x133 */
- .gallery li.large > figure {
- grid-row: span 2;
- grid-column: span 2;
+ li, ul {
+ display: contents;
}
-}
-@media (min-width: 603px) and (min-height: 400px) {
- /* fit 3 cells of 200x133 */
- .gallery > li:first-child > figure,
- .gallery li.huge > figure {
- grid-row: span 3;
- grid-column: span 3;
+ figure {
+ overflow: hidden;
+ box-sizing: border-box;
+ hyphens: auto;
+ max-width: 900px;
+ }
+ figcaption > small {
+ display: inline-block;
}
-}
-.gallery figure, .gallery figcaption {
- transition: all .5s ease-in;
-}
-.gallery figure:hover ~ ul figcaption {
- /* mark all children */
- color: #FFF;
- background: rgba(0, 0, 0, .5);
-}
+ @media (min-width: 403px) and (min-height: 266px) {
+ /* able to fit 2 cells of 200x133 */
+ li.large > figure {
+ grid-row: span 2;
+ grid-column: span 2;
+ }
+ }
+ @media (min-width: 603px) and (min-height: 400px) {
+ /* fit 3 cells of 200x133 */
+ > li:first-child > figure,
+ li.huge > figure {
+ grid-row: span 3;
+ grid-column: span 3;
+ }
+ }
-.gallery figure[data-sup]:after {
- position: absolute;
- right: 0;
- content: attr(data-sup);
- color: #FFF;
- background: #0006;
- border-radius: 1em;
- padding: .1ex .4em;
- margin: .4em;
-}
-.gallery .expand > figure[data-sup]:after {
- content: '+' attr(data-sup);
- background: #0008;
- font-size: 150%;
- border: 2px solid #FFF8;
+ figure, figcaption {
+ transition: all .5s ease-in;
+ }
+ figure:hover ~ ul figcaption {
+ /* mark all children */
+ color: #FFF;
+ background: rgba(0, 0, 0, .5);
+ }
+
+ $oversup: 'figure[data-sup]:after'; // select parent overlays
+ #{$oversup} {
+ position: absolute;
+ right: 0;
+ content: attr(data-sup);
+ color: #FFF;
+ background: #0006;
+ border-radius: 1em;
+ padding: .1ex .4em;
+ margin: .4em;
+ }
+ .expand > #{$oversup} {
+ content: '+' attr(data-sup);
+ background: #0008;
+ font-size: 150%;
+ border: 2px solid #FFF8;
+ }
}
/* specialised galleries */
}
table.gallery {
- grid-auto-flow: row;
- grid-template-columns: repeat(auto-fit, minmax(2em, max-content)); /* 1fr */
-}
-table.gallery tbody,
-table.gallery tr {
- display: contents;
-}
-table.gallery tr > :first-child {
- grid-column: 1;
- -grid-row: span 6;
- margin: auto; /* vertical-align: middle */
-}
-table.gallery tr > :nth-child(2) {
- grid-column: 2; /* in case 1st is missing */
-}
-table.gallery td {
- border: 0; /* does not collapse */
- outline: 1px solid #888; /* over grid-gap */
+ & {
+ grid-auto-flow: row;
+ grid-template-columns: repeat(auto-fit, minmax(2em, max-content)); /* 1fr */
+ }
+ tbody,
+ tr {
+ display: contents;
+ }
+ tr > :first-child {
+ grid-column: 1;
+ -grid-row: span 6;
+ margin: auto; /* vertical-align: middle */
+ }
+ tr > :nth-child(2) {
+ grid-column: 2; /* in case 1st is missing */
+ }
+ td {
+ border: 0; /* does not collapse */
+ outline: 1px solid #888; /* over grid-gap */
+ }
}
/* page-specific */
-#browser td > a {
- text-decoration: none;
-}
-#browser td > a:active,
-#browser td > a:hover {
- text-decoration: underline;
-}
-#browser tr .aside {
- font-size: 80%;
- overflow: hidden;
- height: 0;
- -webkit-transition: all 1s ease-in;
- -o-transition: all 1s ease-in;
- -moz-transition: all 1s ease-in;
- transition: height 1s ease-in;
-}
-#browser tr .aside p {
- margin: 1ex 0;
-}
-#browser tr.target .aside,
-#browser tr:target .aside {
- height: auto;
-}
-#browser td.X {
- white-space: nowrap; /* some browsers break on dashes */
-}
+#browser {
+ td > a {
+ text-decoration: none;
+ }
+ td > a:active,
+ td > a:hover {
+ text-decoration: underline;
+ }
+ tr .aside {
+ font-size: 80%;
+ overflow: hidden;
+ height: 0;
+ -webkit-transition: all 1s ease-in;
+ -o-transition: all 1s ease-in;
+ -moz-transition: all 1s ease-in;
+ transition: height 1s ease-in;
+
+ p {
+ margin: 1ex 0;
+ }
+ }
+ tr.target, tr:target {
+ .aside {
+ height: auto;
+ }
+ }
+ td.X {
+ white-space: nowrap; /* some browsers break on dashes */
+ }
-#browser tr:target > td:first-of-type,
-#browser tr.focus > td:first-of-type {
- background: inherit;
-}
-#browser tr.focus > td {
- border-bottom-color: #000;
+ tr:target, tr.focus {
+ & > td:first-of-type {
+ background: inherit;
+ }
+ }
+ tr.focus > td {
+ border-bottom-color: #000;
+ }
}
form.aside {
margin-top: 1em;
}
-.units tbody tr:hover:not(.race) {
- background: #EEE;
-}
-.unit-gas {
- color: #040;
-}
-.unit-min, .unit-min a:not(:hover) {
- color: #004;
-}
-.unit-supply {
- color: #080;
-}
-.unit-o {color: #C08} /* organic */
-.unit-u {color: #44C} /* mechanic */
-.unit-p {color: #0A8} /* psionic */
-.unit-composed {
- color: #C88;
-}
-.unit-air {
- color: #08C;
-}
-.unit-x {color: #888}
-.unit-s {color: #890}
-.unit-m {color: #C70}
-.unit-l {color: #D22}
-.unit-h {color: #804}
-.magic-opt:before,
-.magic-opt:after {
- color: #000;
-}
-.hurtrel, .units .hurtrel {
- color: #778;
-}
-tbody .unit-shield {
- color: #64A;
-}
-.unit-pdd {
- color: #A8C;
-}
-.unit-splash {
- color: #4A0;
-}
-.hurt-a {
- color: #036;
-}
-.hurt-g {
- color: #063;
-}
-.unit-massive {
- color: #D88;
-}
-.unit-detect::before {
- color: #0A8;
-}
-.unit-jump {
- color: #8A4;
-}
-body .magic-perma {
- text-decoration-color: #8C0;
- -moz-text-decoration-color: #8C0;
- -webkit-text-decoration-color: #8C0;
-}
-
/* printing hints */
@page {
.row4 {margin-left: 7.5em} /* 10em / Δtd */
/* letter scripts columns to rows */
- .legend .glyphs:first-child td {
- display: table-row;
- vertical-align: baseline;
- }
- .legend .glyphs td > table {
- width: auto;
- display: inline;
- margin-left: 1ex;
- }
- .legend .glyphs:first-child td td {
- margin: 2px;
- display: inline-block;
- width: auto;
+ .legend .glyphs {
+ &:first-child td {
+ display: table-row;
+ vertical-align: baseline;
+ }
+ td > table {
+ width: auto;
+ display: inline;
+ margin-left: 1ex;
+ }
+ &:first-child td td {
+ margin: 2px;
+ display: inline-block;
+ width: auto;
+ }
}
@media (max-width: 61em) {
clear: left;
}
.right dl.legend {
- margin-right: 0;
- margin-left: 6.4em;
- }
- .right dl.legend dt {
- margin-right: 0;
- margin-left: -6.4em;
- float: left;
- clear: left;
- }
- .right dl.legend dd {
- float: left;
+ & {
+ margin-right: 0;
+ margin-left: 6.4em;
+ }
+ dt {
+ margin-right: 0;
+ margin-left: -6.4em;
+ float: left;
+ clear: left;
+ }
+ dd {
+ float: left;
+ }
}
}
}