media/css/main.css

   1 /**
   2 * -----------------------------------------
   3 * REFERENCE COLORS:
   4 * (in order from lightest to darkest)
   5 *
   6 * #e7eae8: Extremely light gray, used for alternating color boxes such as on mailinglists.html
   7 * #d7dad8: Medium gray, used in Dropotron
   8 * #666: Dark gray, official PostgreSQL gray color and equivalent to RGB(102,102,102)
   9 * #688297: Grayish blue, used in Dropotron
  10 * #336791: Medium blue, official PostgreSQL blue color
  11 * #264d6d: Dark blue
  12 *
  13 * -----------------------------------------
  14 * All padding: 0 0 0 0; and margin: 0 0 0 0; definitions are top, right, bottom, left specifications, respectively.
  15 */
  16
  17 /** CUSTOM FONTS */
  18 @import url('https://fonts.googleapis.com/css?family=Open+Sans');
  19
  20 /** GLOBAL CONFIGURATION */
  21 body {
  22   font-family: 'Open Sans', sans-serif;
  23   font-weight: 400;
  24   color: #0D0A0B;
  25   font-size: 11.5pt;
  26 }
  27
  28 p {
  29   margin-bottom: 0.5rem;
  30 }
  31
  32 dl, ol, ul {
  33   margin-bottom: 0.5rem;
  34 }
  35
  36 .table td, .table th {
  37   padding: 0.5rem;
  38 }
  39
  40 h1, h2, h3, h4, h5, h6 {
  41   font-family: 'Open Sans', sans-serif;
  42   font-weight: 700;
  43   color: #336791;
  44   /*margin: 0 0 0.5em 0;*/
  45 }
  46
  47 h2 {
  48   font-size: 1.6em;
  49   margin: 1em 0;
  50 }
  51
  52 h3 {
  53   font-size: 1.4em;
  54   font-weight: initial;
  55 }
  56
  57 .h4, h4 {
  58   font-size: 1.1rem;
  59   text-transform: capitalize !important;
  60 }
  61
  62 .h5, h5 {
  63   font-size: 0.98rem;
  64 }
  65
  66 #pgContentWrap h2:after, #pgSideNav h2:after {
  67   background-color: #e7eae8;
  68   content: '\a0';
  69   flex-grow: 1;
  70   height: 2px;
  71   position: relative;
  72   margin: .5em 0 .5em .75em;
  73 }
  74
  75 #pgContentWrap h2, #pgSideNav h2 {
  76   display: flex;
  77   flex-direction: row;
  78 }
  79
  80 h2.centered-lines {
  81   display: flex;
  82   flex-direction: row;
  83   justify-content: center;
  84   text-align: center;
  85 }
  86
  87 h2.centered-lines:after, h2.centered-lines:before {
  88   background-color: #e7eae8;
  89   content: '\a0';
  90   flex-grow: 1;
  91   height: 2px;
  92   position: relative;
  93   margin: 0.5em 0;
  94 }
  95
  96 h2.centered-lines:after {
  97   margin-left: 0.75em;
  98 }
  99
 100 h2.centered-lines:before {
 101   margin-right: 0.75em;
 102 }
 103
 104 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 105   text-decoration: none;
 106   color: inherit;
 107 }
 108
 109 a, .news a {
 110   color: #336791;
 111   font-weight: 600;
 112   text-decoration: none;
 113   -moz-transition: color .2s ease-in-out;
 114   -webkit-transition: color .2s ease-in-out;
 115   -ms-transition: color .2s ease-in-out;
 116   transition: color .2s ease-in-out;
 117 }
 118
 119 a:hover, a:active {
 120   color: #193145;
 121   text-decoration: none;
 122 }
 123
 124 b, strong, th {
 125   font-weight: 700;
 126   color: #474747 !important;
 127 }
 128
 129 i, em {
 130   font-style: italic;
 131 }
 132
 133 sub {
 134   position: relative;
 135   top: 0.5em;
 136   font-size: 0.8em;
 137 }
 138
 139 sup {
 140   position: relative;
 141   top: -0.5em;
 142   font-size: 0.8em;
 143 }
 144
 145 hr {
 146   border: 0;
 147   border-top: solid 2px #E7EAE8;
 148   margin: 0 0 3em 0;
 149 }
 150
 151 .image {
 152   width: 100%;
 153   margin: 1em 0 2em 0;
 154 }
 155
 156 /**
 157 p, ul, ol, dl, table {
 158   margin-bottom: 3em;
 159 }*/
 160
 161 /** Global styles */
 162
 163 .pg-bg-blue {
 164   background-color: #336791;
 165 }
 166
 167 .pg-bg-light-blue {
 168   background-color: #008bb9;
 169 }
 170
 171 .pg-bg-purple {
 172   background-color: #e6E6fa;
 173 }
 174
 175 .pg-bg-gray {
 176   background-color: #e7eae8;
 177 }
 178
 179 .pg-border-color-blue {
 180   border-color: #336791;
 181 }
 182
 183 .pg-text-blue {
 184   color: #336791;
 185 }
 186
 187 .pg-text-light-blue {
 188   color: #008bb9;
 189 }
 190
 191 .pgFrontFeature {
 192   background: #F5F5F5 url(/media/img/feature/feature_elephant.png) right bottom no-repeat;
 193   /* background: #F5F5F5 url(/media/img/feature/feature_gears.png) right bottom no-repeat; */
 194 }
 195
 196 .pgFrontContainer {
 197   padding: 1em 2em;
 198 }
 199
 200 /* #BLOCKQUOTE */
 201
 202 blockquote {
 203   border-left: solid 5px #E7EAE8;
 204   padding: 0em 4em 0em .5em;
 205   margin: 1em 0em 1em 0em;
 206   font-style: italic;
 207 }
 208
 209 .item blockquote {
 210   border-left: none;
 211   margin: 0;
 212 }
 213
 214 .item blockquote img {
 215   margin-bottom: 10px;
 216 }
 217
 218 .item blockquote p:before {
 219   content: "\f10d";
 220   font-family: 'Fontawesome';
 221   float: left;
 222   margin-right: 10px;
 223 }
 224
 225 /* # CAROUSEL */
 226
 227 .col-center {
 228   margin: 0 auto;
 229   float: none !important;
 230 }
 231 .carousel {
 232   margin: 0 auto 4rem auto;
 233   padding: 0 3rem;
 234 }
 235 .carousel .item {
 236   text-align: center;
 237   overflow: hidden;
 238   min-height: 12rem;
 239 }
 240 .carousel .item .img-box {
 241   width: 135px;
 242   height: 135px;
 243   margin: 0 auto;
 244   padding: 5px;
 245   border: 1px solid #ddd;
 246   border-radius: 50%;
 247 }
 248 .carousel .img-box img {
 249   width: 100%;
 250   height: 100%;
 251   display: block;
 252   border-radius: 50%;
 253 }
 254 .carousel .testimonial {
 255   margin-top: 4rem;
 256   padding: 0 1rem;
 257 }
 258 .carousel .overview {
 259   font-style: italic;
 260   color: #999;
 261 }
 262 .carousel .overview b {
 263   text-transform: uppercase;
 264   color: #336791;
 265 }
 266 .carousel .carousel-control {
 267   width: 40px;
 268   height: 40px;
 269   margin-top: -20px;
 270   top: 50%;
 271   background: none;
 272 }
 273 .carousel-control i {
 274   font-size: 68px;
 275   line-height: 42px;
 276   position: absolute;
 277   display: inline-block;
 278   color: rgba(0, 0, 0, 0.8);
 279   text-shadow: 0 3px 3px #e6e6e6, 0 0 0 #000;
 280 }
 281 .carousel .carousel-indicators {
 282   bottom: -40px;
 283 }
 284 .carousel-indicators li, .carousel-indicators li.active {
 285   width: 10px;
 286   height: 10px;
 287   margin: 1px 3px;
 288   border-radius: 50%;
 289 }
 290 .carousel-indicators li {
 291   background: #999;
 292   border-color: transparent;
 293   box-shadow: inset 0 2px 1px rgba(0,0,0,0.2);
 294 }
 295 .carousel-indicators li.active {
 296   background: #555;
 297   box-shadow: inset 0 2px 1px rgba(0,0,0,0.2);
 298 }
 299
 300 /* #FEATURED SECTIONS */
 301
 302 .community {
 303   width: 1em !important;
 304   margin: 0 5px 0 0 !important;
 305   display: inline-block;
 306 }
 307
 308 .feature {
 309   text-align: center;
 310   padding: 2em;
 311 }
 312
 313 .feature ul, ul.feature {
 314   padding: 0;
 315 }
 316
 317 .feature li {
 318   list-style-type: none;
 319   padding-left: 0.3em;
 320   text-align: left;
 321 }
 322
 323 .feature i {
 324   font-size: 2.5em;
 325   margin: 20px 0;
 326   color: #336791;
 327 }
 328
 329 .feature img {
 330   width: 2.5em;
 331   margin: 20px 0;
 332 }
 333
 334 .feature p {
 335   text-align: left;
 336 }
 337
 338 .feature-grid {
 339   background-color: #336791;
 340   text-align: center;
 341   padding: 3em 0;
 342   border: solid 1px #fff;
 343 }
 344
 345 .feature-grid h3 {
 346   color: #fff;
 347 }
 348
 349 .feature button.btn.btn-center.btn-primary {
 350   position: relative;
 351   bottom: 0;
 352   margin: 0.25rem auto;
 353 }
 354
 355 .text {
 356   margin-bottom: 2.5em;
 357 }
 358
 359 li.non-badged {
 360   padding-left: 2em;
 361 }
 362
 363 /* #LIST */
 364
 365 #footer ul {
 366   cursor: default;
 367   padding: 0;
 368 }
 369
 370 a.icon {
 371   text-decoration: none !important;
 372 }
 373
 374 footer img {
 375   height: 2rem;
 376   margin-bottom: 1rem;
 377 }
 378
 379 #footer ul li {
 380   list-style-type: none;
 381   display: inline-block;
 382   margin: 0 .2em;
 383   font-size: 2em;
 384 }
 385
 386 #footer li:hover a.fa-twitter {
 387   color: #2DAAE4;
 388 }
 389
 390 #footer a.fa-twitter {
 391   color: #000;
 392 }
 393
 394 #footer li:hover a.fa-github {
 395   color: #000;
 396 }
 397
 398 #footer li:hover a.fa-google-plus-g {
 399   color: #DA2713;
 400 }
 401
 402 ul.errorlist {
 403   color: #bd4147;
 404   font-weight: 600;
 405   list-style-type: none;
 406   padding: 0;
 407 }
 408
 409 ul.meta {
 410   font-size: 0.85em;
 411   padding-left: 0;
 412 }
 413
 414 ul.meta li {
 415   display: inline-block;
 416   margin-right: 1em;
 417 }
 418
 419 ul.meta li i {
 420   margin-right: 4px;
 421 }
 422
 423 ul.divided > li {
 424   border-top: solid 2px #e7eae8;
 425   padding-top: 1.35em;
 426   margin-top: 1.35em;
 427   list-style: none;
 428 }
 429
 430 ul.divided > li:first-child {
 431   border-top: 0;
 432   padding-top: 0;
 433   margin-top: 0;
 434 }
 435
 436 .divided h3 {
 437   font-size: 1.2em;
 438 }
 439
 440 ul.bold {
 441   font-weight: 600;
 442   list-style-type: none;
 443   padding-left: 0;
 444 }
 445
 446 /* #ICONS */
 447
 448 .icon {
 449   position: relative;
 450   text-decoration: none;
 451 }
 452
 453 .icon:before {
 454   -moz-osx-font-smoothing: grayscale;
 455   -webkit-font-smoothing: antialiased;
 456   font-family: FontAwesome;
 457   font-style: normal;
 458   font-weight: normal;
 459   text-transform: none !important;
 460 }
 461
 462 .icon > .label {
 463   display: none;
 464 }
 465
 466 /** BASE STYLES */
 467
 468 /** SHOUTOUT BOX */
 469 .pg-shout-box {
 470   background-color: #336791;
 471   font-weight: 600;
 472   padding-bottom: 0.2rem;
 473   padding-top: 0.2rem;
 474 }
 475
 476 .pg-shout-box a {
 477   color: white;
 478   text-decoration: underline;
 479 }
 480
 481 .pg-shout-box a:hover {
 482   text-decoration: underline;
 483 }
 484
 485 /* #JUMBOTRON */
 486
 487 .pg-jumbotron {
 488   background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("/media/img/misc/banner.jpg");
 489   background-position: center;
 490   background-repeat: no-repeat;
 491   background-size: cover;
 492   z-index: 1;
 493   margin: 0;
 494   text-align: center;
 495 }
 496
 497 .pg-jumbotron-header {
 498   font-size: 2.5rem;
 499 }
 500
 501 /* #CTA */
 502
 503 .cta {
 504   background-position: center;
 505   background-repeat: no-repeat;
 506   background-size: cover;
 507   z-index: 1;
 508   margin: 0;
 509 }
 510
 511 .cta-text {
 512   padding: 4em;
 513   text-align: center;
 514   color: #fff;
 515   background-color: #336791;
 516 }
 517
 518 .cta-text h2 {
 519   color: #fff;
 520 }
 521
 522 .cta-1 {
 523
 524 }
 525
 526 .cta-2 {
 527   background-image: url("/media/img/misc/bugs.jpg");
 528 }
 529
 530 .cta-3 {
 531   background-image: url("/media/img/misc/training.jpg");
 532 }
 533
 534 /* #MARGIN */
 535
 536 .margin {
 537   margin: 0 auto 4em auto;
 538 }
 539
 540 /* #FOOTER */
 541
 542 #footer {
 543   text-align: center;
 544   padding: 5em 0 2em 0;
 545 }
 546
 547 #footer a {
 548   color: #336791;
 549 }
 550
 551 /* #LIST DESKTOP */
 552
 553 ul.actions {
 554   text-align: center;
 555   margin: 2em 0 0 0;
 556 }
 557
 558 /* #SIDEBAR DESKTOP */
 559
 560 .sidebar {
 561   padding-top: 6em;
 562 }
 563
 564 .col-lg-7 {
 565   padding-top: 4em;
 566 }
 567
 568 .navbar .logo {
 569   height: 2rem;
 570   margin-left: 0;
 571   margin-bottom: 0;
 572 }
 573
 574 .logo {
 575   height: 2rem;
 576   margin-left: 5px;
 577   margin-bottom: 5px;
 578 }
 579
 580 .navbar {
 581   box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
 582   transition: all 0.3s;
 583 }
 584
 585 /* #SIDEBAR UL STYLING */
 586
 587 #pgSideNav {
 588   padding: 1em;
 589 }
 590
 591 #pgSideNav a {
 592   color: #336791;
 593 }
 594
 595 #pgSideNav ul {
 596   list-style-type: circle;
 597   padding-left: 1.3em;
 598 }
 599
 600 /* DOCUMENTATION */
 601 /*
 602  * The documentation classes are divided up by newer/older version of the docs
 603  * Newer version of the docs are "lowercase" classed
 604  * Older version of the docs are "UPPERCASE" classed
 605  * Also, newer styles will be in classes vs. older ones that have i
 606  */
 607
 608 .docs-version-selected {
 609   font-weight: 900;
 610   text-decoration: underline;
 611 }
 612
 613 /**
 614  * docContent represents the main "box" where the documentation is rendered.
 615  * We namespace everything to ensure these styles do not interfere across the
 616  * rest of the site
 617  */
 618
 619 /**
 620  * General styles
 621  */
 622 #docContent {
 623   font-size: 0.9rem;
 624   margin-top: 1rem;
 625 }
 626
 627 #docContent p {
 628   margin-bottom: 1rem !important;
 629 }
 630
 631 #docContent hr {
 632   margin: 0 0 0.5em 0;
 633 }
 634
 635 /* #docContent hr.c1 {
 636   margin: 0 0 3em 0;
 637 } */
 638
 639 /* For code, order matters here.
 640  * For instance, we don't want to have any any padding on code blocks that
 641  * are within the "screen" element
 642  * This is also higher up as some inherited rules affected the display of the
 643  * code in certain areas
 644  */
 645
 646 #docContent br.table-break {
 647   display: none;
 648 }
 649
 650 #docContent pre {
 651   padding: 0.8rem !important;
 652 }
 653
 654 pre,
 655 code,
 656 #docContent kbd,
 657 #docContent tt.LITERAL,
 658 #docContent tt.REPLACEABLE {
 659   font-size: 0.9rem !important;
 660   color: inherit !important;
 661   background-color: #f8f9fa !important;
 662   border-radius: .25rem;
 663   margin: .6rem 0;
 664   font-weight: 300;
 665 }
 666
 667 #docContent .note pre,
 668 #docContent .note code,
 669 #docContent .note kbd,
 670 #docContent .note tt.LITERAL,
 671 #docContent .note tt.REPLACEABLE,
 672 #docContent .warning pre,
 673 #docContent .warning code,
 674 #docContent .warning kbd,
 675 #docContent .warning tt.LITERAL,
 676 #docContent .warning tt.REPLACEABLE,
 677 #docContent .tip pre,
 678 #docContent .tip code,
 679 #docContent .tip kbd,
 680 #docContent .tip tt.LITERAL,
 681 #docContent .tip tt.REPLACEABLE,
 682 #docContent .caution pre,
 683 #docContent .caution code,
 684 #docContent .caution kbd,
 685 #docContent .caution tt.LITERAL,
 686 #docContent .caution tt.REPLACEABLE {
 687   background-color: transparent !important;
 688   border: none;
 689   padding: 0 !important;
 690 }
 691
 692 #docContent .SCREEN code,
 693 #docContent .screen code {
 694   padding: 0;
 695 }
 696
 697 #docContent .USERINPUT > code,
 698 #docContent .userinput > code {
 699   font-weight: bolder;
 700 }
 701
 702 #docContent .REPLACEABLE,
 703 #docContent tt.REPLACEABLE,
 704 #docContent .replaceable {
 705   font-weight: 900;
 706   font-style: italic;
 707 }
 708
 709 #docContent .REPLACEABLE > code,
 710 #docContent .replaceable > code {
 711   font-weight: 900;
 712 }
 713
 714 /**
 715  * Documentation Tables
 716  */
 717 #docContent .table .title > strong,
 718 #docContent .TABLE,
 719 #docContent .TABLE b {
 720   color: #336791 !important;
 721   font-weight: 900;
 722 }
 723
 724  #docContent table.table,
 725  #docContent table.informaltable,
 726  #docContent table.CALSTABLE {
 727    background-color: #e0ecef;
 728    border: 2px solid #dee2e6;
 729    border-spacing: 0;
 730    border-collapse: collapse;
 731    width: initial;
 732    margin: 2ex 0;
 733  }
 734
 735 #docContent table.table th,
 736 #docContent table.informaltable th,
 737 #docContent table.CALSTABLE th {
 738   background-color: #e9ecef;
 739   padding: 0.5ex 0.5ex;
 740 }
 741
 742 #docContent table.table td,
 743 #docContent table.informaltable td,
 744 #docContent table.CALSTABLE td {
 745   background-color: #FFF;
 746   padding: 0.5ex 0.5ex;
 747 }
 748
 749 /** We use some overrides for code in tables, which makes it more readable */
 750 #docContent table.table tt,
 751 #docContent table.informaltable tt,
 752 #docContent table.CALSTABLE tt,
 753 #docContent table.table code,
 754 #docContent table.informaltable code,
 755 #docContent table.CALSTABLE code {
 756   background-color: inherit !important;
 757   color: inherit !important;
 758   font-size: inherit !important;
 759   margin: 0;
 760   padding: 0;
 761   word-break: unset;
 762 }
 763
 764 /**
 765  * Titles, Navigation
 766  */
 767 #docContent .title {
 768   display: block;
 769 }
 770
 771 #docContent .title:after {
 772   display: none;
 773 }
 774
 775 #docContent h2.SECT2 tt,
 776 #docContent .title code {
 777   background-color: inherit !important;
 778   color: inherit !important;
 779   font-size: inherit !important;
 780 }
 781
 782 #docContent .NAVHEADER table th,
 783 #docContent .navheader table th {
 784   text-align: center;
 785 }
 786
 787 /**
 788  * Table of contents
 789  */
 790 #docContent .TOC,
 791 #docContent .toc {
 792   margin-bottom: 1rem;
 793 }
 794
 795 #docContent div.TOC > dl > dd,
 796 #docContent div.toc > dl > dd {
 797   margin-left: 2rem;
 798 }
 799
 800 #docContent div.TOC > dl > dt.c2,
 801 #docContent div.toc > dl > dt.c2 {
 802   margin-bottom: 1rem;
 803 }
 804
 805 #docContent .TOC tt, #docContent .TOC dt a,
 806 #docContent .toc tt, #docContent .toc dt a {
 807   font-weight: 300!important;
 808 }
 809
 810 #docContent .TOC dd, #docContent .TOC dl,
 811 #docContent .toc dd, #docContent .toc dl {
 812   margin: 0;
 813 }
 814
 815 #docContent .TOC span.refpurpose,
 816 #docContent .toc span.refpurpose {
 817   font-weight: normal;
 818 }
 819
 820 /** Do not show any highlighting on code literals in TOC */
 821 #docContent .TOC tt,
 822 #docContent .toc code {
 823   background-color: inherit !important;
 824   color: inherit !important;
 825 }
 826
 827 /**
 828   * Various callout boxes for docs, including warning, caution, note, tip
 829   */
 830 #docContent table.CAUTION, table.WARNING,
 831 #docContent blockquote.CAUTION, #docContent blockquote.NOTE, #docContent blockquote.TIP, #docContent blockquote.WARNING,
 832 #docContent .caution, #docContent .note, #docContent .tip, #docContent .warning
 833 {
 834   border-width: 1px;
 835   border-style: solid;
 836   font-style: initial;
 837   margin: 4ex auto;
 838   max-width: 40rem;
 839   padding: 1rem;
 840   -moz-border-radius: 8px;
 841   -webkit-border-radius: 8px;
 842   -khtml-border-radius: 8px;
 843   border-radius: 8px;
 844 }
 845
 846 #docContent table.WARNING {
 847   border-color: #ced4da;
 848 }
 849
 850 #docContent table.CAUTION, table.WARNING {
 851   display: block;
 852   overflow: auto;
 853   padding: 0;
 854 }
 855
 856 #docContent table.CAUTION td, #docContent table.CAUTION th,
 857 #docContent table.WARNING td, #docContent table.WARNING th {
 858   border-width: 0;
 859   padding-left: 2ex;
 860   padding-right: 2ex;
 861 }
 862
 863 #docContent table.CAUTION td, #docContent table.CAUTION th {
 864   background-color: #fff3cd;
 865   border-color: #F3E4D5
 866 }
 867
 868 #docContent table.WARNING td, #docContent table.WARNING th {
 869   background-color: #fff3cd;
 870   border-color: #FFD7D7;
 871 }
 872
 873 #docContent table.CAUTION, table.WARNING,
 874 #docContent blockquote.CAUTION p, #docContent blockquote.NOTE p, #docContent blockquote.TIP p, #docContent blockquote.WARNING p,
 875 #docContent .caution p, #docContent .note p, #docContent .tip p, #docContent .warning p
 876 {
 877   margin-bottom: 0 !important;
 878 }
 879
 880 #docContent blockquote.CAUTION,
 881 #docContent table.CAUTION,
 882 #docContent .caution {
 883   border-color: #e2b21f;
 884   background-color: #fff3cd;
 885 }
 886
 887 #docContent blockquote.NOTE,
 888 #docContent .note {
 889   border-color: #ced4da;
 890   background-color: #d1ecf1;
 891 }
 892
 893 #docContent blockquote.TIP,
 894 #docContent .tip {
 895   border-color: #84c578;
 896   background-color: #e8f7e6;
 897 }
 898
 899 #docContent blockquote.WARNING,
 900 #docContent .warning {
 901   background-color: #fbeded;
 902   border-color: #df421e;
 903 }
 904
 905 #docContent blockquote.TIP h3, #docContent blockquote.NOTE h3, #docContent blockquote.CAUTION h3, #docContent blockquote.WARNING h3,
 906 #docContent .tip h3, #docContent .note h3, #docContent .caution h3, #docContent .warning h3 {
 907   text-align: center;
 908   margin: 0.25rem 0 0.5rem 0;
 909   color: initial;
 910 }
 911
 912 #docContent blockquote.WARNING td.c2, #docContent blockquote.WARNING td,
 913 #docContent .warning td.c2, #docContent .warning td {
 914   border: 1px solid #d58181;
 915 }
 916
 917 #docContent blockquote.WARNING td.c2,
 918 #docContent .warning td.c2 {
 919   color: #495057;
 920   background-color: #fbeded;
 921 }
 922
 923 #docContent blockquote.WARNING td.c2, #docContent blockquote.WARNING td,
 924 #docContent .warning td.c2, #docContent .warning td {
 925   border: 1px solid #bd4147;
 926 }
 927
 928 #docContent .warning td.c2 {
 929   background-color: #fbeded;
 930 }
 931
 932 /**
 933  * Background color of code should be transparent
 934  */
 935
 936 #docContent table.WARNING code,
 937 #docContent blockquote.NOTE code {
 938    background-color: transparent !important;
 939 }
 940
 941 /**
 942  * Listing out variables
 943  */
 944 #docContent .VARIABLELIST dt,
 945 #docContent .variablelist dt {
 946   font-family: monospace;
 947   font-weight: 300;
 948 }
 949
 950 #docContent .VARIABLELIST dt,
 951 #docContent .variablelist dt {
 952   font-family: monospace;
 953   font-weight: 300;
 954 }
 955
 956 #docContent .variablelist dd {
 957   margin-top: 1rem;
 958 }
 959
 960 #docContent .VARIABLELIST dd,
 961 #docContent .variablelist dd {
 962   margin-inline-start: 2rem;
 963 }
 964
 965 #docContent ul.itemizedlist {
 966   margin-left: 2.5rem;
 967 }
 968
 969 #docContent ul.itemizedlist > li > p {
 970   margin-left: 0 !important;
 971 }
 972
 973 #docContent .VARIABLELIST p,
 974 #docContent .variablelist p,
 975 #docContent .VARIABLELIST pre,
 976 #docContent .variablelist pre {
 977   margin: 1rem 0 1rem 2rem !important;;
 978 }
 979 /**
 980  * Footnotes
 981  */
 982 #docContent .FOOTNOTES hr,
 983 #docContent .footnotes hr {
 984   margin-bottom: 1.25rem;
 985 }
 986
 987 /* #PGCONTENTWRAP */
 988
 989 #pgContentWrap a:not([href]):not([tabindex]),
 990 #docContent a:not([href]):not([tabindex]) {
 991   color: inherit;
 992   text-decoration: none;
 993   color: #336791 !important;
 994 }
 995
 996 #pgContentWrap a, #docContent a {
 997   color: #840032;
 998 }
 999
