/*
* Originally based on content.css of htmlArea RTE.
* Provides styles suitable for direct use by RTE in the backend as well as
* for frontend rendering of edited content.
*
* This file is references both by RTE.default.contentCSS (see page.ts) and
* by frontend template page.includeCSS (see setup.ts).
*
* The styles defined are meant to follow a basic spacing policy:
*
* - Blocks are vertically separated from blocks above and below using
* standard margins. In other words, vertical separation is the to be
* applied by each block.
* The unit of separation depends on the type of block. For blocks that
* provide their own well-known font (eg P, H1, H2, ...), it should
* probably be em-based. For blocks that do not themselves imply a font
* (such as IMG, TABLE) may use pt-based units.
*
* - The vertical separation built into each block also makes sure that
* those blocks cannot come near obstacles above/below it.
*
* - Blocks must not have their horizontal separation built into them unless
* it is a layout feature. An example of a built-in horizontal separation
* as a layout feature is BLOCKQUOTE.
*
* - Contexts that allow blocks to horizontally approach an obstacle must
* ensure that the obstacle provides the spacing. Examples are floating
* objects (which apply margins to keep lateral content away), blocks with
* borders (which apply left/right padding to keep interior away), framed
* table cells added via RTE (which apply left/right padding like blocks
* with borders, but also apply top/bottom margins via an auto-added
* DIV.table-cell-content, so that contained P top/bottom margins can be
* merged with it while also keeping plain text content away from borders).
*
* - Margins should be preferred over padding where ever possible.
*
*/
/* Defaults. */
p, blockquote, h1, h2, h3, h4, h5, h6, li {
line-height: 150%;
padding: 0;
margin: .5em 0;
}
blockquote {
padding-top: .5em;
padding-bottom: .5em;
margin-left: 3em;
margin-right: 3em;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1em;
text-align: left;
}
h1 { font-size: 140%; font-weight: bold; }
h2 { font-size: 120%; font-weight: normal; }
h3 { font-size: 120%; font-weight: bold; }
h4 { font-size: 100%; font-weight: bold; }
h5 { font-size: 100%; font-weight: normal; }
h6 { font-size: 100%; font-weight: normal; font-style: italic; }
ul, ol {
/* Padding/margin are ignored when floating, but we need them to prevent
* bullets/numbers from running into image on the left, so clear.
*/
clear: left;
margin: 1em 0;
padding: 0 2em;
}
ol {
/* Allow up to three digits on the left. */
padding-left: 3em;
}
table {
border: 1px solid #333333;
border-collapse: collapse;
empty-cells: show;
/* Alignment should not be 'justify' by default, too small, looks ugly. */
text-align: left;
padding: 0;
margin: 5pt 0;
/* Explicitly specify a parent-relative font size here, otherwise RTE may
* use too big font size in tables during visual editing (backend).
* This might be a quirks-mode related issue (only showing up in backend;
* frontend usually does not need this, though it won't harm).
*/
font-size: 100%;
}
th, td {
border: 1px solid #333333;
padding: 0 .7em;
}
div.table-cell-content {
/* Apply vertical separation from table cell border as margins, as they
* may merge with margins potentially provided by content (eg paragraphs).
*/
margin: .5em 0;
}
img { /* Keep image inline by default. */
display: inline;
margin: 0;
/* Never apply a border (as common for image links). */
border: 0 none;
}
img.image-left {
display: block;
float: left;
margin-right: 10pt;
}
img.image-right {
display: block;
float: right;
margin-left: 10pt;
}
img.image-center {
display: block;
margin: 0 auto;
}
/* Left, center, right and justify alignment of text in block elements*/
p.align-left,
td.align-left, th.align-left,
h1.align-left, h2.align-left, h3.align-left,
h4.align-left, h5.align-left, h6.align-left,
div.align-left,
address.align-left { text-align: left; }
p.align-center,
td.align-center, th.align-center,
h1.align-center, h2.align-center, h3.align-center,
h4.align-center, h5.align-center, h6.align-center,
div.align-center,
address.align-center { text-align: center; }
p.align-right,
td.align-right, th.align-right,
h1.align-right, h2.align-right, h3.align-right,
h4.align-right, h5.align-right, h6.align-right,
div.align-right,
address.align-right { text-align: right; }
p.align-justify,
td.align-justify, th.align-justify,
h1.align-justify, h2.align-justify, h3.align-justify,
h4.align-justify, h5.align-justify, h6.align-justify,
div.align-justify,
address.align-justify { text-align: justify; }
/* The first two frame examples were taken from the example CSS file of CSS
* Styled Content extension and applied to p and table block elements.
* The third one is only applied to paragraph, table always has outer frame.
*/
p.csc-frame-frame1 {
clear: both;
background-color: #EDEBF1;
padding: .5em .7em;
border: 1px solid #333333;
}
p.csc-frame-frame2 {
clear: both;
background-color: #F5FFAA;
padding: .5em .7em;
border: 1px solid #333333;
}
p.with-frame {
clear: both;
background-color: #FFFFFF;
padding: .5em .7em;
border: 1px solid #333333;
}
/* Support frames around containers, too. */
div.csc-frame-frame1 {
clear: both;
background-color: #EDEBF1;
padding: 0 .7em;
border: 1px solid #333333;
}
div.csc-frame-frame2 {
clear: both;
background-color: #F5FFAA;
padding: 0 .7em;
border: 1px solid #333333;
}
div.with-frame {
clear: both;
background-color: #FFFFFF;
padding: 0 .7em;
border: 1px solid #333333;
}
/* Floating blocks, half width. */
div.float-left {
float: left;
margin-right: 10pt;
width: 50%;
}
div.float-right {
float: right;
margin-left: 10pt;
width: 50%;
}
/* Floating blocks, minimal width. */
div.shrinkfloat-left {
float: left;
margin-right: 10pt;
width: auto;
}
div.shrinkfloat-right {
float: right;
margin-left: 10pt;
width: auto;
}
p.float-clear,
h1.float-clear,
h2.float-clear,
h3.float-clear,
h4.float-clear,
h5.float-clear,
h6.float-clear,
img.float-clear,
div.float-clear {
clear: both;
}
/* Declare text as caption (reduce in size, default to centered). */
div.caption {
margin: 2em 0;
text-align: center;
}
div.caption p { /* Only apply to caption itself. */
font-size: 80%;
}
div.caption div p,
div.caption table p,
div.caption ul p,
div.caption ol p { /* Not to other paragraphs. */
font-size: 100%;
}
/* No need for additional padding or border on these, already part of table. */
table.csc-frame-frame1 { background-color: #EDEBF1; }
table.csc-frame-frame2 { background-color: #F5FFAA; }
/* Various combinations of table frame/grid/border settings.
* There are currently four combinations:
*
* [nothing] or csc-frame-frame1 or csc-frame-frame2
* provides an outer frame and a grid, with all borders
* collapsed (joined) automatically;
* cells are padded left and right to keep content away
* from cell borders;
* cell content top/bottom margins are set in a mergeable
* fashion to keep even plain text content away from cell
* borders;
*
* without-grid turns off grid, but keeps outer frame;
* allows individual cells to turn on frame (with-frame);
* those individual cell borders will *not* be collapsed
* (ie joined) with each other or the outer frame;
*
* without-frame turns off outer frame and grid;
* does *not* allow individual cells to turn on frame;
* removes left padding and top margin around the cell,
* so that its content may merge into surrounding
* alignment cleanly
* (using negative margins proved problematic, as it
* creates obscured content, triggering scroll bars).
*
*/
table.without-grid {
border-collapse: separate;
border-spacing: .5em;
}
table.without-frame {
border: 0 none;
}
table.without-grid > thead > tr > th,
table.without-grid > tbody > tr > th,
table.without-grid > tbody > tr > td {
border: 0 none;
/* Yield 1.5em total (padding + border-spacing) between cell content. */
padding-left: .5em;
padding-right: .5em;
}
table.without-grid > thead > tr > th > div.table-cell-content,
table.without-grid > tbody > tr > th > div.table-cell-content,
table.without-grid > tbody > tr > td > div.table-cell-content {
/* Yield 1em total (margin + border-spacing) between cell content. */
margin-top: .25em;
margin-bottom: .25em;
}
table.without-frame > thead > tr > th,
table.without-frame > tbody > tr > th,
table.without-frame > tbody > tr > td {
border: 0 none;
/* Yield 1.5em total (padding) between cell content. */
padding-left: 0;
padding-right: 1.5em;
}
table.without-frame > thead > tr > th > div.table-cell-content,
table.without-frame > tbody > tr > th > div.table-cell-content,
table.without-frame > tbody > tr > td > div.table-cell-content {
/* Yield 1em total (margin) between cell content. */
margin-top: 0;
margin-bottom: 1em;
}
table.without-grid > thead > tr > th.with-frame,
table.without-grid > tbody > tr > th.with-frame,
table.without-grid > tbody > tr > td.with-frame {
border: 1px solid #333333;
/* When applying explicit border, restore original padding. */
padding-left: .7em;
padding-right: .7em;
}
table.without-grid > thead > tr > th.with-frame > div.table-cell-content,
table.without-grid > tbody > tr > th.with-frame > div.table-cell-content,
table.without-grid > tbody > tr > td.with-frame > div.table-cell-content {
/* When applying explicit border, restore original margin. */
margin-top: .5em;
margin-bottom: .5em;
}
p.rte-nowrap,
h1.rte-nowrap,
h2.rte-nowrap,
h3.rte-nowrap,
h4.rte-nowrap,
h5.rte-nowrap,
h6.rte-nowrap,
th.rte-nowrap,
td.rte-nowrap {
white-space: nowrap;
}
/* Bullet styles for unordered lists.*/
ul.component-items {
color: #186900;
list-style-type: circle;
}
ul.action-items {
color: #8A0020;
list-style-image: url(img/red_arrow_bullet.gif);
}
/* Numbering styles for ordered lists.*/
ol.component-items-ordered {
color: #10007B;
list-style-type: lower-roman;
}
ol.action-items-ordered {
color: #8A0020;
list-style-type: lower-greek;
}
/* Three inline text colors taken from the color scheme of CSS Styled Content extension.*/
span.important { color: #DD0000; }
span.name-of-person { color: #10007B; }
span.detail { color: #186900; }
/* Selectors for the default configuration of the link accessibity feature.*/
a.external-link {}
a.external-link-new-window {}
a.internal-link {}
a.internal-link-new-window {}
a.download {}
a.mail {}
/* Default selector for indentation.*/
div.indent { margin-left: 2em; }