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