Home | History | Annotate | Download | only in assets
      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