tools/droiddoc/templates/assets/android-developer-core.css

   1 /* file: android-developer-core.css
   2    author: smain
   3    date: september 2008
   4    info: core developer styles (developer.android.com)
   5 */
   6
   7
   8 /* RESET STYLES */
   9
  10 html,body,div,h1,h2,h3,h4,h5,h6,p,img,
  11 dl,dt,dd,ol,ul,li,table,caption,tbody,
  12 tfoot,thead,tr,th,td,form,fieldset,
  13 embed,object,applet {
  14   margin: 0;
  15   padding: 0;
  16   border: 0;
  17 }
  18
  19 /* BASICS */
  20
  21 html, body {
  22   overflow:hidden; /* keeps scrollbar off IE */
  23   background-color:#fff;
  24 }
  25
  26 body {
  27   font-family:arial,sans-serif;
  28   color:#000;
  29   font-size:13px;
  30   color:#333;
  31   background-image:url(images/bg_fade.jpg);
  32   background-repeat:repeat-x;
  33 }
  34
  35 a, a code {
  36   color:#006699;
  37 }
  38
  39 a:active,
  40 a:active code {
  41   color:#f00;
  42 }
  43
  44 a:visited,
  45 a:visited code {
  46   color:#006699;
  47 }
  48
  49 input, select,
  50 textarea, option, label {
  51   font-family:inherit;
  52   font-size:inherit;
  53   padding:0;
  54   margin:0;
  55   vertical-align:middle;
  56 }
  57
  58 option {
  59   padding:0 4px;
  60 }
  61
  62 p {
  63   padding:0;
  64   margin:0 0 1em;
  65 }
  66
  67 code, pre {
  68   color:#007000;
  69   font-family:monospace;
  70   line-height:1em;
  71 }
  72
  73 var {
  74   color:#007000;
  75   font-style:italic;
  76 }
  77
  78 pre {
  79   border:1px solid #ccc;
  80   background-color:#fafafa;
  81   padding:10px;
  82   margin:0 0 1em 1em;
  83   overflow:auto;
  84   line-height:inherit; /* fixes vertical scrolling in webkit */
  85 }
  86
  87 h1,h2,h3,h4,h5 {
  88   margin:1em 0;
  89   padding:0;
  90 }
  91
  92 p,ul,ol,dl,dd,dt,li {
  93   line-height:1.3em;
  94 }
  95
  96 ul,ol {
  97   margin:0 0 .8em;
  98   padding:0 0 0 2em;
  99 }
 100
 101 li {
 102   padding:0 0 .5em;
 103 }
 104
 105 dl {
 106   margin:0 0 1em 0;
 107   padding:0;
 108 }
 109
 110 dt {
 111   margin:0;
 112   padding:0;
 113 }
 114
 115 dd {
 116   margin:0 0 1em;
 117   padding:0 0 0 2em;
 118 }
 119
 120 li p {
 121   margin:.5em 0 0;
 122 }
 123
 124 dd p {
 125   margin:1em 0 0;
 126 }
 127
 128 li pre, li table, li img {
 129   margin:.5em 0 0 1em;
 130 }
 131
 132 dd pre, dd table, dd img {
 133   margin:1em 0 0 1em;
 134 }
 135
 136 li ul,
 137 li ol,
 138 dd ul,
 139 dd ol {
 140   margin:0;
 141   padding: 0 0 0 2em;
 142 }
 143
 144 li li,
 145 dd li {
 146   margin:0;
 147   padding:.5em 0 0;
 148 }
 149
 150 dl dl,
 151 ol dl,
 152 ul dl {
 153   margin:0 0 1em;
 154   padding:0;
 155 }
 156
 157 table {
 158   font-size:1em;
 159   margin:0 0 1em;
 160   padding:0;
 161   border-collapse:collapse;
 162   border-width:0;
 163   empty-cells:show;
 164 }
 165
 166 td,th {
 167   border:1px solid #ccc;
 168   padding:6px 12px;
 169   text-align:left;
 170   vertical-align:top;
 171   background-color:inherit;
 172 }
 173
 174 th {
 175   background-color:#dee8f1;
 176 }
 177
 178 hr.blue {
 179   background-color:#DDF0F2;
 180   border:none;
 181   height:5px;
 182   margin:20px 0 10px;
 183 }
 184
 185 /* LAYOUT */
 186
 187 #body-content {
 188   /* "Preliminary" watermark for preview releases and interim builds.
 189   background:transparent url(images/preliminary.png) repeat scroll 0 0;  */
 190   margin:0;
 191   position:relative;
 192   width:100%;
 193 }
 194
 195 #header {
 196   height: 114px;
 197   position:relative;
 198   z-index:100;
 199   min-width:675px; /* min width for the tabs, before they wrap */
 200   padding:0 10px;
 201   border-bottom:3px solid #94b922;
 202 }
 203
 204 #headerLeft{
 205   padding: 25px 0 0;
 206 }
 207
 208 #headerLeft img{
 209   height:50px;
 210   width:180px;
 211 }
 212
 213 #headerRight {
 214   position:absolute;
 215   right:0;
 216   top:0;
 217   text-align:right;
 218 }
 219
 220 /* Tabs in the header */
 221
 222 #header ul {
 223   list-style: none;
 224   margin: 7px 0 0;
 225   padding: 0;
 226   height: 29px;
 227 }
 228
 229 #header li {
 230   float: left;
 231   margin: 0px 2px 0px 0px;
 232   padding:0;
 233 }
 234
 235 #header li a {
 236   text-decoration: none;
 237   display: block;
 238   background-image: url(images/bg_images_sprite.png);
 239   background-position: 0 -58px;
 240   background-repeat: no-repeat;
 241   color: #666;
 242   font-size: 13px;
 243   font-weight: bold;
 244   width: 94px;
 245   height: 29px;
 246   text-align: center;
 247   margin: 0px;
 248 }
 249
 250 #header li a:hover {
 251   background-image: url(images/bg_images_sprite.png);
 252   background-position: 0 -29px;
 253   background-repeat: no-repeat;
 254 }
 255
 256 #header li a span {
 257   position:relative;
 258   top:7px;
 259 }
 260
 261 #header li a span+span {
 262   display:none;
 263 }
 264
 265 /* tab highlighting */
 266
 267 .home #home-link a,
 268 .guide #guide-link a,
 269 .reference #reference-link a,
 270 .sdk #sdk-link a,
 271 .resources #resources-link a,
 272 .videos #videos-link a {
 273   background-image: url(images/bg_images_sprite.png);
 274   background-position: 0 0;
 275   background-repeat: no-repeat;
 276   color: #fff;
 277   font-weight: bold;
 278   cursor:default;
 279 }
 280
 281 .home #home-link a:hover,
 282 .guide #guide-link a:hover,
 283 .reference #reference-link a:hover,
 284 .sdk #sdk-link a:hover,
 285 .resources #resources-link a:hover,
 286 .videos #videos-link  a:hover {
 287   background-image: url(images/bg_images_sprite.png);
 288   background-position: 0 0;
 289 }
 290
 291 #headerLinks {
 292   margin:10px 10px 0 0;
 293   height:13px;
 294   font-size: 11px;
 295   vertical-align: top;
 296 }
 297
 298 #headerLinks a {
 299   color: #7FA9B5;
 300 }
 301
 302 #headerLinks img {
 303   vertical-align:middle;
 304 }
 305
 306 #language {
 307   margin:0 10px 0 4px;
 308 }
 309
 310 #search {
 311   height:45px;
 312   margin:15px 10px 0 0;
 313 }
 314
 315 /* MAIN BODY */
 316
 317 #mainBodyFluid {
 318   margin: 20px 10px;
 319   color:#333;
 320 }
 321
 322 #mainBodyFixed {
 323   margin: 20px 10px;
 324   color: #333;
 325   width:930px;
 326   position:relative;
 327 }
 328
 329 #mainBodyFixed h3,
 330 #mainBodyFluid h3 {
 331   color:#336666;
 332   font-size:1.25em;
 333   margin: 0em 0em 0em 0em;
 334   padding-bottom:.5em;
 335 }
 336
 337 #mainBodyFixed h2,
 338 #mainBodyFluid h2 {
 339   color:#336666;
 340   font-size:1.25em;
 341   margin: 0;
 342   padding-bottom:.5em;
 343 }
 344
 345 #mainBodyFixed h1,
 346 #mainBodyFluid h1 {
 347   color:#435A6E;
 348   font-size:1.7em;
 349   margin: 1em 0;
 350 }
 351
 352 #mainBodyFixed .green,
 353 #mainBodyFluid .green,
 354 #jd-content .green {
 355   color:#7BB026;
 356   background-color:none;
 357 }
 358
 359 #mainBodyLeft {
 360   float: left;
 361   width: 600px;
 362   margin-right: 20px;
 363   color: #333;
 364   position:relative;
 365 }
 366
 367 div.indent {
 368   margin-left: 40px;
 369   margin-right: 70px;
 370 }
 371
 372 #mainBodyLeft p {
 373   color: #333;
 374   font-size: 13px;
 375 }
 376
 377 #mainBodyLeft p.blue {
 378   color: #669999;
 379 }
 380
 381 #mainBodyLeft #communityDiv {
 382   float: left;
 383   background-image:url(images/bg_community_leftDiv.jpg);
 384   background-repeat: no-repeat;
 385   width: 581px;
 386   height: 347px;
 387   padding: 20px 0px 0px 20px;
 388 }
 389
 390 #mainBodyRight {
 391   float: left;
 392   width: 300px;
 393   color: #333;
 394 }
 395
 396 #mainBodyRight p {
 397   padding-right: 50px;
 398   color: #333;
 399 }
 400
 401 #mainBodyRight table {
 402   width: 100%;
 403 }
 404
 405 #mainBodyRight td {
 406   border:0px solid #666;
 407   padding:0px 5px;
 408   text-align:left;
 409 }
 410
 411 #mainBodyRight .blueBorderBox {
 412   border:5px solid #ddf0f2;
 413   padding:18px 18px 18px 18px;
 414   text-align:left;
 415 }
 416
 417 #mainBodyFixed .seperator {
 418   background-image:url(images/hr_gray_side.jpg);
 419   background-repeat:no-repeat;
 420   width: 100%;
 421   float: left;
 422   clear: both;
 423 }
 424
 425 #mainBodyBottom {
 426   float: left;
 427   width: 100%;
 428   clear:both;
 429   color: #333;
 430 }
 431
 432 #mainBodyBottom .seperator {
 433   background-image:url(images/hr_gray_main.jpg);
 434   background-repeat:no-repeat;
 435   width: 100%;
 436   float: left;
 437   clear: both;
 438 }
 439
 440 /* FOOTER */
 441
 442 #footer {
 443   float: left;
 444   width:90%;
 445   margin: 20px;
 446   color: #aaa;
 447   font-size: 11px;
 448 }
 449
 450 #footer a {
 451   color: #aaa;
 452   font-size: 11px;
 453 }
 454
 455 #footer a:hover {
 456   text-decoration: underline;
 457   color:#aaa;
 458 }
 459
 460 #footerlinks {
 461   margin-top:2px;
 462 }
 463
 464 #footerlinks a,
 465 #footerlinks a:visited {
 466   color:#006699;
 467 }
 468
 469 /* SEARCH FILTER */
 470
 471 #search_autocomplete {
 472   color:#aaa;
 473 }
 474
 475 #search-button {
 476   display:inline;
 477 }
 478
 479 #search_filtered_div {
 480   position:absolute;
 481   margin-top:-1px;
 482   z-index:101;
 483   border:1px solid #BCCDF0;
 484   background-color:#fff;
 485 }
 486
 487 #search_filtered {
 488   min-width:100%;
 489 }
 490 #search_filtered td{
 491   background-color:#fff;
 492   border-bottom: 1px solid #669999;
 493   line-height:1.5em;
 494 }
 495
 496 #search_filtered .jd-selected {
 497   background-color: #94b922;
 498   cursor:pointer;
 499 }
 500 #search_filtered .jd-selected,
 501 #search_filtered .jd-selected a {
 502   color:#fff;
 503 }
 504
 505 .no-display {
 506   display: none;
 507 }
 508
 509 .jd-autocomplete {
 510   font-family: Arial, sans-serif;
 511   padding-left: 6px;
 512   padding-right: 6px;
 513   padding-top: 1px;
 514   padding-bottom: 1px;
 515   font-size: .8em;
 516   border: none;
 517   margin: 0;
 518   line-height: 1.05em;
 519 }
 520
 521 .show-row {
 522   display: table-row;
 523 }
 524 .hide-row {
 525   display: hidden;
 526 }
 527
 528 /* SEARCH */
 529
 530 /* restrict global search form width */
 531 #searchForm {
 532   width:350px;
 533 }
 534
 535 #searchTxt {
 536   width:200px;
 537 }
 538
 539 /* disable twiddle and size selectors for left column */
 540 #leftSearchControl div {
 541   width: 100%;
 542 }
 543
 544 #leftSearchControl .gsc-twiddle {
 545   background-image : none;
 546 }
 547
 548 #leftSearchControl td, #searchForm td {
 549   border: 0px solid #000;
 550 }
 551
 552 #leftSearchControl .gsc-resultsHeader .gsc-title {
 553   padding-left : 0px;
 554   font-weight : bold;
 555   font-size : 13px;
 556   color:#006699;
 557   display : none;
 558 }
 559
 560 #leftSearchControl .gsc-resultsHeader div.gsc-results-selector {
 561   display : none;
 562 }
 563
 564 #leftSearchControl .gsc-resultsRoot {
 565   padding-top : 6px;
 566 }
 567
 568 #leftSearchControl div.gs-visibleUrl-long {
 569   display : block;
 570   color:#006699;
 571 }
 572
 573 .gsc-webResult div.gs-visibleUrl-short,
 574 table.gsc-branding,
 575 .gsc-clear-button {
 576   display : none;
 577 }
 578
 579 .gsc-cursor-box .gsc-cursor div.gsc-cursor-page,
 580 .gsc-cursor-box .gsc-trailing-more-results a.gsc-trailing-more-results,
 581 #leftSearchControl a,
 582 #leftSearchControl a b {
 583   color:#006699;
 584 }
 585
 586 .gsc-resultsHeader {
 587   display: none;
 588 }
 589
 590 /* Disable built in search forms */
 591 .gsc-control form.gsc-search-box {
 592   display : none;
 593 }
 594 table.gsc-search-box {
 595   margin:6px 0 0 0;
 596   border-collapse:collapse;
 597 }
 598
 599 td.gsc-input {
 600   padding:0 2px;
 601   width:100%;
 602   vertical-align:middle;
 603 }
 604
 605 input.gsc-input {
 606   border:1px solid #BCCDF0;
 607   width:99%;
 608   padding-left:2px;
 609   font-size:.95em;
 610 }
 611
 612 td.gsc-search-button {
 613   text-align: right;
 614   padding:0;
 615   vertical-align:top;
 616 }
 617
 618 #search-button {
 619   margin:0 0 0 2px;
 620   font-size:11px;
 621 }
 622
 623 /* search result tabs */
 624
 625 #doc-content .gsc-control {
 626   position:relative;
 627 }
 628
 629 #doc-content .gsc-tabsArea {
 630   position:relative;
 631   white-space:nowrap;
 632 }
 633
 634 #doc-content .gsc-tabHeader {
 635   padding: 3px 6px;
 636   position:relative;
 637 }
 638
 639 #doc-content .gsc-tabHeader.gsc-tabhActive {
 640   border-top: 2px solid #94B922;
 641 }
 642
 643 #doc-content h2#searchTitle {
 644   padding:0;
 645 }
 646
 647 #doc-content .gsc-resultsbox-visible {
 648   padding:1em 0 0 6px;
 649 }
 650
 651 /* CAROUSEL */
 652
 653 #homeMiddle {
 654   padding: 0px 0px 0px 0px;
 655   float: left;
 656   width: 584px;
 657   height: 580px;
 658   position:relative;
 659 }
 660
 661 #topAnnouncement {
 662   background:url(images/home/bg_home_announcement.png) no-repeat 0 0;
 663 }
 664
 665 #homeTitle {
 666   padding:15px 15px 0;
 667   height:30px;
 668 }
 669
 670 #homeTitle h2 {
 671   padding:0;
 672 }
 673
 674 #announcement-block {
 675   padding:0 15px 0;
 676   overflow:hidden;
 677   background: url(images/hr_gray_side.jpg) no-repeat 15px 0;
 678   zoom:1;
 679 }
 680
 681 #announcement-block>* {
 682   padding:15px 0 0;
 683 }
 684
 685 #announcement-block img {
 686   float:left;
 687   margin:0 30px 0 0;
 688 }
 689
 690 #announcement {
 691   float:left;
 692   margin:0;
 693 }
 694
 695 #carousel {
 696   background:url(images/home/bg_home_carousel.png) no-repeat 0 0;
 697   position:relative;
 698   height:400px;
 699 }
 700
 701 #carouselMain {
 702         background: url(images/home/bg_home_carousel_board.png) 0 0 no-repeat;
 703         height:auto;
 704   padding: 25px 21px 0;
 705   overflow:hidden;
 706   position:relative;
 707   zoom:1; /*IE6*/
 708 }
 709
 710 #carouselMain img {
 711   margin:0;
 712 }
 713
 714 #carouselMain .bulletinDesc h3 {
 715         margin:0;
 716         padding:0;
 717 }
 718
 719 #carouselMain .bulletinDesc p {
 720         margin:0;
 721         padding:0.7em 0 0;
 722 }
 723
 724 #carouselWheel {
 725         background: url(images/home/bg_home_carousel_wheel.png) 0 0 no-repeat;
 726         padding-top:40px;
 727         height:150px;
 728 }
 729
 730 .clearer { clear:both; }
 731
 732 a#arrow-left, a#arrow-right {
 733   float:left;
 734   width:42px;
 735   height:42px;
 736   background-image:url(images/home/carousel_buttons_sprite.png);
 737   background-repeat:no-repeat;
 738 }
 739 a#arrow-left {
 740   margin:35px 3px 0 10px;
 741 }
 742 a#arrow-right {
 743   margin:35px 10px 0 0;
 744 }
 745 a.arrow-left-off,
 746 a#arrow-left.arrow-left-off:hover {
 747   background-position:0 0;
 748 }
 749 a.arrow-right-off,
 750 a#arrow-right.arrow-right-off:hover {
 751   background-position:-42px 0;
 752 }
 753 a#arrow-left:hover {
 754   background-position:0 -42px;
 755 }
 756 a#arrow-right:hover {
 757   background-position:-42px -42px;
 758 }
 759 a.arrow-left-on {
 760   background-position:0 0;
 761 }
 762 a.arrow-right-on {
 763   background-position:-42px 0;
 764 }
 765 a.arrow-right-off,
 766 a.arrow-left-off {
 767   cursor:default;
 768 }
 769
 770 .app-list-container {
 771   margin:0 20px;
 772   position:relative;
 773   width:100%;
 774 }
 775
 776 div#list-clip {
 777   height:110px;
 778   width:438px;
 779   overflow:hidden;
 780   position:relative;
 781   float:left;
 782 }
 783
 784 div#app-list {
 785   left:0;
 786   z-index:1;
 787   position:absolute;
 788   margin:11px 0 0;
 789   _margin-top:13px;
 790   width:1000%;
 791 }
 792
 793 #app-list a {
 794   display:block;
 795   float:left;
 796   height:90px;
 797   width:90px;
 798   margin:0 24px 0;
 799   padding:3px;
 800   background:#99cccc;
 801   -webkit-border-radius:7px;
 802   -moz-border-radius:7px;
 803   border-radius:7px;
 804   text-decoration:none;
 805   text-align:center;
 806   font-size:11px;
 807   line-height:11px;
 808 }
 809
 810 #app-list a span {
 811   position:relative;
 812   top:-4px;
 813 }
 814
 815 #app-list img {
 816   width:90px;
 817   height:70px;
 818   margin:0;
 819 }
 820
 821 #app-list a.selected,
 822 #app-list a:active.selected,
 823 #app-list a:hover.selected {
 824   background:#A4C639;
 825   color:#fff;
 826   cursor:default;
 827   text-decoration:none;
 828 }
 829
 830 #app-list a:hover,
 831 #app-list a:active {
 832   background:#ff9900;
 833 }
 834
 835 #app-list a:hover span,
 836 #app-list a:active span {
 837   text-decoration:underline;
 838 }
 839
 840 #droid-name {
 841   padding-top:.5em;
 842   color:#666;
 843   padding-bottom:.25em;
 844 }
 845
 846 /*IE6*/
 847 * html #app-list a { zoom: 1; margin:0 24px 0 15px;}
 848
 849 * html #list-clip {
 850   width:430px !important;
 851 }
 852
 853 /*carousel bulletin layouts*/
 854 /*460px width*/
 855 /*185px height*/
 856 .img-left {
 857   float:left;
 858   width:230px;
 859   overflow:hidden;
 860   padding:8px 0 8px 8px;
 861 }
 862 .desc-right {
 863   float:left;
 864   width:270px;
 865   padding:10px;
 866 }
 867 .img-right {
 868   float:right;
 869   width:220px;
 870   overflow:hidden;
 871   padding:8px 8px 8px 0;
 872 }
 873 .desc-left {
 874   float:right;
 875   width:280px;
 876   padding:10px;
 877   text-align:right;
 878 }
 879 .img-top {
 880   padding:20px 20px 0;
 881 }
 882 .desc-bottom {
 883   padding:10px;
 884 }
 885
 886
 887 /* VIDEO PAGE */
 888
 889 #mainBodyLeft.videoPlayer {
 890   width:570px;
 891 }
 892
 893 #mainBodyRight.videoPlayer {
 894   width:330px;
 895 }
 896
 897 /* player */
 898
 899 #videoPlayerBox {
 900   background-color: #DAF3FC;
 901   border-radius:7px;
 902   -moz-border-radius:7px;
 903   -webkit-border-radius:7px;
 904   width:530px;
 905   padding:20px;
 906   border:1px solid #d3ecf5;
 907   box-shadow:2px 3px 1px #eee;
 908   -moz-box-shadow:2px 3px 1px #eee;
 909   -webkit-box-shadow:2px 3px 1px #eee;
 910 }
 911
 912 #videoBorder {
 913   background-color: #FFF;
 914   min-height:399px;
 915   height:auto !important;
 916   border:1px solid #ccdada;
 917   border-radius:7px 7px 0 0;
 918   -moz-border-radius:7px 7px 0 0;
 919   -webkit-border-top-left-radius:7px;
 920   -webkit-border-top-right-radius:7px;
 921 }
 922
 923 #videoPlayerTitle {
 924   width:500px;
 925   padding:15px 15px 0;
 926 }
 927
 928 #videoPlayerTitle h2 {
 929   font-weight:bold;
 930   font-size:1.2em;
 931   color:#336666;
 932   margin:0;
 933   padding:0;
 934 }
 935
 936 #objectWrapper {
 937   padding:15px 15px;
 938   height:334px;
 939   width:500px;
 940 }
 941
 942 /* playlist tabs */
 943
 944 ul#videoTabs {
 945   list-style-type:none;
 946   padding:0;
 947   clear:both;
 948   margin:0;
 949   padding: 20px 0 0 15px;
 950   zoom:1; /* IE7/8, otherwise top-padding is double */
 951 }
 952
 953 ul#videoTabs li {
 954   display:inline;
 955   padding:0;
 956   margin:0 3px 0 0;
 957   line-height:2em;
 958 }
 959
 960 ul#videoTabs li a {
 961   border-radius:7px 7px 0 0;
 962   -moz-border-radius:7px 7px 0 0;
 963   -webkit-border-top-left-radius:7px;
 964   -webkit-border-top-right-radius:7px;
 965   background:#95c0d0;
 966   color:#fff;
 967   text-decoration:none;
 968   padding:.45em 1.5em;
 969   font-weight:bold;
 970 }
 971
 972 ul#videoTabs li.selected a {
 973   font-weight:bold;
 974   text-decoration:none;
 975   color:#555;
 976   background:#daf3fc;
 977   border-bottom:1px solid #daf3fc;
 978 }
 979
 980 ul#videoTabs li:hover a {
 981   background:#85acba;
 982 }
 983
 984 ul#videoTabs li.selected:hover a {
 985   background:#daf3fc;
 986 }
 987
 988 /* playlists */
 989
 990 #videos {
 991   background:#daf3fc;
 992   margin-bottom:1.5em;
 993   padding:15px;
 994   border-radius:5px;
 995   -moz-border-radius:5px;
 996   -webkit-border-radius:5px;
 997   box-shadow:2px 3px 1px #eee;
 998   -moz-box-shadow:2px 3px 1px #eee;
 999   -webkit-box-shadow:2px 3px 1px #eee;
