Commit | Line | Data |
---|---|---|
7baaea38 JS |
1 | /* @font-face */ |
2 | ||
3 | @font-face { | |
4 | font-family: 'Lato'; | |
5 | font-style: normal; | |
6 | font-weight: 700; | |
ab613cb3 | 7 | src: local('Lato Bold'), local('Lato-Bold'), url('../fonts/Lato-Bold.ttf') format('truetype'); |
7baaea38 JS |
8 | } |
9 | @font-face { | |
10 | font-family: 'Lato'; | |
11 | font-style: italic; | |
12 | font-weight: 400; | |
ab613cb3 | 13 | src: local('Lato Italic'), local('Lato-Italic'), url('../fonts/Lato-Italic.ttf') format('truetype'); |
7baaea38 JS |
14 | } |
15 | @font-face { | |
16 | font-family: 'Lato'; | |
17 | font-style: italic; | |
18 | font-weight: 700; | |
ab613cb3 | 19 | src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('../fonts/Lato-BoldItalic.ttf') format('truetype'); |
7baaea38 JS |
20 | } |
21 | @font-face { | |
22 | font-family: 'Lato'; | |
23 | font-style: normal; | |
24 | font-weight: 400; | |
cfb7ed7d | 25 | src: local('Lato Regular'), local('Lato-Regular'), url('../fonts/Lato-Regular.ttf') format('truetype'); |
7baaea38 JS |
26 | } |
27 | ||
881b6e2c | 28 | body { |
2d65b473 | 29 | background-color: #161616; |
f5782fac | 30 | color: #C3C3C3; |
e8be1d7a | 31 | padding: 0; |
7c9d1a2b CAW |
32 | margin: 0px; |
33 | height: 100%; | |
8c7701f9 | 34 | font: 16px 'Lato', 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; |
9f661642 JS |
35 | } |
36 | ||
37 | form { | |
7c9d1a2b CAW |
38 | margin: 0px; |
39 | padding: 0px; | |
881b6e2c JS |
40 | } |
41 | ||
cb1e4a3d JS |
42 | /* text styles */ |
43 | ||
62f2557c JS |
44 | h1,h2,h3,p { |
45 | margin-bottom: 20px; | |
46 | } | |
47 | ||
48 | h1,h2,h3 { | |
49 | font-weight: bold; | |
50 | } | |
51 | ||
3ea6a305 | 52 | h1 { |
7c9d1a2b CAW |
53 | margin-top: 15px; |
54 | color: #fff; | |
a97e5bb2 | 55 | font-size: 1.875em; |
881b6e2c JS |
56 | } |
57 | ||
3ea6a305 | 58 | h2 { |
f5782fac | 59 | font-size: 1.375em; |
7c9d1a2b CAW |
60 | margin-top: 20px; |
61 | color: #fff; | |
06a5f21e JS |
62 | } |
63 | ||
3ea6a305 | 64 | h3 { |
9ecf7cd1 | 65 | border-bottom: 1px solid #333; |
a97e5bb2 | 66 | font-size: 1.125em; |
38f71d47 JS |
67 | } |
68 | ||
3ea6a305 JS |
69 | p { |
70 | margin-top: 0px; | |
71 | } | |
72 | ||
881b6e2c | 73 | a { |
9ecf7cd1 | 74 | color: #86D4B1; |
881b6e2c JS |
75 | } |
76 | ||
996b3bf7 JS |
77 | a.highlight { |
78 | color: #fff; | |
79 | } | |
80 | ||
937c7ea5 JS |
81 | em { |
82 | font-style: italic; | |
83 | } | |
84 | ||
85 | strong { | |
86 | font-weight: bold; | |
87 | } | |
88 | ||
89 | ul { | |
90 | list-style: disc inside; | |
91 | } | |
92 | ||
93 | ol { | |
94 | list-style: decimal inside; | |
95 | } | |
96 | ||
983aa712 JS |
97 | label { |
98 | font-weight: normal; | |
99 | } | |
100 | ||
03b058b7 | 101 | input, textarea { |
4826f626 JS |
102 | font-size:1em; |
103 | font-family:'Lato', sans-serif; | |
104 | } | |
105 | ||
983aa712 JS |
106 | /* website structure */ |
107 | ||
7945cd21 | 108 | .container { |
7df9f45c JS |
109 | margin: auto; |
110 | width: 96%; | |
141f14e2 | 111 | max-width: 940px; |
9f661642 JS |
112 | } |
113 | ||
7945cd21 | 114 | header { |
d317d9d6 JS |
115 | width: 100%; |
116 | padding: 0; | |
c5a9ecf2 | 117 | margin-bottom: 42px; |
d317d9d6 | 118 | background-color: #303030; |
d317d9d6 | 119 | border-bottom: 1px solid #252525; |
9ecf7cd1 JS |
120 | } |
121 | ||
7945cd21 | 122 | .header_right { |
d317d9d6 | 123 | margin: 8px; |
d297d8e8 JS |
124 | display: inline-block; |
125 | float: right; | |
126 | } | |
127 | ||
128 | .header_right ul { | |
129 | display: none; | |
130 | position: absolute; | |
131 | top: 42px; | |
132 | right: 0px; | |
133 | background: #252525; | |
134 | padding: 20px; | |
135 | } | |
136 | ||
137 | .header_right li { | |
138 | list-style: none; | |
139 | } | |
140 | ||
7945cd21 | 141 | a.logo { |
a97e5bb2 JS |
142 | color: #fff; |
143 | font-weight: bold; | |
881b6e2c JS |
144 | } |
145 | ||
7945cd21 | 146 | .logo img { |
3ea6a305 | 147 | vertical-align: middle; |
30a89a57 | 148 | margin: 6px 8px; |
3ea6a305 JS |
149 | } |
150 | ||
1bb8eb89 | 151 | .mediagoblin_content { |
426808cc | 152 | width: 100%; |
1bb8eb89 JS |
153 | padding-bottom: 74px; |
154 | } | |
155 | ||
7945cd21 | 156 | footer { |
426808cc | 157 | width: 100%; |
7c9d1a2b | 158 | height: 30px; |
9ecf7cd1 | 159 | border-top: 1px solid #333; |
7c9d1a2b | 160 | bottom: 0px; |
afcb0855 | 161 | padding: 8px 0; |
7c9d1a2b | 162 | text-align: center; |
f51b65d5 | 163 | font-size: 0.875em; |
42a7c010 | 164 | clear: both; |
9f661642 JS |
165 | } |
166 | ||
42a7c010 | 167 | .media_pane { |
141f14e2 | 168 | width: 640px; |
42a7c010 JS |
169 | margin-left: 0px; |
170 | margin-right: 10px; | |
171 | float: left; | |
9f661642 | 172 | } |
fb1dc4f5 | 173 | |
42a7c010 | 174 | .media_sidebar { |
141f14e2 | 175 | width: 280px; |
630dd794 | 176 | margin-left: 10px; |
42a7c010 JS |
177 | float: left; |
178 | } | |
38aa4a40 | 179 | |
3ea6a305 JS |
180 | .profile_sidebar { |
181 | width: 340px; | |
182 | margin-right: 10px; | |
183 | float: left; | |
184 | } | |
185 | ||
186 | .profile_showcase { | |
187 | width: 580px; | |
188 | margin-left: 10px; | |
189 | float: left; | |
38aa4a40 JS |
190 | } |
191 | ||
69dadf42 JS |
192 | /* common website elements */ |
193 | ||
f4cbe074 | 194 | .button_action, .button_action_highlight, .button_form { |
bb3b9e40 | 195 | display: inline-block; |
13423daa JS |
196 | color: #c3c3c3; |
197 | background-color: #363636; | |
198 | border: 1px solid; | |
199 | border-color: #464646 #2B2B2B #252525; | |
200 | border-radius: 4px; | |
13423daa | 201 | padding: 3px 8px; |
bb3b9e40 | 202 | font-size: 16px; |
13423daa JS |
203 | text-decoration: none; |
204 | font-style: normal; | |
205 | font-weight: bold; | |
75a12d63 | 206 | cursor: pointer; |
13423daa JS |
207 | } |
208 | ||
f4cbe074 | 209 | .button_action_highlight, .button_form { |
88f20b58 JS |
210 | background-color: #86D4B1; |
211 | border-color: #A2DEC3 #6CAA8E #5C9179; | |
212 | color: #283F35; | |
13423daa JS |
213 | } |
214 | ||
b6a68691 | 215 | .button_form { |
7c9d1a2b | 216 | min-width: 99px; |
7c9d1a2b | 217 | margin: 10px 0px 10px 15px; |
7c9d1a2b | 218 | text-align: center; |
ce5db609 | 219 | font-family: 'Lato', sans-serif; |
677f55cc CAW |
220 | } |
221 | ||
be5be115 AW |
222 | .button_collect { |
223 | background-image: url("../images/icon_collect.png"); | |
224 | background-repeat: no-repeat; | |
225 | background-position:top center; | |
226 | height: 30px; | |
227 | width: 30px; | |
228 | margin: 0px; | |
229 | padding: 3px 3px 2px 3px; | |
230 | position: relative; | |
231 | } | |
232 | ||
75a12d63 | 233 | .pagination { |
7c9d1a2b | 234 | text-align: center; |
bf332e82 JS |
235 | } |
236 | ||
75a12d63 | 237 | .pagination_arrow { |
7c9d1a2b | 238 | margin: 5px; |
0a45fa59 JS |
239 | } |
240 | ||
75a12d63 | 241 | .empty_space { |
5bd523eb | 242 | background-image: url("../images/empty_back.png"); |
1d03221d JS |
243 | font-style: italic; |
244 | text-align: center; | |
245 | height: 160px; | |
246 | padding-top: 70px; | |
247 | } | |
248 | ||
75a12d63 JS |
249 | .right_align { |
250 | float: right; | |
251 | } | |
252 | ||
3ea6a305 JS |
253 | .clear { |
254 | clear: both; | |
255 | display: block; | |
256 | overflow: hidden; | |
257 | visibility: hidden; | |
258 | width: 0; | |
259 | height: 0; | |
75a12d63 JS |
260 | } |
261 | ||
fd79d33a SS |
262 | .hidden { |
263 | display: none; | |
264 | } | |
265 | ||
4c417c59 | 266 | .media_sidebar h3 { |
ee9a0e3c | 267 | font-size: 1em; |
4c417c59 JS |
268 | margin: 0 0 5px; |
269 | border: none; | |
270 | } | |
271 | ||
272 | .media_sidebar p { | |
339105fa | 273 | margin-left: 8px; |
ee9a0e3c JS |
274 | } |
275 | ||
491b9109 JS |
276 | /* forms */ |
277 | ||
3ea6a305 | 278 | .form_box,.form_box_xl { |
7c9d1a2b | 279 | background-color: #222; |
00996b92 | 280 | border-top: 6px solid #D49086; |
7df9f45c | 281 | padding: 3% 5%; |
7c9d1a2b CAW |
282 | display: block; |
283 | float: none; | |
7df9f45c JS |
284 | width: 90%; |
285 | max-width: 340px; | |
286 | margin-left: auto; | |
287 | margin-right: auto; | |
f0e621c8 JS |
288 | } |
289 | ||
3ea6a305 | 290 | .form_box_xl { |
7df9f45c | 291 | max-width: 460px; |
f0e621c8 JS |
292 | } |
293 | ||
bb1f2f89 | 294 | .edit_box { |
00996b92 | 295 | border-top: 6px dashed #D49086 |
bb1f2f89 JS |
296 | } |
297 | ||
353f927e | 298 | .form_field_input input, .form_field_input textarea { |
7c9d1a2b | 299 | width: 100%; |
491b9109 JS |
300 | } |
301 | ||
aea6d577 JS |
302 | .form_field_input { |
303 | margin-bottom: 10px; | |
304 | } | |
305 | ||
306 | .form_field_label { | |
7c9d1a2b | 307 | margin-bottom: 4px; |
491b9109 JS |
308 | } |
309 | ||
feb3c4c3 JS |
310 | .form_field_label { |
311 | font-size:1.125em; | |
312 | } | |
313 | ||
314 | .form_field_description { | |
315 | font-style: italic; | |
316 | } | |
317 | ||
716a0ac3 | 318 | .form_field_error { |
7c9d1a2b CAW |
319 | background-color: #87453b; |
320 | color: #fff; | |
321 | border: none; | |
7c9d1a2b CAW |
322 | padding: 9px; |
323 | margin-top: 8px; | |
324 | margin-bottom: 8px; | |
491b9109 | 325 | } |
37a00748 | 326 | |
69dadf42 | 327 | .form_submit_buttons { |
7c9d1a2b | 328 | text-align: right; |
69dadf42 JS |
329 | } |
330 | ||
be5be115 AW |
331 | .subform { |
332 | margin: 2em; | |
333 | } | |
334 | ||
dab1d702 JS |
335 | #password_boolean { |
336 | margin-top: 4px; | |
337 | width: 20px; | |
338 | } | |
339 | ||
f5d837fe | 340 | textarea#description, textarea#bio { |
7fc782bb | 341 | resize: vertical; |
47ab857f | 342 | height: 100px; |
7fc782bb JS |
343 | } |
344 | ||
270dca58 JS |
345 | /* comments */ |
346 | ||
e4898f43 JS |
347 | .comment_wrapper { |
348 | margin-top: 20px; | |
349 | margin-bottom: 20px; | |
350 | } | |
351 | ||
352 | .comment_wrapper p { | |
353 | margin-bottom: 2px; | |
354 | } | |
355 | ||
270dca58 | 356 | .comment_author { |
7c9d1a2b | 357 | padding-top: 4px; |
a97e5bb2 | 358 | font-size: 0.9em; |
270dca58 JS |
359 | } |
360 | ||
157c6026 | 361 | .comment_content { |
55dbaa9b JS |
362 | margin-left: 8px; |
363 | margin-top: 8px; | |
364 | } | |
365 | ||
3ea6a305 | 366 | textarea#comment_content { |
ee9a0e3c JS |
367 | resize: vertical; |
368 | width: 100%; | |
3ea6a305 JS |
369 | height: 90px; |
370 | border: none; | |
371 | background-color: #f1f1f1; | |
372 | padding: 3px; | |
373 | } | |
374 | ||
ee9a0e3c JS |
375 | #form_comment .form_field_input { |
376 | padding-right: 6px; | |
377 | } | |
378 | ||
a54e5be7 JS |
379 | /* media galleries */ |
380 | ||
e854a128 | 381 | .media_thumbnail { |
b01a3b93 | 382 | float: left; |
7c9d1a2b | 383 | padding: 0px; |
52aef5b4 JS |
384 | width: 180px; |
385 | height: 156px; | |
7c9d1a2b | 386 | overflow: hidden; |
52aef5b4 | 387 | margin: 0px 4px 10px; |
92ed2892 | 388 | text-align: center; |
970cea18 | 389 | font-size: 0.875em; |
fcc0f4e8 JS |
390 | background-color: #222; |
391 | border-radius: 0 0 5px 5px; | |
392 | padding: 0 0 6px; | |
65a2eb66 JW |
393 | text-overflow: ellipsis; |
394 | white-space: nowrap; | |
395 | overflow: hidden; | |
92ed2892 CAW |
396 | } |
397 | ||
ec451724 CAW |
398 | .media_thumbnail a { |
399 | color: #eee; | |
400 | text-decoration: none; | |
1c66750a JS |
401 | display: block; |
402 | } | |
403 | ||
404 | a.thumb_entry_title { | |
405 | padding: 8px; | |
ec451724 CAW |
406 | } |
407 | ||
c4370069 | 408 | .media_thumbnail img { |
52aef5b4 | 409 | max-height: 135px; |
c4370069 JS |
410 | } |
411 | ||
42d4763c JS |
412 | .thumb_entry_last { |
413 | margin-right: 0px; | |
414 | } | |
415 | ||
be5be115 AW |
416 | /* collection media */ |
417 | ||
418 | .collection_thumbnail { | |
419 | float: left; | |
420 | padding: 0px; | |
421 | width: 180px; | |
422 | margin: 0px 4px 10px; | |
423 | text-align: left; | |
424 | font-size: 0.875em; | |
425 | background-color: #222; | |
426 | border-radius: 0 0 5px 5px; | |
427 | padding: 0 0 6px; | |
428 | text-overflow: ellipsis; | |
429 | } | |
430 | ||
431 | .collection_thumbnail a { | |
432 | color: #eee; | |
433 | text-decoration: none; | |
434 | } | |
435 | ||
436 | .collection_thumbnail a.remove { | |
437 | color: #86D4B1; | |
438 | } | |
439 | ||
440 | .collection_thumbnail img { | |
441 | max-height: 135px; | |
442 | } | |
443 | ||
92ed2892 CAW |
444 | /* media detail */ |
445 | ||
b2706737 | 446 | h2.media_title { |
a97e5bb2 | 447 | margin-bottom: 0px; |
ee9a0e3c JS |
448 | display: inline-block; |
449 | } | |
450 | ||
451 | p.context { | |
452 | display: inline-block; | |
453 | padding-top: 4px; | |
fb1dc4f5 JS |
454 | } |
455 | ||
b2706737 | 456 | p.media_specs { |
a97e5bb2 | 457 | font-size: 0.9em; |
b2706737 | 458 | border-top: 1px solid #222; |
b2706737 JS |
459 | padding: 10px 0px; |
460 | color: #888; | |
9ecf7cd1 JS |
461 | } |
462 | ||
6c191eb3 | 463 | .no_html5 { |
36f8e350 JS |
464 | background: black; |
465 | color: white; | |
466 | text-align: center; | |
467 | height: 160px; | |
468 | padding: 130px 10px 20px 10px; | |
469 | } | |
470 | ||
8567c047 | 471 | a img.media_image { |
36f8e350 JS |
472 | cursor: -webkit-zoom-in; |
473 | cursor: -moz-zoom-in; | |
474 | cursor: zoom-in; | |
6c191eb3 KR |
475 | } |
476 | ||
6ef36a15 JS |
477 | /* icons */ |
478 | ||
b2706737 | 479 | img.media_icon { |
7c9d1a2b CAW |
480 | margin: 0 4px; |
481 | vertical-align: sub; | |
6ef36a15 | 482 | } |
8dc43810 JS |
483 | |
484 | /* navigation */ | |
485 | ||
ee9a0e3c JS |
486 | .navigation { |
487 | float: right; | |
488 | } | |
489 | ||
b2706737 | 490 | .navigation_button { |
80c9a7ee | 491 | width: 135px; |
ee9a0e3c | 492 | display: inline-block; |
7c9d1a2b | 493 | text-align: center; |
80c9a7ee JS |
494 | background-color: #1d1d1d; |
495 | border: 1px solid; | |
496 | border-color: #2c2c2c #232323 #1a1a1a; | |
909dda1f | 497 | border-radius: 4px; |
7c9d1a2b | 498 | text-decoration: none; |
ee9a0e3c JS |
499 | padding: 4px 0 8px; |
500 | margin: 0 0 6px; | |
8dc43810 JS |
501 | } |
502 | ||
b2706737 | 503 | .navigation_left { |
80c9a7ee | 504 | margin-right: 6px; |
8dc43810 | 505 | } |
62e2f458 JS |
506 | |
507 | /* messages */ | |
508 | ||
509 | ul.mediagoblin_messages { | |
7c9d1a2b CAW |
510 | list-style: none inside; |
511 | color: #f7f7f7; | |
3ea6a305 | 512 | padding: 0; |
62e2f458 JS |
513 | } |
514 | ||
515 | .mediagoblin_messages li { | |
7c9d1a2b CAW |
516 | margin: 5px 0; |
517 | padding: 8px; | |
518 | text-align: center; | |
62e2f458 JS |
519 | } |
520 | ||
521 | .message_success { | |
522 | background-color: #378566; | |
523 | } | |
524 | ||
525 | .message_warning { | |
526 | background-color: #87453b; | |
527 | } | |
528 | ||
529 | .message_error { | |
530 | background-color: #87453b; | |
531 | } | |
532 | ||
533 | .message_info { | |
534 | background-color: #378566; | |
b51c5741 | 535 | } |
62e2f458 JS |
536 | |
537 | .message_debug { | |
538 | background-color: #f7f7f7; | |
7c9d1a2b | 539 | color: #272727; |
62e2f458 | 540 | } |
5d900647 CAW |
541 | |
542 | ul.mediaentry_tags { | |
543 | list-style-type: none; | |
544 | } | |
545 | ||
546 | ul.mediaentry_tags li { | |
547 | display: inline; | |
548 | margin: 0px 5px 0px 0px; | |
549 | padding: 0px; | |
550 | } | |
01c75c7e CAW |
551 | |
552 | ||
553 | /* media processing panel */ | |
554 | ||
555 | table.media_panel { | |
556 | width: 100%; | |
557 | } | |
558 | ||
559 | table.media_panel th { | |
560 | font-weight: bold; | |
561 | padding-bottom: 4px; | |
58335110 | 562 | } |
e8b51792 CAW |
563 | |
564 | ||
565 | /* Delete panel */ | |
566 | ||
567 | .delete_checkbox_box { | |
568 | margin-top: 10px; | |
569 | margin-left: 10px; | |
ab613cb3 | 570 | } |
a246ccca | 571 | |
cf29edcd | 572 | /* ASCII art and code */ |
a246ccca JW |
573 | |
574 | @font-face { | |
575 | font-family: Inconsolata; | |
576 | src: local('Inconsolata'), url('../fonts/Inconsolata.otf') format('opentype') | |
577 | } | |
578 | ||
cf29edcd | 579 | pre, code { |
a246ccca JW |
580 | font-family: Inconsolata, monospace; |
581 | line-height: 1em; | |
7fc782bb | 582 | } |
173999a7 | 583 | |
cf29edcd JK |
584 | pre { |
585 | overflow: auto; | |
089508d0 | 586 | margin-bottom: 20px; |
cf29edcd JK |
587 | } |
588 | ||
589 | .comment_wrapper pre { | |
089508d0 | 590 | margin-bottom: 2px; |
cf29edcd JK |
591 | } |
592 | ||
593 | .ascii-wrapper pre { | |
594 | /* but it should not affect the ASCII art */ | |
595 | margin: 0; | |
596 | } | |
597 | ||
7646e695 | 598 | /* Media queries and other responsivisivity */ |
141f14e2 | 599 | @media screen and (max-width: 940px) { |
173999a7 JS |
600 | .media_pane { |
601 | width: 100%; | |
7646e695 | 602 | margin: 0px; |
173999a7 | 603 | } |
ee9a0e3c JS |
604 | |
605 | .media_sidebar { | |
606 | width: 100%; | |
607 | margin: 0px; | |
608 | } | |
609 | ||
173999a7 JS |
610 | img.media_image { |
611 | width: 100%; | |
23f87661 | 612 | display: inline; |
173999a7 | 613 | } |
7646e695 | 614 | |
6c2e5730 JS |
615 | .media_thumbnail { |
616 | width: 21%; | |
617 | } | |
618 | ||
7646e695 JS |
619 | .profile_sidebar { |
620 | width: 100%; | |
621 | margin: 0px; | |
622 | } | |
ee9a0e3c | 623 | |
7646e695 JS |
624 | .profile_showcase { |
625 | width: 100%; | |
626 | margin: 0px; | |
627 | } | |
ee9a0e3c JS |
628 | |
629 | .navigation { | |
630 | float: none; | |
631 | } | |
632 | ||
633 | .navigation_button { | |
634 | width: 49%; | |
635 | float: right; | |
636 | } | |
637 | ||
638 | .navigation_left { | |
639 | margin-right: 0; | |
640 | float: left; | |
641 | } | |
f2ca3ad6 JS |
642 | |
643 | .navigation { | |
644 | float: none; | |
645 | } | |
646 | ||
647 | .navigation_button { | |
648 | width: 49%; | |
92e8ca79 | 649 | float: right; |
3d44c01a | 650 | padding: 10px 0 14px; |
f2ca3ad6 JS |
651 | } |
652 | ||
653 | .navigation_left { | |
654 | margin-right: 0; | |
92e8ca79 | 655 | float: left; |
f2ca3ad6 | 656 | } |
f4cbe074 JS |
657 | |
658 | .button_action, .button_action_highlight, .button_form { | |
659 | padding: 9px 14px; | |
660 | } | |
2b7b7010 | 661 | |
d297d8e8 JS |
662 | header { |
663 | text-align: center; | |
664 | } | |
665 | ||
d317d9d6 JS |
666 | .header_right { |
667 | margin-right: 2%; | |
d297d8e8 | 668 | float: none; |
d317d9d6 JS |
669 | } |
670 | ||
671 | a.logo { | |
672 | margin-left: 2%; | |
2b7b7010 | 673 | } |
7646e695 | 674 | } |
6c2e5730 JS |
675 | |
676 | @media screen and (max-width: 570px) { | |
677 | .media_thumbnail { | |
678 | width: 29%; | |
679 | } | |
680 | } | |
681 | ||
682 | @media screen and (max-width: 380px) { | |
683 | .media_thumbnail { | |
684 | width: 46%; | |
685 | } | |
686 | } |