1 html, button, input, select, textarea,
2 .pure-g [class *= "pure-u"] {
3 font-family: "proxima-nova", sans-serif;
7 /* --------------------------
9 * --------------------------
18 h1, h2, h3, h4, h5, h6 {
20 color: rgb(75, 75, 75);
30 color: #3b8bba; /* block-background-text-normal */
31 text-decoration: none;
35 color: #265778; /* block-normal-text-normal */
46 background: #1f8dd6; /* same color as selected state on site menu */
52 aside a, aside a:visited {
53 color: rgb(169, 226, 255);
62 background-color: #323b44 !important;
63 vertical-align: middle;
66 /* --------------------------
68 * --------------------------
71 /* Navigation Push Styles */
81 #layout.active #menu {
87 padding: 1em 1em 1em 1em;
89 /* Apply the .box class on the immediate parent of any grid element (pure-u-*) to apply some padding. */
104 /* --------------------------
105 * Header Module Styles
106 * --------------------------
110 font-family: "omnes-pro", sans-serif;
115 border-bottom: 1px solid #eee;
131 /* --------------------------
132 * Content Module Styles
133 * --------------------------
136 /* The content div is placed as a wrapper around all the docs */
145 .content .content-subhead {
152 .content .content-spaced {
156 .content .content-quote {
157 font-family: "Georgia", serif;
161 border-left: 5px solid #ddd;
172 background: transparent url('/img/link-icon.png') no-repeat center center;
173 background-size: 20px 20px;
176 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
178 background-image: url('/img/link-icon@2x.png');
183 /* --------------------------
185 * --------------------------
190 font-family: Consolas, 'Liberation Mono', Courier, monospace;
192 background: rgb(250, 250, 250);
196 padding: 0.2em 0.4em;
207 border: 1px solid #eee;
208 border-left-width: 0;
209 border-right-width: 0;
211 -webkit-overflow-scrolling: touch;
221 white-space: pre-wrap;
222 word-wrap: break-word;
225 /* --------------------------
226 * Footer Module Styles
227 * --------------------------
232 border-top: 1px solid #eee;
233 margin-top: 3.4286em;
235 background: rgb(250, 250, 250);
258 /* --------------------------
259 * Main Navigation Bar Styles
260 * --------------------------
263 /* Add transition to containers so they can push in and out */
267 -webkit-transition: all 0.2s ease-out;
268 -moz-transition: all 0.2s ease-out;
269 -ms-transition: all 0.2s ease-out;
270 -o-transition: all 0.2s ease-out;
271 transition: all 0.2s ease-out;
274 #layout.active .menu-link {
279 margin-left: -180px; /* "#menu" width */
285 z-index: 1000; /* so the menu or its navicon stays above all content */
288 -webkit-overflow-scrolling: touch;
294 padding: 0.625em 1em;
297 #menu .pure-menu-open {
298 background: transparent;
302 #menu .pure-menu ul {
304 background: transparent;
308 #menu .pure-menu .menu-item-divided {
309 border-top: 1px solid #333;
312 #menu .pure-menu li a:hover,
313 #menu .pure-menu li a:focus {
319 display: block; /* show this only on small screens */
321 left: 0; /* "#menu width" */
323 background: rgba(0,0,0,0.7);
324 font-size: 11px; /* change this value to increase/decrease button size */
343 .menu-link span:before,
344 .menu-link span:after {
345 background-color: #fff;
348 -webkit-transition: all 0.4s;
349 -moz-transition: all 0.4s;
350 -ms-transition: all 0.4s;
351 -o-transition: all 0.4s;
352 transition: all 0.4s;
355 .menu-link span:before,
356 .menu-link span:after {
362 .menu-link span:after {
366 .menu-link.active span {
367 background: transparent;
370 .menu-link.active span:before {
371 -webkit-transform: rotate(45deg) translate(.5em, .4em);
372 -moz-transform: rotate(45deg) translate(.5em, .4em);
373 -ms-transform: rotate(45deg) translate(.5em, .4em);
374 -o-transform: rotate(45deg) translate(.5em, .4em);
375 transform: rotate(45deg) translate(.5em, .4em);
378 .menu-link.active span:after {
379 -webkit-transform: rotate(-45deg) translate(.4em, -.3em);
380 -moz-transform: rotate(-45deg) translate(.4em, -.3em);
381 -ms-transform: rotate(-45deg) translate(.4em, -.3em);
382 -o-transform: rotate(-45deg) translate(.4em, -.3em);
383 transform: rotate(-45deg) translate(.4em, -.3em);
386 #menu .pure-menu-heading {
389 letter-spacing: 0.1em;
392 padding: 0.5em 0.8em;
394 #menu .pure-menu-heading:hover,
395 #menu .pure-menu-heading:focus {
399 #menu .pure-menu-selected {
403 #menu .pure-menu-selected a {
407 #menu li.pure-menu-selected a:hover,
408 #menu li.pure-menu-selected a:focus {
414 /* ---------------------
415 * Smaller Module Styles
416 * ---------------------
419 .pure-img-responsive {
424 .pure-paginator .pure-button {
425 -webkit-box-sizing: content-box;
426 -moz-box-sizing: content-box;
427 box-sizing: content-box;
431 font-family: inherit;
433 a.pure-button-primary {
438 /* green call to action button class */
440 background-color: #61B842;
465 -webkit-overflow-scrolling: touch;
468 .table-responsive table {
471 border-left-width: 0;
472 border-right-width: 0;
475 .table-responsive .mq-table {
479 .mq-table th.highlight {
480 background-color: rgb(255, 234, 133);
482 .mq-table td.highlight {
483 background-color: rgb(255, 250, 229);
485 .mq-table th.highlight code,
486 .mq-table td.highlight code {
487 background: rgb(255, 255, 243);
493 /* ----------------------------
494 * Example for full-width Grids
495 * ----------------------------
499 background: rgb(250, 250, 250);
501 border-top: 1px solid #ddd;
502 border-bottom: 1px solid #ddd;
505 /* --------------------------
507 * --------------------------
514 .is-code-full .code {
520 /* --------------------------
522 * --------------------------
525 @media screen and (min-width: 35.5em) {
540 @media screen and (min-width: 48em) {
572 border-left-width: 1px;
573 border-right-width: 1px;
580 .table-responsive table {
581 border-left-width: 1px;
582 border-right-width: 1px;
587 @media (min-width: 58em) {
590 padding-left: 180px; /* left col width "#menu" */
601 #layout.active .menu-link {
611 font-family: "omnes-pro", sans-serif;
638 border: 1px solid #1f8dd6;
644 border: 1px solid #ddd;
659 text-decoration: none;
660 text-transform: capitalize;
664 display: inline-block;
665 -webkit-transform: rotate(-90deg);
666 -moz-transform: rotate(-90deg);
667 -ms-transform: rotate(-90deg);
668 -o-transform: rotate(-90deg);
677 .size-chart-base .size-chart-size {
678 color: rgb(103, 194, 240);
682 background: rgb(128, 88, 165);
684 .size-chart-grids .size-chart-size {
685 color: rgb(200, 131, 255);
692 .size-chart-forms .size-chart-size {
693 color: rgb(161, 240, 137);
696 .size-chart-buttons {
700 .size-chart-buttons .size-chart-size {
701 color: rgb(236, 164, 154);
705 background: rgb(250, 210, 50);
707 .size-chart-menus .size-chart-size {
708 color: rgb(255, 240, 134);
712 background: rgb(243, 123, 29);
714 .size-chart-tables .size-chart-label {
717 .size-chart-tables .size-chart-size {
718 color: rgb(255, 190, 129);
722 border-bottom: 1px solid #eee;
727 .marketing-customize {
733 .marketing .content {
754 .sample-button .pure-button {
807 .sample-button .button-h {
808 width: 50%; /* Updated to 80% at sm breakpoint */
811 @media screen and (min-width: 30em) {
812 .size-chart-tables .size-chart-label {
817 @media screen and (min-width: 35.5em) {
822 .sample-button .button-h {
827 @media screen and (min-width: 48em) {
851 -webkit-transform: none;
852 -moz-transform: none;
864 .l-wrap .sample-buttons {
870 * Baby Blue theme for RainbowJS
881 pre .support.tag-name {
882 color: rgb(85, 85, 85);
892 pre .entity.function,
893 pre .storage.function {
900 pre .support.namespace {
904 pre .constant.numeric,
914 color: #757575; /* skinbuilder block-page-text-normal with #1f8dd6 as primary */
920 color: #3b8bba; /* skinbuilder block-mine-text-low with #1f8dd6 as primary */
923 /* --------------------------
924 * Tabbed look in statistics
925 * --------------------------
928 /* Set the size and font of the tab widget
930 font: 10pt arial, verdana;
935 /* Configure the radio buttons to hide off screen */
936 .tabGroup > input[type="radio"] {
942 /* Configure labels to look like tabs */
943 .tabGroup > input[type="radio"] + label {
944 /* inline-block such that the label can be given dimensions */
945 display: inline-block;
947 border: 1px solid silver;
949 /* the bottom border is handled by the tab content div */
952 /* Padding around tab text */
955 /* Set the background color to default gray (non-selected tab) */
956 background-color:#ddd;
959 /* Focused tabs need to be highlighted as such */
960 .tabGroup > input[type="radio"]:focus + label {
961 border:1px dashed silver;
964 /* Checked tabs must be white with the bottom border removed */
965 .tabGroup > input[type="radio"]:checked + label {
966 background-color:white;
968 border-bottom: 1px solid white;
972 /* The tab content must fill the widgets size and have a nice border */
975 background-color: white;
976 border: 1px solid silver;
982 /* This matchs tabs displaying to their associated radio inputs */
983 .port-stats:checked ~ .port-stats, .flow-stats:checked ~ .flow-stats {