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,
 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 .blueBorderBox {
 423   border:5px solid #ddf0f2;
 424   padding:18px 18px 18px 18px;
 425   text-align:left;
 426 }
 427
 428 #mainBodyFixed .seperator {
 429   background-image:url(images/hr_gray_side.jpg);
 430   background-repeat:no-repeat;
 431   width: 100%;
 432   float: left;
 433   clear: both;
 434 }
 435
 436 #mainBodyBottom {
 437   float: left;
 438   width: 100%;
 439   clear:both;
 440   color: #333;
 441 }
 442
 443 #mainBodyBottom .seperator {
 444   background-image:url(images/hr_gray_main.jpg);
 445   background-repeat:no-repeat;
 446   width: 100%;
 447   float: left;
 448   clear: both;
 449 }
 450
 451 /* FOOTER */
 452
 453 #footer {
 454   float: left;
 455   width:90%;
 456   margin: 20px;
 457   color: #aaa;
 458   font-size: 11px;
 459 }
 460
 461 #footer a {
 462   color: #aaa;
 463   font-size: 11px;
 464 }
 465
 466 #footer a:hover {
 467   text-decoration: underline;
 468   color:#aaa;
 469 }
 470
 471 #footerlinks {
 472   margin-top:2px;
 473 }
 474
 475 #footerlinks a,
 476 #footerlinks a:visited {
 477   color:#006699;
 478 }
 479
 480 /* SEARCH FILTER */
 481
 482 #search_autocomplete {
 483   color:#aaa;
 484 }
 485
 486 #search-button {
 487   display:inline;
 488 }
 489
 490 #search_filtered_div {
 491   position:absolute;
 492   margin-top:-1px;
 493   z-index:101;
 494   border:1px solid #BCCDF0;
 495   background-color:#fff;
 496 }
 497
 498 #search_filtered {
 499   min-width:100%;
 500 }
 501 #search_filtered td{
 502   background-color:#fff;
 503   border-bottom: 1px solid #669999;
 504   line-height:1.5em;
 505 }
 506
 507 #search_filtered .jd-selected {
 508   background-color: #94b922;
 509   cursor:pointer;
 510 }
 511 #search_filtered .jd-selected,
 512 #search_filtered .jd-selected a {
 513   color:#fff;
 514 }
 515
 516 .no-display {
 517   display: none;
 518 }
 519
 520 .jd-autocomplete {
 521   font-family: Arial, sans-serif;
 522   padding-left: 6px;
 523   padding-right: 6px;
 524   padding-top: 1px;
 525   padding-bottom: 1px;
 526   font-size: 0.81em;
 527   border: none;
 528   margin: 0;
 529   line-height: 1.05em;
 530 }
 531
 532 .show-row {
 533   display: table-row;
 534 }
 535 .hide-row {
 536   display: hidden;
 537 }
 538
 539 /* SEARCH */
 540
 541 /* restrict global search form width */
 542 #searchForm {
 543   width:350px;
 544 }
 545
 546 #searchTxt {
 547   width:200px;
 548 }
 549
 550 /* disable twiddle and size selectors for left column */
 551 #leftSearchControl div {
 552   width: 100%;
 553 }
 554
 555 #leftSearchControl .gsc-twiddle {
 556   background-image : none;
 557 }
 558
 559 #leftSearchControl td, #searchForm td {
 560   border: 0px solid #000;
 561 }
 562
 563 #leftSearchControl .gsc-resultsHeader .gsc-title {
 564   padding-left : 0px;
 565   font-weight : bold;
 566   font-size : 13px;
 567   color:#006699;
 568   display : none;
 569 }
 570
 571 #leftSearchControl .gsc-resultsHeader div.gsc-results-selector {
 572   display : none;
 573 }
 574
 575 #leftSearchControl .gsc-resultsRoot {
 576   padding-top : 6px;
 577 }
 578
 579 #leftSearchControl div.gs-visibleUrl-long {
 580   display : block;
 581   color:#006699;
 582 }
 583
 584 .gsc-webResult div.gs-visibleUrl-short,
 585 table.gsc-branding,
 586 .gsc-clear-button {
 587   display : none;
 588 }
 589
 590 .gsc-cursor-box .gsc-cursor div.gsc-cursor-page,
 591 .gsc-cursor-box .gsc-trailing-more-results a.gsc-trailing-more-results,
 592 #leftSearchControl a,
 593 #leftSearchControl a b {
 594   color:#006699;
 595 }
 596
 597 .gsc-resultsHeader {
 598   display: none;
 599 }
 600
 601 /* Disable built in search forms */
 602 .gsc-control form.gsc-search-box {
 603   display : none;
 604 }
 605 table.gsc-search-box {
 606   margin:6px 0 0 0;
 607   border-collapse:collapse;
 608 }
 609
 610 td.gsc-input {
 611   padding:0 2px;
 612   width:100%;
 613   vertical-align:middle;
 614 }
 615
 616 input.gsc-input {
 617   border:1px solid #BCCDF0;
 618   width:99%;
 619   padding-left:2px;
 620   font-size:.95em;
 621 }
 622
 623 td.gsc-search-button {
 624   text-align: right;
 625   padding:0;
 626   vertical-align:top;
 627 }
 628
 629 #search-button {
 630   margin:0 0 0 2px;
 631   font-size:11px;
 632 }
 633
 634 /* search result tabs */
 635
 636 #doc-content .gsc-control {
 637   position:relative;
 638 }
 639
 640 #doc-content .gsc-tabsArea {
 641   position:relative;
 642   white-space:nowrap;
 643 }
 644
 645 #doc-content .gsc-tabHeader {
 646   padding: 3px 6px;
 647   position:relative;
 648 }
 649
 650 #doc-content .gsc-tabHeader.gsc-tabhActive {
 651   border-top: 2px solid #94B922;
 652 }
 653
 654 #doc-content h2#searchTitle {
 655   padding:0;
 656 }
 657
 658 #doc-content .gsc-resultsbox-visible {
 659   padding:1em 0 0 6px;
 660 }
 661
 662 /* CAROUSEL */
 663
 664 #homeMiddle {
 665   padding: 0px 0px 0px 0px;
 666   float: left;
 667   width: 584px;
 668   height: 627px;
 669   position:relative;
 670 }
 671
 672 #topAnnouncement {
 673   background:url(images/home/bg_home_announcement.png) no-repeat 0 0;
 674 }
 675
 676 #homeTitle {
 677   padding:15px 15px 0;
 678   height:30px;
 679 }
 680
 681 #homeTitle h2 {
 682   padding:0;
 683 }
 684
 685 #announcement-block {
 686   padding:0 15px 0;
 687   overflow:hidden;
 688   background: url(images/hr_gray_side.jpg) no-repeat 15px 0;
 689   zoom:1;
 690 }
 691
 692 #announcement-block>* {
 693   padding:15px 0 0;
 694 }
 695
 696 #announcement-block img {
 697   float:left;
 698   margin:0 30px 0 0;
 699 }
 700
 701 #announcement {
 702   float:left;
 703   margin:0;
 704 }
 705
 706 #carousel {
 707   background:url(images/home/bg_home_carousel.png) no-repeat 0 0;
 708   position:relative;
 709   height:400px;
 710 }
 711
 712 #carouselMain {
 713   background: url(images/home/bg_home_carousel_board.png) 0 0 no-repeat;
 714   height:auto;
 715   padding: 25px 21px 0;
 716   overflow:hidden;
 717   position:relative;
 718   zoom:1; /*IE6*/
 719 }
 720
 721 #carouselMain img {
 722   margin:0;
 723 }
 724
 725 #carouselMain .bulletinDesc h3 {
 726   margin:0;
 727   padding:0;
 728 }
 729
 730 #carouselMain .bulletinDesc p {
 731   margin:0;
 732   padding:0.7em 0 0;
 733 }
 734
 735 #carouselWheel {
 736   background: url(images/home/bg_home_carousel_wheel.png) 0 0 no-repeat;
 737   padding-top:40px;
 738   height:150px;
 739 }
 740
 741 .clearer { clear:both; }
 742
 743 a#arrow-left, a#arrow-right {
 744   float:left;
 745   width:42px;
 746   height:42px;
 747   background-image:url(images/home/carousel_buttons_sprite.png);
 748   background-repeat:no-repeat;
 749 }
 750 a#arrow-left {
 751   margin:35px 3px 0 10px;
 752 }
 753 a#arrow-right {
 754   margin:35px 10px 0 0;
 755 }
 756 a.arrow-left-off,
 757 a#arrow-left.arrow-left-off:hover {
 758   background-position:0 0;
 759 }
 760 a.arrow-right-off,
 761 a#arrow-right.arrow-right-off:hover {
 762   background-position:-42px 0;
 763 }
 764 a#arrow-left:hover {
 765   background-position:0 -42px;
 766 }
 767 a#arrow-right:hover {
 768   background-position:-42px -42px;
 769 }
 770 a.arrow-left-on {
 771   background-position:0 0;
 772 }
 773 a.arrow-right-on {
 774   background-position:-42px 0;
 775 }
 776 a.arrow-right-off,
 777 a.arrow-left-off {
 778   cursor:default;
 779 }
 780
 781 .app-list-container {
 782   margin:0 20px;
 783   position:relative;
 784   width:100%;
 785 }
 786
 787 div#list-clip {
 788   height:110px;
 789   width:438px;
 790   overflow:hidden;
 791   position:relative;
 792   float:left;
 793 }
 794
 795 div#app-list {
 796   left:0;
 797   z-index:1;
 798   position:absolute;
 799   margin:11px 0 0;
 800   _margin-top:13px;
 801   width:1000%;
 802 }
 803
 804 #app-list a {
 805   display:block;
 806   float:left;
 807   height:90px;
 808   width:90px;
 809   margin:0 24px 0;
 810   padding:3px;
 811   background:#99cccc;
 812   -webkit-border-radius:7px;
 813   -moz-border-radius:7px;
 814   border-radius:7px;
 815   text-decoration:none;
 816   text-align:center;
 817   font-size:11px;
 818   line-height:11px;
 819 }
 820
 821 #app-list a span {
 822   position:relative;
 823   top:-4px;
 824 }
 825
 826 #app-list img {
 827   width:90px;
 828   height:70px;
 829   margin:0;
 830 }
 831
 832 #app-list a.selected,
 833 #app-list a:active.selected,
 834 #app-list a:hover.selected {
 835   background:#A4C639;
 836   color:#fff;
 837   cursor:default;
 838   text-decoration:none;
 839 }
 840
 841 #app-list a:hover,
 842 #app-list a:active {
 843   background:#ff9900;
 844 }
 845
 846 #app-list a:hover span,
 847 #app-list a:active span {
 848   text-decoration:underline;
 849 }
 850
 851 #droid-name {
 852   padding-top:.5em;
 853   color:#666;
 854   padding-bottom:.25em;
 855 }
 856
 857 /*IE6*/
 858 * html #app-list a { zoom: 1; margin:0 24px 0 15px;}
 859
 860 * html #list-clip {
 861   width:430px !important;
 862 }
 863
 864 /*carousel bulletin layouts*/
 865 /*460px width*/
 866 /*185px height*/
 867 .img-left {
 868   float:left;
 869   width:230px;
 870   overflow:hidden;
 871   padding:8px 0 8px 8px;
 872 }
 873 .desc-right {
 874   float:left;
 875   width:270px;
 876   padding:10px;
 877 }
 878 .img-right {
 879   float:right;
 880   width:220px;
 881   overflow:hidden;
 882   padding:8px 8px 8px 0;
 883 }
 884 .desc-left {
 885   float:right;
 886   width:280px;
 887   padding:10px;
 888   text-align:right;
 889 }
 890 .img-top {
 891   padding:20px 20px 0;
 892 }
 893 .desc-bottom {
 894   padding:10px;
 895 }
 896
 897
 898 /* VIDEO PAGE */
 899
 900 #mainBodyLeft.videoPlayer {
 901   width:570px;
 902 }
 903
 904 #mainBodyRight.videoPlayer {
 905   width:330px;
 906 }
 907
 908 /* player */
 909
 910 #videoPlayerBox {
 911   background-color: #DAF3FC;
 912   border-radius:7px;
 913   -moz-border-radius:7px;
 914   -webkit-border-radius:7px;
 915   width:530px;
 916   padding:20px;
 917   border:1px solid #d3ecf5;
 918   box-shadow:2px 3px 1px #eee;
 919   -moz-box-shadow:2px 3px 1px #eee;
 920   -webkit-box-shadow:2px 3px 1px #eee;
 921 }
 922
 923 #videoBorder {
 924   background-color: #FFF;
 925   min-height:399px;
 926   height:auto !important;
 927   border:1px solid #ccdada;
 928   border-radius:7px 7px 0 0;
 929   -moz-border-radius:7px 7px 0 0;
 930   -webkit-border-top-left-radius:7px;
 931   -webkit-border-top-right-radius:7px;
 932 }
 933
 934 #videoPlayerTitle {
 935   width:500px;
 936   padding:15px 15px 0;
 937 }
 938
 939 #videoPlayerTitle h2 {
 940   font-weight:bold;
 941   font-size:1.2em;
 942   color:#336666;
 943   margin:0;
 944   padding:0;
 945 }
 946
 947 #objectWrapper {
 948   padding:15px 15px;
 949   height:334px;
 950   width:500px;
 951 }
 952
 953 /* playlist tabs */
 954
 955 ul#videoTabs {
 956   list-style-type:none;
 957   padding:0;
 958   clear:both;
 959   margin:0;
 960   padding: 20px 0 0 15px;
 961   zoom:1; /* IE7/8, otherwise top-padding is double */
 962 }
 963
 964 ul#videoTabs li {
 965   display:inline;
 966   padding:0;
 967   margin:0 3px 0 0;
 968   line-height:2em;
 969 }
 970
 971 ul#videoTabs li a {
 972   border-radius:7px 7px 0 0;
 973   -moz-border-radius:7px 7px 0 0;
 974   -webkit-border-top-left-radius:7px;
 975   -webkit-border-top-right-radius:7px;
 976   background:#95c0d0;
 977   color:#fff;
 978   text-decoration:none;
 979   padding:.45em 1.5em;
 980   font-weight:bold;
 981 }
 982
 983 ul#videoTabs li.selected a {
 984   font-weight:bold;
 985   text-decoration:none;
 986   color:#555;
 987   background:#daf3fc;
 988   border-bottom:1px solid #daf3fc;
 989 }
 990
 991 ul#videoTabs li:hover a {
 992   background:#85acba;
 993 }
 994
 995 ul#videoTabs li.selected:hover a {
 996   background:#daf3fc;
 997 }
 998
 999 /* playlists */
