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