1000 }
1001
1002 #videos div {
1003   display:none;
1004 }
1005
1006 #videos div.selected {
1007   display:block;
1008 }
1009
1010 ul.videoPreviews {
1011   list-style:none;
1012   padding:0;
1013   margin:0;
1014   zoom:1; /* IE, otherwise, layout doesn't update when showing 'more' */
1015 }
1016
1017 ul.videoPreviews li {
1018   margin:0 0 5px;
1019   padding:0;
1020   overflow:hidden;
1021   position:relative;
1022 }
1023
1024 #mainBodyFixed ul.videoPreviews h3 {
1025   font-size: 12px;
1026   margin:0 0 1em 130px;
1027   padding:0;
1028   font-weight:bold;
1029   color:inherit;
1030 }
1031
1032 ul.videoPreviews a {
1033   margin:1px;
1034   padding:10px;
1035   text-decoration:none;
1036   height:90px;
1037   display:block;
1038   border-radius:5px;
1039   -moz-border-radius:5px;
1040   -webkit-border-radius:5px;
1041   background-color:transparent;
1042 }
1043
1044 ul.videoPreviews a:hover {
1045   background-color:#FFF;
1046   border:none; /* IE8, otherwise, bg doesn't work */
1047 }
1048
1049 ul.videoPreviews a.selected {
1050   background-color: #FF9900;
1051 }
1052
1053 ul.videoPreviews img {
1054   float:left;
1055   clear:left;
1056   margin:0;
1057 }
1058
1059 ul.videoPreviews h3 {
1060   font-size:12px;
1061   font-weight:bold;
1062   text-decoration:none;
1063   margin:0 0 1em 130px;
1064   padding:0;
1065 }
1066
1067 ul.videoPreviews p {
1068   font-size: 12px;
1069   text-decoration:none;
1070   margin:0 0 1.2em 130px;
1071 }
1072
1073 ul.videoPreviews p.full {
1074   display:none;
1075 }
1076
1077 ul.videoPreviews span.more {
1078   padding:0 0 0 12px;
1079   background:url(images/arrow_bluelink_down.png) 0 2px no-repeat;
1080 }
1081
1082 ul.videoPreviews span.less {
1083   padding:0 0 0 12px;
1084   background:url(images/arrow_bluelink_up.png) 0 2px no-repeat;
1085   display:none;
1086 }
1087
1088 ul.videoPreviews p.toggle {
1089   position:absolute;
1090   margin:0;
1091   margin-top:-23px; /* instead of bottom:23px, because IE won't do it correctly */
1092   left:140px;
1093 }
1094
1095 ul.videoPreviews p.toggle a {
1096   height:auto;
1097   margin:0;
1098   padding:0;
1099   zoom:1; /* IE6, otherwise the margin considers the img on redraws */
1100 }
1101
1102 ul.videoPreviews p.toggle a:hover {
1103   text-decoration:underline;
1104   background:transparent; /* IE6, otherwise it inherits white */
1105 }
1106
1107 /* featured videos */
1108
1109 #mainBodyRight h2 {
1110   padding:0 0 5px;
1111 }
1112
1113 #mainBodyRight ul.videoPreviews {
1114   margin:10px 0 0;
1115 }
1116
1117 #mainBodyRight ul.videoPreviews li {
1118   font-size:11px;
1119   line-height:13px;
1120   margin:0 0 5px;
1121   padding:0;
1122 }
1123
1124 #mainBodyRight ul.videoPreviews h3 {
1125   padding:0;
1126   margin:0;
1127 }
1128
1129 #mainBodyRight ul.videoPreviews a {
1130   text-decoration:none;
1131   height:108px;
1132   border:1px solid #FFF;
1133 }
1134
1135 #mainBodyRight ul.videoPreviews a:hover {
1136   border:1px solid #CCDADA;
1137 }
1138
1139 #mainBodyRight ul.videoPreviews a.selected {
1140   border:1px solid #FFF;
1141 }
1142
1143 #mainBodyRight ul.videoPreviews p {
1144         line-height:1.2em;
1145   padding:0;
1146   margin:4px 0 0 130px;
1147 }
1148
1149 #mainBodyRight ul.videoPreviews img {
1150         margin-top:5px;
1151 }
1152
1153 /* Pretty printing styles. Used with prettify.js. */
1154
1155 .str { color: #080; }
1156 .kwd { color: #008; }
1157 .com { color: #800; }
1158 .typ { color: #606; }
1159 .lit { color: #066; }
1160 .pun { color: #660; }
1161 .pln { color: #000; }
1162 .tag { color: #008; }
1163 .atn { color: #606; }
1164 .atv { color: #080; }
1165 .dec { color: #606; }
1166
1167 @media print {
1168   .str { color: #060; }
1169   .kwd { color: #006; font-weight: bold; }
1170   .com { color: #600; font-style: italic; }
1171   .typ { color: #404; font-weight: bold; }
1172   .lit { color: #044; }
1173   .pun { color: #440; }
1174   .pln { color: #000; }
1175   .tag { color: #006; font-weight: bold; }
1176   .atn { color: #404; }
1177   .atv { color: #060; }
1178 }