mediagoblin/static/css/base.css

   1 /* @font-face */
   2
   3 @font-face {
   4   font-family: 'Lato';
   5   font-style: normal;
   6   font-weight: 700;
   7   src: local('Lato Bold'), local('Lato-Bold'), url('../fonts/Lato-Bold.ttf') format('truetype');
   8 }
   9 @font-face {
  10   font-family: 'Lato';
  11   font-style: italic;
  12   font-weight: 400;
  13   src: local('Lato Italic'), local('Lato-Italic'), url('../fonts/Lato-Italic.ttf') format('truetype');
  14 }
  15 @font-face {
  16   font-family: 'Lato';
  17   font-style: italic;
  18   font-weight: 700;
  19   src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('../fonts/Lato-BoldItalic.ttf') format('truetype');
  20 }
  21 @font-face {
  22   font-family: 'Lato';
  23   font-style: normal;
  24   font-weight: 400;
  25   src: local('Lato Regular'), local('Lato-Regular'), url('../fonts/Lato-Regular.ttf') format('truetype');
  26 }
  27
  28 html, body {
  29   background-color: #161616;
  30   color: #C3C3C3;
  31   padding: 0;
  32   margin: 0px;
  33   height: 100%;
  34   font: 16px 'Lato', 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
  35 }
  36
  37 form {
  38   margin: 0px;
  39   padding: 0px;
  40 }
  41
  42 /* text styles */
  43
  44 h1,h2,h3,p {
  45   margin-bottom: 20px;
  46 }
  47
  48 h1,h2,h3 {
  49   font-weight: bold;
  50 }
  51
  52 h1 {
  53   margin-top: 15px;
  54   color: #fff;
  55   font-size: 1.875em;
  56 }
  57
  58 h2 {
  59   font-size: 1.375em;
  60   margin-top: 20px;
  61   color: #fff;
  62 }
  63
  64 h3 {
  65   border-bottom: 1px solid #333;
  66   font-size: 1.125em;
  67 }
  68
  69 p {
  70   margin-top: 0px;
  71 }
  72
  73 a {
  74   color: #86D4B1;
  75 }
  76
  77 a:hover {
  78     text-decoration: underline
  79 }
  80
  81 a.highlight {
  82   color: #fff;
  83 }
  84
  85 .header_right a {
  86   text-decoration: none;
  87   color: #fff;
  88 }
  89
  90 em {
  91   font-style: italic;
  92 }
  93
  94 strong {
  95   font-weight: bold;
  96 }
  97
  98 ul {
  99   list-style: disc inside;
 100 }
 101
 102 ol {
 103   list-style: decimal inside;
 104 }
 105
 106 label {
 107   font-weight: normal;
 108 }
 109
 110 input, textarea {
 111   font-size:1em;
 112   font-family:'Lato', sans-serif;
 113 }
 114
 115 /* website structure */
 116
 117 #wrap {
 118   min-height: 100%;
 119   height: auto;
 120
 121   /* This must be equal to the footer height + 5px */
 122   margin-bottom: -35px;
 123 }
 124
 125 #wrap:after {
 126   content: "";
 127   display: block;
 128 }
 129
 130 footer, #wrap:after {
 131   height: 30px;
 132 }
 133
 134 header {
 135   width: 100%;
 136   padding: 0;
 137   margin-bottom: 42px;
 138   border-bottom: 1px solid #333;
 139 }
 140
 141 .header_left {
 142   width: 47%;
 143   margin: 0 0 0 8px;
 144   display: inline-block;
 145 }
 146
 147 .header_right {
 148   width: 47%;
 149   margin: 8px 8px 8px 0;
 150   display: inline-block;
 151   float: right;
 152   text-align: right;
 153   line-height: 1.6em;
 154 }
 155
 156 #header_dropdown {
 157   margin-bottom: 20px;
 158   padding: 0px 10px 0px 10px;
 159 }
 160
 161 #header_dropdown li {
 162   margin: 4px 0;
 163   list-style: none;
 164 }
 165
 166 #header_dropdown p {
 167   margin-top: 12px;
 168   margin-bottom: 10px;
 169 }
 170
 171 .dropdown_title {
 172   font-size: 20px;
 173 }
 174
 175 a.logo {
 176   color: #fff;
 177   font-weight: bold;
 178   text-decoration: none;
 179 }
 180
 181 .status_icon {
 182   border-radius: 2px;
 183   padding: 4px;
 184   margin: 0px 4px;
 185 }
 186
 187 .num_queued {
 188   background: #56446F;
 189 }
 190
 191 .num_failed {
 192   background: #87453B;
 193 }
 194
 195 .status_icon a {
 196   display: inline-block;
 197   color: #C3C3C3;
 198 }
 199
 200 .logo img {
 201   vertical-align: middle;
 202   margin: 8px 8px 6px 0;
 203 }
 204
 205 .welcomeimage {
 206   float: right;
 207 }
 208
 209 .fine_print {
 210   font-size: 0.8em;
 211 }
 212
 213 .mediagoblin_content {
 214   width: 100%;
 215   padding-bottom: 74px;
 216 }
 217
 218 footer {
 219   width: 100%;
 220   border-top: 1px solid #333;
 221   padding: 8px 0;
 222   text-align: center;
 223   font-size: 0.875em;
 224   clear: both;
 225 }
 226
 227 .thumb_gallery {
 228   margin-left: 10px;
 229   margin-right: 10px;
 230 }
 231
 232 .profile_showcase .thumb_gallery {
 233   margin-left: 0;
 234   margin-right: 0;
 235 }
 236
 237 .media_image_container {
 238 }
 239
 240 .media_image {
 241   display: block;
 242   margin-left: auto;
 243   margin-right: auto;
 244   max-width: 100%;
 245 }
 246
 247 .media_other_container {
 248   display: flex;
 249   justify-content: center;
 250 }
 251
 252 .media_pane {
 253 /* in place for possible future wide view */
 254 /*  border-bottom: 1px solid #333333;*/
 255 }
 256
 257 .media_sidebar {
 258 /* in place for possible future wide view */
 259 /*  border-left: 1px solid #333333;*/
 260 /*  padding-left: 1em;*/
 261 /*  padding-top: 1em;*/
 262 }
 263
 264 .media_comments {
 265   padding-top: 1em;
 266 }
 267
 268 /* common website elements */
 269
 270 .button_action, .button_action_highlight, .button_form {
 271   display: inline-block;
 272   color: #c3c3c3;
 273   background-color: #363636;
 274   border: 1px solid;
 275   border-color: #464646 #2B2B2B #252525;
 276   border-radius: 4px;
 277   padding: 3px 8px;
 278   font-size: 16px;
 279   text-decoration: none;
 280   font-style: normal;
 281   font-weight: bold;
 282   cursor: pointer;
 283 }
 284
 285 .button_action:hover, .button_form:hover {
 286     text-decoration: none;
 287     border-color: #252525 #2B2B2B #464646;
 288 }
 289
 290 .button_action_highlight, .button_form {
 291   background-color: #86D4B1;
 292   border-color: #A2DEC3 #6CAA8E #5C9179;
 293   color: #283F35;
 294 }
 295
 296 .button_action_highlight:hover {
 297     text-decoration: none;
 298     border-color: #5C9179 #6CAA8E #A2DEC3;
 299 }
 300
 301 .button_info {
 302   background-color: #508BB5;
 303   border-color: #5899C7 #437699 #427496;
 304   color: #C3C3C3;
 305 }
 306
 307 .button_warning {
 308   background-color: #8A2D2D;
 309   border-color: #913030 #451717 #431212;
 310   color: #C3C3C3;
 311 }
 312
 313 .button_form {
 314   min-width: 99px;
 315   margin: 10px 0px 10px 15px;
 316   text-align: center;
 317   font-family: 'Lato', sans-serif;
 318 }
 319
 320 .pagination {
 321 text-align: center;
 322 }
 323
 324 .pagination_arrow {
 325   margin: 5px;
 326 }
 327
 328 .empty_space {
 329   background-image: url("../images/empty_back.png");
 330   font-style: italic;
 331   text-align: center;
 332   height: 160px;
 333   padding-top: 70px;
 334 }
 335
 336 .no_background {
 337   background-image: none;
 338   height: 0;
 339   padding-top: 0;
 340   display: inline-block;
 341 }
 342
 343 .right_align {
 344   float: right;
 345 }
 346
 347 .left_align {
 348   float: right;
 349 }
 350
 351 .pull-right {
 352   float: right !important;
 353 }
 354 .pull-left {
 355   float: left !important;
 356 }
 357
 358 .clear {
 359   clear: both;
 360   display: block;
 361   overflow: hidden;
 362   visibility: hidden;
 363   width: 0;
 364   height: 0;
 365 }
 366
 367 .hidden {
 368   display: none;
 369 }
 370
 371 .media_sidebar h3 {
 372   font-size: 1em;
 373   margin: 0 0 5px;
 374   border: none;
 375 }
 376
 377 .media_sidebar p {
 378   margin-left: 8px;
 379 }
 380
 381 .alpha {
 382   margin-left:0;
 383 }
 384
 385 .omega {
 386   margin-right:0;
 387 }
 388
 389 .head {
 390   margin-top:0;
 391 }
 392
 393 .foot {
 394   margin-bottom:0;
 395 }
 396
 397 /* forms */
 398
 399 .form_box,.form_box_xl {
 400   background-color: #222;
 401   border-top: 6px solid #D49086;
 402   padding: 3% 5%;
 403   display: block;
 404   float: none;
 405   width: 90%;
 406   max-width: 340px;
 407   margin-left: auto;
 408   margin-right: auto;
 409 }
 410
 411 .form_box > h1, .form_box_xl > h1 {
 412   /* Fix header overflowing issue. */
 413   overflow: hidden;
 414   text-overflow: ellipsis
 415 }
 416
 417 .form_box_xl {
 418   max-width: 460px;
 419 }
 420
 421 .blog_form_box_xl  {
 422   background-color: #222;
 423   border-top: 6px solid #D49086;
 424   padding: 3% 5%;
 425   display: block;
 426   float: none;
 427   width: 90%;
 428   max-width: 800px;
 429   min-height: 500px;
 430   margin-left: auto;
 431   margin-right: auto;
 432 }
 433
 434 .b_listing_title {
 435   height: 30px;
 436   width: 100%;
 437   padding: 0px;
 438   background-color: #86D4B1;
 439   text-transform:capitalize;
 440   text-decoration: none;
 441   #border-radius: 4px;
 442 }
 443
 444 .b_listing_title > a {
 445   text-decoration: none;
 446 }
 447
 448 .b_list_owner {
 449   height: 100px;
 450   width: 100%;
 451   padding: 0em;
 452   margin-right: auto;
 453   background-color: #DDA0DD;
 454   #border-radius: 4px;
 455   text-transform: capitalize;
 456 }
 457
 458 .b_list_des {
 459   text-align:justify;
 460 }
 461
 462
 463 .edit_box {
 464   border-top: 6px dashed #D49086
 465 }
 466
 467 /*.form_field_input input,*/ .form_field_input textarea {
 468   width: 100%;
 469 }
 470
 471 .blog_form_field_input input, .blog_form_field_input textarea {
 472   width: 100%;
 473 }
 474
 475 .form_field_input {
 476   margin-bottom: 10px;
 477 }
 478
 479 .form_field_label {
 480   font-size:1.125em;
 481   margin-bottom: 0;
 482   padding: 10px 0;
 483 }
 484
 485 .form_field_description {
 486   font-style: italic;
 487 }
 488
 489 .form_field_error {
 490   background-color: #87453b;
 491   color: #fff;
 492   border: none;
 493   padding: 9px;
 494   margin-top: 8px;
 495   margin-bottom: 8px;
 496 }
 497
 498 .form_submit_buttons {
 499   text-align: right;
 500 }
 501
 502 .subform {
 503   margin: 2em;
 504 }
 505
 506 #password_boolean {
 507   margin-top: 4px;
 508   width: 20px;
 509 }
 510
 511 .boolean {
 512   margin-bottom: 8px;
 513   }
 514
 515 textarea#description, textarea#bio {
 516   resize: vertical;
 517   height: 100px;
 518 }
 519
 520 .delete {
 521   margin-top: 36px;
 522   display: block;
 523   text-align: center;
 524 }
 525
 526 /* comments */
 527
 528 .comment_wrapper, .report_wrapper {
 529   margin-top: 20px;
 530   margin-bottom: 20px;
 531 }
 532
 533 .comment_wrapper p, .report_wrapper p {
 534   margin-bottom: 2px;
 535 }
 536
 537 .comment_author, .report_author {
 538   padding-top: 4px;
 539   font-size: 0.9em;
 540 }
 541
 542 a.comment_authorlink, a.report_authorlink {
 543   text-decoration: none;
 544   padding-right: 5px;
 545   font-weight: bold;
 546   padding-left: 2px;
 547 }
 548
 549 a.comment_authorlink:hover, a.report_authorlink:hover {
 550   text-decoration: underline;
 551 }
 552
 553 a.comment_whenlink, a.report_whenlink {
 554   text-decoration: none;
 555 }
 556
 557 a.comment_whenlink:hover, a.report_whenlink:hover {
 558   text-decoration: underline;
 559 }
 560
 561 .comment_content, .report_content {
 562   margin-left: 8px;
 563   margin-top: 8px;
 564 }
 565
 566 .comment_active {
 567   box-shadow: 0px 0px 15px 15px #378566;
 568   background: #378566;
 569   color: #f7f7f7;
 570 }
 571
 572 textarea#comment_content {
 573   resize: vertical;
 574   width: 100%;
 575   height: 90px;
 576   border: none;
 577   background-color: #f1f1f1;
 578   padding: 3px;
 579 }
 580
 581 #form_comment .form_field_input {
 582         padding-right: 6px;
 583 }
 584
 585
 586 a.report_authorlink, a.report_whenlink {
 587   color: #D486B1;
 588 }
 589
 590 ul#action_to_resolve {list-style:none; margin-left:10px;}
 591
 592 /* media galleries */
 593
 594 .media_thumbnail {
 595   float: left;
 596   padding: 0px;
 597   width: 180px;
 598   overflow: hidden;
 599   margin: 0px 3px 10px;
 600   text-align: center;
 601   font-size: 0.875em;
 602   background-color: #222;
 603   border-radius: 0 0 5px 5px;
 604   padding: 0 0 6px;
 605   text-overflow: ellipsis;
 606   overflow: hidden;
 607   border-color: #0D0D0D;
 608   border-style: solid;
 609   border-width: 1px 1px 2px;
 610   position: relative;
 611 }
 612 .media_thumbnail:hover {
 613     border-color: #0D0D0D #0D0D0D #378566 #0D0D0D;
 614 }
 615
 616 .media_thumbnail a {
 617   color: #eee;
 618   text-decoration: none;
 619   display: block;
 620 }
 621
 622 .media_thumbnail a.remove {
 623   color: #86D4B1;
 624   text-decoration: underline;
 625 }
 626
 627 a.thumb_entry_title {
 628   padding: 8px;
 629 }
 630
 631 .entry_type_icon {
 632   position: absolute;
 633   top: 2px;
 634   left: 2px;
 635 }
 636
 637 .thumb_entry_last {
 638   margin-right: 0px;
 639 }
 640
 641 /* media detail */
 642
 643 h2.media_title {
 644   margin-bottom: 0px;
 645   display: inline-block;
 646 }
 647
 648 p.context {
 649         display: inline-block;
 650         padding-top: 4px;
 651 }
 652
 653 p.media_specs {
 654   font-size: 0.9em;
 655   border-top: 1px solid #222;
 656   padding: 10px 0px;
 657   color: #888;
 658 }
 659
 660 .no_html5 {
 661   background: black;
 662   color: white;
 663   text-align: center;
 664   height: 160px;
 665   padding: 130px 10px 20px 10px;
 666 }
 667
 668 a img.media_image {
 669   cursor: -webkit-zoom-in;
 670   cursor: -moz-zoom-in;
 671   cursor: zoom-in;
 672 }
 673 /* icons */
 674
 675 img.media_icon {
 676   margin: 0 4px;
 677   vertical-align: sub;
 678 }
 679
 680 /* EXIF information */
 681
 682 #exif_content {
 683   padding-bottom: 20px;
 684 }
 685
 686 #exif_camera_information {
 687   margin-bottom: 20px;
 688   margin-left: 8px;
 689 }
 690
 691 #exif_additional_info_button {
 692   margin-left: 8px;
 693 }
 694
 695 #exif_additional_info {
 696   display: none;
 697   margin-left: 8px;
 698 }
 699
 700 #exif_additional_info table {
 701   font-size: 11px;
 702   margin-top: 10px;
 703 }
 704
 705 #exif_additional_info td {
 706   vertical-align: top;
 707   padding-bottom: 5px;
 708 }
 709
 710 #exif_content .col1 {
 711   padding-right: 20px;
 712 }
 713
 714 #exif_additional_info table tr {
 715   margin-bottom: 10px;
 716 }
 717
 718 /* navigation */
 719
 720 .navigation {
 721 }
 722
 723 .navigation_button {
 724   width: 48%;
 725   display: inline-block;
 726   text-align: center;
 727   background-color: #1d1d1d;
 728   border: 1px solid;
 729   border-color: #2c2c2c #232323 #1a1a1a;
 730   border-radius: 4px;
 731   text-decoration: none;
 732   padding: 4px 0 8px;
 733   margin: 0 0 6px;
 734 }
 735
 736 .navigation_left {
 737   margin-right: 3px;
 738 }
 739
 740 /* messages */
 741
 742 ul.mediagoblin_messages {
 743   list-style: none inside;
 744   color: #f7f7f7;
 745   padding: 0;
 746 }
 747
 748 .mediagoblin_messages li {
 749   margin: 5px 0;
 750   padding: 8px;
 751   text-align: center;
 752 }
 753
 754 .message_success {
 755   background-color: #378566;
 756 }
 757
 758 .message_warning {
 759   background-color: #87453b;
 760 }
 761
 762 .message_error {
 763   background-color: #87453b;
 764 }
 765
 766 .message_info {
 767   background-color: #378566;
 768 }
 769
 770 .message_debug {
 771   background-color: #f7f7f7;
 772   color: #272727;
 773 }
 774
 775 ul.mediaentry_tags {
 776   list-style-type: none;
 777 }
 778
 779 ul.mediaentry_tags li {
 780   display: inline;
 781   margin: 0px 5px 0px 0px;
 782   padding: 0px;
 783 }
 784
 785
 786 /* media processing panel */
 787
 788 table.media_panel {
 789   width: 100%;
 790 }
 791
 792 table.media_panel th {
 793   font-weight: bold;
 794   padding-bottom: 4px;
 795   text-align: left;
 796 }
 797 .thumb-overlay-status {
 798   position: absolute;
 799   margin: auto;
 800   top: 0; bottom: 0; left: 0; right: 0;
 801   width: 180px;
 802   height: 20px;
 803   display: inline;
 804   text-align: center;
 805   background-color: rgba(255, 255, 255, 0.8);
 806 }
 807
 808 .thumb-processing {
 809   color: black;
 810   font-weight: bold;
 811 }
 812
 813 .thumb-failed {
 814   color: red;
 815   font-weight: bold;
 816 }
 817
 818 .thumb-wrapper {
 819   position: relative;
 820 /* for proportional thumb resizing */
 821   width: auto;
 822   height: auto;
 823   display: inline-block;
 824 }
 825
 826 .thumb-wrapper img {
 827   max-height: 180px;
 828   max-width: 180px;
 829 }
 830 .media_panel td {
 831   vertical-align: middle;
 832 }
 833
 834 /* moderator panels */
 835
 836 table.admin_panel {
 837   width: 100%
 838 }
 839
 840 table.admin_side_panel {
 841   width: 90%;
 842   margin-bottom: 10px;
 843 }
 844
 845 table.admin_panel th, table.admin_side_panel th {
 846   font-weight: bold;
 847   padding-bottom: 4px;
 848   text-align: left;
 849   color: #fff;
 850 }
 851
 852 table td.user_with_privilege {
 853   font-weight: bold;
 854   color: #86D4B1;
 855 }
 856
 857 table td.user_without_privilege {
 858   font-weight: bold;
 859   color: #D486B1;
 860 }
 861
 862 .return_to_panel    {
 863   text-align:right;
 864   float: right;
 865   font-size:1.2em
 866 }
 867
 868 /* Delete panel */
 869
 870 .delete_checkbox_box {
 871   margin-top: 10px;
 872   margin-left: 10px;
 873 }
 874
 875 /* code of conduct */
 876
 877 #code_of_conduct_list  {
 878     margin-left:25px;
 879     margin-bottom: 10px;
 880 }
 881 #code_of_conduct_list li {
 882     margin:5px 0 15px 25px;
 883 }
 884 #code_of_conduct_list strong{
 885     color:#fff;
 886 }
 887
 888 .nested_sublist {
 889     margin: 5px 0 10px 25px;
 890     font-size:80%;
 891 }
 892 .nested_sublist li {
 893     margin-bottom: 10px;
 894 }
 895
 896 /* ASCII art and code */
 897
 898 @font-face {
 899   font-family: Inconsolata;
 900   src: local('Inconsolata'), url('../fonts/Inconsolata.otf') format('opentype')
 901 }
 902
 903 pre, code {
 904   font-family: Inconsolata, monospace;
 905   line-height: 1em;
 906 }
 907
 908 pre {
 909   overflow: auto;
 910   margin-bottom: 20px;
 911 }
 912
 913 .comment_wrapper pre {
 914   margin-bottom: 2px;
 915 }
 916
 917 .ascii-wrapper pre {
 918   /* but it should not affect the ASCII art */
 919   margin: 0;
 920 }
 921
 922 /* Media queries and other responsivisivity */
 923 /* initial GMG max 940 */
 924 @media screen and (max-width: 960px) {
 925
 926   img.media_image {
 927     max-width: 100%;
 928 /*    display: inline;*/
 929   }
 930
 931   .media_thumbnail {
 932 /*    width: 21%;*/
 933   }
 934
 935   .profile_sidebar {
 936     width: 100%;
 937     margin: 0px;
 938   }
 939
 940   .profile_showcase {
 941     width: 100%;
 942     margin: 0px;
 943   }
 944
 945   .navigation {
 946     float: none;
 947   }
 948
 949   .navigation_button {
 950     float: right;
 951     padding: 10px 0 14px;
 952   }
 953
 954   .navigation_left {
 955     margin-right: 0;
 956     float: left;
 957   }
 958
 959   .button_action, .button_action_highlight, .button_form {
 960     padding: 5px 14px;
 961     margin-bottom: 0.5em;
 962   }
 963
 964 }
 965 /* desktop resolutions */
 966 @media screen and (min-width: 960px) {
 967   .container .three.columns.media_thumbnail {
 968     width:180px;
 969     margin-left:3px;
 970     margin-right:3px;
 971   }
 972   #thingy_view {
 973     width:640px;
 974     height:640px;
 975   }
 976 }
 977
 978 /* Tablet Portrait size to standard 960 (devices and browsers) */
 979 @media only screen and (min-width: 768px) and (max-width: 959px) {
 980   .container .three.columns.media_thumbnail {
 981     width:147px;
 982     margin-left:2px;
 983     margin-right:2px;
 984   }
 985   .media_thumbnail.thumb_entry img {
 986     max-width:100%;
 987   }
 988   .thumb_gallery {
 989     margin-left: 0;
 990     margin-right: 0;
 991   }
 992   .navigation_button {
 993   }
 994   #thingy_view {
 995     width:508px;
 996     height:508px;
 997   }
 998 }
 999