1000
1001 #videos {
1002   background:#daf3fc;
1003   margin-bottom:1.5em;
1004   padding:15px;
1005   border-radius:5px;
1006   -moz-border-radius:5px;
1007   -webkit-border-radius:5px;
1008   box-shadow:2px 3px 1px #eee;
1009   -moz-box-shadow:2px 3px 1px #eee;
1010   -webkit-box-shadow:2px 3px 1px #eee;
1011 }
1012
1013 #videos div {
1014   display:none;
1015 }
1016
1017 #videos div.selected {
1018   display:block;
1019 }
1020
1021 ul.videoPreviews {
1022   list-style:none;
1023   padding:0;
1024   margin:0;
1025   zoom:1; /* IE, otherwise, layout doesn't update when showing 'more' */
1026 }
1027
1028 ul.videoPreviews li {
1029   margin:0 0 5px;
1030   padding:0;
1031   overflow:hidden;
1032   position:relative;
1033 }
1034
1035 #mainBodyFixed ul.videoPreviews h3 {
1036   font-size: 12px;
1037   margin:0 0 1em 130px;
1038   padding:0;
1039   font-weight:bold;
1040   color:inherit;
1041 }
1042
1043 ul.videoPreviews a {
1044   margin:1px;
1045   padding:10px;
1046   text-decoration:none;
1047   height:90px;
1048   display:block;
1049   border-radius:5px;
1050   -moz-border-radius:5px;
1051   -webkit-border-radius:5px;
1052   background-color:transparent;
1053 }
1054
1055 ul.videoPreviews a:hover {
1056   background-color:#FFF;
1057   border:none; /* IE8, otherwise, bg doesn't work */
1058 }
1059
1060 ul.videoPreviews a.selected {
1061   background-color: #FF9900;
1062 }
1063
1064 ul.videoPreviews img {
1065   float:left;
1066   clear:left;
1067   margin:0;
1068 }
1069
1070 ul.videoPreviews h3 {
1071   font-size:12px;
1072   font-weight:bold;
1073   text-decoration:none;
1074   margin:0 0 1em 130px;
1075   padding:0;
1076 }
1077
1078 ul.videoPreviews p {
1079   font-size: 12px;
1080   text-decoration:none;
1081   margin:0 0 1.2em 130px;
1082 }
1083
1084 ul.videoPreviews p.full {
1085   display:none;
1086 }
1087
1088 ul.videoPreviews span.more {
1089   padding:0 0 0 12px;
1090   background:url(images/arrow_bluelink_down.png) 0 2px no-repeat;
1091 }
1092
1093 ul.videoPreviews span.less {
1094   padding:0 0 0 12px;
1095   background:url(images/arrow_bluelink_up.png) 0 2px no-repeat;
1096   display:none;
1097 }
1098
1099 ul.videoPreviews p.toggle {
1100   position:absolute;
1101   margin:0;
1102   margin-top:-23px; /* instead of bottom:23px, because IE won't do it correctly */
1103   left:140px;
1104 }
1105
1106 ul.videoPreviews p.toggle a {
1107   height:auto;
1108   margin:0;
1109   padding:0;
1110   zoom:1; /* IE6, otherwise the margin considers the img on redraws */
1111 }
1112
1113 ul.videoPreviews p.toggle a:hover {
1114   text-decoration:underline;
1115   background:transparent; /* IE6, otherwise it inherits white */
1116 }
1117
1118 /* featured videos */
1119
1120 #mainBodyRight h2 {
1121   padding:0 0 5px;
1122 }
1123
1124 #mainBodyRight ul.videoPreviews {
1125   margin:10px 0 0;
1126 }
1127
1128 #mainBodyRight ul.videoPreviews li {
1129   font-size:11px;
1130   line-height:13px;
1131   margin:0 0 5px;
1132   padding:0;
1133 }
1134
1135 #mainBodyRight ul.videoPreviews h3 {
1136   padding:0;
1137   margin:0;
1138 }
1139
1140 #mainBodyRight ul.videoPreviews a {
1141   text-decoration:none;
1142   height:108px;
1143   border:1px solid #FFF;
1144 }
1145
1146 #mainBodyRight ul.videoPreviews a:hover {
1147   border:1px solid #CCDADA;
1148 }
1149
1150 #mainBodyRight ul.videoPreviews a.selected {
1151   border:1px solid #FFF;
1152 }
1153
1154 #mainBodyRight ul.videoPreviews p {
1155   line-height:1.2em;
1156   padding:0;
1157   margin:4px 0 0 130px;
1158 }
1159
1160 #mainBodyRight ul.videoPreviews img {
1161   margin-top:5px;
1162 }
1163
1164 /* Pretty printing styles. Used with prettify.js. */
1165
1166 .str { color: #080; }
1167 .kwd { color: #008; }
1168 .com { color: #800; }
1169 .typ { color: #606; }
1170 .lit { color: #066; }
1171 .pun { color: #660; }
1172 .pln { color: #000; }
1173 dl.tag-list dt code,
1174 .tag { color: #008; }
1175 dl.atn-list dt code,
1176 .atn { color: #828; }
1177 .atv { color: #080; }
1178 .dec { color: #606; }
1179
1180 @media print {
1181   .str { color: #060; }
1182   .kwd { color: #006; font-weight: bold; }
1183   .com { color: #600; font-style: italic; }
1184   .typ { color: #404; font-weight: bold; }
1185   .lit { color: #044; }
1186   .pun { color: #440; }
1187   .pln { color: #000; }
1188   .tag { color: #006; font-weight: bold; }
1189   .atn { color: #404; }
1190   .atv { color: #060; }
1191 }