tdf#154703 docx export framePr: export xAlign/yAlign
[LibreOffice.git] / odk / docs / sdk_styles.css
blobfe6917a4cc728601d4c83b24e2770e241f815efb
1 /* Core Styles */
2 /*
3 * This file is part of the LibreOffice project.
5 * This Source Code Form is subject to the terms of the Mozilla Public
6 * License, v. 2.0. If a copy of the MPL was not distributed with this
7 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
9 * This file incorporates work covered by the following license notice:
11 * Licensed to the Apache Software Foundation (ASF) under one or more
12 * contributor license agreements. See the NOTICE file distributed
13 * with this work for additional information regarding copyright
14 * ownership. The ASF licenses this file to you under the Apache
15 * License, Version 2.0 (the "License"); you may not use this file
16 * except in compliance with the License. You may obtain a copy of
17 * the License at http://www.apache.org/licenses/LICENSE-2.0 .
20 * {
21 margin: 0;
22 padding: 0;
25 body {
26 font: 87.5% sans-serif;
27 background: url(https://api.libreoffice.org/themes/libo/images/background-page.png) repeat-x #FFF;
30 /* Styles go from the top of the page to the bottom (generally) */
32 #Container {
33 width: 900px;
34 margin: auto;
37 #Logo {
38 display: inline-block;
39 width: 218px;
40 height: 45px;
41 padding: 18px 20px;
42 background: url(https://api.libreoffice.org/themes/libo/images/logo.png) no-repeat 18px 20px;
43 *float:left;/* hack for IE7 that doesn't respect inline-block */
45 #TopHeader { height: 88px;/* needed for IE7 */}
46 #TopHeader, #BottomHeader {
47 padding-left: 5px;
48 padding-right: 5px;
49 background-image: url(https://api.libreoffice.org/themes/libo/images/header.png);
50 background-repeat: no-repeat;
52 #Layout {
53 padding: 0 5px;
55 #HeaderTagLine {
56 float: right;
57 padding-top: 30px;
58 padding-right: 20px;
59 color: #18A303;
60 font-size: 1.2em;
63 #BottomHeader {
64 background-position: 0 bottom;
65 margin-bottom: 1.25em;
68 #FirstNavigation, #SecondNavigation {
69 width: 100%;
70 display: block;
71 list-style: none;
72 white-space: nowrap;
73 word-spacing: -1em;
74 letter-spacing: -4px;
77 #FirstNavigation {
78 background: #18A303;
79 border-bottom: 6px solid #43C330;
81 #SecondNavigation {
82 margin-top: -6px;
85 .SingleMenu {
86 padding-bottom: 10px;
89 #FirstNavigation li, #SecondNavigation li {
90 display: inline-block;
91 zoom:1; *display:inline;/* for ie6/7 */
92 word-spacing: normal;
93 letter-spacing: normal;
94 margin: 0;
95 padding: 0;
96 list-style: none;
98 #FirstNavigation li a, #SecondNavigation li a {
99 display: block;
100 text-decoration: none;
101 color: #FFF;
103 #FirstNavigation li a {
104 padding: 9px 18px;
105 margin-bottom: -6px;
106 background: #18A303;
107 border-bottom: 6px solid #43C330;
109 #SecondNavigation li a {
110 padding: 8px 16px;
111 margin-bottom: 10px;
112 font-size: .95em;
113 background: #43C330;
115 #FirstNavigation li a span, #SecondNavigation li a span {
116 opacity: .75;
118 #FirstNavigation li a:hover span, #SecondNavigation li a:hover span, #ThirdNavigation li a:hover {
119 opacity: 1;
120 text-decoration: none;
122 #FirstNavigation li.current a span, #SecondNavigation li.current a span, #SecondNavigation li.section a span {
123 opacity: 1;
124 font-weight: bold;
126 #FirstNavigation li.section > a span {
127 opacity: 1;
129 #FirstNavigation li.current a, #FirstNavigation li.section > a {
130 background-color: #43C330;
132 #SecondNavigation li.current, #SecondNavigation li.section {
133 background: url(https://api.libreoffice.org/themes/libo/images/navigation-second-current.png) center bottom no-repeat;
136 #Layout #ThirdNavigation {
137 float: left;
138 width: 17.5%;
139 margin: .6em 0 0 0;
141 #Layout[dir="rtl"] #ThirdNavigation {
142 float: right;
145 #Layout #ThirdNavigation > li {
146 margin-bottom: 0.25em;
147 display: block;
148 padding: 0;
149 background-image: none;
150 position: relative;
153 #ThirdNavigation >li>ul {
154 position: absolute;
155 z-index: 50;
156 top: 0;
157 left: 100%;
158 background-color: white;
159 display: none;
160 white-space: nowrap;
162 #ThirdNavigation >li:hover >ul {
163 display: block;
166 #Layout #ThirdNavigation li a {
167 margin: 0;
168 display: block;
169 padding: 3px 10px 3px 0;
170 border-bottom: 1px solid #92E285;
173 #Layout #ThirdNavigation li a:hover {
174 background: url(https://api.libreoffice.org/themes/libo/images/heading-green.png) repeat-x 0 bottom;
177 #Layout #ThirdNavigation li a.current {
178 color: #106802;
179 /*text-shadow: #18A303 0px 1px 1px;*/
180 font-weight: bold;
181 border-bottom: 1px solid #18A303;
184 #DownloadButton {
185 display: block;
186 padding: 20px 0 0 64px;
187 width: 360px;
188 height: 44px;
189 font-size: 1.5em;
190 color: #18A303;
191 background: url(https://api.libreoffice.org/themes/libo/images/download-button.png) no-repeat;
194 #DownloadButton:hover {
195 background-position: 0 -64px;
196 color: #106802;
199 #Footer {
200 margin: 0 5px;
201 clear: both;
202 border-top: 6px solid #43C330;
203 padding: 1.25em 0 2.2em 0;
204 font-size: 80%;
207 #FooterText {
208 display: inline-block;
211 #FooterText p {
212 line-height: 150%;
213 margin: 0;
216 #FooterText ul {
217 margin: 0 0 10px 0;
218 float: left;
221 #FooterText ul li {
222 display: inline-block;
223 margin: 0 0 0 18px;
226 #CreativeCommons {
227 float: right;
228 display: block;
229 margin: 3px 0 20px 18px;
230 width: 88px;
231 height: 30px;
232 background: url(https://api.libreoffice.org/themes/libo/images/creative-commons-license.png) no-repeat;
235 div.HalfBlockLeft, div.HalfBlockRight {
236 width: 440px;
237 float: left;
238 display: block;
241 div.HalfBlockRight {
242 float: right;
245 .ThirdLevelPage {
246 width: 80%;
247 margin: 0 0 0 1%;
250 div#screenshot-slide, a#toTop {
251 background-repeat: no-repeat;
254 div#filtered {
255 margin-top: 0.8em;
258 div.faqsList {
259 margin-top: 1em;
260 margin-bottom: 1.2em;
263 a#toTop {
264 background-image: url(https://api.libreoffice.org/themes/libo/images/tango_totop.png);
265 text-indent: 48px;
266 white-space: nowrap;
267 width: 48px;
268 height: 48px;
269 position: fixed;
270 top: 5px;
271 right: 0px;
273 div#translations p, ul.translations, ul.translations li {
274 display: inline-block;
276 div#translations > ul.translations> li:first-letter {
277 text-transform: uppercase;
279 ul.translations li:not(:last-child):after {
280 content: ", ";
284 * LibreOffice theme
285 * initially based on SilverStripe Black Candy Theme
287 * This typography file is included in the WYSIWYG editor and the front end. It provides
288 * a place to add link styles and font styles you would like in the CMS and the Front End.
291 /* PARAGRAPHS & BLOCKQUOTES
292 -------------------------------------------- */
293 p, blockquote, .HalfBlockLeft, .HalfBlockRight {
294 margin-bottom: 1.2em;
297 .typography ul {
298 margin-bottom: 1.5em;
301 .typography ol {
302 margin-left: 3em;
303 line-height: 170%;
306 .typography p, .typography blockquote {
307 text-align: justify;
308 line-height: 175%;
309 color: #333;
312 .typography blockquote {
313 border-left: 10px solid #92E285;
314 margin: 0 0 1.5em 25px;
315 padding: 0 0 0 18px;
316 color: #333;
319 .typography blockquote p {
320 margin: 0;
321 padding: 5px 0;
322 color: #333;
325 /* LINKS
326 -------------------------------------------- */
327 a, .typography a {
328 color: #18A303;
329 text-decoration: none;
332 a:hover, .typography a:hover {
333 color: #106802;
334 text-decoration: underline;
336 a:visited, .typography a:visited {
337 color: #106802;
339 /* LINK ICONS - shows type of file
340 ------------------------------------ */
341 .typography a[href$=".pdf"],
342 .typography a[href$=".PDF"],
343 .typography a.pdf {
344 padding: 2px;
345 padding-left: 20px;
346 background: url(https://api.libreoffice.org/themes/libo/images/icons/page_white_acrobat.png) no-repeat left center;
348 .typography a[href$=".doc"],
349 .typography a[href$=".DOC"],
350 .typography a.doc {
351 padding: 2px;
352 padding-left: 20px;
353 background: url(https://api.libreoffice.org/themes/libo/images/icons/page_word.png) no-repeat left center;
355 .typography a[href$=".xls"],
356 .typography a[href$=".XLS"],
357 .typography a.xls {
358 padding: 2px;
359 padding-left: 20px;
360 background: url(https://api.libreoffice.org/themes/libo/images/icons/page_excel.png) no-repeat left center;
362 .typography a[href$=".gz"],
363 .typography a[href$=".GZ"],
364 .typography a[href$=".gzip"],
365 .typography a[href$=".GZIP"],
366 .typography a[href$=".zip"],
367 .typography a[href$=".ZIP"],
368 .typography a.archive {
369 padding: 2px;
370 padding-left: 20px;
371 background: url(https://api.libreoffice.org/themes/libo/images/icons/page_white_zip.png) no-repeat left center;
373 .typography a[href$=".exe"],
374 .typography a[href$=".EXE"],
375 .typography a.application {
376 padding: 2px;
377 padding-left: 20px;
378 background: url(https://api.libreoffice.org/themes/libo/images/icons/application.png) no-repeat left center;
381 /* LIST STYLES
382 -------------------------------------------- */
383 ul, .typography ul {
384 list-style: none;
387 .typography ul li {
388 background: url(https://api.libreoffice.org/themes/libo/images/bullet-green.png) no-repeat 0 6px;
389 color: 333;
390 line-height: 170%;
391 padding: 0 0 8px 18px;
393 #Layout[dir="rtl"] ul li {
394 padding-left: 0;
395 padding-right: 18px;
396 background-position: right 6px;
399 .typography ul ul {
400 margin-top: 10px;
401 margin-bottom: 10px;
404 .typography ul ul li {
405 background: url(https://api.libreoffice.org/themes/libo/images/bullet-blue.png) no-repeat 0 6px;
408 .typography .Widget a {
409 color: #106802;
412 .typography #Blog li h2 a, .typography .Widget a.TweetAuthor, .typography .Widget small a {
413 color: #1C99E0;
416 .typography #Twitter li {
417 background: url(https://api.libreoffice.org/themes/libo/images/tweet.png) no-repeat 0 12px !important;
418 padding: 6px 0 6px 40px !important;
419 direction: ltr;
420 font-size: .9em;
421 border-bottom: 1px solid #CCF4C6;
424 .typography #Blog li {
425 display: block;
426 background: url(https://api.libreoffice.org/themes/libo/images/bullet-large-blue.png) no-repeat 0 10px !important;
427 padding: 6px 0 6px 30px !important;
428 direction: ltr;
429 border-bottom: 1px solid #CCF4C6;
432 .typography #Blog li h2 {
433 background: none;
434 border: none;
435 font-size: 1.1em;
436 margin: 0;
437 padding: 0;
440 .typography #Blog li p {
441 line-height: 150%;
442 font-size: .9em;
443 text-align: left;
444 padding: 0;
445 margin: 0;
448 .typography .Widget li small {
449 display: block;
450 font-size: .85em;
453 /* used by FolderPage */
454 .typography li.folder {
455 background: url(https://api.libreoffice.org/themes/libo/images/icons/folder_open.png) no-repeat left top;
456 margin-left: -12px;
457 padding-left: 22px;
458 list-style-type: none;
461 .typography .ButtonBar {
462 clear: both;
463 display: block;
464 width: 100%;
467 .typography .ButtonBar li {
468 display: block;
469 float: left;
470 width: 17%;
471 height: 50px;
472 margin: 0 2.5% 1.25em 0;
473 padding: 0 !important; /* important because of rtl rules */
474 background-image: none;
477 .typography .ButtonBar li a {
478 padding: 0 0 0 24px;
479 background-repeat: no-repeat;
480 display: block;
481 font-size: .95em;
484 .typography .ButtonBar li a.irc {
485 background-image: url(https://api.libreoffice.org/themes/libo/images/chat.png);
488 .typography .ButtonBar li a.facebook {
489 background-image: url(https://api.libreoffice.org/themes/libo/images/facebook.png);
492 .typography .ButtonBar li a.template {
493 background-image: url(https://api.libreoffice.org/themes/libo/images/template.png);
496 .typography .ButtonBar li a.extension {
497 background-image: url(https://api.libreoffice.org/themes/libo/images/extension.png);
501 /* HEADER STYLES
502 -------------------------------------------- */
503 .typography h1, .typography h2, .typography h3, .typography h4, .typography h5, .typography h6 {
504 margin-bottom: .5em;
505 font-weight: normal;
508 .typography h1 {
509 background: url(https://api.libreoffice.org/themes/libo/images/heading-green.png) 0 bottom repeat-x;
510 border-bottom: 1px solid #92E285;
511 padding: .2em 0 .1em 2px;
512 color: #18A303;
513 font-weight: bold;
514 font-size: 1.4em;
515 text-shadow: #FFF 0px 1px 1px;
518 .typography h2 {
519 border-bottom: 1px solid #CCF4C6;
520 color: #18A303;
521 font-size: 1.3em;
524 .typography h3 {
525 color: #18A303;
526 font-size: 1.2em;
529 .typography h4 {
530 color: #18A303;
531 font-size: 1.15em;
534 .typography h5 {
535 color: #18A303;
536 font-size: 1.1em;
539 .typography h6 {
540 color: #18A303;
541 font-size: 1.05em;
544 /* PRE STYLES
545 -------------------------------------------- */
546 .typography pre {
547 font-family:"Courier New",Courier;
548 display:block;
549 font-size:1.2em;
550 margin:2em 5em;
551 padding:0.5em;
552 border:1px #ccc solid;
553 background:#eee;;
556 /* TABLE STYLING
557 -------------------------------------------- */
558 .typography table {
559 margin: 0 0 18px 0;
560 border-collapse:collapse;
562 .typography tr {}
563 .typography td {
564 padding:5px;
567 /* WYSIWYG EDITOR ALIGNMENT CLASSES
568 -------------------------------------------- */
569 .typography .left {
570 text-align: left;
572 .typography .center {
573 text-align: center;
575 .typography .right {
576 text-align: right;
579 /* IMAGES
580 -------------------------------------------- */
581 .typography img {
582 border: none;
584 .typography img.right {
585 float: right;
586 margin-left: 20px;
588 .typography img.left {
589 float: left;
590 margin-right: 20px;
592 .typography img.leftAlone {
593 float: left;
594 margin-right: 100%;
596 .typography img.center {
597 float: none;
598 margin-left: auto;
599 margin-right: auto;
600 display: block;
603 ul.ul-libreoffice li {
604 position: relative;
605 list-style: none;
606 margin-left: 0px;
607 background: url(https://api.libreoffice.org/themes/libo/images/li-bullet-single-dark.png) no-repeat;
608 background-position: 4px 3px;
609 padding-left: 30px;
610 display: block;
611 color: #000;
612 margin-bottom: 20px;
613 margin-top: 10px;
615 .typography kbd {
616 color: #000;
617 font-family: monospace;
618 background: #ddd;
620 #supporters td {
621 border-width: 0px;
622 vertical-align:top;
623 padding-bottom: 50px;
625 .foundationtable th {
626 font-size: 140%;
627 padding: 6px;
628 vertical-align: middle;
629 background: #eee;
631 .foundationtable tbody tr:first-child td {
632 padding-top: 20px;
634 .foundationtable tbody tr td:first-child {
635 padding-left: 0px;
636 padding-right: 15px;
638 p.roles {
639 font-variant: small-caps;
642 /* STRONG
643 --------------------------------------------
644 .typography strong {
645 color: #18A303;
647 .highlight {
648 background: yellow;
651 /* for translation status sitemap */
652 div.missing {
653 background-color: red;
655 div.live {
656 background-color: green;
658 div.unpublished {
659 background-color: orange;
661 div.changed {
662 background-color: yellow;
665 /* for horizontally aligned li-children */
666 ul.table {
667 display: table;
669 ul.table > li {
670 display: table-row;
671 background: none;
673 ul.table > li > * {
674 display: table-cell;
675 padding-right: 1em;
677 .clear{
678 clear:both;
681 hr {
682 display: block;
683 clear: both;
684 height: .1em;
685 border: none;
686 width: 100%;
689 .FloatLeft {
690 float: left;
693 .FloatRight {
694 float: right;
697 .RightMargin {
698 margin-right: 10px;
701 .captionImage.FloatRight {
702 margin-left: 1em;
705 .captionImage.FloatLeft {
706 margin-right: 1em;
708 /* pending - not final */
709 .typography p.greenbox {
710 border: 1px solid #43C330;
711 background-color: #CCF4C6;
712 padding: 10px;
713 margin: 10px 0;
716 .typography p.bluebox {
717 border: 1px solid #1C99E0;
718 background-color: #AADCF7;
719 padding: 10px;
720 margin: 10px 0;
723 .typography p.orangebox {
724 border: 1px solid #D36118;
725 background-color: #F9CFB5;
726 padding: 10px;
727 margin: 10px 0;
730 .typography p.purplebox {
731 border: 1px solid #C254D2;
732 background-color: #F2CBF8;
733 padding: 10px;
734 margin: 10px 0;
737 .typography p.yellowbox {
738 border: 1px solid #E9B913;
739 background-color: #FDE9A9;
740 padding: 10px;
741 margin: 10px 0;
744 .typography p.intro {
745 font-size: 1.1em;
746 border-bottom: 1px solid #CCC;
747 padding-bottom: .75em;
750 .typography p.excerpt {
751 width: 200px;
752 margin-bottom: 0;
753 padding: 0 0 0 40px;
754 display: block;
755 float: right;
756 color: #777;
757 font-style: italic;
758 text-align: left;
761 .typography p.tick {
762 padding-left: 50px;
763 background-image: url(https://api.libreoffice.org/themes/libo/images/tick.png);
764 background-position: 10px 5px;
765 background-repeat: no-repeat;
767 .typography ul.tick {
768 background: url(https://api.libreoffice.org/themes/libo/images/tick.png) no-repeat;
769 padding-left: 40px;
772 .typography p.information {
773 padding-left: 50px;
774 background-image: url(https://api.libreoffice.org/themes/libo/images/information.png);
775 background-position: 10px 5px;
776 background-repeat: no-repeat;
778 .typography ul.information {
779 background: url(https://api.libreoffice.org/themes/libo/images/information.png) no-repeat;
780 padding-left: 40px;
783 .typography p.warning {
784 padding-left: 50px;
785 background-image: url(https://api.libreoffice.org/themes/libo/images/warning.png);
786 background-position: 10px 5px;
787 background-repeat: no-repeat;
789 .typography ul.warning {
790 background: url(https://api.libreoffice.org/themes/libo/images/warning.png) no-repeat;
791 padding-left: 40px;
794 .typography p.error {
795 padding-left: 50px;
796 background-image: url(https://api.libreoffice.org/themes/libo/images/error.png);
797 background-position: 10px 5px;
798 background-repeat: no-repeat;
800 .typography ul.error {
801 background: url(https://api.libreoffice.org/themes/libo/images/error.png) no-repeat;
802 padding-left: 40px;
805 .typography p.excerpt:before {
806 content: '\201C';
807 color: #18A303;
808 font-size: 4em;
809 line-height: 0.1em;
810 margin-left: -25px;
811 margin-right: 8px;
812 position: relative;
813 top: .5em;
814 font-style: normal;
816 .typography p.excerpt:after {
817 content: '\201D ';
818 color: #18A303;
819 font-size: 4em;
820 line-height: 1px;
821 margin-left: 8px;
822 margin-bottom: 0;
823 position: relative;
824 top: .45em;
825 font-style: normal;
828 .typography div.box {
829 width: 150px;
830 margin: 10px;
831 display: block;
832 float: left;
833 box-shadow: 0 1px 2px #777;
834 -webkit-box-shadow: 0 1px 2px #777;
835 -moz-box-shadow: 0 1px 2px #777;
836 border-radius: 2px;
837 -moz-border-radius: 2px;
838 -webkit-border-radius: 2px;
839 text-align: center;
842 .typography div.box img {
843 height: 80px;
844 padding: 10px 10px 10px 10px;
847 .typography div.box p {
848 margin: 0;
849 padding: 10px;
850 background: #EEE;
851 text-align: left;
855 .sdkbody { background-color: #FFFFFF;
856 color: #000000;
857 margin-top: 0;
858 margin-bottom: 0;
859 margin-left: 0;
860 margin-right: 0;
861 font-family: Arial, Helvetica, sans-serif; }
863 .note { font-size: 20;
864 font-weight: bold;
865 font-style: italic;
866 text-align: center; }
868 .table1 { width: 100%;
869 border-style: none;
870 border-spacing: 0;
871 padding: 0; }
873 .table2 { width: 100%;
874 border-style: none;
875 border-spacing: 8;
876 padding: 5; }
878 .table3 { width: 100%;
879 border-style: none;
880 border-spacing: 6;
881 padding: 0; }
883 .table4 { width: 100%;
884 border-width: 2px;
885 border-style: groove;
886 border-color: #CCCCCC;
887 border-spacing: 0;
888 border-collapse: collapse; }
890 .cell15 { width: 15%;
891 border-width: 2px;
892 border-style: groove;
893 border-color: #CCCCCC;
894 border-spacing: 0;
895 border-collapse: collapse;
896 padding: 4;
897 color: #000000; }
899 .cell20 { width: 20%;
900 border-width: 2px;
901 border-style: groove;
902 border-color: #CCCCCC;
903 border-spacing: 0;
904 border-collapse: collapse;
905 padding: 4;
906 color: #000000; }
908 .cell80 { width: 80%;
909 border-width: 2px;
910 border-style: groove;
911 border-color: #CCCCCC;
912 border-spacing: 0;
913 border-collapse: collapse;
914 padding: 4;
915 color: #000000; }
917 .cell85 { width: 85%;
918 border-width: 2px;
919 border-style: groove;
920 border-color: #CCCCCC;
921 border-spacing: 0;
922 border-collapse: collapse;
923 padding: 4;
924 color: #000000;}
926 .nothing1 { width: 20;
927 height: 1; }
929 .nothing8 { width: 20;
930 height: 8; }
932 .nothing10 { width: 20;
933 height: 10; }
935 .nothing30 { width: 20;
936 height: 30; }
939 .appicon { width: 32;
940 height: 32;
941 border: 0; }
943 .line { width: 100%;
944 height: 5;
945 border: 0;
946 vertical-align: middle; }
949 .arrow { width: 16;
950 height: 13; }
952 .head1 { font-size: 20;
953 font-weight: bold; }
955 .head2 { font-size: 18;
956 font-weight: bold; }
958 .head3 { font-size: 17;
959 font-weight: bold; }
961 .head4 { font-size: 16;
962 font-weight: bold; }
964 .thead { font-weight: bold;
965 background-color:#18a303;
966 background-position: middle; }
968 .navigate { border: 0; }
970 .content1 { width: 1%; }
971 .content3 { width: 3%; }
972 .content4 { width: 4%; }
973 .content10 { width: 10%; }
974 .content20 { width: 20%; }
975 .content70 { width: 70%; }
976 .content75 { width: 75%; }
977 .content80 { width: 80%; }
978 .content87 { width: 87%; }
980 .centertext {align:center; text-align:center; font-size: 12;}