Template:TemplateStyles sandbox/Χ/styles.css

.x-blockquote, .x-dialogue { box-sizing: border-box; width: 100%; max-width: 800px; border-left: 0.25em solid #ccc; margin: 1em 0; padding: 0 2em; text-align: justify; font-family: "Times New Roman", Times, serif; } .x-blockquote .reference, .x-dialogue .reference { font-family: sans-serif; } .x-blockquote { display: block; } .x-quote { position: relative; display: inline-block; padding-bottom: 0.5em; } .x-quote:before, .x-quote:after { box-sizing: border-box; display: block; position: absolute; top: 0; width: 2em; padding: 0 0.2em; font-size: 200%; line-height: 1; font-weight: bold; color: #aaa; } .x-quote:before { left: -2em; text-align: right; content: open-quote; } .x-quote:after { right: -2em; text-align: left; content: close-quote; } .x-quoted:before { content: "—\202f"; padding-left: 2em; } .x-quoted { position: relative; display: block; } .x-speaker, .x-speech { position: relative; padding-bottom: 0.25em; } .x-speech { padding-left: 2em; text-indent: -.25em; } .x-speaker:after { content: ":"; width: 1em; } .x-speech:before { display: block; position: absolute; text-align: right; left: 0; width: 2em; content: ''; } .x-speech:after { content: ''; } @media screen and (max-width: 600px) { .x-dialogue, .x-part, .x-speaker, .x-speech { display: block; }	.x-quoted { text-align: right; } } @media screen and (min-width: 600px) { .x-dialogue { display: table; }	.x-part { display: table-row; }	.x-speaker { display: table-cell; white-space: nowrap; }	.x-speech { display: table-cell; } }