1000 #pgContentWrap {
1001   padding: 1em 2em;
1002   margin: 0 auto;
1003   width: 100%;
1004 }
1005
1006 #pgContentWrap h3, #pgContentWrap h4 {
1007   margin: 1em 0;
1008 }
1009
1010 #pgContentWrap .fa, #pgContentWrap .far, #pgContentWrap .fas, #pgContentWrap .fab {
1011   color: #336791;
1012   margin: 0 5px;
1013 }
1014
1015 i.fas.fa-search {
1016   color: #336791;
1017 }
1018
1019 /* #CODE */
1020
1021 pre {
1022   padding: 0.8rem;
1023   border: 1px solid #ced4da;
1024   margin: 1rem 0 !important;
1025 }
1026
1027 pre.code {
1028   padding: .2rem .4rem;
1029   font-size: 90%;
1030   border-radius: .25rem;
1031 }
1032
1033 /* News and events getting markdown from end users */
1034 #pgContentWrap .newseventwrap h1 {
1035   font-size: 1.2em;
1036 }
1037 #pgContentWrap .newseventwrap h2 {
1038   display: block;
1039   font-size: 1.1em;
1040 }
1041 #pgContentWrap .newseventwrap h3 {
1042   font-size: 1.0em;
1043 }
1044 hr.eventseparator {
1045   width: 80%;
1046   margin-bottom: 1em;
1047 }
1048
1049
1050 /* #STYLEDSELECT */
1051
1052 /**
1053 * Used on mailinglists.html as part of the mailinglist subscribe functionality.
1054 */
1055
1056 .styledSelect, .styledInput {
1057   width: 100%;
1058   height: 34px;
1059   overflow: hidden;
1060   background-color: #fff;
1061   border: solid 2px #e7eae8;
1062 }
1063
1064 .styledInput[name="search"] {
1065   width: 98%;
1066   height: 3.6em;
1067 }
1068
1069 /* Buttons */
1070
1071 .btn {
1072   width: 14em;
1073   margin: 1em auto;
1074 }
1075
1076 .btn-center {
1077   text-align: center;
1078   display: block;
1079 }
1080
1081 .btn-primary {
1082   background-color: #336791;
1083   border-color: #336791;
1084   color: #fff !important;
1085 }
1086
1087 .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary.active, .btn:active:focus, .btn.active:focus {
1088   background-color: #666;
1089   border-color: #666;
1090   cursor: pointer;
1091 }
1092
1093 .btn-inline-block {
1094   display: inline-block;
1095 }
1096
1097 .form-row .btn-primary {
1098   margin: 0.5em 0;
1099 }
1100
1101 button.btn.btn-default {
1102   color: #333;
1103   background-color: #fff;
1104   border-color: #ccc;
1105   width: initial;
1106   margin: auto 0;
1107   height: 100%;
1108   cursor: pointer;
1109 }
1110
1111 /* Input */
1112
1113 input#allsites {
1114   margin-top: 10px;
1115   margin-left: 0;
1116 }
1117
1118 input.form-control {
1119   height: 2.5em;
1120   margin: auto 0;
1121 }
1122
1123 input#q {
1124   font-size: 1em;
1125   font-family: 'Open Sans', sans-serif;
1126 }
1127
1128 input {
1129   padding-left: 0.5em;
1130 }
1131
1132 input[type=checkbox] {
1133   vertical-align: middle;
1134   margin-left: 5px;
1135   width: auto;
1136 }
1137
1138 input[type=checkbox]:focus {
1139   outline: none;
1140   box-shadow: none;
1141 }
1142
1143 .custom-select {
1144   margin: 2px;
1145 }
1146
1147 th.formfieldnamecontainer {
1148   padding-right: 1em;
1149 }
1150
1151 .pgGenericFormTable input, .pgGenericFormTable textarea {
1152   margin: 0.5em 0;
1153 }
1154
1155 .form-check-input[type=radio] {
1156   margin-top: .4rem;
1157 }
1158
1159 .form-check.search {
1160   padding-left: 0;
1161 }
1162
1163 .form-check.search label.form-check-label {
1164   margin-left: 1rem;
1165   vertical-align: middle;
1166 }
1167
1168 .text-center.fixed-height h3 {
1169   height: 3.5em;
1170 }
1171
1172 /** This code is for pgarchives */
1173
1174 /**
1175  * general navigation padding just for the archives; removable after the
1176  * universal notifier is available
1177  */
1178  .archive {
1179    margin-top: 4rem;
1180  }
1181
1182 /** Thread Lists */
1183 .thread-list {
1184   font-size: 0.8em;
1185 }
1186
1187 .thread-list th, .thread-list td {
1188   padding: 0;
1189 }
1190
1191 /** Messages */
1192
1193 h3.messages {
1194   text-transform: none;
1195   font-size: 1.2em;
1196 }
1197
1198 .message-header {
1199   font-size: 0.7em;
1200   line-height: 1.2em;
1201   padding-bottom: 0.3em;
1202 }
1203
1204 .message-header th, .message-header td {
1205   padding: 0;
1206  }
1207
1208 .message-header select {
1209   height: auto;
1210   padding: 0;
1211 }
1212
1213 .message-content {
1214   display: inline-block;
1215   font-family: monospace, monospace;
1216   font-size: 0.7em;
1217   line-height: 1.2em;
1218   margin: 0 auto;
1219   white-space: pre-wrap;
1220 }
1221
1222 .message-content p {
1223   margin-bottom: -1.2em;
1224 }
1225
1226 .message-responses {
1227   font-size: 0.7em;
1228   line-height: 1.5em;
1229 }
1230
1231 .message-attachments, .message-nav {
1232   font-size: 0.7em;
1233   line-height: 1.2em;
1234 }
1235
1236 /* Message Subjects */
1237 h1.subject {
1238   text-transform: none;
1239   font-size: 1.2em;
1240 }
1241
1242 /* Feature matrix */
1243 form#featurematrix_version_filter {
1244   text-align: center;
1245 }
1246 input.featurematrix_version {
1247   margin-right: 15px;
1248 }
1249 input.featurematrix_version:last-child {
1250   margin-right: 0;
1251 }
1252 hr#featurematrix_version_divider {
1253   margin: 0;
1254 }
1255 td.fm_no {
1256   background-color: #ffdddd !important;
1257 }
1258 td.fm_yes {
1259   background-color: #ddffdd !important;
1260 }
1261 td.fm_obs {
1262   background-color: #ddddff !important;
1263 }
1264 td.fm_unk {
1265   background-color: #ffffaa !important;
1266 }
1267
1268 /* Code of Conduct Committee */
1269 table.cocc-table tbody tr td:nth-child(1) {
1270   width: 20%;
1271 }
1272
1273 /* Contributors */
1274 table.contributor-table thead tr th {
1275   width: 50%;
1276 }
1277
1278 /* Downloads/products */
1279 table.product-table thead tr th:nth-child(1) {
1280   width: 60%;
1281 }
1282 table.product-table thead tr th:nth-child(2) {
1283   width: 10%;
1284 }
1285 table.product-table thead tr th:nth-child(3) {
1286   width: 10%;
1287 }
1288 table.product-table thead tr th:nth-child(4) {
1289   width: 20%;
1290 }
1291
1292 /* Professional servies */
1293 table.profserv-table tbody tr th {
1294   width: 20%;
1295 }
1296
1297 /* Sponsors */
1298 table.sponsor-table tbody tr th {
1299   width: 20%;
1300 }
1301 table.sponsor-table tbody tr td:nth-child(2) {
1302   width: 50%;
1303 }
1304 table.sponsor-table tbody tr td:nth-child(3) {
1305   width: 30%;
1306 }
1307
1308 /** Release Notes */
1309 #release-notes .navheader,
1310 #release-notes .navfooter,
1311 #release-notes .NAVHEADER,
1312 #release-notes .NAVFOOTER,
1313 #release-notes .titlepage,
1314 #release-notes h1.SECT1,
1315 #release-notes .toc {
1316   display: none;
1317 }
1318
1319 #release-notes .version-list h2:after {
1320   content: none;
1321 }
1322
1323 .release-notes-list {
1324   list-style-type: none;
1325 }
1326
1327 .release-notes-list :not(.collapsed) > .right,
1328 .release-notes-list .collapsed > .down {
1329   display: none;
1330 }
1331
1332 .release-notes-list .collapsed > .right,
1333 .release-notes-list :not(.collapsed) > .down {
1334   display: block;
1335 }
1336
1337
1338 /** ALL RESPONSIVE QUERIES HERE */
1339 /* Small devices (landscape phones, 576px and up)*/
1340
1341 @media (max-width: 1280px) {
1342   input#q {
1343     display: none;
1344   }
1345    #docSearchForm input#q {
1346     display: block;
1347   }
1348 }
1349
1350 @media (max-width: 992px) {
1351   .archive {
1352     margin-top: 2rem;
1353   }
1354   .navbar {
1355     padding: 5px 10px;
1356   }
1357   .navbar-toggler-icon {
1358     width: 1rem;
1359     height: 1.5rem;
1360   }
1361   #docContent table.table {
1362     font-size: 70%;
1363   }
1364 }
1365
1366 @media (max-width: 768px) {
1367
1368   .jumbotron.jumbotron-fluid.pg-jumbotron {
1369     padding: 4em;
1370   }
1371
1372   .pg-jumbotron .btn, button.btn.btn-primary {
1373     margin: 5px auto;
1374   }
1375
1376   .text {
1377     height: initial;
1378   }
1379
1380   .cta-text {
1381     padding: 4em;
1382   }
1383
1384   .cta {
1385     padding: 6em;
1386   }
1387
1388   ul.divided, ul.menu, #footer ul {
1389     padding: 0;
1390     text-align: center;
1391   }
1392
1393   ul.feature {
1394     padding: 0 0 1em 0 !important;
1395   }
1396
1397   .feature-grid {
1398     padding: 0;
1399   }
1400
1401   #pgSideNav {
1402     padding: 1em 0;
1403   }
1404
1405   #pgSideNav ul {
1406     padding: 0;
1407     margin: 1em 0 0 1em;
1408   }
1409
1410   #pgSideNav ul ul {
1411     margin: 0;
1412   }
1413
1414   #pgContentWrap {
1415     padding: 0;
1416   }
1417
1418   #pgContentWrap ul {
1419     padding-left: 1em;
1420   }
1421
1422   #docContent table.table {
1423     font-size: 50%;
1424   }
1425
1426 }
1427
1428 @media (min-width: 576px) {
1429   /** NAVBAR */
1430   .nav-item > a {
1431     font-size: 0.95rem;
1432     font-weight: 600;
1433   }
1434 }
1435 @media (max-width: 575px) {
1436   /** HOMEPAGE JUMBOTRON */
1437   .pg-jumbotron-header {
1438     font-size: 1.5rem;
1439   }
1440 }