OLD | NEW |
(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 */ |
OLD | NEW |