| LEFT | RIGHT |
| 1 body | 1 body |
| 2 { | 2 { |
| 3 font-family: "Source Sans Pro", Arial, sans-serif; | 3 font-family: "Source Sans Pro", Arial, sans-serif; |
| 4 margin: 0; | 4 margin: 0; |
| 5 } | 5 /* Start below fixed navbar */ |
| 6 | 6 padding-top: 4em; |
| 7 #content | 7 line-height: 1.5; |
| 8 } |
| 9 |
| 10 #content, |
| 11 #blog |
| 8 { | 12 { |
| 9 padding-bottom: 2em; | 13 padding-bottom: 2em; |
| 10 } | 14 } |
| 11 | 15 |
| 12 a img | 16 a img |
| 13 { | 17 { |
| 14 border: none; | 18 border: none; |
| 15 } | 19 } |
| 16 | 20 |
| 17 a:link, a:visited | 21 a:link, a:visited |
| (...skipping 17 matching lines...) Expand all Loading... |
| 35 padding: 1em; | 39 padding: 1em; |
| 36 overflow: auto; | 40 overflow: auto; |
| 37 } | 41 } |
| 38 | 42 |
| 39 .sprite | 43 .sprite |
| 40 { | 44 { |
| 41 display: inline-block; | 45 display: inline-block; |
| 42 font-size: 0px; /* fix for IE6 height bug */ | 46 font-size: 0px; /* fix for IE6 height bug */ |
| 43 background-image: url(../img/sprite-main.png); | 47 background-image: url(../img/sprite-main.png); |
| 44 background-repeat: no-repeat; | 48 background-repeat: no-repeat; |
| 45 } | |
| 46 | |
| 47 #adblock-browser-notification | |
| 48 { | |
| 49 text-align: center; | |
| 50 } | |
| 51 | |
| 52 #adblock-browser-notification a | |
| 53 { | |
| 54 font-weight: bold; | |
| 55 } | |
| 56 | |
| 57 #adblock-browser-notification img | |
| 58 { | |
| 59 vertical-align: bottom; | |
| 60 width: 25px; | |
| 61 height: 25px; | |
| 62 } | |
| 63 | |
| 64 #adblock-browser-notification span | |
| 65 { | |
| 66 white-space: nowrap; | |
| 67 margin-left: 1em; | |
| 68 } | |
| 69 | |
| 70 [dir="rtl"] #adblock-browser-notification span | |
| 71 { | |
| 72 margin-left: 0; | |
| 73 margin-right: 1em; | |
| 74 } | 49 } |
| 75 | 50 |
| 76 .toc | 51 .toc |
| 77 { | 52 { |
| 78 display: inline-block; | 53 display: inline-block; |
| 79 border: 1px solid #aaa; | 54 border: 1px solid #aaa; |
| 80 background: #fff; | 55 background: #fff; |
| 81 padding: 16px 20px; | 56 padding: 16px 20px; |
| 82 } | 57 } |
| 83 | 58 |
| (...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 160 .section | 135 .section |
| 161 { | 136 { |
| 162 padding: 2em 0; | 137 padding: 2em 0; |
| 163 } | 138 } |
| 164 | 139 |
| 165 /****************************************************************************** | 140 /****************************************************************************** |
| 166 * .content | 141 * .content |
| 167 *****************************************************************************/ | 142 *****************************************************************************/ |
| 168 | 143 |
| 169 .content h1, | 144 .content h1, |
| 145 .content .h1, |
| 170 .content h2, | 146 .content h2, |
| 171 .content h3, | 147 .content h3, |
| 172 .content h4, | 148 .content h4, |
| 173 .content h5 | 149 .content h5 |
| 174 { | 150 { |
| 175 font-weight: bold; | 151 font-weight: bold; |
| 176 margin: 32px 0 16px 0; | 152 margin: 32px 0 16px 0; |
| 177 margin: 2rem 0 1rem 0; | 153 margin: 2rem 0 1rem 0; |
| 178 } | 154 line-height: 1.4; |
| 179 | 155 } |
| 180 .content h1 { font-size: 1.8em; } | 156 |
| 181 .content h2 { font-size: 1.4em; } | 157 .content h1, |
| 182 .content h3 { font-size: 1.3em; } | 158 .content .h1 { font-size: 1.4em; } |
| 183 .content h4 { font-size: 1.2em; } | 159 .content h2 { font-size: 1.3em; } |
| 184 .content h5 { font-size: 1.1em; } | 160 .content h3 { font-size: 1.2em; } |
| 161 .content h4 { font-size: 1.1em; } |
| 162 .content h5 { font-size: 1em; } |
| 163 |
| 164 @media(min-width: 576px) |
| 165 { |
| 166 .content h1, |
| 167 .content .h1 { font-size: 1.6em; } |
| 168 .content h2 { font-size: 1.4em; } |
| 169 .content h3 { font-size: 1.3em; } |
| 170 .content h4 { font-size: 1.2em; } |
| 171 .content h5 { font-size: 1.1em; } |
| 172 } |
| 185 | 173 |
| 186 @media(min-width: 768px) | 174 @media(min-width: 768px) |
| 187 { | 175 { |
| 188 .content h1 { font-size: 2.4em; } | 176 .content h1, |
| 177 .content .h1 |
| 178 { |
| 179 font-size: 2.4em; |
| 180 line-height: 1.3; |
| 181 } |
| 182 |
| 189 .content h2 { font-size: 1.6em; } | 183 .content h2 { font-size: 1.6em; } |
| 190 } | 184 } |
| 191 | 185 |
| 192 .content a, | 186 .content a, |
| 193 .content a:visited | 187 .content a:visited |
| 194 { | 188 { |
| 195 color: #c70d2c; | 189 color: #c70d2c; |
| 196 } | 190 } |
| 197 | 191 |
| 198 /* Buttons | 192 /* Buttons |
| (...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 231 .button.primary:hover | 225 .button.primary:hover |
| 232 { | 226 { |
| 233 background-color: #E00F32; | 227 background-color: #E00F32; |
| 234 } | 228 } |
| 235 | 229 |
| 236 .button.primary:active | 230 .button.primary:active |
| 237 { | 231 { |
| 238 background-color: #AD102A; | 232 background-color: #AD102A; |
| 239 } | 233 } |
| 240 | 234 |
| 241 .button.inverse, | 235 .button.accent, |
| 242 a.button.inverse | 236 .button.accent:visited |
| 243 { | 237 { |
| 244 background: none; | 238 background: #077CA6; |
| 245 color: #fff; | 239 color: #fff; |
| 246 margin-left: 2px; | 240 margin-left: 2px; |
| 247 margin-right: 2px; | 241 margin-right: 2px; |
| 248 border: 1px solid #fff; | 242 } |
| 249 } | 243 |
| 250 | 244 .button.accent:hover, |
| 251 .button.inverse:hover, | 245 .button.accent:active, |
| 252 .button.inverse:focus | 246 .button.accent:focus |
| 253 { | 247 { |
| 254 box-shadow: inset 0 0 0 2px #fff; | 248 box-shadow: inset 0 0 0 3px #005D80; |
| 255 } | 249 } |
| 256 | 250 |
| 257 .button.inverse:active | 251 /******************************************************************************* |
| 258 { | 252 * .fg-* utilities |
| 259 background-color: #fff; | 253 ******************************************************************************/ |
| 260 } | 254 |
| 261 | 255 .fg-accent |
| 262 .bg-accent .button.inverse:active | |
| 263 { | 256 { |
| 264 color: #077CA6; | 257 color: #077CA6; |
| 265 } | 258 } |
| 266 | 259 |
| 267 /******************************************************************************* | 260 .bg-secondary |
| 268 * .bg-* utilities | 261 { |
| 269 ******************************************************************************/ | 262 color: #000; |
| 270 | 263 background-color: #F4F4F4; |
| 271 .bg-accent | |
| 272 { | |
| 273 color: #fff; | |
| 274 background-color: #077CA6; | |
| 275 } | 264 } |
| 276 | 265 |
| 277 /******************************************************************************* | 266 /******************************************************************************* |
| 278 * #navbar | 267 * #navbar |
| 279 ******************************************************************************/ | 268 ******************************************************************************/ |
| 280 | 269 |
| 281 #navbar | 270 #navbar |
| 282 { | 271 { |
| 283 min-height: 4em; | 272 min-height: 4em; |
| 284 background-color: #c70d2c; | 273 background-color: #c70d2c; |
| 274 position: fixed; |
| 275 z-index: 2; |
| 276 width: 100%; |
| 277 top: 0; |
| 278 transition: top 0.2s ease-in-out; |
| 285 } | 279 } |
| 286 | 280 |
| 287 @media(max-width: 991px) | 281 @media(max-width: 991px) |
| 288 { | 282 { |
| 289 #navbar | 283 #navbar |
| 290 { | 284 { |
| 291 overflow: auto; | 285 overflow: auto; |
| 292 } | 286 } |
| 293 } | 287 } |
| 294 | 288 |
| (...skipping 221 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 516 | 510 |
| 517 @media(max-width: 991px) | 511 @media(max-width: 991px) |
| 518 { | 512 { |
| 519 #navbar-menu | 513 #navbar-menu |
| 520 { | 514 { |
| 521 display: none; | 515 display: none; |
| 522 float: left; | 516 float: left; |
| 523 clear: both; | 517 clear: both; |
| 524 width: 100%; | 518 width: 100%; |
| 525 background-color: #292929; | 519 background-color: #292929; |
| 520 overflow-y: scroll; |
| 521 max-height: 416px; |
| 522 max-height: 80vh; |
| 526 } | 523 } |
| 527 | 524 |
| 528 #navbar-menu.visible | 525 #navbar-menu.visible |
| 529 { | 526 { |
| 530 display: block; | 527 display: block; |
| 531 } | 528 } |
| 532 | 529 |
| 533 #navbar-menu li a | 530 #navbar-menu li a |
| 534 { | 531 { |
| 535 padding: 0.75em 1em; | 532 padding: 0.75em 1em; |
| (...skipping 167 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 703 { | 700 { |
| 704 display: none; | 701 display: none; |
| 705 } | 702 } |
| 706 | 703 |
| 707 /* overriding display:none above */ | 704 /* overriding display:none above */ |
| 708 #footer #social-list | 705 #footer #social-list |
| 709 { | 706 { |
| 710 display: block; | 707 display: block; |
| 711 } | 708 } |
| 712 } | 709 } |
| 710 |
| 711 /* Video |
| 712 ****************************************************************************/ |
| 713 |
| 714 .video-parent |
| 715 { |
| 716 position: relative; |
| 717 display: block; |
| 718 width: 100%; |
| 719 padding: 0; |
| 720 border: 1px solid #c9c9c9; |
| 721 box-shadow: 1px 1px 0 0 #dbdbdb; |
| 722 overflow: hidden; |
| 723 } |
| 724 |
| 725 .video-parent.has-iframe::before |
| 726 { |
| 727 display: block; |
| 728 content: ""; |
| 729 padding-top: 56.25%; |
| 730 } |
| 731 |
| 732 .video-parent iframe |
| 733 { |
| 734 position: absolute; |
| 735 top: 0; |
| 736 bottom: 0; |
| 737 left: 0; |
| 738 width: 100%; |
| 739 height: 100%; |
| 740 border: 0; |
| 741 } |
| 742 |
| 743 .video-link |
| 744 { |
| 745 display: block; |
| 746 position: relative; |
| 747 } |
| 748 |
| 749 .video-thumbnail |
| 750 { |
| 751 width: 100%; |
| 752 transition: opacity 0.8s; |
| 753 opacity: 0.2; |
| 754 } |
| 755 |
| 756 .hide-disclaimer .video-thumbnail |
| 757 { |
| 758 opacity: 1; |
| 759 } |
| 760 |
| 761 .video-disclaimer |
| 762 { |
| 763 visibility: visible; |
| 764 opacity: 1; |
| 765 position: absolute; |
| 766 bottom: 0; |
| 767 left: 0; |
| 768 padding: 1em; |
| 769 background-color: #fff; |
| 770 font-size: 0.9em; |
| 771 text-align: center; |
| 772 transition: opacity 0.8s; |
| 773 } |
| 774 |
| 775 .hide-disclaimer .video-disclaimer |
| 776 { |
| 777 visibility: hidden; |
| 778 opacity: 0; |
| 779 } |
| 780 |
| 781 .video-play |
| 782 { |
| 783 position: absolute; |
| 784 top: 50%; |
| 785 left: 50%; |
| 786 width: 80px; |
| 787 margin-top: -60px; |
| 788 margin-left: -40px; |
| 789 } |
| 790 |
| 791 .hide-disclaimer .video-play |
| 792 { |
| 793 margin-top: -40px; |
| 794 } |
| LEFT | RIGHT |