| OLD | NEW |
| 1 /****************************************************************************** | 1 /****************************************************************************** |
| 2 * Temparary styles | 2 * Temparary styles |
| 3 *****************************************************************************/ | 3 *****************************************************************************/ |
| 4 | 4 |
| 5 .avoid-wrap {display: inline-block;} | 5 .avoid-wrap {display: inline-block;} |
| 6 .small {font-size: smaller;} | 6 .small {font-size: smaller;} |
| 7 .maxthon-only {display: none;} | 7 .maxthon-only {display: none;} |
| 8 .maxthon .maxthon-only {display: block;} | 8 .maxthon .maxthon-only {display: block;} |
| 9 | 9 |
| 10 #content, | 10 #content, |
| (...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 66 #hero-download-video | 66 #hero-download-video |
| 67 { | 67 { |
| 68 display: block; | 68 display: block; |
| 69 } | 69 } |
| 70 } | 70 } |
| 71 | 71 |
| 72 /****************************************************************************** | 72 /****************************************************************************** |
| 73 * #media | 73 * #media |
| 74 *****************************************************************************/ | 74 *****************************************************************************/ |
| 75 | 75 |
| 76 #media-section { clear: both; } | 76 #media-section |
| 77 | |
| 78 #media-header h2, | |
| 79 #media-list | |
| 80 { | 77 { |
| 81 margin: 0; | 78 clear: both; |
| 79 text-align: center; |
| 82 } | 80 } |
| 83 | 81 |
| 84 #media-header | 82 #media-header |
| 85 { | 83 { |
| 86 margin-bottom: 2em; | 84 margin-bottom: 1em; |
| 87 } | 85 } |
| 88 | 86 |
| 89 #media-header h2 | 87 #media-header h2 |
| 90 { | 88 { |
| 91 font-size: 1em; | 89 font-size: 1em; |
| 92 font-weight: normal; | 90 font-weight: normal; |
| 93 text-transform: uppercase; | 91 text-transform: uppercase; |
| 94 } | 92 } |
| 95 | 93 |
| 94 #media-header h2, |
| 95 #media-list |
| 96 { |
| 97 margin: 0; |
| 98 } |
| 99 |
| 96 #media-list li | 100 #media-list li |
| 97 { | 101 { |
| 98 display: inline-block; | 102 display: inline-block; |
| 99 } | 103 } |
| 100 | 104 |
| 101 #media-list img | 105 #media-list img |
| 102 { | 106 { |
| 103 max-width: 10em; | 107 max-width: 10em; |
| 104 max-height: 3em; | 108 max-height: 3em; |
| 105 margin: 0 1em 1em; | 109 margin: 0 1em 1em; |
| (...skipping 24 matching lines...) Expand all Loading... |
| 130 border-radius: 50%; | 134 border-radius: 50%; |
| 131 background-color: #000; | 135 background-color: #000; |
| 132 background-image: url(../img/external-icon.png); | 136 background-image: url(../img/external-icon.png); |
| 133 background-image: linear-gradient(transparent, transparent), | 137 background-image: linear-gradient(transparent, transparent), |
| 134 url(../img/external-icon.svg); | 138 url(../img/external-icon.svg); |
| 135 background-repeat: no-repeat; | 139 background-repeat: no-repeat; |
| 136 background-position: center; | 140 background-position: center; |
| 137 background-size: 1em; | 141 background-size: 1em; |
| 138 } | 142 } |
| 139 | 143 |
| 140 @media (min-width: 992px) | 144 @media (min-width: 1024px) |
| 141 { | 145 { |
| 146 #media |
| 147 { |
| 148 display: table; |
| 149 width: 100%; |
| 150 } |
| 151 |
| 152 #media-header, |
| 153 #media-list |
| 154 { |
| 155 display: table-cell; |
| 156 vertical-align: middle; |
| 157 width: auto; |
| 158 } |
| 159 |
| 160 #media-header |
| 161 { |
| 162 margin-bottom: 0; |
| 163 } |
| 164 |
| 142 #media-header small | 165 #media-header small |
| 143 { | 166 { |
| 144 display: none; | 167 display: none; |
| 145 } | 168 } |
| 146 | 169 |
| 170 #media-list { direction: rtl; } |
| 171 [dir="rtl"] #media-list { direction: ltr; } |
| 172 |
| 173 @supports (display: flex) |
| 174 { |
| 175 #media-list |
| 176 { |
| 177 display: flex; |
| 178 justify-content: space-between; |
| 179 align-items: center; |
| 180 } |
| 181 } |
| 182 |
| 147 #media-list | 183 #media-list |
| 148 { | 184 { |
| 149 display: table; | 185 display: table; |
| 150 width: 100%; | 186 width: 100%; |
| 151 } | 187 } |
| 152 | 188 |
| 153 #media-list li | 189 #media-list li |
| 154 { | 190 { |
| 155 display: table-cell; | 191 display: table-cell; |
| 156 vertical-align: middle; | 192 vertical-align: middle; |
| 157 } | 193 } |
| 158 | 194 |
| 159 #media-list img | 195 #media-list img |
| 160 { | 196 { |
| 161 margin: 0 2em; | 197 margin: 0 2em; |
| 162 } | 198 } |
| 163 } | 199 } |
| 164 | 200 |
| 165 @media (min-width: 768px) | |
| 166 { | |
| 167 #media { | |
| 168 display: table; | |
| 169 width: 100%; | |
| 170 } | |
| 171 | |
| 172 #media-header, | |
| 173 #media-list | |
| 174 { | |
| 175 display: table-cell; | |
| 176 vertical-align: middle; | |
| 177 width: auto; | |
| 178 } | |
| 179 | |
| 180 #media-header | |
| 181 { | |
| 182 margin-bottom: 0; | |
| 183 } | |
| 184 | |
| 185 #media-list { direction: rtl; } | |
| 186 [dir="rtl"] #media-list { direction: ltr; } | |
| 187 | |
| 188 @supports (display: flex) | |
| 189 { | |
| 190 #media-list | |
| 191 { | |
| 192 display: flex; | |
| 193 justify-content: space-between; | |
| 194 align-items: center; | |
| 195 } | |
| 196 } | |
| 197 | |
| 198 } | |
| 199 | |
| 200 /****************************************************************************** | 201 /****************************************************************************** |
| 201 * #abb-notification | 202 * #abb-notification |
| 202 *****************************************************************************/ | 203 *****************************************************************************/ |
| 203 | 204 |
| 204 #abb-notification h2, | 205 #abb-notification h2, |
| 205 #abb-notification h3 | 206 #abb-notification h3 |
| 206 { | 207 { |
| 207 text-transform: uppercase; | 208 text-transform: uppercase; |
| 208 } | 209 } |
| 209 | 210 |
| (...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 262 padding: 0px 30px; | 263 padding: 0px 30px; |
| 263 } | 264 } |
| 264 | 265 |
| 265 @media(max-width: 767px) | 266 @media(max-width: 767px) |
| 266 { | 267 { |
| 267 #footnote | 268 #footnote |
| 268 { | 269 { |
| 269 padding: 0px 20px; | 270 padding: 0px 20px; |
| 270 } | 271 } |
| 271 } | 272 } |
| OLD | NEW |