Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: static/dist/css/main.css

Issue 29624561: Issue 6104 - Minified code in help center repository (Closed) Base URL: https://hg.adblockplus.org/help.eyeo.com
Patch Set: Move all requires to top of gulpfile.js Created Dec. 4, 2017, 2:10 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 /*!
2 * This file is part of website-defaults
3 * Copyright (C) 2016-present eyeo GmbH
4 *
5 * website-defaults is free software: you can redistribute it and/or
6 * modify it under the terms of the GNU General Public License as published by
7 * the Free Software Foundation, either version 3 of the License, or
8 * (at your option) any later version.
9 *
10 * website-defaults is distributed in the hope that it will be useful,
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 * GNU General Public License for more details.
14 *
15 * You should have received a copy of the GNU General Public License
16 * along with website-defaults. If not, see <http://www.gnu.org/licenses/>.
17 */
18 /*******************************************************************************
19 * CSS Reset
20 ******************************************************************************/
21 /* Reset margins, paddings, and font globally */
22 html, body,
23 h1, h2, h3, h4, h5, h6,
24 a, p, span,
25 em, small, strong, sub, sup,
26 strike, s, mark, del, ins,
27 abbr, dfn,
28 blockquote, q, cite,
29 code, pre,
30 kbd, samp, var, output, ruby,
31 ol, ul, li, dl, dt, dd,
32 div, section, article,
33 main, aside, nav,
34 header, hgroup, footer,
35 img, figure, figcaption,
36 address, time,
37 audio, video,
38 canvas, object, iframe, embed,
39 details, summary,
40 fieldset, form, label, legend,
41 table, caption,
42 tbody, tfoot, thead,
43 tr, th, td {
44 margin: 0px;
45 padding: 0px;
46 border: 0px;
47 font-size: 100%;
48 font: inherit;
49 vertical-align: baseline; }
50
51 /* Add the correct display in IE 9-. */
52 article,
53 aside,
54 footer,
55 header,
56 nav,
57 section,
58 main {
59 display: block; }
60
61 /* Set default box-sizing (opinionated) */
62 *,
63 *:before,
64 *:after {
65 box-sizing: inherit; }
66
67 html {
68 box-sizing: border-box; }
69
70 /* Remove the margin in all browsers (opinionated). */
71 body {
72 margin: 0px; }
73
74 /* Remove list styles (opinionated) */
75 ol,
76 ul {
77 list-style: none; }
78
79 /* Remove quotes ("") in most browsers (opinionated) */
80 blockquote,
81 q {
82 quotes: none; }
83
84 /* Remove quotes ("") in Safari (opinionated) */
85 blockquote:before,
86 blockquote:after,
87 q:before,
88 q:after {
89 content: "";
90 content: none; }
91
92 /* Share borders between adjacent cells (opinionated) */
93 table {
94 border-collapse: collapse;
95 border-spacing: 0; }
96
97 /* Normalize inline content (opinionated) */
98 b,
99 strong {
100 font-weight: bolder; }
101
102 small {
103 font-size: smaller; }
104
105 abbr {
106 text-decoration: underline;
107 cursor: help; }
108
109 sup {
110 position: relative;
111 font-size: 75%;
112 vertical-align: super; }
113
114 a,
115 a:visited {
116 color: inherit;
117 /* Remove the gray background on active links in IE 10. */
118 background-color: transparent;
119 text-decoration: none;
120 /* Set default pointer regardless of href (opinionated) */
121 cursor: pointer; }
122
123 a:hover,
124 a:active,
125 a:focus {
126 text-decoration: underline; }
127
128 img {
129 /* Make fixed width images responsive */
130 max-width: 100%;
131 /* Remove the border on images inside links in IE 10-. */
132 border-style: none; }
133
134 /* Set correct display for hidden attribute in IE 10- */
135 [hidden] {
136 display: none; }
137
138 /*******************************************************************************
139 * Utilities
140 ******************************************************************************/
141 /* Responsive widths
142 ******************************************************************************/
143 /**
144 * Stretch content (e.g. images) full-width
145 */
146 .full-width {
147 display: block;
148 width: 100%; }
149
150 /**
151 * Center content within a (responsive) fixed width
152 */
153 .container {
154 width: 960px;
155 max-width: 100%;
156 margin-right: auto;
157 margin-left: auto;
158 padding-right: 1em;
159 padding-left: 1em; }
160
161 /* Device widths
162 ******************************************************************************/
163 .phone-width {
164 width: auto; }
165
166 .phablet-width {
167 width: 540px; }
168
169 .tablet-width {
170 width: 720px; }
171
172 .desktop-width {
173 width: 960px; }
174
175 .large-desktop-width {
176 width: 1140px; }
177
178 /* Text alignment
179 ******************************************************************************/
180 .text-center, .product-heading {
181 text-align: center; }
182
183 .text-left {
184 text-align: left; }
185
186 .text-right {
187 text-align: right; }
188
189 .text-start {
190 text-align: left; }
191
192 [dir="rtl"] .text-start {
193 text-align: right; }
194
195 .text-end {
196 text-align: right; }
197
198 [dir="rtl"] .text-end {
199 text-align: left; }
200
201 /* Floats
202 ******************************************************************************/
203 .float-start {
204 float: left; }
205
206 [dir="rtl"] .float-start {
207 float: right; }
208
209 .float-end {
210 float: right; }
211
212 [dir="rtl"] .float-end {
213 float: left; }
214
215 /* Clearfix
216 ******************************************************************************/
217 .clearfix:after, .content:after, .article-browser-selector:after,
218 .clearfix:before,
219 .content:before,
220 .article-browser-selector:before {
221 display: table;
222 content: " "; }
223
224 .clearfix:after, .content:after, .article-browser-selector:after {
225 clear: both; }
226
227 /* Screen reader only
228 ******************************************************************************/
229 .sr-only {
230 position: absolute;
231 overflow: hidden;
232 clip: rect(0, 0, 0, 0);
233 width: 1px;
234 height: 1px;
235 margin: -1px;
236 padding: 0;
237 border: 0; }
238
239 /* Unstyled elements
240 ******************************************************************************/
241 .unstyled,
242 .unstyled *,
243 .content .unstyled {
244 margin: 0;
245 padding: 0;
246 border: 0;
247 background: none; }
248
249 ul.unstyled {
250 list-style: none; }
251
252 /* Backgrounds
253 ******************************************************************************/
254 .bg-primary {
255 color: #fff;
256 background-color: #000; }
257
258 .bg-secondary {
259 color: #eee;
260 background-color: #424242; }
261
262 .bg-accent {
263 color: #e3f2fd;
264 background-color: #0d47a1; }
265
266 .bg-error {
267 color: #ffebee;
268 background-color: #b71c1c; }
269
270 /* Lead
271 ******************************************************************************/
272 .lead {
273 font-size: 1.25em; }
274
275 /*******************************************************************************
276 * Base styles
277 ******************************************************************************/
278 html {
279 color: #161616;
280 background-color: #fff;
281 font-family: "Source Sans Pro", sans-serif;
282 line-height: 1.5; }
283
284 /*******************************************************************************
285 * Content styles
286 *******************************************************************************
287 * 1. Document
288 * 2. Headings
289 * 3. Body content
290 ******************************************************************************/
291 .content {
292 /* Clearfixed
293 ****************************************************************************/
294 /* Document
295 ****************************************************************************/
296 /* Headings
297 ****************************************************************************/
298 /* Body content
299 ****************************************************************************/ }
300 .content p,
301 .content ol,
302 .content ul,
303 .content dl,
304 .content pre,
305 .content blockquote {
306 /* Set consistent margins (opinionated) */
307 margin: 1em 0em; }
308 .content h1,
309 .content h2,
310 .content h3,
311 .content h4,
312 .content h5,
313 .content h6 {
314 /* Margin on top **only** (opinionated) */
315 margin: 2em 0em 0.5em 0em;
316 /* All headings should be bold (opinionated) */
317 font-weight: 600; }
318 .content h1 {
319 font-size: 2em; }
320 .content h2 {
321 font-size: 1.5em; }
322 .content h3 {
323 font-size: 1.25em; }
324 .content h4 {
325 font-size: 1em; }
326 .content h5 {
327 font-size: 0.8em; }
328 .content h6 {
329 font-size: 0.7em; }
330 .content a,
331 .content a:visited {
332 color: #1565c0; }
333 .content hr {
334 border: 1px solid #eee; }
335 .content blockquote {
336 padding-left: 1em;
337 border-left: 5px solid #9e9e9e; }
338 .content [dir="rtl"] blockquote {
339 padding-right: 1em;
340 padding-left: 0em;
341 border-right: 5px solid #eee;
342 border-left: 0px; }
343 .content ol,
344 .content ul {
345 padding-left: 1.5em; }
346 .content [dir="rtl"] ol,
347 .content [dir="rtl"] ul {
348 padding-right: 2em;
349 padding-left: 0em; }
350 .content ol {
351 list-style: decimal; }
352 .content ul {
353 list-style: disc; }
354 .content li {
355 margin: 0.25em 0em; }
356 .content ol ol,
357 .content ul ul,
358 .content ol ul,
359 .content ul ol {
360 /* prevent double spacing lists */
361 margin: 0em; }
362 .content ol ol {
363 list-style-type: lower-alpha; }
364 .content dt {
365 /* undo browser default (opinionated)*/
366 font-weight: 600; }
367 .content dd {
368 margin: 0.25em 0em 1em 0em; }
369
370 /*******************************************************************************
371 * Grid component
372 ******************************************************************************/
373 /**
374 * - .row contains one or more .column(s)
375 * - .row clears .column(s)
376 * - .row negates the left & right padding of it's left-most & right-most
377 * .column(s) while preserving consistent padding between .column(s)
378 */
379 .row {
380 margin: 0px -1em; }
381
382 .row:after {
383 display: block;
384 clear: both;
385 content: ""; }
386
387 /**
388 * - .column is 100% width by default
389 * - Modifier classes are applied to .column to change it's width
390 * - Modifier classes behave differently on different device widths
391 */
392 .column {
393 position: relative;
394 width: 100%;
395 min-height: 1px;
396 padding: 0px 1em; }
397
398 /* - .column(s) within .row .reverse appear in reverse order
399 * - .column(s) within [dir=rtl] appear in reverse order respectively
400 */
401 .column,
402 [dir="rtl"] .reverse .column {
403 float: left; }
404
405 .reverse .column,
406 [dir="rtl"] .column {
407 float: right; }
408
409 @media (min-width: 768px) {
410 .one-half,
411 .one-fourth {
412 width: 50%; } }
413
414 @media (min-width: 992px) {
415 .one-third {
416 width: 33.333333%; }
417 .two-thirds {
418 width: 66.666667%; } }
419
420 @media (min-width: 992px) {
421 .one-fourth {
422 width: 25%; }
423 .three-fourths {
424 width: 75%; } }
425
426 /*******************************************************************************
427 * Basic forms fields
428 *******************************************************************************
429
430 /* 1. Reset
431 ******************************************************************************/
432 /* Change the font styles in all browsers (opinionated). */
433 input,
434 optgroup,
435 select,
436 textarea {
437 font: inherit; }
438
439 /* Show the overflow in IE and Edge */
440 input {
441 overflow: visible; }
442
443 /* Remove the inheritance of text transform in Edge, Firefox, and IE. */
444 select {
445 text-transform: none; }
446
447 /* Set block display (opinionated) */
448 fieldset {
449 display: block; }
450
451 /* Correct the text wrapping in Edge and IE. */
452 legend {
453 display: table;
454 max-width: 100%;
455 white-space: normal; }
456
457 /* Remove the default vertical scrollbar in IE. */
458 textarea {
459 overflow: auto; }
460
461 /* Remove the padding in IE 10-. */
462 [type="checkbox"],
463 [type="radio"] {
464 padding: 0px; }
465
466 /*******************************************************************************
467 * Adanced forms fields
468 *******************************************************************************
469
470 /* 1. Reset
471 ******************************************************************************/
472 /* Correct the cursor style of increment and decrement buttons in Chrome. */
473 [type="number"]::-webkit-inner-spin-button,
474 [type="number"]::-webkit-outer-spin-button {
475 height: auto; }
476
477 /* Use `-webkit-appearance: none` to reset inputs in iOS Safari */
478 [type="date"],
479 [type="time"],
480 [type="datetime"],
481 [type="datetime-local"],
482 [type="month"],
483 [type="week"],
484 [type="search"],
485 [type="search"]::-webkit-search-cancel-button,
486 [type="search"]::-webkit-search-decoration {
487 -webkit-appearance: none; }
488
489 [type="search"] {
490 outline-offset: -2px; }
491
492 /*******************************************************************************
493 * Buttons
494 *******************************************************************************
495
496 /* 1. Reset
497 ******************************************************************************/
498 button {
499 margin: 0px;
500 font: inherit;
501 /* Show the overflow in IE and Edge */
502 overflow: visible;
503 /* Remove rounded corners in Chrome 62+ */
504 border-radius: 0;
505 /* Remove the inheritance of text transform in Edge, Firefox, and IE. */
506 text-transform: none; }
507
508 /**
509 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
510 * controls in Android 4.
511 * 2. Correct the inability to style clickable types in iOS and Safari.
512 */
513 button,
514 html [type="button"],
515 [type="reset"],
516 [type="submit"] {
517 -webkit-appearance: button; }
518
519 /* Remove the inner border and padding in Firefox. */
520 button::-moz-focus-inner,
521 [type="button"]::-moz-focus-inner,
522 [type="reset"]::-moz-focus-inner,
523 [type="submit"]::-moz-focus-inner {
524 padding: 0px;
525 border-style: none; }
526
527 /* Restore the focus styles unset by the previous rule. */
528 button:-moz-focusring,
529 [type="button"]:-moz-focusring,
530 [type="reset"]:-moz-focusring,
531 [type="submit"]:-moz-focusring {
532 outline: 1px dotted ButtonText; }
533
534 /*!
535 * This file is part of help.eyeo.com.
536 * Copyright (C) 2017-present eyeo GmbH
537 *
538 * help.eyeo.com is free software: you can redistribute it and/or modify
539 * it under the terms of the GNU General Public License as published by
540 * the Free Software Foundation, either version 3 of the License, or
541 * (at your option) any later version.
542 *
543 * help.eyeo.com is distributed in the hope that it will be useful,
544 * but WITHOUT ANY WARRANTY; without even the implied warranty of
545 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
546 * GNU General Public License for more details.
547 *
548 * You should have received a copy of the GNU General Public License
549 * along with help.eyeo.com. If not, see <http://www.gnu.org/licenses/>.
550 */
551 @font-face {
552 font-family: "Source Sans Pro";
553 font-weight: 400;
554 font-style: normal;
555 src: url("../fonts/Source-Sans-Pro-400/Source-Sans-Pro-400.eot");
556 src: url("../fonts/Source-Sans-Pro-400/Source-Sans-Pro-400.eot?#iefix") format ("embedded-opentype"), local("Source Sans Pro"), local("Source-Sans-Pro-400"), u rl("../fonts/Source-Sans-Pro-400/Source-Sans-Pro-400.woff2") format("woff2"), ur l("../fonts/Source-Sans-Pro-400/Source-Sans-Pro-400.woff") format("woff"), url(" ../fonts/Source-Sans-Pro-400/Source-Sans-Pro-400.ttf") format("truetype"), url(" ../fonts/Source-Sans-Pro-400/Source-Sans-Pro-400.svg#SourceSansPro") format("svg "); }
557
558 @font-face {
559 font-family: "Source Sans Pro";
560 font-weight: 600;
561 font-style: normal;
562 src: url("../fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.eot");
563 src: url("../fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.eot?#iefix") format ("embedded-opentype"), local("Source Sans Pro Semibold"), local("Source-Sans-Pro -600"), url("../fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.woff2") format("wo ff2"), url("../fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.woff") format("woff "), url("../fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.ttf") format("truetype "); }
564
565 /*******************************************************************************
566 * Utilities
567 ******************************************************************************/
568 /* Responsive
569 ******************************************************************************/
570 @media (min-width: 576px) {
571 .mobile-only {
572 display: none; } }
573
574 @media (min-width: 768px) {
575 .phablet-and-mobile-only {
576 display: none; } }
577
578 @media (max-width: 767px) {
579 .tablet-and-desktop-only {
580 display: none; } }
581
582 @media (max-width: 991px) {
583 .desktop-only {
584 display: none; } }
585
586 /* Font colours
587 ******************************************************************************/
588 .muted {
589 color: #AEAEAE; }
590
591 a.muted,
592 .muted a {
593 color: #AEAEAE !important;
594 text-decoration: underline; }
595
596 /* Underlined
597 ******************************************************************************/
598 .underlined {
599 border-bottom: 1px dotted #C4C4C4; }
600
601 /*******************************************************************************
602 * Typography
603 ******************************************************************************/
604 .h1, .product-heading {
605 font-size: 1.6em;
606 line-height: 1.2; }
607 @media (min-width: 576px) {
608 .h1, .product-heading {
609 font-size: 2em; } }
610 @media (min-width: 768px) {
611 .h1, .product-heading {
612 font-size: 2.8em; } }
613
614 .h2, .article-heading {
615 font-size: 1.6em; }
616 @media (min-width: 576px) {
617 .h2, .article-heading {
618 font-size: 2em; } }
619
620 .h4, .card-heading {
621 font-size: 1em;
622 font-weight: 600;
623 text-transform: uppercase; }
624
625 a {
626 color: #0D79C7; }
627
628 .product-heading .has-pre-icon {
629 display: inline-block; }
630
631 /*******************************************************************************
632 * Navbar
633 ******************************************************************************/
634 .navbar {
635 padding-top: 15px;
636 padding-bottom: 15px;
637 color: #fff;
638 background-color: #161616; }
639
640 .navbar a {
641 color: #fff; }
642
643 /* Navbar Collapse
644 ******************************************************************************/
645 .navbar-collapse {
646 display: none;
647 clear: both; }
648 .navbar-collapse.open {
649 display: block; }
650 @media (min-width: 768px) {
651 .navbar-collapse {
652 display: block;
653 clear: none;
654 width: auto; } }
655
656 .no-js .navbar-collapse {
657 display: block; }
658
659 /*******************************************************************************
660 * Site Header
661 ******************************************************************************/
662 #site-header {
663 min-height: 70px;
664 font-size: 0.9em;
665 line-height: 40px; }
666
667 #site-title {
668 float: left;
669 margin-right: 60px; }
670
671 html[dir="rtl"] #site-title {
672 float: right;
673 margin-right: 0;
674 margin-left: 60px; }
675
676 #site-title img {
677 height: 30px;
678 vertical-align: middle; }
679
680 .toggle-navbar-collapse {
681 width: 40px;
682 float: right;
683 line-height: 40px;
684 text-align: right;
685 cursor: pointer; }
686 .toggle-navbar-collapse img {
687 width: 15px;
688 vertical-align: middle; }
689
690 html[dir="rtl"] .toggle-navbar-collapse {
691 float: left; }
692
693 .no-js .toggle-navbar-collapse {
694 display: none; }
695
696 /* Minimal header for non-product pages
697 ******************************************************************************/
698 @media (min-width: 768px) {
699 .site-header-minimal .navbar-collapse {
700 text-align: right; }
701 [dir="rtl"] .site-header-minimal .navbar-collapse {
702 text-align: left; } }
703
704 /*******************************************************************************
705 * Site Footer
706 ******************************************************************************/
707 #site-footer {
708 font-size: 0.9em; }
709
710 @media (min-width: 576px) {
711 #site-footer .column {
712 width: 50%; } }
713
714 #site-footer-locales {
715 margin-bottom: 10px; }
716 @media (min-width: 576px) {
717 #site-footer-locales {
718 margin-bottom: 0; } }
719
720 @media (min-width: 576px) {
721 #site-footer-nav {
722 text-align: right; } }
723
724 @media (min-width: 576px) {
725 [dir="rtl"] #site-footer-nav {
726 text-align: left; } }
727
728 @media (min-width: 768px) {
729 #site-footer-nav nav {
730 display: inline; } }
731
732 #site-footer-nav nav li {
733 margin-right: 10px;
734 padding-right: 10px;
735 border-right: 1px solid #C4C4C4; }
736 #site-footer-nav nav li:last-child {
737 margin-right: 0px;
738 padding-right: 0px;
739 border-right: 0px; }
740 @media (min-width: 768px) {
741 #site-footer-nav nav li:last-child {
742 margin-right: 10px;
743 padding-right: 10px;
744 border-right: 1px solid #C4C4C4; } }
745
746 #site-footer-nav a {
747 white-space: nowrap; }
748
749 /*******************************************************************************
750 * Body
751 ******************************************************************************/
752 .outer {
753 background-image: url(/dist/img/png/help-bg.png);
754 background-repeat: no-repeat; }
755
756 #main {
757 padding-top: 30px;
758 padding-bottom: 60px; }
759 @media (min-width: 576px) {
760 #main {
761 padding-top: 60px; } }
762
763 .tablet-width {
764 width: 720px; }
765
766 .section, .product-heading {
767 margin-bottom: 30px; }
768 @media (min-width: 576px) {
769 .section, .product-heading {
770 margin-bottom: 60px; } }
771
772 .section-accent {
773 padding-top: 60px;
774 padding-bottom: 60px;
775 background-image: url("/dist/img/png/accent-bg.png");
776 background-size: 100%;
777 background-repeat: no-repeat;
778 background-position: center 0; }
779
780 /*******************************************************************************
781 * Search Form
782 ******************************************************************************/
783 /* Product Website Link
784 ******************************************************************************/
785 #product-website-link {
786 float: right; }
787
788 html[dir="rtl"] #product-website-link {
789 float: left; }
790
791 #product-website-link img {
792 height: 1em;
793 margin-left: 0.5em; }
794
795 html[dir="rtl"] #product-website-link img {
796 margin-right: 0.5em;
797 margin-left: 0; }
798
799 .navbar-collapse.open #product-website-link,
800 .no-js #product-website-link {
801 float: none; }
802 @media (min-width: 576px) {
803 .navbar-collapse.open #product-website-link,
804 .no-js #product-website-link {
805 float: right;
806 margin-top: 20px; } }
807 @media (min-width: 768px) {
808 .navbar-collapse.open #product-website-link,
809 .no-js #product-website-link {
810 margin-top: 0; } }
811
812 /* Search Form
813 ******************************************************************************/
814 #search-form {
815 display: inline-block;
816 position: relative;
817 overflow: hidden;
818 width: 100%;
819 height: 35px;
820 border-radius: 4px;
821 color: #C4C4C4;
822 background: #fff;
823 line-height: 1;
824 vertical-align: middle; }
825 @media (min-width: 576px) {
826 #search-form {
827 max-width: 320px; } }
828
829 .navbar-collapse.open #search-form,
830 .no-js #search-form {
831 margin-top: 20px; }
832 @media (min-width: 768px) {
833 .navbar-collapse.open #search-form,
834 .no-js #search-form {
835 margin-top: 0; } }
836
837 #search-form input {
838 width: 100%;
839 height: 35px;
840 padding-right: 40px;
841 padding-left: 10px;
842 border: 0;
843 font-family: "Source Sans Pro", sans-serif;
844 font-size: 0.9em; }
845
846 html[dir="rtl"] #search-form input {
847 padding-right: 10px;
848 padding-left: 40px; }
849
850 #search-form button {
851 position: absolute;
852 top: 0;
853 right: 0;
854 width: 35px;
855 height: 100%;
856 border: 0;
857 background-color: transparent;
858 font-size: 1em; }
859
860 html[dir="rtl"] #search-form button {
861 right: auto;
862 left: 0; }
863
864 #search-form button img {
865 height: 1em; }
866
867 /*******************************************************************************
868 * Cards
869 ******************************************************************************/
870 .card {
871 padding: 15px;
872 border: 1px solid #C4C4C4;
873 border-top-width: 7px;
874 border-radius: 5px;
875 box-shadow: 0 0 8px 0 rgba(27, 48, 63, 0.2);
876 background-color: #fff; }
877
878 .abp-card {
879 border-top-color: #C70D2B; }
880
881 .card-heading {
882 margin-bottom: 15px; }
883
884 /*******************************************************************************
885 * Select
886 ******************************************************************************/
887 /* Custom Select
888 ******************************************************************************/
889 .custom-select {
890 position: relative; }
891
892 .custom-select-selected {
893 display: none;
894 padding: 0.2em 0.7em;
895 border: 2px solid #AEAEAE;
896 border-radius: 4px;
897 color: #fff;
898 background: transparent;
899 font-family: inherit;
900 font-size: inherit;
901 cursor: pointer; }
902
903 .js .custom-select-selected {
904 display: inline-block; }
905
906 .custom-select-options {
907 position: absolute;
908 bottom: 100%;
909 left: 0px;
910 margin-bottom: 0.5em;
911 border: 1px solid #AEAEAE;
912 border-radius: 4px;
913 box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
914 color: #161616;
915 background: #fff;
916 list-style: none;
917 z-index: 2; }
918 .custom-select-options a {
919 color: #161616; }
920
921 .custom-select-options[aria-hidden="true"] {
922 display: none; }
923
924 [dir="rtl"] .custom-select-options {
925 right: 0px;
926 left: auto;
927 padding: 0.7em; }
928
929 .no-js .custom-select-options {
930 position: relative;
931 display: inline-block;
932 top: 0px;
933 padding: 0px;
934 border: 0px;
935 color: inherit;
936 opacity: 1;
937 background: none; }
938 .no-js .custom-select-options li {
939 display: inline; }
940 .no-js .custom-select-options li:after {
941 content: ","; }
942 .no-js .custom-select-options li:last-child:after {
943 content: none; }
944 .no-js .custom-select-options a {
945 color: inherit; }
946
947 .custom-select-option {
948 padding: 0.7em; }
949
950 /* Custom Dropdown (extends the custom select element)
951 ******************************************************************************/
952 .custom-select-dropdown .custom-select-selected,
953 .custom-select-dropdown .custom-select-options {
954 width: 100%; }
955
956 .custom-select-dropdown .custom-select-selected {
957 position: relative;
958 height: 2.5em;
959 padding-right: 3.5em;
960 padding-left: 0.7em;
961 color: #161616;
962 text-align: left; }
963
964 [dir="rtl"] .custom-select-dropdown .custom-select-selected {
965 padding-right: 0.7em;
966 padding-left: 3.5em;
967 text-align: right; }
968
969 .custom-select-dropdown .custom-select-selected:after {
970 position: absolute;
971 top: 0;
972 right: 0;
973 width: 3em;
974 height: 100%;
975 border-left: 2px solid #AEAEAE;
976 background-image: url(/dist/img/png/arrow-icon-down-secondary.png);
977 background-image: linear-gradient(transparent, transparent), url(/dist/img/svg /arrow-icon-down-secondary.svg);
978 background-repeat: no-repeat;
979 background-position: center;
980 background-size: 0.7em;
981 content: ""; }
982
983 [dir="rtl"] .custom-select-dropdown .custom-select-selected:after {
984 right: auto;
985 left: 0;
986 border-right: 2px solid #AEAEAE;
987 border-left: 0; }
988
989 .custom-select-dropdown .custom-select-options {
990 top: 100%;
991 bottom: auto; }
992
993 /*******************************************************************************
994 * Browser Select
995 ******************************************************************************/
996 #browser-select-label {
997 margin-right: 1em;
998 text-transform: uppercase; }
999
1000 [dir="rtl"] #browser-select-label {
1001 margin-right: auto;
1002 margin-left: 1em; }
1003
1004 #browser-select {
1005 display: inline-block;
1006 width: 100%;
1007 max-width: 300px; }
1008
1009 #browser-select li {
1010 cursor: pointer; }
1011
1012 #browser-select .pre-icon {
1013 opacity: 0.5;
1014 /* IE 6-9 */
1015 filter: gray;
1016 filter: grayscale(100%); }
1017
1018 #browser-select .custom-select-selected .pre-icon,
1019 #browser-select .custom-select-option:hover .pre-icon,
1020 #browser-select .custom-select-option:focus .pre-icon {
1021 opacity: 1;
1022 filter: none; }
1023
1024 /*******************************************************************************
1025 * Lists
1026 ******************************************************************************/
1027 /* Underlined List
1028 ******************************************************************************/
1029 .underlined-list {
1030 list-style: none; }
1031
1032 .underlined-list li a {
1033 display: block;
1034 padding-top: 10px;
1035 padding-bottom: 10px;
1036 border-bottom: 1px dotted #C4C4C4;
1037 color: #1565c0; }
1038
1039 .underlined-list li:last-child a {
1040 border-bottom: none; }
1041
1042 /* For underlined lists that split into two columns, remove the
1043 * border-bottom from the 2nd-to-last item on larger screens
1044 * (when expanded to two columns)
1045 */
1046 @media (min-width: 768px) {
1047 .underlined-list .one-half:nth-last-child(2) a {
1048 border-bottom: none; } }
1049
1050 /* For underlined lists that split into two columns, add a border-top
1051 * to the first 2 children on larger screens, and only the first
1052 * child on smaller screens (when collapsed to one column)
1053 */
1054 .underlined-list .one-half:nth-child(1) a {
1055 border-top: 1px dotted #C4C4C4; }
1056
1057 @media (min-width: 768px) {
1058 .underlined-list .one-half:nth-child(2) a {
1059 border-top: 1px dotted #C4C4C4; } }
1060
1061 /* Horizontal List
1062 ******************************************************************************/
1063 .horizontal-list {
1064 display: inline;
1065 list-style: none; }
1066
1067 .horizontal-list li {
1068 display: inline;
1069 list-style: none; }
1070
1071 [dir="rtl"] .horizontal-list {
1072 padding: 0; }
1073
1074 /*******************************************************************************
1075 * Contact Section
1076 ******************************************************************************/
1077 #contact .h4, #contact .card-heading {
1078 margin-bottom: 15px; }
1079
1080 #contact .horizontal-list {
1081 margin-right: -10px;
1082 margin-left: -10px; }
1083
1084 #contact .horizontal-list li {
1085 display: inline-block;
1086 margin-right: 10px;
1087 margin-left: 10px;
1088 font-weight: 600;
1089 text-transform: uppercase; }
1090
1091 #contact .underlined {
1092 margin-bottom: 15px;
1093 padding-bottom: 15px; }
1094 @media (min-width: 576px) {
1095 #contact .underlined {
1096 margin-bottom: 30px;
1097 padding-bottom: 30px; } }
1098
1099 #contact header.underlined {
1100 margin-bottom: 15px; }
1101
1102 /*******************************************************************************
1103 * Accordion
1104 ******************************************************************************/
1105 .accordion {
1106 overflow: hidden;
1107 border: 1px solid #C4C4C4;
1108 border-radius: 5px; }
1109
1110 .accordion-toggle-button {
1111 display: block;
1112 width: 100%;
1113 padding: 10px;
1114 border: 0;
1115 border-bottom: 1px solid #C4C4C4;
1116 outline: none;
1117 background-color: #ECECEC;
1118 font: inherit;
1119 font-weight: 600;
1120 text-align: left;
1121 cursor: pointer; }
1122
1123 [dir="rtl"] .accordion-toggle-button {
1124 text-align: right; }
1125
1126 .accordion-toggle-button:hover,
1127 .accordion-toggle-button:focus {
1128 background-color: #C4C4C4; }
1129
1130 .accordion-heading:last-of-type .accordion-toggle-button[aria-expanded="false"] {
1131 border-bottom: 0; }
1132
1133 .accordion-toggle-button img {
1134 height: 0.6em;
1135 margin-right: 0.6em; }
1136
1137 [dir="rtl"] .accordion-toggle-button img {
1138 margin-right: 0;
1139 margin-left: 0.6em;
1140 transform: rotate(180deg); }
1141
1142 .accordion-toggle-button[aria-expanded="false"] img {
1143 transform: rotate(90deg); }
1144
1145 .accordion-body {
1146 padding: 10px;
1147 border-bottom: 1px solid #C4C4C4;
1148 background-color: #fff; }
1149
1150 .accordion-body:last-of-type {
1151 border-bottom: 0; }
1152
1153 /*******************************************************************************
1154 * Article
1155 ******************************************************************************/
1156 .article.card {
1157 padding: 15px; }
1158 @media (min-width: 576px) {
1159 .article.card {
1160 padding: 30px; } }
1161
1162 .article-heading,
1163 .article-browser-selector {
1164 padding-bottom: 15px;
1165 margin-bottom: 15px;
1166 border-bottom: 1px dotted #C4C4C4; }
1167
1168 @media (max-width: 575px) {
1169 .article-heading .has-pre-icon {
1170 padding: 0; } }
1171
1172 .article-heading .pre-icon {
1173 display: none; }
1174 @media (min-width: 576px) {
1175 .article-heading .pre-icon {
1176 display: block;
1177 top: 0.25em;
1178 margin-top: 0; } }
1179
1180 .article-browser-selector {
1181 display: none; }
1182
1183 .js .article-browser-selector {
1184 display: block; }
1185
1186 .article-body :last-child {
1187 margin-bottom: 0; }
1188
1189 /* Hide/Show content for browser
1190 ******************************************************************************/
1191 .js [class^="platform-"] {
1192 display: none; }
1193
1194 .js .ua-chrome .platform-chrome {
1195 display: block; }
1196
1197 .js .ua-opera .platform-opera {
1198 display: block; }
1199
1200 .js .ua-samsungBrowser .platform-samsungBrowser {
1201 display: block; }
1202
1203 .js .ua-yandexbrowser .platform-yandexbrowser {
1204 display: block; }
1205
1206 .js .ua-maxthon .platform-maxthon {
1207 display: block; }
1208
1209 .js .ua-msie .platform-msie {
1210 display: block; }
1211
1212 .js .ua-msedge .platform-msedge {
1213 display: block; }
1214
1215 .js .ua-firefox .platform-firefox {
1216 display: block; }
1217
1218 .js .ua-ios .platform-ios {
1219 display: block; }
1220
1221 .js .ua-safari .platform-safari {
1222 display: block; }
1223
1224 /*******************************************************************************
1225 * Breadcrumb
1226 ******************************************************************************/
1227 .breadcrumb {
1228 padding-top: 0.75em;
1229 padding-bottom: 0.75em;
1230 border-bottom: 1px solid #ECECEC;
1231 background-color: #fff; }
1232
1233 .breadcrumb li {
1234 float: left;
1235 position: relative;
1236 padding: 0.25em 2em 0.25em 0;
1237 font-size: 0.9em;
1238 font-weight: 600;
1239 text-transform: uppercase; }
1240
1241 [dir="rtl"] .breadcrumb li {
1242 float: right;
1243 padding: 0.25em 0 0.25em 2em; }
1244
1245 .breadcrumb li:after {
1246 position: absolute;
1247 top: 0.45em;
1248 /* Half height of li:after (1em / 2) minus 0.05em */
1249 right: 0.5em;
1250 /* Quarter space between li (2em / 4) */
1251 width: 1em;
1252 height: 1em;
1253 background-image: url(/dist/img/png/arrow-icon-right-gray.png);
1254 background-repeat: no-repeat;
1255 background-position: center;
1256 background-size: 0.6em 0.9em;
1257 content: ""; }
1258
1259 [dir="rtl"] .breadcrumb li:after {
1260 right: auto;
1261 left: 7.5px;
1262 background-image: url(/dist/img/png/arrow-icon-left-gray.png); }
1263
1264 .breadcrumb li:last-child:after {
1265 content: none; }
1266
1267 .breadcrumb li a {
1268 color: #757575; }
1269
1270 .breadcrumb .pre-icon {
1271 margin-top: -0.5em;
1272 background-size: 1.1em; }
1273
1274 /*******************************************************************************
1275 * Pre Icon
1276 ******************************************************************************/
1277 .has-pre-icon {
1278 position: relative;
1279 padding-left: 1.3em; }
1280
1281 [dir="rtl"] .has-pre-icon {
1282 padding-right: 1.3em;
1283 padding-left: auto; }
1284
1285 .pre-icon {
1286 display: inline-block;
1287 position: absolute;
1288 top: 50%;
1289 left: 0;
1290 width: 1em;
1291 height: 1em;
1292 margin-top: -0.55em;
1293 background-repeat: no-repeat;
1294 background-position: center;
1295 background-size: 0.9em; }
1296
1297 [dir="rtl"] .pre-icon {
1298 right: 0;
1299 left: auto; }
1300
1301 /*# sourceMappingURL=main.css.map */
OLDNEW
« gulpfile.js ('K') | « static/.DS_Store ('k') | static/dist/css/main.css.map » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld