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