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