62af8fe256910bc00a82305782d53958b5c52a13
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / rtehtmlarea / htmlarea.css
1 /* Selectors for the htmlArea RTE editor */
2 .htmlarea {
3 margin: 0 2px 0 0;
4 padding: 0;
5 }
6 .pleasewait {
7 position: relative;
8 margin-top:30px;
9 padding: 20px 0 20px 50px;
10 font-size: 11px !important;
11 text-align: left;
12 background: url("images/status/loading.gif") no-repeat 10px center;
13 vertical-align: middle;
14 color: #7F8083;
15 }
16 .editorWrap {
17 margin: 0;
18 margin-top: 2px;
19 padding: 0;
20 }
21 .editorWrap textarea {
22 border-style:solid;
23 border-color:#C7C7C7;
24 border-width:0px 1px 1px 1px;
25 padding:0px 1px;
26 margin:0;
27 }
28 .editorWrap .resizable {
29 background-image: url("images/status/resizable.gif");
30 background-position: bottom right;
31 background-repeat: no-repeat;
32 }
33 .editorWrap div.resizable {
34 padding-right: 7px;
35 padding-bottom: 5px;
36 }
37 /* Selectors for the editor toolbar */
38 .htmlarea .toolbar {
39 background-color: #f3f3f3;
40 cursor: default;
41 border: 1px solid #c7c7c7;
42 border-bottom: 0;
43 margin: 0;
44 padding: 2px;
45 font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
46 }
47 .htmlarea .toolbar .tb-group {
48 clear:none;
49 float:left;
50 margin:1px 2px 0px 0px;
51 padding:0;
52 }
53 .htmlarea .toolbar .x-form-item {
54 float: left;
55 margin:0;
56 }
57 .htmlarea .toolbar .x-form-item-label {
58 vertical-align:middle;
59 background-color:transparent;
60 border-style:none;
61 margin:0;padding:3px 3px 0px 3px;
62 }
63 /* Fix combo box left loat in IE6 */
64 body.ext-ie6 .htmlarea .toolbar .x-form-item {
65 width: 1%;
66 }
67 .htmlarea .toolbar .button {
68 background-color: transparent;
69 color: ButtonText;
70 border-style: solid;
71 border-width: 1px;
72 border-color: transparent;
73 border-collapse: separate;
74 margin: 0 0 4px 0;
75 padding: 0;
76 float: left;
77 }
78 /* fixing button border-color in IE6 */
79 body.ext-ie6 .htmlarea .toolbar .button {
80 border-color: #f3f3f3;
81 }
82 .htmlarea .toolbar .x-btn-mc {
83 background-color: transparent;
84 background-image: none;
85 border-style: none;
86 margin: 0;
87 padding: 0;
88 }
89 .htmlarea .toolbar .x-btn-tl,
90 .htmlarea .toolbar .x-btn-tc,
91 .htmlarea .toolbar .x-btn-tr,
92 .htmlarea .toolbar .x-btn-ml,
93 .htmlarea .toolbar .x-btn-mr,
94 .htmlarea .toolbar .x-btn-bl,
95 .htmlarea .toolbar .x-btn-bc,
96 .htmlarea .toolbar .x-btn-br {
97 display: none;
98 }
99 .htmlarea .toolbar .x-btn-text {
100 background-image: url("images/sprites/actions.png");
101 background-repeat: no-repeat;
102 width: 20px;
103 height: 18px;
104 padding: 0;
105 margin: 1px 0 1px 2px;
106 }
107 body.ext-ie6 .htmlarea .toolbar .x-btn-text {
108 background-image: url("images/sprites/actions.gif");
109 }
110 /* fixing button background-color and border-color in IE6 */
111 body.ext-ie6 .htmlarea .toolbar .buttonHover,
112 .htmlarea .toolbar .buttonHover {
113 border-style: solid;
114 border-width: 1px;
115 border-color: white #C5C5D5 #C5C5D5 white;
116 background-color: #E0E0E9;
117 opacity: 1.00;
118 }
119 /* fixing button background-color and border-color in IE6 */
120 body.ext-ie6 .htmlarea .toolbar .buttonActive,
121 body.ext-ie6 .htmlarea .toolbar .buttonPressed,
122 body.ext-ie6 .htmlarea-context-menu .buttonActive,
123 .htmlarea .toolbar .buttonActive,
124 .htmlarea .toolbar .buttonPressed,
125 .htmlarea-context-menu .buttonActive {
126 border-style: solid;
127 border-width: 1px;
128 border-color: #C5C5D5 #C5C5D5 #C5C5D5 #C5C5D5;
129 background-color: ButtonHighlight;
130 text-decoration: none;
131 opacity: 1.00;
132 }
133 .htmlarea .toolbar .indicator {
134 cursor: default;
135 background-color: white;
136 width: 20px;
137 height: 16px;
138 overflow: hidden;
139 text-align: center;
140 border: 1px solid ButtonShadow;
141 margin: 3px 1px 5px 1px;
142 padding: 0 3px;
143 float: left;
144 }
145 .htmlarea .toolbar .buttonDisabled {
146 filter: gray() alpha(opacity=25);
147 opacity: 0.25;
148 -moz-opacity: 0.25;
149 }
150 .htmlarea .toolbar .separator {
151 background-color: transparent;
152 background-image: url("images/separator.gif");
153 background-repeat: no-repeat;
154 background-position: 0 -1px;
155 width: 7px;
156 height: 23px;
157 border: 1px solid #EFEFF4;
158 margin-bottom: 1px;
159 float: left;
160 }
161 .htmlarea .toolbar .space {
162 background-color:transparent;
163 height:22px;
164 border-style:none;
165 margin:0;padding:0 1px;
166 float:left;
167 }
168 .htmlarea .toolbar .select {
169 color: WindowText;
170 margin: 0 0 4px 0;
171 }
172 .htmlarea .toolbar .x-form-item label.x-form-item-label{
173 padding-right: 0;
174 }
175 .htmlarea .toolbar .x-form-field-wrap .x-form-trigger {
176 right: 0;
177 }
178 .htmlarea .toolbar .select, .htmlarea .toolbar .select:hover, .htmlarea .toolbar .select:active {
179 background-color:Window;
180 }
181 .htmlarea .toolbar .select .buttonDisabled {
182 color:GrayText;
183 background-color:#EFEFF4;
184 }
185 .htmlarea .editorIframe {
186 clear:both;
187 width:100%;
188 border:1px solid #c7c7c7;
189 border-bottom: none;
190 margin:0;padding:0;
191 }
192 .htmlarea .noStatusBar {
193 border-bottom:1px solid #A2AAB8;
194 }
195 .htmlarea .statusBar {
196 background-color: #5b5b5b;
197 background-image: url('../images/backgrounds/row-header.png');
198 background-image: linear-gradient(center top , #7f7f7f 10%, #5b5b5b 100%);
199 background-image: -moz-linear-gradient(center top , #7f7f7f 10%, #5b5b5b 100%);
200 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.1, #7f7f7f), color-stop(1, #5b5b5b));
201 background-repeat: repeat-x;
202 color: #FFFFFF;
203 font-size: 10px;
204 border: 1px solid #c7c7c7;
205 margin: 0;
206 padding: 0 3px;
207 line-height: 20px;
208 font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
209 }
210 .htmlarea .statusBar .statusBarTree a {
211 color:#FFFFFF;
212 text-decoration:none;
213 font-weight:bold;
214 padding:0px 5px;
215 }
216 .htmlarea .statusBar .statusBarTree a:visited {
217 color:#FFFFFF;
218 }
219 .htmlarea .statusBar .statusBarTree a:hover {
220 text-decoration: underline;
221 }
222 .htmlarea .statusBar .statusBarWordCount {
223 float: right;
224 }
225 /* Selectors for dialogue windows */
226 .htmlarea-window .x-panel-icon {
227 background-image: url("images/sprites/actions.png");
228 background-repeat: no-repeat;
229 margin-top: 2px;
230 height: 22px;
231 }
232 body.ext-ie6 .htmlarea-window .x-panel-icon {
233 background-image: url("images/sprites/actions.gif");
234 }
235 .htmlarea-window .x-window-header .t3-help-link {
236 color: #fff;
237 }
238 .htmlarea-window ul.x-tab-strip {
239 list-style: none;
240 }
241 .htmlarea-window .x-tab-panel-body {
242 background-color: #EFEFF4;
243 }
244 .htmlarea-window .x-fieldset {
245 margin: 3px;
246 }
247 .htmlarea-window .x-form-item-label {
248 font-size: 10px;
249 text-align: right;
250 margin: 0;
251 padding: 3px 5px 0 5px;
252 }
253 .htmlarea-window .x-btn-text {
254 font-weight: normal;
255 color: #000000;
256 }
257 .htmlarea-window .x-form-check-wrap {
258 padding-top: 3px;
259 }
260 .htmlarea-window iframe {
261 background-color: #FFF;
262 color: #000;
263 border: 1px solid #A2AAB8;
264 }
265 .htmlarea-window iframe.content-iframe {
266 background-color: #EFEFF4;
267 }
268 .htmlarea-window .show-color {
269 margin-top: 10px;
270 border-style: solid;
271 border-width: 1px;
272 border-color: white;
273 }
274 .htmlarea-custom-colors {
275 height: auto;
276 }
277 .htmlarea-custom-colors a {
278 border-color: transparent;
279 float: none;
280 display: block;
281 width: 100%;
282 }
283 .htmlarea-custom-colors em {
284 display: block;
285 border: 1px solid;
286 border-color: #C5C5D5;
287 width: 100%;
288 }
289 .htmlarea-custom-colors em span {
290 width: 100%;
291 }
292 /* Selectors for the About dialogue */
293 .htmlarea-window .about-plugins .x-list-body dt {
294 overflow: auto;
295 white-space: normal;
296 }
297 /* Selectors for the default image dialogue */
298 .htmlarea-window .image-preview {
299 height: 300px;
300 width: 99%;
301 float: right;
302 }
303 /* Selectors for the InsertSmiley plugin */
304 .htmlarea-window .emoticon-array {
305 padding: 10px;
306 }
307 .htmlarea-window .emoticon {
308 display: block;
309 float: left;
310 padding: 5px;
311 width: 20px;
312 height: 20px;
313 vertical-align: middle;
314 }
315 /* Selectors for the CharacterMap dialogue */
316 .htmlarea-window .character-map .character {
317 display: block;
318 float: left;
319 height: 20px;
320 width: 20px;
321 font-size: 14px;
322 font-weight: bold;
323 text-align: center;
324 padding: 3px;
325 border: 1px solid transparent;
326 }
327 .htmlarea-window .character-map .character:hover {
328 background-color: #FFFFFF;
329 border: 1px solid #A2AAB8;
330 }
331 /* Selectors for the SpellChecker dialogue */
332 .htmlarea-window .spell-check .controls {
333 text-align: center;
334 width: 175px;
335 margin: 3px;
336 }
337 .htmlarea-window .spell-check .controls .x-btn {
338 margin-top: 3px;
339 margin-left: 8px;
340 }
341 .htmlarea-window .spell-check .contentframe {
342 float: right;
343 height: 450px;
344 margin: 9px 0px;
345 }
346 /* Selectors for the ContextMenu plugin */
347 .htmlarea-context-menu {
348 background-color:#EFEFF4;
349 color:#212424;
350 font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
351 font-size:10px;
352 }
353 .htmlarea-context-menu ul {
354 list-style: none;
355 margin: 0;
356 }
357 .htmlarea-context-menu li {
358 margin: 0;
359 padding: 0;
360 border-width: 0;
361 }
362 .htmlarea-context-menu a {
363 font-weight: normal;
364 }
365 .htmlarea-context-menu .button {
366 background-color: transparent;
367 margin: 0 2px 0 0;
368 padding-top: 1px;
369 }
370 .htmlarea-context-menu .separator {
371 border-top: 1px solid #A2AAB8;
372 }
373 .htmlarea-context-menu .hover {
374 background-image: url("images/alt_menu_mainitem_bg.gif");
375 background-repeat: repeat-x;
376 color: #FFF;
377 margin: 0 2px 0 0;
378 padding-top: 1px;
379 border-color: #A2AAB8;
380 }
381 .htmlarea-context-menu .x-menu-item-icon {
382 background-image: url("images/sprites/actions.png");
383 background-repeat: no-repeat;
384 margin-top: -2px;
385 margin-left: -2px;
386 width: 18px;
387 height: 18px;
388 }
389 body.ext-ie6 .htmlarea-context-menu .x-menu-item-icon {
390 background-image: url("images/sprites/actions.gif");
391 }
392 /* Window status bar selectors */
393 .htmlarea-window .status-ready {
394 padding-left: 21px !important;
395 background-repeat: no-repeat;
396 background-image: url("images/status/dialog-ok.png");
397 background-position: 0px 2px;
398 }
399 .htmlarea-window .status-info {
400 padding-left: 21px !important;
401 background-repeat: no-repeat;
402 background-image: url("images/status/dialog-information.png");
403 background-position: 0px 2px;
404 }
405 .htmlarea-window .status-wait {
406 padding-left: 45px !important;
407 background-repeat: no-repeat;
408 background-image: url("images/status/loading-balls.gif");
409 background-position: 0px 6px;
410 }
411 .htmlarea-window .x-toolbar .x-btn {
412 margin-left: 5px;
413 }
414 .htmlarea-window .x-toolbar .xtb-text {
415 cursor: default;
416 }
417 /* Button background positioning in window status bar*/
418 .htmlarea-window .x-toolbar .x-btn-tl{
419 background-position: 0 0;
420 }
421 .htmlarea-window .x-toolbar .x-btn-tr{
422 background-position: -3px 0;
423 }
424 .htmlarea-window .x-toolbar .x-btn-tc{
425 background-position: 0 -6px;
426 }
427 .htmlarea-window .x-toolbar .x-btn-ml{
428 background-position: 0 -24px;
429 }
430 .htmlarea-window .x-toolbar .x-btn-mr{
431 background-position: -3px -24px;
432 }
433 .htmlarea-window .x-toolbar .x-btn-mc{
434 background-position: 0 -1096px;
435 }
436 .htmlarea-window .x-toolbar .x-btn-bl{
437 background-position: 0 -3px;
438 }
439 .htmlarea-window .x-toolbar .x-btn-br{
440 background-position: -3px -3px;
441 }
442 .htmlarea-window .x-toolbar .x-btn-bc{
443 background-position: 0 -15px;
444 }
445 /* Action icon selectors for toolbar, context menu and window headers */
446 .htmlarea-action-abbreviation-edit { background-position: 0 0 !important; }
447 .htmlarea-action-bidi-override { background-position: 0 -58px !important; }
448 .htmlarea-action-big { background-position: 0 -116px !important; }
449 .htmlarea-action-blockquote { background-position: 0 -174px !important; }
450 .htmlarea-action-bold { background-position: 0 -232px !important; }
451 .htmlarea-action-cell-delete { background-position: 0 -290px !important; }
452 .htmlarea-action-cell-edit-properties { background-position: 0 -348px !important; }
453 .htmlarea-action-cell-insert-after { background-position: 0 -406px !important; }
454 .htmlarea-action-cell-insert-before { background-position: 0 -464px !important; }
455 .htmlarea-action-cell-merge { background-position: 0 -522px !important; }
456 .htmlarea-action-cell-split { background-position: 0 -580px !important; }
457 .htmlarea-action-character-insert-from-map { background-position: 0 -638px !important; }
458 .htmlarea-action-citation { background-position: 0 -696px !important; }
459 .htmlarea-action-code { background-position: 0 -754px !important; }
460 .htmlarea-action-color-background { background-position: 0 -812px !important; }
461 .htmlarea-action-color-foreground { background-position: 0 -870px !important; }
462 .htmlarea-action-column-delete { background-position: 0 -928px !important; }
463 .htmlarea-action-column-edit-properties { background-position: 0 -986px !important; }
464 .htmlarea-action-column-insert-after { background-position: 0 -1044px !important; }
465 .htmlarea-action-column-insert-before { background-position: 0 -1102px !important; }
466 .htmlarea-action-column-split { background-position: 0 -1160px !important; }
467 .htmlarea-action-copy { background-position: 0 -1218px !important; }
468 .htmlarea-action-cut { background-position: 0 -1276px !important; }
469 .htmlarea-action-definition-list-item { background-position: 0 -1334px !important; }
470 .htmlarea-action-definition-list { background-position: 0 -1392px !important; }
471 .htmlarea-action-definition { background-position: 0 -1450px !important; }
472 .htmlarea-action-delete-item { background-position: 0 -1508px !important; }
473 .htmlarea-action-deleted-text { background-position: 0 -1566px !important; }
474 .htmlarea-action-editor-show-about { background-position: 0 -1624px !important; }
475 .htmlarea-action-editor-toggle-mode { background-position: 0 -1682px !important; }
476 .htmlarea-action-emphasis { background-position: 0 -1740px !important; }
477 .htmlarea-action-find-replace { background-position: 0 -1798px !important; }
478 .htmlarea-action-horizontal-rule-insert { background-position: 0 -1856px !important; }
479 .htmlarea-action-image-edit { background-position: 0 -1914px !important; }
480 .htmlarea-action-indent { background-position: 0 -1972px !important; }
481 .htmlarea-action-inserted-text { background-position: 0 -2030px !important; }
482 .htmlarea-action-italic { background-position: 0 -2088px !important; }
483 .htmlarea-action-justify-center { background-position: 0 -2146px !important; }
484 .htmlarea-action-justify-full { background-position: 0 -2204px !important; }
485 .htmlarea-action-justify-left { background-position: 0 -2262px !important; }
486 .htmlarea-action-justify-right { background-position: 0 -2320px !important; }
487 .htmlarea-action-keyboard { background-position: 0 -2378px !important; }
488 .htmlarea-action-language-marks-show { background-position: 0 -2436px !important; }
489 .htmlarea-action-link-edit { background-position: 0 -2494px !important; }
490 .htmlarea-action-mono-spaced { background-position: 0 -2552px !important; }
491 .htmlarea-action-ordered-list { background-position: 0 -2610px !important; }
492 .htmlarea-action-outdent { background-position: 0 -2668px !important; }
493 .htmlarea-action-paragraph-insert-after { background-position: 0 -2726px !important; }
494 .htmlarea-action-paragraph-insert-before { background-position: 0 -2784px !important; }
495 .htmlarea-action-paste-as-plain-text { background-position: 0 -2842px !important; }
496 .htmlarea-action-paste { background-position: 0 -2900px !important; }
497 .htmlarea-action-quotation { background-position: 0 -2958px !important; }
498 .htmlarea-action-redo { background-position: 0 -3016px !important; }
499 .htmlarea-action-remove-format { background-position: 0 -3074px !important; }
500 .htmlarea-action-row-delete { background-position: 0 -3132px !important; }
501 .htmlarea-action-row-edit-properties { background-position: 0 -3190px !important; }
502 .htmlarea-action-row-insert-above { background-position: 0 -3248px !important; }
503 .htmlarea-action-row-insert-under { background-position: 0 -3306px !important; }
504 .htmlarea-action-row-split { background-position: 0 -3364px !important; }
505 .htmlarea-action-sample { background-position: 0 -3422px !important; }
506 .htmlarea-action-small { background-position: 0 -3480px !important; }
507 .htmlarea-action-smiley-insert { background-position: 0 -3538px !important; }
508 .htmlarea-action-span { background-position: 0 -3596px !important; }
509 .htmlarea-action-spell-check { background-position: 0 -3654px !important; }
510 .htmlarea-action-strike-through { background-position: 0 -3712px !important; }
511 .htmlarea-action-strong { background-position: 0 -3770px !important; }
512 .htmlarea-action-subscript { background-position: 0 -3828px !important; }
513 .htmlarea-action-superscript { background-position: 0 -3886px !important; }
514 .htmlarea-action-table-edit-properties { background-position: 0 -3944px !important; }
515 .htmlarea-action-table-insert { background-position: 0 -4002px !important; }
516 .htmlarea-action-table-restyle { background-position: 0 -4060px !important; }
517 .htmlarea-action-table-show-borders { background-position: 0 -4118px !important; }
518 .htmlarea-action-tag-insert { background-position: 0 -4176px !important; }
519 .htmlarea-action-text-direction-left-to-right { background-position: 0 -4234px !important; }
520 .htmlarea-action-text-direction-right-to-left { background-position: 0 -4292px !important; }
521 .htmlarea-action-underline { background-position: 0 -4350px !important; }
522 .htmlarea-action-undo { background-position: 0 -4408px !important; }
523 .htmlarea-action-unlink { background-position: 0 -4466px !important; }
524 .htmlarea-action-unordered-list { background-position: 0 -4524px !important; }
525 .htmlarea-action-user-element-edit { background-position: 0 -4582px !important; }
526 .htmlarea-action-variable { background-position: 0 -4640px !important; }