android-developer-core.css revision 8a0625bcb898fdbfe3b81e7b31651ed9912b6bb0
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 10html,body,div,h1,h2,h3,h4,h5,h6,p,img, 11dl,dt,dd,ol,ul,li,table,caption,tbody, 12tfoot,thead,tr,th,td,form,fieldset, 13embed,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 74html, body { 75 overflow:hidden; /* keeps scrollbar off IE */ 76 background-color:#fff; 77} 78 79body { 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 88a, a code { 89 color:#006699; 90} 91 92 93a:active, 94a:active code { 95 color:#f00; 96} 97 98a:visited, 99a:visited code { 100 color:#006699; 101} 102 103input, select, 104textarea, option { 105 font-family:inherit; 106 font-size:inherit; 107 padding:0; 108 margin:0; 109} 110 111option { 112 padding:0 4px; 113} 114 115p { 116 padding:0; 117 margin:0 0 1em; 118} 119 120code, pre { 121 color:#007000; 122 font-family:monospace; 123 line-height:1em; 124} 125 126var { 127 color:#007000; 128 font-style:italic; 129} 130 131pre { 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 140h1,h2,h3,h4,h5 { 141 margin:1em 0; 142 padding:0; 143} 144 145p,ul,ol,dl,dd,dt,li { 146 line-height:1.3em; 147} 148 149ul,ol { 150 margin:0 0 .8em; 151 padding:0 0 0 2em; 152} 153 154li { 155 padding:0 0 .5em; 156} 157 158dl { 159 margin:0 0 1em 0; 160 padding:0; 161} 162 163dt { 164 margin:0; 165 padding:0; 166} 167 168dd { 169 margin:0 0 1em; 170 padding:0 0 0 2em; 171} 172 173li p { 174 margin:.5em 0 0; 175} 176 177dd p { 178 margin:1em 0 0; 179} 180 181li pre, li table, li img { 182 margin:.5em 0 0 1em; 183} 184 185dd pre, dd table, dd img { 186 margin:1em 0 0 1em; 187} 188 189li ul, 190li ol, 191dd ul, 192dd ol { 193 margin:0; 194 padding: 0 0 0 2em; 195} 196 197li li, 198dd li { 199 margin:0; 200 padding:.5em 0 0; 201} 202 203dl dl, 204ol dl, 205ul dl { 206 margin:0 0 1em; 207 padding:0; 208} 209 210table { 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 219td,th { 220 border:1px solid #ccc; 221 padding:6px 12px; 222 text-align:left; 223 vertical-align:top; 224 background-color:inherit; 225} 226 227th { 228 background-color:#dee8f1; 229} 230 231hr.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 423div.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 565span.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 573span.emBlue { 574 color: #336666; 575 font-style:italic; 576} 577 578.pageTable { 579 width: 95%; 580 border: none; 581} 582 583.pageTable img { 584vertical-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, 720table.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} 740table.gsc-search-box { 741 margin:6px 0 0 0; 742 border-collapse:collapse; 743} 744 745td.gsc-input { 746 padding:0 2px; 747 width:100%; 748 vertical-align:middle; 749} 750 751input.gsc-input { 752 border:1px solid #BCCDF0; 753 width:99%; 754 padding-left:2px; 755 font-size:.95em; 756} 757 758td.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 878a#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} 885a#arrow-left { 886 margin:35px 3px 0 10px; 887} 888a#arrow-right { 889 margin:35px 10px 0 0; 890} 891a.arrow-left-off, 892a#arrow-left.arrow-left-off:hover { 893 background-position:0 0; 894} 895a.arrow-right-off, 896a#arrow-right.arrow-right-off:hover { 897 background-position:-42px 0; 898} 899a#arrow-left:hover { 900 background-position:0 -42px; 901} 902a#arrow-right:hover { 903 background-position:-42px -42px; 904} 905a.arrow-left-on { 906 background-position:0 0; 907} 908a.arrow-right-on { 909 background-position:-42px 0; 910} 911a.arrow-right-off, 912a.arrow-left-off { 913 cursor:default; 914} 915 916.app-list-container { 917 margin:0 20px; 918 position:relative; 919 width:100%; 920} 921 922div#list-clip { 923 height:110px; 924 width:438px; 925 overflow:hidden; 926 position:relative; 927 float:left; 928} 929 930div#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 1090ul#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 1099ul#videoTabs li { 1100 display:inline; 1101 padding:0; 1102 margin:0 3px 0 0; 1103 line-height:2em; 1104} 1105 1106ul#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 1118ul#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 1126ul#videoTabs li:hover a { 1127 background:#85acba; 1128} 1129 1130ul#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 1156ul.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 1163ul.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 1178ul.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 1190ul.videoPreviews a:hover { 1191 background-color:#FFF; 1192 border:none; /* IE8, otherwise, bg doesn't work */ 1193} 1194 1195ul.videoPreviews a.selected { 1196 background-color: #FF9900; 1197} 1198 1199ul.videoPreviews img { 1200 float:left; 1201 clear:left; 1202 margin:0; 1203} 1204 1205ul.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 1213ul.videoPreviews p { 1214 font-size: 12px; 1215 text-decoration:none; 1216 margin:0 0 1.2em 130px; 1217} 1218 1219ul.videoPreviews p.full { 1220 display:none; 1221} 1222 1223ul.videoPreviews span.more { 1224 padding:0 0 0 12px; 1225 background:url(images/arrow_bluelink_down.png) 0 2px no-repeat; 1226} 1227 1228ul.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 1234ul.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 1241ul.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 1248ul.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