0b0dc5930979d25809a5911b339dba56c8a878fe
[Packages/TYPO3.CMS.git] / typo3 / sysext / css_styled_content / css / example_outlines.css
1 /* TYPO3 CVS id: $id$ */
2 /* Experimental stylesheet which highlights/outlines all elements */
3
4
5
6 /***************************/
7 /* General element styles: */
8 /***************************/
9 H1, H2, H3, H4, H5, P, TD, UL, OL, BLOCKQUOTE { font-family: arial, helvetica; border: 1px dotted #999999;}
10 PRE { border: 1px dotted #999999; font-family: monospace; }
11 H1, H2, H3, H4, H5 { background-color: #ddddcc; }
12 P, UL, OL, BLOCKQUOTE { background-color: #ffcc66; }
13 LI { border: 1px dotted #333333; }
14 A { color: navy; text-decoration: none; }
15 A:hover { text-decoration: underline; }
16 FORM { margin: 0px 0px 0px 0px;}
17 P, PRE { margin: 0px 0px 0px 0px; }
18
19
20
21 /********************************/
22 /* Frames, spacing, link-to-top */
23 /********************************/
24 IMG.spacer-gif { border: 1px solid navy; }
25 P.csc-linkToTop { text-align: right; }
26 P.csc-linkToTop A { font-weight: bold; }
27
28 DIV.csc-frame { border: 2px dotted olive; }
29 DIV.csc-frame-invisible {}
30 DIV.csc-frame-rulerBefore { border-top: 1px solid black; }
31 DIV.csc-frame-rulerAfter { border-bottom: 1px solid black; }
32 DIV.csc-frame-indent { padding-left: 100px; }
33 DIV.csc-frame-indent3366 { padding-left: 33%; }
34 DIV.csc-frame-indent6633 { padding-right: 33%; }
35 DIV.csc-frame-frame1 { background-color: red; }
36 DIV.csc-frame-frame2 { background-color: green; }
37
38 /******************/
39 /* Headers, plain */
40 /******************/
41 H1 { font-size: 20px; }
42 H2 { font-size: 18px; }
43 H3 { font-size: 16px; }
44 H1, H2, H3, H4, H5, H6 { margin-top: 20px; margin-bottom: 2px; }
45 H1.csc-firstHeader, H2.csc-firstHeader, H3.csc-firstHeader, H4.csc-firstHeader, H5.csc-firstHeader, H6.csc-firstHeader { margin-top: 0px; }
46
47 /* Headers, with link */
48 H1 A, H2 A { color: #660000; }
49 H1 A:hover { color: red; }
50
51 /* Header date */
52 P.csc-header-date { font-size: 10px; color: navy; }
53
54 /* Subheader, general */
55 P.csc-subheader { font-size: 12px; font-style: italic; background-color: #ccffee; }
56
57 /* Subheader, specific */
58 P.csc-subheader-0 { color: red; }
59 P.csc-subheader-1 { color: green; }
60 P.csc-subheader-2 { color: blue; }
61 P.csc-subheader-3 { color: olive; font-style: normal; }
62
63
64
65 /*******************/
66 /* RTE / Bodytext: */
67 /*******************/
68 P.bodytext { font-size: 11px; background-color: #ccccff; }
69 P.bodytext I { background-color: olive; }
70 P.bodytext U { background-color: maroon; }
71 P.bodytext B { background-color: teal; }
72 P.bodytext B I { background-color: red; }
73 P.bodytext B I U { background-color: green; }
74 P.bodytext A { font-weight: bold; }
75
76 /* RTE / Bulletlists */
77 UL { font-size: 11px; margin-top: 0px; }
78 UL UL LI { font-size: 10px; }
79 UL LI A { color: green; }
80
81 OL { font-size: 11px; margin-top: 0px; }
82 OL LI A { color: green; }
83
84 LI { margin-top: 0px; margin-bottom: 0px; padding-top: 2px; }
85
86 /* RTE / BlockQuote styling */
87 BLOCKQUOTE { background-color: #5588ee; }
88 BLOCKQUOTE P.bodytext { margin-left: 20px; }
89 BLOCKQUOTE BLOCKQUOTE { background-color: #6699ff; }
90 BLOCKQUOTE BLOCKQUOTE P.bodytext { margin-left: 20px; }
91
92 /* RTE / Table styling */
93 TABLE.contenttable { border: 1px #666666 solid; margin: 10px 10px 10px 10px; width: 70%; }
94 TABLE.contenttable TR TD { padding: 5px 5px 5px 5px; }
95 TABLE.contenttable TR TD P.bodytext { font-size: 10px; color: #666666; font-style: italic; }
96 TABLE.contenttable TR { background-color: #eeff99; }
97
98
99
100 /**********/
101 /* Images */
102 /**********/
103
104 /* Images / Captions */
105 P.csc-caption { font-size: 11px; }
106 P.csc-caption A { color: maroon; }
107
108 /* Images / Tables / Floating text */
109 TABLE.imgtext-table { border: 2px black solid; }
110
111 /* Images / Tables / Wrapped text */
112 /* When "Text w/Image" elements are wrapping the text into a table the top-margin of Hx elements should be transferred to the wrapping table instead. This is done here: */
113 TABLE.imgtext-nowrap { border: 2px red solid; margin-top: 20px; }
114 TABLE.imgtext-nowrap H1, TABLE.imgtext-nowrap H2, TABLE.imgtext-nowrap H3, TABLE.imgtext-nowrap H4, TABLE.imgtext-nowrap H5 { margin-top: 0px; }
115
116
117
118 /***************/
119 /* Bulletlists */
120 /***************/
121
122 /* Bulletlists, general */
123 UL.csc-bulletlist { color: navy; background-color: transparent; }
124 UL.csc-bulletlist LI { background-color: #ffaaff; }
125
126 /* Bulletlists, specifically */
127 UL.csc-bulletlist-0 { color: green; }
128 UL.csc-bulletlist-1 { color: blue; list-style-type : decimal; }
129 UL.csc-bulletlist-2 { color: red; list-style-position : inside; }
130 UL.csc-bulletlist-3 { color: olive; list-style-image: url(img/red_arrow_bullet.gif); }
131
132
133
134 /*********************/
135 /* Tables, generally */
136 /*********************/
137 TABLE.contenttable P { font-size: 11px; }
138 TABLE.contenttable TR TD { vertical-align: top; }
139 TABLE.contenttable TR.tr-last TD P { background-color: #336699; }
140 TABLE.contenttable TR TD.td-last P { background-color: #aa6699; }
141
142 /* Tables, specifically */
143 TABLE.contenttable-0 P { color: green; }
144
145 TABLE.contenttable-1 P { color: blue; }
146 TABLE.contenttable-1 TR.tr-0 TD { background-color: #ff9900;}
147 TABLE.contenttable-1 TR.tr-0 TD P { font-weight: bold; }
148
149 TABLE.contenttable-2 P { color: red; }
150 TABLE.contenttable-2 TR TD.td-0 { background-color: #ff9900;}
151 TABLE.contenttable-2 TR TD.td-0 P { font-weight: bold; }
152
153 TABLE.contenttable-3 P { color: olive; }
154 TABLE.contenttable-3 TR TD.td-0, TABLE.contenttable-3 TR.tr-0 TD { background-color: #ff9900;}
155 TABLE.contenttable-3 TR TD.td-0 P, TABLE.contenttable-3 TR.tr-0 TD P { font-weight: bold; }
156
157
158
159 /************************/
160 /* Filelinks, generally */
161 /************************/
162 TABLE.csc-uploads { border: 2px solid black; width: 70%; }
163 TABLE.csc-uploads TR TD P { background-color : transparent; font-size: 12px; }
164 TABLE.csc-uploads TR TD { vertical-align : top; }
165 TABLE.csc-uploads TR.tr-even { background-color: #ffccee; }
166 TABLE.csc-uploads TR.tr-odd { background-color: #ccccee; }
167 TABLE.csc-uploads TR TD.csc-uploads-icon { padding-left: 6px; padding-right: 6px; width: 1%; text-align: center; vertical-align: middle; }
168 TABLE.csc-uploads TR TD.csc-uploads-fileName { width: 80%; padding-left: 5px; }
169 TABLE.csc-uploads TR TD.csc-uploads-fileName P A { font-weight: bold; }
170 TABLE.csc-uploads TR TD.csc-uploads-fileName P.csc-uploads-description { font-style: italic; }
171 TABLE.csc-uploads TR TD.csc-uploads-fileSize { white-space: nowrap; padding-left: 6px; padding-right: 6px; }
172
173 /* Filelinks, specifically */
174 TABLE.csc-uploads-1 { border-color: red; }
175
176 TABLE.csc-uploads-2 { border-color: green; }
177
178 TABLE.csc-uploads-3 { border-color: blue; }
179 TABLE.csc-uploads-3 TR.tr-even { background-color: #99ff99; }
180 TABLE.csc-uploads-3 TR.tr-odd { background-color: #99ff66; }
181 TABLE.csc-uploads-3 TR TD { vertical-align: middle; }
182 TABLE.csc-uploads-3 TR.tr-even TD.csc-uploads-icon IMG { border: 3px solid black; }
183 TABLE.csc-uploads-3 TR.tr-odd TD.csc-uploads-icon IMG { border: 3px solid red; }
184
185
186
187 /*****************/
188 /* Various Forms */
189 /*****************/
190
191 /* Email, Login and Search forms generally: */
192 FORM TABLE TR TD { padding-left: 5px; padding-right: 20px; }
193 FORM TABLE TR TD.csc-form-labelcell { background-color: #eeccaa; }
194 FORM TABLE TR TD.csc-form-fieldcell { background-color: #aa66ff; }
195 FORM TABLE TR TD.csc-form-fieldcell INPUT, FORM TABLE TR TD.csc-form-fieldcell SELECT, FORM TABLE TR TD.csc-form-fieldcell TEXTAREA { background-color: #eeeeee; border: 1px solid #666666; font-style: italic; font-size: 11px; }
196 FORM TABLE TR TD.csc-form-labelcell P, FORM TABLE TR TD.csc-form-commentcell P { font-size: 11px;}
197 FORM TABLE TR TD.csc-form-labelcell P.csc-form-label-req { font-weight: bold; color: navy; }
198 FORM TABLE TR TD.csc-form-labelcell P.csc-form-label { color: #666666; }
199 FORM TABLE { margin-top: 10px; border: 5px navy dashed; }
200
201 /* Email form, specifically */
202 FORM TABLE.csc-mailform { border-color: #ff6600; }
203 FORM TABLE.csc-mailform TR TD.csc-form-labelcell { background-color: #ccccff; }
204
205 /* Search form, specifically */
206 FORM TABLE.csc-searchform { border-color: red; }
207 FORM TABLE.csc-searchform TR TD.csc-form-labelcell { background-color: #ffffcc; }
208
209 /* Login form, specifically */
210 FORM TABLE.csc-loginform { border-color: green; }
211 FORM TABLE.csc-loginform TR TD.csc-form-labelcell { background-color: #ccffcc; }
212
213
214
215
216 /*****************/
217 /* Search result */
218 /*****************/
219
220 /* Search Result, result information box: */
221 TABLE.csc-searchResultInfo { margin-left: 5px; margin-top: 10px; border: 1px black solid; width: 100%;}
222 TABLE.csc-searchResultInfo TR { background-color: #33eeff; }
223 TABLE.csc-searchResultInfo TR TD P { font-size: 11px; padding: 0px 5px 0px 5px;}
224 TABLE.csc-searchResultInfo TR TD.csc-searchResultRange P { color: green; font-weight: bold; }
225 TABLE.csc-searchResultInfo TR TD.csc-searchResultPrevNext P { color: red; }
226 TABLE.csc-searchResultInfo TR TD.csc-searchResultPrevNext { text-align: right; }
227
228 /* Search Result, header + abstract: */
229 H3.csc-searchResultHeader A { color: maroon; }
230 H3.csc-searchResultHeader { background-color: #aaaacc; padding-left: 5px; }
231 P.csc-searchResult { font-size: 11px; font-style: italic; background-color: #eeeeee; margin-left: 20px;}
232
233
234
235 /*****************************/
236 /* Menu / Sitemap, generally */
237 /*****************************/
238 DIV.csc-menu { background-color: #99cc99; padding: 5px 5px 5px 5px; margin: 5px 5px 5px 5px; border: 3px solid black;}
239 DIV.csc-menu P { margin-left: 30px; padding-left: 5px; font-size: 11px; }
240 DIV.csc-menu P.csc-section { font-weight: normal; margin-left: 40px; font-style: italic; }
241 DIV.csc-menu P A { color: green; }
242
243 /* Menu / Sitemap, "Menu of these pages" */
244 DIV.csc-menu-def P A { color: red; }
245
246 /* Menu / Sitemap, "Menu of subpages to these pages" */
247 DIV.csc-menu-1 { border-color: navy; }
248
249 /* Menu / Sitemap, "Sitemap" */
250 DIV.csc-menu-2 { border-color: red; }
251 DIV.csc-menu-2 P.csc-sitemap { border: 2 dashed red; }
252 DIV.csc-menu-2 P.csc-sitemap-level1 { margin-left: 50px; }
253 DIV.csc-menu-2 P.csc-sitemap-level2 { margin-left: 100px; }
254 DIV.csc-menu-2 P.csc-sitemap-level3 { margin-left: 150px; }
255 DIV.csc-menu-2 P.csc-sitemap-level4 { margin-left: 200px; }
256 DIV.csc-menu-2 P.csc-sitemap-level1 A { color: maroon; }
257 DIV.csc-menu-2 P.csc-sitemap-level2 A { color: navy; }
258 DIV.csc-menu-2 P.csc-sitemap-level3 A { color: green; }
259 DIV.csc-menu-2 P.csc-sitemap-level4 A { color: purple; }
260
261 /* Menu / Sitemap, "Section index (pagecontent w/Index checked)" */
262 DIV.csc-menu-3 { border-color: purple; }
263 DIV.csc-menu-3 P.csc-section A { color: teal; }
264
265 /* Menu / Sitemap, "Menu of subpages to these pages (with abstract)" */
266 DIV.csc-menu-4 { border-color: yellow; }
267 DIV.csc-menu-4 P.csc-abstract { margin-left: 40px; font-style: italic; }
268
269 /* Menu / Sitemap, "Recently updated pages" */
270 DIV.csc-menu-5 { border-color: teal; }
271
272 /* Menu / Sitemap, "Related pages (based on keywords)" */
273 DIV.csc-menu-6 { border-color: olive; }
274
275 /* Menu / Sitemap, "Menu of subpages to these pages + sections" */
276 DIV.csc-menu-7 { border-color: maroon; }
277 DIV.csc-menu-7 P { font-weight: bold; }
278 DIV.csc-menu-7 P.csc-section A { color: navy; }
279
280
281
282 /****************************************/
283 /* Frontend editing / TYPO3 Admin Panel */
284 /****************************************/
285 IMG.frontEndEditIcons { vertical-align: middle; margin: 0px 2px 0px 2px; }
286
287 TABLE.typo3-adminPanel { border: 2px solid yellow; background-color: #ff6699; }
288 TABLE.typo3-adminPanel TR.typo3-adminPanel-hRow TD { background-color: #22aabb; }
289 TABLE.typo3-adminPanel TR.typo3-adminPanel-itemHRow TD { background-color: #ff99ee; }
290 TABLE.typo3-adminPanel TABLE, TABLE.typo3-adminPanel TD { border: 1px; }
291 TABLE.typo3-adminPanel TD FONT { font-family: verdana; font-size: 12px; color: black; }
292 TABLE.typo3-adminPanel TD A FONT { font-family: verdana; font-size: 12px; color: maroon; }
293 TABLE.typo3-editPanel TD { border: 0px; }
294 TABLE.typo3-editPanel TD FONT { font-family: verdana; font-size: 12px; color: navy; }
295 TABLE.typo3-editPanel TD.typo3-editPanel-controls { background-color: #ff99aa; }
296 TABLE.typo3-editPanel TD.typo3-editPanel-label { background-color: #22aabb; }