OLD | NEW |
1 * | |
2 { | |
3 font-family: Arial, sans; | |
4 font-size: 16px; | |
5 } | |
6 | |
7 body | 1 body |
8 { | 2 { |
| 3 font-family: "Source Sans Pro", Arial, sans-serif; |
9 margin: 0; | 4 margin: 0; |
10 /* Start below fixed navbar */ | 5 /* Start below fixed navbar */ |
11 padding-top: 4em; | 6 padding-top: 4em; |
12 line-height: 1.5; | 7 line-height: 1.5; |
13 } | 8 } |
14 | 9 |
15 #content, | 10 #content, |
16 #blog | 11 #blog |
17 { | 12 { |
18 padding-bottom: 2em; | 13 padding-bottom: 2em; |
(...skipping 27 matching lines...) Expand all Loading... |
46 } | 41 } |
47 | 42 |
48 .sprite | 43 .sprite |
49 { | 44 { |
50 display: inline-block; | 45 display: inline-block; |
51 font-size: 0px; /* fix for IE6 height bug */ | 46 font-size: 0px; /* fix for IE6 height bug */ |
52 background-image: url(../img/sprite-main.png); | 47 background-image: url(../img/sprite-main.png); |
53 background-repeat: no-repeat; | 48 background-repeat: no-repeat; |
54 } | 49 } |
55 | 50 |
56 #adblock-browser-notification | |
57 { | |
58 text-align: center; | |
59 } | |
60 | |
61 #adblock-browser-notification a | |
62 { | |
63 font-weight: bold; | |
64 } | |
65 | |
66 #adblock-browser-notification img | |
67 { | |
68 vertical-align: bottom; | |
69 width: 25px; | |
70 height: 25px; | |
71 } | |
72 | |
73 #adblock-browser-notification span | |
74 { | |
75 white-space: nowrap; | |
76 margin-left: 1em; | |
77 } | |
78 | |
79 [dir="rtl"] #adblock-browser-notification span | |
80 { | |
81 margin-left: 0; | |
82 margin-right: 1em; | |
83 } | |
84 | |
85 .toc | 51 .toc |
86 { | 52 { |
87 display: inline-block; | 53 display: inline-block; |
88 border: 1px solid #aaa; | 54 border: 1px solid #aaa; |
89 background: #fff; | 55 background: #fff; |
90 padding: 16px 20px; | 56 padding: 16px 20px; |
91 } | 57 } |
92 | 58 |
93 .toc ul | 59 .toc ul |
94 { | 60 { |
(...skipping 74 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
169 .section | 135 .section |
170 { | 136 { |
171 padding: 2em 0; | 137 padding: 2em 0; |
172 } | 138 } |
173 | 139 |
174 /****************************************************************************** | 140 /****************************************************************************** |
175 * .content | 141 * .content |
176 *****************************************************************************/ | 142 *****************************************************************************/ |
177 | 143 |
178 .content h1, | 144 .content h1, |
| 145 .content .h1, |
179 .content h2, | 146 .content h2, |
180 .content h3, | 147 .content h3, |
181 .content h4, | 148 .content h4, |
182 .content h5 | 149 .content h5 |
183 { | 150 { |
184 font-weight: bold; | 151 font-weight: bold; |
185 margin: 32px 0 16px 0; | 152 margin: 32px 0 16px 0; |
186 margin: 2rem 0 1rem 0; | 153 margin: 2rem 0 1rem 0; |
| 154 line-height: 1.4; |
187 } | 155 } |
188 | 156 |
189 .content h1 { font-size: 1.8em; } | 157 .content h1, |
190 .content h2 { font-size: 1.4em; } | 158 .content .h1 { font-size: 1.4em; } |
191 .content h3 { font-size: 1.3em; } | 159 .content h2 { font-size: 1.3em; } |
192 .content h4 { font-size: 1.2em; } | 160 .content h3 { font-size: 1.2em; } |
193 .content h5 { font-size: 1.1em; } | 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 } |
194 | 173 |
195 @media(min-width: 768px) | 174 @media(min-width: 768px) |
196 { | 175 { |
197 .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 |
198 .content h2 { font-size: 1.6em; } | 183 .content h2 { font-size: 1.6em; } |
199 } | 184 } |
200 | 185 |
201 .content a, | 186 .content a, |
202 .content a:visited | 187 .content a:visited |
203 { | 188 { |
204 color: #c70d2c; | 189 color: #c70d2c; |
205 } | 190 } |
206 | 191 |
207 /* Buttons | 192 /* Buttons |
(...skipping 18 matching lines...) Expand all Loading... |
226 { | 211 { |
227 .button | 212 .button |
228 { | 213 { |
229 display: block; | 214 display: block; |
230 width: 100%; | 215 width: 100%; |
231 } | 216 } |
232 } | 217 } |
233 | 218 |
234 .button.primary | 219 .button.primary |
235 { | 220 { |
236 color: #fff; | 221 color: #fff !important; |
237 background-color: #c70d2c; | 222 background-color: #c70d2c !important; |
238 box-shadow: 0px 2px 5px #95989A; | 223 box-shadow: 0px 2px 5px #95989A; |
239 } | 224 } |
240 | 225 |
241 .button.primary:hover | 226 .button.primary:hover |
242 { | 227 { |
243 background-color: #E00F32; | 228 background-color: #E00F32 !important; |
244 } | 229 } |
245 | 230 |
246 .button.primary:active | 231 .button.primary:active |
247 { | 232 { |
248 background-color: #AD102A; | 233 background-color: #AD102A !important; |
249 } | 234 } |
250 | 235 |
251 .button.accent, | 236 .button.accent, |
252 .button.accent:visited | 237 .button.accent:visited |
253 { | 238 { |
254 background: #077CA6; | 239 background: #077CA6 !important; |
255 color: #fff; | 240 color: #fff !important; |
256 margin-left: 2px; | 241 margin-left: 2px; |
257 margin-right: 2px; | 242 margin-right: 2px; |
258 } | 243 } |
259 | 244 |
260 .button.accent:hover, | 245 .button.accent:hover, |
261 .button.accent:active, | 246 .button.accent:active, |
262 .button.accent:focus | 247 .button.accent:focus |
263 { | 248 { |
264 box-shadow: inset 0 0 0 3px #005D80; | 249 box-shadow: inset 0 0 0 3px #005D80; |
265 } | 250 } |
266 | 251 |
267 /******************************************************************************* | 252 /******************************************************************************* |
268 * .fg-* utilities | 253 * .fg-* utilities |
269 ******************************************************************************/ | 254 ******************************************************************************/ |
270 | 255 |
271 .fg-accent | 256 .fg-accent |
272 { | 257 { |
273 color: #077CA6; | 258 color: #077CA6; |
274 } | 259 } |
275 | 260 |
| 261 .bg-secondary |
| 262 { |
| 263 color: #000; |
| 264 background-color: #F4F4F4; |
| 265 } |
| 266 |
276 /******************************************************************************* | 267 /******************************************************************************* |
277 * #navbar | 268 * #navbar |
278 ******************************************************************************/ | 269 ******************************************************************************/ |
279 | 270 |
280 #navbar | 271 #navbar |
281 { | 272 { |
282 min-height: 4em; | 273 min-height: 4em; |
283 background-color: #c70d2c; | 274 background-color: #c70d2c; |
284 position: fixed; | 275 position: fixed; |
285 z-index: 2; | 276 z-index: 2; |
(...skipping 530 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
816 | 807 |
817 .hide-disclaimer .video-play | 808 .hide-disclaimer .video-play |
818 { | 809 { |
819 margin-top: -40px; | 810 margin-top: -40px; |
820 } | 811 } |
821 | 812 |
822 .hide | 813 .hide |
823 { | 814 { |
824 display: none; | 815 display: none; |
825 } | 816 } |
| 817 |
| 818 /****************************************************************************** |
| 819 * .item-group |
| 820 *****************************************************************************/ |
| 821 |
| 822 .item-group |
| 823 { |
| 824 text-align: center; |
| 825 padding-top: 3em; |
| 826 padding-bottom: 3em; |
| 827 } |
| 828 |
| 829 .item-group img |
| 830 { |
| 831 height: 5em; |
| 832 width: auto; |
| 833 } |
| 834 |
| 835 .item-group h2 |
| 836 { |
| 837 text-transform: uppercase; |
| 838 } |
| 839 |
| 840 @media (max-width: 575px) |
| 841 { |
| 842 .item-group .column |
| 843 { |
| 844 margin-bottom: 3em; |
| 845 } |
| 846 |
| 847 .item-group .column:last-of-type |
| 848 { |
| 849 margin-bottom: 0; |
| 850 } |
| 851 } |
| 852 |
| 853 @media (min-width: 576px) and (max-width: 1023px) |
| 854 { |
| 855 .item-group |
| 856 { |
| 857 text-align: left; |
| 858 } |
| 859 |
| 860 [dir="rtl"] .item-group |
| 861 { |
| 862 text-align: right; |
| 863 } |
| 864 |
| 865 .item-group .column |
| 866 { |
| 867 position: relative; |
| 868 width: auto; |
| 869 padding: 0 3em 2em 10.5em; |
| 870 min-height: 7em; /* Height of image plus 2em bottom padding */ |
| 871 } |
| 872 |
| 873 [dir="rtl"] .item-group .column |
| 874 { |
| 875 padding: 0 10.5em 2em 3em; |
| 876 } |
| 877 |
| 878 .item-group .column:last-of-type |
| 879 { |
| 880 padding-bottom: 0; |
| 881 min-height: 6em; /* Height of image */ |
| 882 } |
| 883 |
| 884 .item-group img |
| 885 { |
| 886 position: absolute; |
| 887 left: 3em; |
| 888 top: 0.5em; |
| 889 } |
| 890 |
| 891 [dir="rtl"] .item-group img |
| 892 { |
| 893 left: auto; |
| 894 right: 3em; |
| 895 } |
| 896 |
| 897 .item-group h2 |
| 898 { |
| 899 margin: 0; |
| 900 } |
| 901 } |
| 902 |
| 903 /* Horizontal List |
| 904 ******************************************************************************/ |
| 905 |
| 906 .horizontal-list |
| 907 { |
| 908 display: inline; |
| 909 list-style: none; |
| 910 } |
| 911 |
| 912 .horizontal-list, |
| 913 .content .horizontal-list |
| 914 { |
| 915 padding: 0; |
| 916 } |
| 917 |
| 918 .horizontal-list li |
| 919 { |
| 920 display: inline; |
| 921 list-style: none; |
| 922 } |
| 923 |
| 924 /* Download button |
| 925 ******************************************************************************/ |
| 926 |
| 927 .content .tos-short |
| 928 { |
| 929 margin-bottom: 0.5em; |
| 930 } |
| 931 |
| 932 .content .install-button |
| 933 { |
| 934 display: inline-block; |
| 935 min-width: 250px; |
| 936 /* stretch full-width <= small tablets */ |
| 937 width: 100%; |
| 938 /* 0.2em taller than normal buttons */ |
| 939 padding-top: 0.8em; |
| 940 padding-bottom: 0.8em; |
| 941 color: #fff; |
| 942 background-color: #3D9C4F; |
| 943 } |
| 944 |
| 945 .content .install-button:hover, |
| 946 .content .install-button:focus |
| 947 { |
| 948 background-color: #258333; |
| 949 } |
| 950 |
| 951 @media (min-width: 576px) |
| 952 { |
| 953 .content .install-button |
| 954 { |
| 955 /* force auto-width >= small tablets */ |
| 956 width: auto; |
| 957 } |
| 958 } |
| 959 |
| 960 .content .download-alt |
| 961 { |
| 962 font-size: smaller; |
| 963 } |
OLD | NEW |