[Summary view] [Print] [Text view]

   1  /* MyBB Admin CP - Sharepoint style
   2   *
   3   * Main CSS
   4   */
   5  
   6  body, td {
   7      font-family: Verdana, Arial, sans-serif;
   8      font-size: 11px;
   9      background: #fff;
  10      color: #000000;
  11      margin: 0;
  12  }
  13  
  14  a {
  15      color: #0033AB;
  16      text-decoration: none;
  17  }
  18  
  19  a:hover {
  20      color: #6694FF;
  21      text-decoration: underline;
  22  }
  23  
  24  .invisible {
  25      display: none;
  26  }
  27  
  28  #container {
  29  }
  30  
  31  #logo h1 {
  32      background: #fff url(images/logo.gif) no-repeat top left;
  33      height: 82px;
  34      margin: 0 0 2px 0;
  35      padding: 3px;
  36  }
  37  
  38  #logo {
  39      background: #F0F0F0;
  40  }
  41  
  42  #welcome {
  43      position: absolute;
  44      right: 10px;
  45      top: 70px;
  46      color: #666;
  47      height: 20px;
  48      font-size: 96%;
  49  }
  50  
  51  #welcome .logout {
  52      margin-left: 4px;
  53      padding: 0 18px 2px 0;
  54      background: url(images/icons/logout.gif) no-repeat right;
  55  }
  56  
  57  #welcome .forum {
  58      margin-left: 4px;
  59      padding: 1px 0 2px 20px;
  60      background: url(images/icons/world.gif) no-repeat left;
  61  }
  62  
  63  #welcome .username {
  64      margin-left: 4px;
  65      padding: 0 0 2px 18px;
  66      background: url(images/icons/user.gif) no-repeat left;
  67  }
  68  
  69  /* Menu */
  70  
  71  #menu ul {
  72      width: 100%;
  73      margin: 0;
  74      padding: 0;
  75      list-style: none;
  76      border-bottom: 5px solid #7AA4DB;
  77  }
  78  
  79  html>body #menu ul {
  80      float: left;
  81  }
  82  
  83  #menu li {
  84      font-size: 11px;
  85      float: left;
  86      margin: 0;
  87      padding: 0;
  88      list-style: none;
  89  }
  90  
  91  #menu a {
  92      float: left;
  93      padding: 4px 15px 4px 15px;
  94      text-decoration: none;
  95      color: #577ED1;
  96      background: #E2EFFF url(images/menu_bg.gif) repeat-x top left;
  97      border: 1px solid #C2DCFF;
  98      border-left: 0;
  99  }
 100  
 101  #menu a:hover, #menu a.active {
 102      background: #E2EFFF;
 103  }
 104  
 105  #menu a.active {
 106      font-weight: bold;
 107      color: #fff;
 108      border-bottom: 1px solid #7AA4DB;
 109      border-top: 1px solid #79A7E3;
 110      border-right: 1px solid #79A7E3;
 111      border-left: 1px solid #79A7E3;
 112      background: #B6D6FF url(images/menu_active_bg.gif) repeat-x top left;
 113  }
 114  
 115  #page {
 116      clear: left;
 117      padding-top: 1px;
 118  }
 119  
 120  /* Main Content */
 121  
 122  #content {
 123      margin-top: 8px;
 124      margin-right: 8px;
 125      margin-left: 200px;
 126      background: #fff;
 127      border: 1px solid #6F9DD9;
 128  }
 129  
 130  #inner {
 131      padding: 10px 15px;
 132  }
 133  #content p {
 134      line-height: 150%;
 135  }
 136  
 137  #content h3 {
 138      border-bottom: 1px solid #ccc;
 139      font-size: 16px;
 140      margin: 10px 0 7px 0;
 141  }
 142  
 143  #content h4 {
 144      font-size: 14px;
 145      margin: 10px 0 -10px 0;
 146  }
 147  
 148  /* Left Menu */
 149  
 150  #page {
 151      background: #85B1EE url(images/page_bg.gif) repeat-x;
 152  }
 153  
 154  #left_menu {
 155      float: left;
 156      width: 200px;
 157      color: #000;
 158      padding: 4px 0;
 159      margin: 0;
 160      font-size: 96%;
 161  }
 162  
 163  #left_menu div.left_menu_box {
 164      border: 1px solid #6F9DD9;
 165      background: #fff;
 166      margin: 4px;
 167  }
 168  
 169  #left_menu div.left_menu_box div.title {
 170      font-weight: bold;
 171      border-bottom: 1px solid #ADD1FF;
 172      border-top: #F2F8FF 1px solid;
 173      padding: 4px 5px;
 174      background: #D6E8FF;
 175      color: #003399;
 176  }
 177  
 178  #left_menu div.left_menu_box ul.menu {
 179      padding: 0;
 180      margin: 0;
 181  }
 182  
 183  #left_menu div.left_menu_box ul.menu li a {
 184      display: block;
 185      padding: 6px 15px;
 186      background: #F2F8FF;
 187      color: #0033AB;
 188  }
 189  
 190  #left_menu div.left_menu_box ul.menu li.active a {
 191      font-weight: bold;
 192      color: #000;
 193  }
 194  
 195  #left_menu div.left_menu_box ul.menu li a:hover {
 196      color: #000;
 197      background-color: #fafafa;
 198      text-decoration: none;
 199  }
 200  /* Fix IE. Hide from IE Mac \*/
 201  * html #left_menu li a, * html #left_menu li { 
 202      height: 1%;
 203  }
 204  /* End */
 205  
 206  
 207  /* Tables */
 208  
 209  .border_wrapper {
 210      margin: 0;
 211      padding: 0;
 212      margin-bottom: 14px;
 213  }
 214  
 215  .border_wrapper div.title {
 216      color: #4C4C4C;
 217      padding: 6px 0;
 218      font-size: 12px;
 219      text-align: left;
 220      font-weight: bold;
 221      border-bottom: 1px solid #4E7CB7;
 222  }
 223  
 224  .border_wrapper div.title a {
 225      color: #577ED1;
 226      text-decoration: none;
 227  }
 228  
 229  table.general {
 230      background: #ccc;
 231      width: 100%;
 232  }
 233  
 234  table.general td {
 235      border-top: 1px solid #E0E0E0;
 236  }
 237  
 238  table.bottom_cell_border td {
 239      border-right: 0;
 240      border-left: 0;
 241  }
 242  
 243  
 244  table.general td {
 245      background: #FFFFFF;
 246      padding: 6px 3px;
 247  /*    vertical-align: top; */
 248  }
 249  
 250  
 251  /*
 252  table.general th {
 253      background: #C0DBFF;
 254      text-align: left;
 255      color: #003399;
 256      padding: 5px;
 257      font-size: 100%;
 258      font-weight: normal;
 259      border-bottom: 1px solid #D6E8FF;
 260      border-top: 1px solid #F2F8FF;
 261  }
 262  
 263  table.general th a, table.general th {
 264      color: #003399;
 265      text-decoration: none;
 266  }*/
 267  
 268  table.general {
 269      border-top: 1px solid #B3BECB;
 270  }
 271  
 272  table.general th {
 273      background: #F2F2F2;
 274      text-align: left;
 275      padding: 5px;
 276      font-size: 100%;
 277      font-weight: normal;
 278      border-top: 1px solid #DDE1E5;
 279      border-right: 1px solid #E0E0E0;
 280  }
 281  
 282  table.general th.last {
 283      border-right: 0;
 284  }
 285  
 286  table.general th a, table.general th {
 287      color: #949494;
 288      text-decoration: none;
 289  }
 290  
 291  
 292  table.general .alt_row td {
 293      background: #F9F9F9;
 294  }
 295  /*
 296  table td.alt_col {
 297      background: #f1f1f1;
 298  }*/
 299  
 300  table.general tr.last td {
 301      border-bottom: 1px solid #E0E0E0;
 302  }
 303  
 304  table.form_container tr.first td {
 305      border-top: 0;
 306  }
 307  
 308  /* Page Footer */
 309  #footer {
 310      clear: both;
 311      background: #9DC2F2;
 312      color: #fff;
 313  }
 314  
 315  #footer p {
 316      padding:5px;
 317      margin: 0;
 318      font-size: 11px;
 319  }
 320  
 321  #footer .generation {
 322      float: right;
 323  }
 324  /* Popup Menus */
 325  
 326  /* Popup Menus */
 327  
 328  .popup_button {
 329      color: #003399;
 330      text-align: right;
 331      background: #fff;
 332      padding: 4px;
 333      margin-top: 3px;
 334      margin-bottom: 3px;
 335      margin-left: 3px;
 336  }
 337  
 338  a.popup_button:link,
 339  a.popup_button:visited,
 340  a.popup_button:active,
 341  a.popup_button:hover {
 342      text-decoration: none;
 343      color: #003399;
 344      background: url(images/dropdown_bg.gif) right;
 345      padding-right: 20px;
 346      border: 1px solid #868686;
 347  
 348  }
 349  
 350  a.popup_button:hover {
 351      border: 1px solid #B09460;
 352      color: #000;
 353  }
 354  
 355  .popup_menu {
 356      background: #fff;
 357      border: 1px solid #868686;
 358  }
 359  
 360  .popup_menu .popup_item_container {
 361      text-align: left;
 362      background: #fff url(images/dropdown_item.gif) repeat-y;
 363      padding: 1px;
 364  }
 365  
 366  .popup_menu .popup_item {
 367      display: block;
 368      padding: 3px 8px 3px 30px;
 369      text-decoration: none;
 370      white-space: nowrap;
 371      color: #000;
 372      border: 1px solid transparent;
 373  }
 374  
 375  .popup_menu a.popup_item:hover {
 376      text-decoration: none;
 377      border: 1px solid #D2B47A;
 378      background: #FFE6A0;
 379      color: #000;
 380  }
 381  
 382  .transparent, .transparent td {
 383      background: transparent;
 384  }
 385  
 386  .breadcrumb {
 387      background: #EBF3FF;
 388      padding: 4px 4px 5px;
 389      border-top: 1px solid #fff;
 390      margin-bottom: 10px;
 391      font-size: 96%;
 392  }
 393  .breadcrumb .active {
 394      display: block;
 395      background: url(images/nav_bit.gif) no-repeat top left;
 396      padding-left: 20px;
 397      font-weight: bold;
 398      font-size: 110%;
 399  }
 400  
 401  .alert {
 402      margin: 10px 0;
 403      padding: 5px 10px;
 404      border: #FC6 1px solid;
 405      background: url('images/icons/warning.gif') no-repeat;
 406      background-color: #ffc;
 407      color: #C00; 
 408      font-style: normal;
 409      font-weight: bold;
 410      padding-left: 24px;
 411      display: block;
 412  }
 413  
 414  .inline_message {
 415      background: #FFF6BF;
 416      border-top: 2px solid #FFD324;
 417      border-bottom: 2px solid #FFD324;
 418      text-align: center;
 419      margin: 10px auto;
 420      padding: 5px 20px;
 421  }
 422  
 423  .notice {
 424      background: #EFEFEF;
 425      border-top: 2px solid #CCC;
 426      border-bottom: 2px solid #CCC;
 427      text-align: center;
 428      margin: 10px auto;
 429      padding: 5px 20px;
 430  }
 431  
 432  table.individual_cell_border {
 433      border-style: collapse;
 434  }
 435  
 436  table.cell_border_bottom td {
 437      border: 1px solid #cc;
 438      border-style: collapse;
 439      border-spacing: 1px;
 440  }
 441  
 442  /* Forms */
 443  
 444  form {
 445      border: 0;
 446      margin: 0;
 447  }
 448  
 449  form div.form_container, fieldset {
 450      background: #efefef;
 451      border: 1px solid #ccc;
 452      padding: 2px 7px 5px;
 453      margin-bottom: 10px;
 454  }
 455  
 456  .form_row {
 457      margin: 10px 30px;
 458  }
 459  legend {
 460      font-weight: bold;
 461  }
 462  
 463  .form_container label {
 464      font-weight: bold;
 465  }
 466  
 467  .form_container .description, small {
 468      font-size: 11px;
 469      color: #444;
 470  }
 471  
 472  
 473  input.text_input {
 474      border: 1px solid #0F5C8E;
 475      background: #fff;
 476      width: 300px;
 477      padding: 3px;
 478      font-size: 15px;
 479  }
 480  
 481  textarea {
 482      border: 1px solid #0F5C8E;
 483      background: #fff;
 484      padding: 4px;
 485      width: 400px;
 486      font-size: 12px;
 487      font-family: Verdana;
 488  }
 489  
 490  textarea[disabled=disabled] {
 491      border: 1px solid #ccc;
 492      background: #fff;
 493      padding: 4px;
 494      color: #666;
 495      font-size: 12px;
 496      font-family: Verdana;
 497  }
 498  
 499  
 500  select {
 501      border: 1px solid #0F5C8E;
 502      background: #fff;
 503      padding: 4px;
 504      font-size: 12px;
 505      font-family: Verdana;
 506  }
 507  
 508  textarea:focus, input.text_input:focus, select:focus {
 509      border: 1px solid #000;
 510  }
 511  
 512  
 513  input.inline_submit {
 514      font-weight:  bold;
 515  }
 516  
 517  form p.legend {
 518      margin-bottom: 10px;
 519  }
 520  
 521  form p.legend em { 
 522      color: #C00; font-style: normal;
 523  }
 524  
 525  .form_container label em, fieldset label em {
 526      font-style: normal;
 527      color: #C00;
 528  }
 529  
 530  input.submit_button {
 531      border: 3px double #0F5C8E;
 532      padding: 3px;
 533      background: #fff url(images/submit_bg.gif) repeat-x top;
 534      color: #0F5C8E;
 535      font-weight: bold;
 536      margin-right: 3px;
 537  }
 538  
 539  .form_button_wrapper {
 540      margin-top: 5px;
 541      text-align: center;
 542      border: 1px solid #ccc;
 543      background: #efefef;
 544      padding: 3px;
 545  }
 546  
 547  .confirm_action {
 548      margin: 10px 0;
 549      padding: 10px;
 550      font-weight: bold;
 551        border: 1px solid #FC6;
 552      background: #FFC;
 553      color: #C00;
 554  }
 555  
 556  .confirm_action p {
 557        margin: 0;
 558  }
 559  
 560  input.button_yes {
 561      background: #D6ECA6;
 562      border: 3px double #8DC93E;
 563      padding: 4px 6px;
 564      font-weight: bold;
 565      margin-right: 3px;
 566  }
 567  
 568  input.button_no {
 569      background: #ECA6D6;
 570      border: 3px double #C93E8D;
 571      padding: 4px 6px;
 572      font-weight: bold;
 573  }
 574  
 575  .label_radio_yes, .label_radio_on, .label_radio_no, .label_radio_off {
 576      padding: 4px 6px;
 577      margin-right: 5px;
 578      margin-top: 5px;
 579      display: block;
 580      width: 60px;
 581      float: left;
 582  }
 583  
 584  .label_radio_yes, .label_radio_on {
 585      background: #D6ECA6;
 586      border: 1px solid #8DC93E;
 587  }
 588  
 589  .label_radio_no, .label_radio_off {
 590      background: #ECA6D6;
 591      border: 1px solid #C93E8D;
 592  }
 593  
 594  input.radio_input {
 595      vertical-align: top;
 596      margin: 0;
 597      margin-right: 9px;
 598  }
 599  
 600  #flash_message {
 601      margin: 10px 0;
 602      padding: 10px 0 10px 24px;
 603      font-weight: bold;
 604      background: #efefef;
 605      border: 1px solid #ccc;
 606  }
 607  
 608  #flash_message.error {
 609      border: 1px solid #FC6;
 610      background: #FFC url('images/icons/error.gif') no-repeat 4px 9px;
 611      color: #C00;
 612  }
 613  
 614  #flash_message.success {
 615      border: #080 1px solid;
 616      color: #080;
 617      background: #E8FCDC url('images/icons/success.gif') no-repeat 4px 9px;
 618  }
 619  
 620  div.error, div.success {
 621      margin: 10px 0;
 622      padding: 5px 10px;
 623  }
 624  
 625  div.error {
 626      border: #FC6 1px solid;
 627      background: #ffc;
 628  }
 629  
 630  div.success {
 631      border: #080 1px solid;
 632      background: #E8FCDC;
 633  }
 634  
 635  div.error p, div.success p {
 636      margin: 0;
 637      color: #000;
 638      font-weight: normal;
 639  }
 640  
 641  div.error p em, div.success p em {
 642      font-style: normal;
 643      font-weight: bold;
 644      padding-left: 24px;
 645      display: block;
 646  }
 647  
 648  div.error p em {
 649      color: #C00;
 650      background: url('images/icons/error.gif') no-repeat;
 651  }
 652  
 653  div.success p em {
 654      color: #080;
 655      background: url('images/icons/success.gif') no-repeat;
 656  }
 657  
 658  div.success ul, div.error.ul {
 659      margin-left: 24px;
 660  }
 661  
 662  .nav_tabs {
 663      float: right;
 664      background: url(images/nav_tab_start.gif) no-repeat;
 665      padding-left: 37px;
 666  }
 667  
 668  .nav_tabs ul {
 669      list-style: none;
 670      padding: 0;
 671      margin: 0;
 672      background: url(images/nav_tab_bg.gif) repeat-x;
 673      height: 25px;
 674      border-top: 1px solid #4E7CB7;
 675  }
 676  
 677  .nav_tabs li {
 678      float: left;
 679      background: url(images/nav_tab_sep.gif) left no-repeat;
 680      margin-bottom: 4px;
 681  }
 682  
 683  .nav_tabs li.first {
 684      background: transparent;
 685  }
 686  
 687  .nav_tabs li a {
 688      margin-left: 3px;
 689      display: block;
 690      padding-left: 7px;
 691      padding-right: 7px;
 692      padding-top: 4px;
 693      border-bottom: 0;
 694      font-size: 11px;
 695      color: #003399;
 696      height: 20px;
 697  }
 698  
 699  .nav_tabs li a:hover {
 700      color: #000;
 701      background: #DBEBFF;
 702      -moz-opacity: 0.5;
 703      opacity: 0.5;
 704      text-decoration: none;
 705  }
 706  
 707  
 708       
 709  *.align_center, table.general th.align_center {
 710      text-align: center;
 711  }
 712  
 713  .float_right {
 714      float: right;
 715  }
 716  
 717  a img {
 718      border: 0;
 719  }
 720  
 721  option { 
 722      padding-right: 10px;
 723  }
 724  
 725  #content .intro {
 726      margin-bottom: 10px;
 727  }
 728  
 729  #content .intro h2 {
 730      font-family: Tahoma;
 731      font-size: 14px;
 732      padding-bottom: 8px;
 733      border-bottom: 1px solid #4E7CB7;
 734      color: #4C4C4C;
 735      margin: 0;
 736  }
 737  
 738  #content .intro  p {
 739      margin: 0;
 740      color: #555;
 741      padding: 5px 0;
 742      border-bottom: 1px solid #ADD1FF;
 743  }
 744  
 745  ul.tabs {
 746      width: 100%;
 747      margin: 10px 0 0;
 748      padding: 0;
 749      list-style: none;
 750      height: 27px;
 751      border-left: 1px solid #0F5C8E;
 752  }
 753  
 754  ul.tabs li {
 755      float: left;
 756      margin: 0;
 757      padding: 0;
 758      list-style: none;
 759  }
 760  
 761  ul.tabs a {
 762      float: left;
 763      padding: 6px 10px;
 764      text-decoration: none;
 765      color: #577ED1;
 766      border: 1px solid #0F5C8E;
 767      border-left: 0;
 768      background: #efefef;
 769      border-bottom: 0;
 770  }
 771  
 772  ul.tabs a.active {
 773      background: #0F5C8E repeat-x top left;
 774      color: #fff;
 775      font-size: 100%;
 776      text-align: left;
 777      font-weight: bold;
 778      border: 1px solid #0F5C8E;
 779  }
 780  
 781  
 782  .editor {
 783      background: #f1f1f1;
 784      border: 1px solid #ccc;
 785  }
 786  
 787  .editor_control_bar {
 788      background: #fff;
 789      border: 1px solid #0f5c8e;
 790  }
 791  
 792  .toolbar_normal {
 793      background: #f0f0f0;
 794      border: 1px solid #f0f0f0;
 795  }
 796  
 797  .toolbar_hover {
 798      background: #c1d2ee;
 799      border: 1px solid #5296f7;
 800  }
 801  
 802  .toolbar_clicked {
 803      background: #e1F2fe;
 804      border: 1px solid #5296f7;
 805  }
 806  
 807  .user_avatar {
 808      height: 80px;
 809      width: 80px;
 810      background: #fff;
 811      border: 1px solid #ccc;
 812      float: left;
 813      clear: left;
 814      margin-right: 5px;
 815      text-align: center;
 816  }
 817  
 818  .user_avatar img {
 819      vertical-align: middle;
 820  }
 821  
 822  .user_details {
 823      float: left;
 824      margin-left: 5px;
 825      line-height: 1.7;
 826  }
 827  
 828  
 829  .pagination {
 830      font-size: 11px;
 831      margin-bottom: 10px;
 832      margin-top: 10px;
 833  }
 834  
 835  .pagination .pages {
 836      font-weight: bold;
 837  }
 838  
 839  .pagination .pagination_current, .pagination a {
 840      padding: 2px 6px;
 841      margin-bottom: 3px;
 842  }
 843  
 844  .pagination a {
 845      border: 1px solid #81A2C4;
 846  }
 847  
 848  .pagination .pagination_current {
 849      background: #F5F5F5;
 850      border: 1px solid #81A2C4;
 851      font-weight: bold;
 852  }
 853  
 854  .pagination a:hover {
 855      background: #F5F5F5;
 856      text-decoration: none;
 857  }
 858  
 859  .view_fields .enabled, .view_fields .disabled {
 860      width: 200px;
 861      float: left;
 862  }
 863  
 864  .view_fields .disabled {
 865      margin-left: 20px;
 866  }
 867  
 868  .view_fields .fields_title {
 869      font-weight: bold;
 870      font-size: 120%;
 871  }
 872  
 873  .view_fields ul, .view_fields li {
 874      list-style: none;
 875      padding: 0;
 876      margin: 0;
 877  }
 878  
 879  .view_fields ul {
 880      overflow: auto; // Scroll fix for Opera
 881      overflow-y: auto;
 882      overflow-x: hidden;
 883      height: 180px;
 884      margin-top: 4px;
 885  }
 886  
 887  .view_fields li {
 888      -moz-border-radius: 3px;
 889      padding: 4px;
 890      background: #666;
 891      color: #fff;
 892      font-size: 11px;
 893      margin-bottom: 2px;
 894      margin-right: 10px;
 895  }
 896  
 897  .quick_perm_fields .enabled, .quick_perm_fields .disabled {
 898      width: 49%;
 899      float: left;
 900  }
 901  
 902  .quick_perm_fields .enabled {
 903      border-right: 5px solid #666;
 904  }
 905  
 906  .quick_perm_fields .disabled {
 907      float: right;
 908      margin-left: 0px;
 909  }
 910  
 911  .quick_perm_fields .fields_title {
 912      font-weight: bold;
 913      font-size: 120%;
 914  }
 915  
 916  .quick_perm_fields ul, .quick_perm_fields li {
 917      list-style: none;
 918      padding: 3px;
 919      margin: 0;
 920  }
 921  
 922  .quick_perm_fields ul {
 923      overflow: auto; // Scroll fix for Opera
 924      overflow-y: auto;
 925      overflow-x: hidden;
 926      height: 120px;
 927      margin-top: 4px;
 928  }
 929  
 930  .quick_perm_fields li {
 931      -moz-border-radius: 3px;
 932      padding: 4px;
 933      background: #666;
 934      color: #fff;
 935      font-size: 11px;
 936      margin-bottom: 2px;
 937      margin-right: 10px;
 938  }
 939  
 940  /* Auto Complete */
 941  .autocomplete {
 942      background: #fff;
 943      border: 1px solid #000;
 944      color: black;
 945  }
 946  
 947  .autocomplete_selected {
 948      background: #adcee7;
 949      color: #000;
 950  }
 951  
 952  input.search_button {
 953      background: #fff url(images/icons/search.gif) no-repeat;
 954      background-position: 4px 7px;
 955      border: 0px;
 956      padding: 4px;
 957      padding-left: 20px;
 958      font-size: 15px;
 959      font-family: 'Lucida Grande', 'Trebuchet MS', Verdana, Sans-Serif;
 960      color: #6F6F6F;
 961      font-weight: bold;
 962      height: 30px;
 963  }
 964  
 965  .smalltext {
 966      font-size: 11px;
 967  }
 968  
 969  .inline_select {
 970      padding-bottom: 1px;
 971  }
 972  
 973  .inline_selected {
 974      background-color: #FFFBD9;
 975  }
 976  
 977  /* Templates Differential page */
 978  .differential {
 979      background: #FFF;
 980      margin: 10px auto;
 981      padding: 10px;
 982      overflow: scroll;
 983      height: 400px;
 984      width: 980px;
 985      border: 1px solid #ccc;
 986  }