1000 /* All Mobile Sizes (devices and browser) */
1001 @media screen and (max-width: 767px) {
1002   .thumb_row {
1003     margin-bottom: 0;
1004   }
1005   .thumb_gallery {
1006     margin-left: 0;
1007     margin-right: 0;
1008   }
1009   h1,h2,h3,p {
1010     margin-bottom: 10px !important;
1011   }
1012
1013   header {
1014     text-align: center;
1015   }
1016
1017   .header_right {
1018     text-align: center;
1019   }
1020
1021   .welcomeimage {
1022     float: none;
1023     display: inherit;
1024     margin-left: auto;
1025     margin-right: auto;
1026     margin-top: 1em;
1027   }
1028
1029   .media_sidebar {
1030     border-left: none;
1031     padding-left: 0;
1032     padding-top: 1em;
1033     margin-top: 1em;
1034   }
1035
1036   .media_comments {
1037     border-bottom: 1px solid #333333;
1038   }
1039 }
1040
1041 /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
1042 @media only screen and (min-width: 480px) and (max-width: 767px) {
1043   #thingy_view {
1044     width:420px;
1045     height:420px;
1046   }
1047 }
1048
1049 /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
1050 @media only screen and (max-width: 479px) {
1051   #thingy_view {
1052     width:300px;
1053     height:300px;
1054   }
1055 }
1056
1057 p.verifier {
1058     text-align:center;
1059     font-size:50px;
1060     none repeat scroll 0% 0% rgb(221, 221, 221);
1061     padding: 1em 0px;
1062 }
1063
1064 /* for the media metadata editing table */
1065 table.metadata_editor {
1066     margin: 10px auto;
1067     width: 800px;
1068 }
1069
1070 table.metadata_editor tr td {
1071     width:350px;
1072 }
1073 table.metadata_editor tr td.form_field_input input {
1074     width:350px;
1075 }
1076
1077 .application {
1078   min-height: 30px;
1079   margin-left: 70px;
1080 }
1081
1082 .application-icon {
1083   position: absolute;
1084   left: 12px;
1085   width: 50px;
1086   height: 50px;
1087 }
1088
1089 .application-button {
1090   float: right;
1091 }