/* file: android-developer-core.css author: smain date: september 2008 info: core developer styles (developer.android.com) */ /* RESET STYLES */ html,body,div,h1,h2,h3,h4,h5,h6,p,img, dl,dt,dd,ol,ul,li,table,caption,tbody, tfoot,thead,tr,th,td,form,fieldset, embed,object,applet { margin: 0; padding: 0; border: 0; } .rebox { background:#daf3fc; margin-bottom:1.5em; -moz-border-radius:5px; -webkit-border-radius:5px; } .rebox.lil p img { display:block; margin-bottom:2em; } .rebox .p { padding:1.5em; line-height:1.25em; } .p-r { padding-right:1.5em; } .rebox h2, .rebox h3 { font-size:16px; color:#fff; display:block; background:url('/assets/images/rebox-gradient.gif') no-repeat center bottom #95c0d0; padding:.5em .5em .5em .75em; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px; -webkit-border-top-right-radius:5px; -webkit-border-top-left-radius:5px; } .rebox.lil { } .rebox.lil img { float:left; margin:0 1em 0 0; padding:0 0 3em 0; } .rebox.green { background:#d4e9a9; } .rebox.green h2, .rebox.green h3 { background:url('images/rebox-gradient-green.gif') no-repeat center bottom #aaca46; font-weight:bold; } .rebox.green a:link, .rebox.green a:visited { color:#360; } /* BASICS */ html, body { overflow:hidden; /* keeps scrollbar off IE */ background-color:#fff; } body { font-family:arial,sans-serif; color:#000; font-size:13px; color:#333; background-image:url(images/bg_fade.jpg); background-repeat:repeat-x; } a, a code { color:#006699; } a:active, a:active code { color:#f00; } a:visited, a:visited code { color:#006699; } input, select, textarea, option { font-family:inherit; font-size:inherit; padding:0; margin:0; } option { padding:0 4px; } p { padding:0; margin:0 0 1em; } code, pre { color:#007000; font-family:monospace; line-height:1em; } var { color:#007000; font-style:italic; } pre { border:1px solid #ccc; background-color:#fafafa; padding:10px; margin:0 0 1em 1em; overflow:auto; line-height:inherit; /* fixes vertical scrolling in webkit */ } h1,h2,h3,h4,h5 { margin:1em 0; padding:0; } p,ul,ol,dl,dd,dt,li { line-height:1.3em; } ul,ol { margin:0 0 .8em; padding:0 0 0 2em; } li { padding:0 0 .5em; } dl { margin:0 0 1em 0; padding:0; } dt { margin:0; padding:0; } dd { margin:0 0 1em; padding:0 0 0 2em; } li p { margin:.5em 0 0; } dd p { margin:1em 0 0; } li pre, li table, li img { margin:.5em 0 0 1em; } dd pre, dd table, dd img { margin:1em 0 0 1em; } li ul, li ol, dd ul, dd ol { margin:0; padding: 0 0 0 2em; } li li, dd li { margin:0; padding:.5em 0 0; } dl dl, ol dl, ul dl { margin:0 0 1em; padding:0; } table { font-size:1em; margin:0 0 1em; padding:0; border-collapse:collapse; border-width:0; empty-cells:show; } td,th { border:1px solid #ccc; padding:6px 12px; text-align:left; vertical-align:top; background-color:inherit; } th { background-color:#dee8f1; } hr.blue { background-color:#DDF0F2; border:none; height:5px; margin:20px 0 10px; } /* LAYOUT */ #body-content { /* "Preliminary" watermark for preview releases and interim builds. background:transparent url(images/preliminary.png) repeat scroll 0 0; */ margin:0; position:relative; width:100%; } #header { height: 114px; position:relative; z-index:100; min-width:576px; padding:0 10px; border-bottom:3px solid #94b922; } #headerLeft{ padding: 25px 0 0; } #headerLeft img{ height:50px; width:349px; } #headerRight { position:absolute; right:0; top:0; text-align:right; } /* Tabs in the header */ #header ul { list-style: none; margin: 7px 0 0; padding: 0; height: 29px; } #header li { float: left; margin: 0px 2px 0px 0px; padding:0; } #header li a { text-decoration: none; display: block; background-image: url(images/bg_images_sprite.png); background-position: 0 -58px; background-repeat: no-repeat; color: #666; font-size: 13px; font-weight: bold; width: 94px; height: 29px; text-align: center; margin: 0px; } #header li a:hover { background-image: url(images/bg_images_sprite.png); background-position: 0 -29px; background-repeat: no-repeat; } #header li a span { position:relative; top:7px; } #header li a span+span { display:none; } /* TAB HIGHLIGHTING */ .home #home-link a, .community #community-link a, .porting #porting-link a, .source #source-link a, .about #about-link a, .downloads #downloads-link a, .compatibility #compatibility-link a, .videos #videos-link a { background-image: url(images/bg_images_sprite.png); background-position: 0 0; background-repeat: no-repeat; color: #fff; font-weight: bold; cursor:default; } .home #home-link a:hover, .community #community-link a:hover, .home #home-link a:hover, .community #community-link a:hover, .porting #porting-link a:hover, .source #source-link a:hover, .about #about-link a:hover, .downloads #downloads-link a:hover, .compatibility #compatibility-link a:hover, .videos #videos-link a:hover { background-image: url(images/bg_images_sprite.png); background-position: 0 0; } #headerLinks { margin:10px 10px 0 0; height:13px; font-size: 11px; vertical-align: top; } #headerLinks a { color: #7FA9B5; } #headerLinks img { vertical-align:middle; } #language { margin:0 10px 0 4px; } #search { height:45px; margin:15px 10px 0 0; } /* main */ #mainBodyFluid { margin: 20px 10px; color:#333; } #mainBodyFixed { margin: 20px 10px; color: #333; width:930px; position:relative; } #mainBodyFixed h3, #mainBodyFluid h3 { color:#336666; font-size:1.25em; margin: 0em 0em 0em 0em; padding-bottom:.5em; } #mainBodyFixed h2, #mainBodyFluid h2 { color:#336666; font-size:1.25em; margin: 0; padding-bottom:.5em; } #mainBodyFixed h1, #mainBodyFluid h1 { color:#435A6E; font-size:1.7em; margin: 1em 0; } #mainBodyFixed .green, #mainBodyFluid .green, #jd-content .green { color:#7BB026; background-color:none; } #mainBodyLeft { float: left; width: 600px; margin-right: 20px; color: #333; position:relative; } div.indent { margin-left: 40px; margin-right: 70px; } #mainBodyLeft p { color: #333; font-size: 13px; } #mainBodyLeft p.blue { color: #669999; } #mainBodyLeft #communityDiv { float: left; background-image:url(images/bg_community_leftDiv.jpg); background-repeat: no-repeat; width: 581px; height: 347px; padding: 20px 0px 0px 20px; } #mainBodyRight { float: left; width: 300px; color: #333; } #mainBodyRight p { padding-right: 50px; color: #333; } #mainBodyRight table { width: 100%; } #mainBodyRight td { border:0px solid #666; padding:0px 5px; text-align:left; } #mainBodyRight .blueBorderBox { border:5px solid #ddf0f2; padding:18px 18px 18px 18px; text-align:left; } #mainBodyFixed .seperator { background-image:url(images/hr_gray_side.jpg); background-repeat:no-repeat; width: 100%; float: left; clear: both; } #mainBodyBottom { float: left; width: 100%; clear:both; color: #333; } #mainBodyBottom .seperator { background-image:url(images/hr_gray_main.jpg); background-repeat:no-repeat; width: 100%; float: left; clear: both; } /* Footer */ #footer { float: left; width:90%; margin: 20px; color: #aaa; font-size: 11px; } #footer a { color: #aaa; font-size: 11px; } #footer a:hover { text-decoration: underline; color:#aaa; } #footerlinks { margin-top:2px; } #footerlinks a, #footerlinks a:visited { color:#006699; } #homeBottom td { border:0px solid #666; padding: 8px 18px 8px 18px; } #homeBottom table { width: 100%; } #homeBottom { padding: 0px 0px 0px 0px; float: left; width: 585px; height: 165px; background-image:url(images/home/bg_home_bottom.jpg); background-repeat: no-repeat; } .groupTable { width: 100%; } .groupTable th { padding: 10px; color: #ffffff; background-color: #6D8293; border: 2px solid #fff; } .groupTable td { padding: 10px; color: #333333; background-color: #d9d9d9; border: 2px solid #fff; } .groupTable .evenRow td { background-color: #ededed; } span.BigBlue { color:#336666; font-size:1.25em; margin: 0em 0em 0em 0em; padding-bottom:.5em; font-weight: bold; } span.emBlue { color: #336666; font-style:italic; } .pageTable { width: 95%; border: none; } .pageTable img { vertical-align: bottom; } .pageTable td { border: none; } .pageTable td.leftNav { width: 100px; } .greenBox { margin: 10px 30px 10px 30px; padding: 10px 20px 10px 20px; background-color: #EBF3DB; width: 75%; } .blueBox { margin: 10px 30px 10px 30px; padding: 10px 20px 10px 20px; background-color: #DDF0F2; width: 75%; } .blueHR { margin: 10px 30px 10px 30px; height: 5px; background-color: #DDF0F2; width: 75%; } /* SEARCH FILTER */ #search_autocomplete { color:#aaa; } #search-button { display:inline; } #search_filtered_div { position:absolute; margin-top:-1px; z-index:101; border:1px solid #BCCDF0; background-color:#fff; } #search_filtered { min-width:100%; } #search_filtered td{ background-color:#fff; border-bottom: 1px solid #669999; line-height:1.5em; } #search_filtered .jd-selected { background-color: #94b922; cursor:pointer; } #search_filtered .jd-selected, #search_filtered .jd-selected a { color:#fff; } .no-display { display: none; } .jd-autocomplete { font-family: Arial, sans-serif; padding-left: 6px; padding-right: 6px; padding-top: 1px; padding-bottom: 1px; font-size: .8em; border: none; margin: 0; line-height: 1.05em; } .show-row { display: table-row; } .hide-row { display: hidden; } /* SEARCH */ /* restrict global search form width */ #searchForm { width:350px; } #searchTxt { width:200px; } /* disable twiddle and size selectors for left column */ #leftSearchControl div { width: 100%; } #leftSearchControl .gsc-twiddle { background-image : none; } #leftSearchControl td, #searchForm td { border: 0px solid #000; } #leftSearchControl .gsc-resultsHeader .gsc-title { padding-left : 0px; font-weight : bold; font-size : 13px; color:#006699; display : none; } #leftSearchControl .gsc-resultsHeader div.gsc-results-selector { display : none; } #leftSearchControl .gsc-resultsRoot { padding-top : 6px; } #leftSearchControl div.gs-visibleUrl-long { display : block; color:#006699; } .gsc-webResult div.gs-visibleUrl-short, table.gsc-branding, .gsc-clear-button { display : none; } .gsc-cursor-box .gsc-cursor div.gsc-cursor-page, .gsc-cursor-box .gsc-trailing-more-results a.gsc-trailing-more-results, #leftSearchControl a, #leftSearchControl a b { color:#006699; } .gsc-resultsHeader { display: none; } /* Disable built in search forms */ .gsc-control form.gsc-search-box { display : none; } table.gsc-search-box { margin:6px 0 0 0; border-collapse:collapse; } td.gsc-input { padding:0 2px; width:100%; vertical-align:middle; } input.gsc-input { border:1px solid #BCCDF0; width:99%; padding-left:2px; font-size:.95em; } td.gsc-search-button { text-align: right; padding:0; vertical-align:top; } #search-button { margin:0 0 0 2px; font-size:11px; } /* search result tabs */ #doc-content .gsc-control { position:relative; } #doc-content .gsc-tabsArea { position:relative; white-space:nowrap; } #doc-content .gsc-tabHeader { padding: 3px 6px; position:relative; } #doc-content .gsc-tabHeader.gsc-tabhActive { border-top: 2px solid #94B922; } #doc-content h2#searchTitle { padding:0; } #doc-content .gsc-resultsbox-visible { padding:1em 0 0 6px; } /* CAROUSEL */ #homeMiddle { padding: 0px 0px 0px 0px; float: left; width: 584px; height: 580px; position:relative; } #topAnnouncement { background:url(images/home/bg_home_announcement.png) no-repeat 0 0; } #homeTitle { padding:15px 15px 0; height:30px; } #homeTitle h2 { padding:0; } #announcement-block { padding:0 15px 0; overflow:hidden; background: url(images/hr_gray_side.jpg) no-repeat 15px 0; zoom:1; } #announcement-block>* { padding:15px 0 0; } #announcement-block img { float:left; margin:0 30px 0 0; } #announcement { float:left; margin:0; } #carousel { background:url(images/home/bg_home_carousel.png) no-repeat 0 0; position:relative; height:400px; } #carouselMain { background: url(images/home/bg_home_carousel_board.png) 0 0 no-repeat; height:auto; padding: 25px 21px 0; overflow:hidden; position:relative; zoom:1; /*IE6*/ } #carouselMain img { margin:0; } #carouselMain .bulletinDesc h3 { margin:0; padding:0; } #carouselMain .bulletinDesc p { margin:0; padding:0.7em 0 0; } #carouselWheel { background: url(images/home/bg_home_carousel_wheel.png) 0 0 no-repeat; padding-top:40px; height:150px; } .clearer { clear:both; } a#arrow-left, a#arrow-right { float:left; width:42px; height:42px; background-image:url(images/home/carousel_buttons_sprite.png); background-repeat:no-repeat; } a#arrow-left { margin:35px 3px 0 10px; } a#arrow-right { margin:35px 10px 0 0; } a.arrow-left-off, a#arrow-left.arrow-left-off:hover { background-position:0 0; } a.arrow-right-off, a#arrow-right.arrow-right-off:hover { background-position:-42px 0; } a#arrow-left:hover { background-position:0 -42px; } a#arrow-right:hover { background-position:-42px -42px; } a.arrow-left-on { background-position:0 0; } a.arrow-right-on { background-position:-42px 0; } a.arrow-right-off, a.arrow-left-off { cursor:default; } .app-list-container { margin:0 20px; position:relative; width:100%; } div#list-clip { height:110px; width:438px; overflow:hidden; position:relative; float:left; } div#app-list { left:0; z-index:1; position:absolute; margin:11px 0 0; _margin-top:13px; width:1000%; } #app-list a { display:block; float:left; height:90px; width:90px; margin:0 24px 0; padding:3px; background:#99cccc; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; text-decoration:none; text-align:center; font-size:11px; line-height:11px; } #app-list a span { position:relative; top:-4px; } #app-list img { width:90px; height:70px; margin:0; } #app-list a.selected, #app-list a:active.selected, #app-list a:hover.selected { background:#A4C639; color:#fff; cursor:default; text-decoration:none; } #app-list a:hover, #app-list a:active { background:#ff9900; } #app-list a:hover span, #app-list a:active span { text-decoration:underline; } #droid-name { padding-top:.5em; color:#666; padding-bottom:.25em; } /*IE6*/ * html #app-list a { zoom: 1; margin:0 24px 0 15px;} * html #list-clip { width:430px !important; } /*carousel bulletin layouts*/ /*460px width*/ /*185px height*/ .img-left { float:left; width:230px; overflow:hidden; padding:8px 0 8px 8px; } .desc-right { float:left; width:270px; padding:10px; } .img-right { float:right; width:220px; overflow:hidden; padding:8px 8px 8px 0; } .desc-left { float:right; width:280px; padding:10px; text-align:right; } .img-top { padding:20px 20px 0; } .desc-bottom { padding:10px; } /* VIDEO PAGE */ #mainBodyLeft.videoPlayer { width:570px; } #mainBodyRight.videoPlayer { width:330px; } /* player */ #videoPlayerBox { background-color: #DAF3FC; border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; width:530px; padding:20px; border:1px solid #d3ecf5; box-shadow:2px 3px 1px #eee; -moz-box-shadow:2px 3px 1px #eee; -webkit-box-shadow:2px 3px 1px #eee; } #videoBorder { background-color: #FFF; min-height:399px; height:auto !important; border:1px solid #ccdada; border-radius:7px 7px 0 0; -moz-border-radius:7px 7px 0 0; -webkit-border-top-left-radius:7px; -webkit-border-top-right-radius:7px; } #videoPlayerTitle { width:500px; padding:15px 15px 0; } #videoPlayerTitle h2 { font-weight:bold; font-size:1.2em; color:#336666; margin:0; padding:0; } #objectWrapper { padding:15px 15px; height:334px; width:500px; } /* playlist tabs */ ul#videoTabs { list-style-type:none; padding:0; clear:both; margin:0; padding: 20px 0 0 15px; zoom:1; /* IE7/8, otherwise top-padding is double */ } ul#videoTabs li { display:inline; padding:0; margin:0 3px 0 0; line-height:2em; } ul#videoTabs li a { border-radius:7px 7px 0 0; -moz-border-radius:7px 7px 0 0; -webkit-border-top-left-radius:7px; -webkit-border-top-right-radius:7px; background:#95c0d0; color:#fff; text-decoration:none; padding:.45em 1.5em; font-weight:bold; } ul#videoTabs li.selected a { font-weight:bold; text-decoration:none; color:#555; background:#daf3fc; border-bottom:1px solid #daf3fc; } ul#videoTabs li:hover a { background:#85acba; } ul#videoTabs li.selected:hover a { background:#daf3fc; } /* playlists */ #videos { background:#daf3fc; margin-bottom:1.5em; padding:15px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:2px 3px 1px #eee; -moz-box-shadow:2px 3px 1px #eee; -webkit-box-shadow:2px 3px 1px #eee; } #videos div { display:none; } #videos div.selected { display:block; } ul.videoPreviews { list-style:none; padding:0; margin:0; zoom:1; /* IE, otherwise, layout doesn't update when showing 'more' */ } ul.videoPreviews li { margin:0 0 5px; padding:0; overflow:hidden; position:relative; } #mainBodyFixed ul.videoPreviews h3 { font-size: 12px; margin:0 0 1em 130px; padding:0; font-weight:bold; color:inherit; } ul.videoPreviews a { margin:1px; padding:10px; text-decoration:none; height:90px; display:block; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background-color:transparent; } ul.videoPreviews a:hover { background-color:#FFF; border:none; /* IE8, otherwise, bg doesn't work */ } ul.videoPreviews a.selected { background-color: #FF9900; } ul.videoPreviews img { float:left; clear:left; margin:0; } ul.videoPreviews h3 { font-size:12px; font-weight:bold; text-decoration:none; margin:0 0 1em 130px; padding:0; } ul.videoPreviews p { font-size: 12px; text-decoration:none; margin:0 0 1.2em 130px; } ul.videoPreviews p.full { display:none; } ul.videoPreviews span.more { padding:0 0 0 12px; background:url(images/arrow_bluelink_down.png) 0 2px no-repeat; } ul.videoPreviews span.less { padding:0 0 0 12px; background:url(images/arrow_bluelink_up.png) 0 2px no-repeat; display:none; } ul.videoPreviews p.toggle { position:absolute; margin:0; margin-top:-23px; /* instead of bottom:23px, because IE won't do it correctly */ left:140px; } ul.videoPreviews p.toggle a { height:auto; margin:0; padding:0; zoom:1; /* IE6, otherwise the margin considers the img on redraws */ } ul.videoPreviews p.toggle a:hover { text-decoration:underline; background:transparent; /* IE6, otherwise it inherits white */ } /* featured videos */ #mainBodyRight h2 { padding:0 0 5px; } #mainBodyRight ul.videoPreviews { margin:10px 0 0; } #mainBodyRight ul.videoPreviews li { font-size:11px; line-height:13px; margin:0 0 5px; padding:0; } #mainBodyRight ul.videoPreviews h3 { padding:0; margin:0; } #mainBodyRight ul.videoPreviews a { text-decoration:none; height:108px; border:1px solid #FFF; } #mainBodyRight ul.videoPreviews a:hover { border:1px solid #CCDADA; } #mainBodyRight ul.videoPreviews a.selected { border:1px solid #FFF; } #mainBodyRight ul.videoPreviews p { line-height:1.2em; padding:0; margin:4px 0 0 130px; } #mainBodyRight ul.videoPreviews img { margin-top:5px; }