Home | History | Annotate | Download | only in design 
      1 /* color definitions */
      2 /* 16 column layout */
      3 /* clearfix idiom */
      4 /* common mixins */
      5 /* page layout + top-level styles */
      6 ::-webkit-selection,
      7 ::-moz-selection,
      8 ::selection {
      9   background-color: #0099cc;
     10   color: #fff; }
     11 
     12 html, body {
     13   height: 100%;
     14   margin: 0;
     15   padding: 0;
     16   background: #eee none no-repeat fixed top left;
     17   background-image: -webkit-gradient(linear, 100% 0%, 100% 100%, from(#dddddd), color-stop(25%, #f2f2f2), color-stop(75%, #f2f2f2), to(#dddddd));
     18   background-image: -moz-linear-gradient(top, #dddddd, #f2f2f2, #f2f2f2, #dddddd);
     19   -webkit-font-smoothing: antialiased;
     20   /* prevent subpixel antialiasing, which thickens the text */
     21   /* text-rendering: optimizeLegibility; */
     22   /* turned off ligatures due to bug 5945455 */ }
     23 
     24 body {
     25   color: #555555;
     26   font: 14px/20px Roboto, sans-serif;
     27   font-weight: 400; }
     28 
     29 #page-container {
     30   width: 940px;
     31   margin: 0 40px; }
     32 
     33 #page-header {
     34   height: 80px;
     35   margin-bottom: 20px;
     36   font-size: 48px;
     37   line-height: 48px;
     38   font-weight: 100;
     39   padding-left: 10px; }
     40   #page-header a {
     41     display: block;
     42     position: relative;
     43     top: 20px;
     44     text-decoration: none;
     45     color: #555555 !important; }
     46 
     47 #main-row {
     48   display: inline-block; }
     49   #main-row:after {
     50     content: ".";
     51     display: block;
     52     height: 0;
     53     clear: both;
     54     visibility: hidden; }
     55   * html #main-row {
     56     height: 1px; }
     57 
     58 #page-footer {
     59   margin-left: 190px;
     60   margin-top: 80px;
     61   color: #999999;
     62   padding-bottom: 40px;
     63   font-size: 12px;
     64   line-height: 15px; }
     65   #page-footer a {
     66     color: #777777; }
     67   #page-footer #copyright {
     68     margin-bottom: 10px; }
     69 
     70 #nav-container {
     71   width: 160px;
     72   min-height: 10px;
     73   margin-right: 20px;
     74   float: left; }
     75 
     76 #nav {
     77   width: 160px; }
     78 
     79 #nav.fixed {
     80   position: fixed;
     81   top: 40px; }
     82 
     83 #content {
     84   width: 760px;
     85   float: left; }
     86 
     87 a,
     88 a:visited {
     89   color: #333333; }
     90 
     91 a:hover,
     92 acronym:hover {
     93   color: #7aa1b0 !important; }
     94 
     95 a:focus,
     96 a:active {
     97   color: #33b5e5 !important; }
     98 
     99 img {
    100   border: none; }
    101 
    102 ul {
    103   margin: 0;
    104   padding: 0; }
    105 
    106 strong {
    107   font-weight: 500; }
    108 
    109 em {
    110   font-style: italic; }
    111 
    112 code {
    113   font-family: Courier New, monospace; }
    114 
    115 acronym {
    116   border-bottom: 1px dotted #555555;
    117   cursor: help; }
    118 
    119 acronym:hover {
    120   border-bottom-color: #7aa1b0; }
    121 
    122 img.with-shadow,
    123 video.with-shadow {
    124   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
    125 
    126 /* disclosures mixin */
    127 /* content layout */
    128 .layout-content-row {
    129   display: inline-block;
    130   margin-bottom: 10px; }
    131   .layout-content-row:after {
    132     content: ".";
    133     display: block;
    134     height: 0;
    135     clear: both;
    136     visibility: hidden; }
    137   * html .layout-content-row {
    138     height: 1px; }
    139 
    140 .layout-content-col {
    141   float: left;
    142   margin-left: 20px; }
    143   .layout-content-col:first-child {
    144     margin-left: 0; }
    145 
    146 .layout-content-col.span-1 {
    147   width: 40px; }
    148 
    149 .layout-content-col.span-2 {
    150   width: 100px; }
    151 
    152 .layout-content-col.span-3 {
    153   width: 160px; }
    154 
    155 .layout-content-col.span-4 {
    156   width: 220px; }
    157 
    158 .layout-content-col.span-5 {
    159   width: 280px; }
    160 
    161 .layout-content-col.span-6 {
    162   width: 340px; }
    163 
    164 .layout-content-col.span-7 {
    165   width: 400px; }
    166 
    167 .layout-content-col.span-8 {
    168   width: 460px; }
    169 
    170 .layout-content-col.span-9 {
    171   width: 520px; }
    172 
    173 .layout-content-col.span-10 {
    174   width: 580px; }
    175 
    176 .layout-content-col.span-11 {
    177   width: 640px; }
    178 
    179 .layout-content-col.span-12 {
    180   width: 700px; }
    181 
    182 .layout-content-col.span-13 {
    183   width: 760px; }
    184 
    185 .vspace.size-1 {
    186   height: 10px; }
    187 
    188 .vspace.size-2 {
    189   height: 20px; }
    190 
    191 .vspace.size-3 {
    192   height: 30px; }
    193 
    194 .vspace.size-4 {
    195   height: 40px; }
    196 
    197 .vspace.size-5 {
    198   height: 50px; }
    199 
    200 .vspace.size-6 {
    201   height: 60px; }
    202 
    203 .vspace.size-7 {
    204   height: 70px; }
    205 
    206 .vspace.size-8 {
    207   height: 80px; }
    208 
    209 .vspace.size-9 {
    210   height: 90px; }
    211 
    212 .vspace.size-10 {
    213   height: 100px; }
    214 
    215 .vspace.size-11 {
    216   height: 110px; }
    217 
    218 .vspace.size-12 {
    219   height: 120px; }
    220 
    221 .vspace.size-13 {
    222   height: 130px; }
    223 
    224 .vspace.size-14 {
    225   height: 140px; }
    226 
    227 .vspace.size-15 {
    228   height: 150px; }
    229 
    230 .vspace.size-16 {
    231   height: 160px; }
    232 
    233 /* nav */
    234 #nav {
    235   /* section header divs */
    236   /* expanded section header divs */
    237   /* sublinks */ }
    238   #nav li {
    239     list-style-type: none;
    240     font-size: 14px;
    241     line-height: 10px; }
    242   #nav a {
    243     color: #555555;
    244     text-decoration: none; }
    245   #nav li.selected > a,
    246   #nav li.selected .nav-section-header a {
    247     font-weight: 500;
    248     color: #0099cc !important; }
    249   #nav .nav-section-header {
    250     position: relative;
    251     padding: 10px;
    252     margin-bottom: 1px;
    253     /* section header links */ }
    254     #nav .nav-section-header a {
    255       color: #333333;
    256       font-weight: 500;
    257       text-transform: uppercase; }
    258     #nav .nav-section-header:after {
    259       content: '';
    260       background: transparent url(disclosure_down.png) no-repeat scroll top left;
    261       width: 10px;
    262       height: 10px;
    263       display: block;
    264       position: absolute;
    265       top: 10px;
    266       right: 10px; }
    267     #nav .nav-section-header.empty:after {
    268       display: none; }
    269   #nav li.expanded .nav-section-header {
    270     background: rgba(0, 0, 0, 0.05); }
    271     #nav li.expanded .nav-section-header:after {
    272       content: '';
    273       background: transparent url(disclosure_up.png) no-repeat scroll top left;
    274       width: 10px;
    275       height: 10px; }
    276   #nav > li > ul {
    277     height: 0;
    278     overflow: hidden;
    279     margin-bottom: 0; }
    280     #nav > li > ul.animate-height {
    281       -webkit-transition: height 0.25s ease-in;
    282       -moz-transition: height 0.25s ease-in;
    283       transition: height 0.25s ease-in; }
    284     #nav > li > ul li {
    285       padding: 10px 10px 11px 10px; }
    286   #nav > li.expanded > ul {
    287     height: auto; }
    288     #nav > li.expanded > ul li {
    289       background: rgba(0, 0, 0, 0.03); }
    290   #nav #back-dac-section {
    291     padding: 10px;
    292     border-top: 1px solid #ddd; }
    293     #nav #back-dac-section a {
    294       color: #333333;
    295       font-weight: 500;
    296       text-transform: uppercase; }
    297 
    298 /* content header */
    299 .content-header {
    300   border-bottom: 1px solid #33b5e5;
    301   height: 30px; }
    302   .content-header h2 {
    303     border-bottom: 0; }
    304   .content-header.just-links {
    305     border-bottom: 0; }
    306 
    307 .content-footer {
    308   border-top: 1px solid #33b5e5;
    309   margin-top: 10px;
    310   height: 30px; }
    311 
    312 .paging-links {
    313   position: relative; }
    314   .paging-links a {
    315     position: absolute;
    316     font-size: 14px;
    317     line-height: 30px;
    318     color: #555555;
    319     text-decoration: none;
    320     text-transform: uppercase; }
    321   .paging-links .prev-page-link {
    322     display: none;
    323     left: -5px; }
    324     .paging-links .prev-page-link:before {
    325       content: '';
    326       background: transparent url(disclosure_left.png) no-repeat scroll top left;
    327       width: 10px;
    328       height: 10px;
    329       display: inline-block;
    330       margin-right: 5px; }
    331   .paging-links .next-page-link {
    332     display: none;
    333     right: 10px; }
    334     .paging-links .next-page-link:after {
    335       content: '';
    336       background: transparent url(disclosure_right.png) no-repeat scroll top left;
    337       width: 10px;
    338       height: 10px;
    339       display: inline-block;
    340       margin-left: 5px; }
    341 
    342 /* content body */
    343 @-webkit-keyframes glowheader {
    344   from {
    345     background-color: #33b5e5;
    346     color: #000;
    347     border-bottom-color: #000; }
    348 
    349   to {
    350     background-color: transparent;
    351     color: #33b5e5;
    352     border-bottom-color: #33b5e5; } }
    353 
    354 @-moz-keyframes glowheader {
    355   from {
    356     background-color: #33b5e5;
    357     color: #000;
    358     border-bottom-color: #000; }
    359 
    360   to {
    361     background-color: transparent;
    362     color: #33b5e5;
    363     border-bottom-color: #33b5e5; } }
    364 
    365 @keyframes glowheader {
    366   from {
    367     background-color: #33b5e5;
    368     color: #000;
    369     border-bottom-color: #000; }
    370 
    371   to {
    372     background-color: transparent;
    373     color: #33b5e5;
    374     border-bottom-color: #33b5e5; } }
    375 
    376 #content p,
    377 #content ul,
    378 #content ol,
    379 #content h3 {
    380   margin: 0 10px 10px 10px; }
    381 #content h2 {
    382   padding-left: 10px;
    383   padding-right: 10px;
    384   margin-bottom: 10px;
    385   font-size: 16px;
    386   line-height: 30px;
    387   font-weight: 500;
    388   color: #33b5e5;
    389   border-bottom: 1px solid #33b5e5;
    390   height: 30px; }
    391   #content h2:target {
    392     -webkit-animation-name: glowheader;
    393     -moz-animation-name: glowheader;
    394     animation-name: glowheader;
    395     -webkit-animation-duration: 0.7s;
    396     -moz-animation-duration: 0.7s;
    397     animation-duration: 0.7s;
    398     -webkit-animation-timing-function: ease-out;
    399     -moz-animation-timing-function: ease-out;
    400     animation-timing-function: ease-out; }
    401 #content hr {
    402   border: 0;
    403   border-bottom: 1px solid #33b5e5;
    404   margin-bottom: 20px; }
    405 #content h3 {
    406   color: #33b5e5;
    407   text-transform: uppercase;
    408   font-size: 14px;
    409   line-height: 20px;
    410   font-weight: 500; }
    411 #content h4 {
    412   margin: 0 10px;
    413   color: #333333;
    414   font-weight: 500;
    415   font-size: 14px;
    416   line-height: 20px; }
    417 #content strong {
    418   color: #333333; }
    419 #content ul li,
    420 #content ol li {
    421   margin-left: 20px; }
    422   #content ul li h4,
    423   #content ol li h4 {
    424     margin: 0; }
    425   #content ul li p,
    426   #content ol li p {
    427     margin-left: 0; }
    428 #content ul li {
    429   list-style-type: square;
    430   list-style-type: none;
    431   position: relative; }
    432   #content ul li:before {
    433     content: '\2022';
    434     font-family: verdana;
    435     font-size: 14px;
    436     line-height: 20px;
    437     position: absolute;
    438     left: -20px;
    439     top: -1px; }
    440 #content ol {
    441   counter-reset: item; }
    442   #content ol li {
    443     font-size: 14px;
    444     line-height: 20px;
    445     list-style-type: none;
    446     position: relative; }
    447     #content ol li:before {
    448       content: counter(item) ". ";
    449       counter-increment: item;
    450       position: absolute;
    451       left: -20px;
    452       top: 0; }
    453     #content ol li.value-1:before {
    454       content: "1. "; }
    455     #content ol li.value-2:before {
    456       content: "2. "; }
    457     #content ol li.value-3:before {
    458       content: "3. "; }
    459     #content ol li.value-4:before {
    460       content: "4. "; }
    461     #content ol li.value-5:before {
    462       content: "5. "; }
    463     #content ol li.value-6:before {
    464       content: "6. "; }
    465     #content ol li.value-7:before {
    466       content: "7. "; }
    467     #content ol li.value-8:before {
    468       content: "8. "; }
    469     #content ol li.value-9:before {
    470       content: "9. "; }
    471     #content ol li.value-10:before {
    472       content: "10. "; }
    473 #content .with-callouts ol li {
    474   list-style-position: inside;
    475   margin-left: 0; }
    476   #content .with-callouts ol li:before {
    477     position: static;
    478     display: inline;
    479     left: 0;
    480     float: left;
    481     width: 17px;
    482     color: #33b5e5;
    483     font-weight: 500; }
    484 
    485 /* special list items */
    486 li.no-bullet {
    487   list-style-type: none !important; }
    488 
    489 #content li.with-icon {
    490   position: relative;
    491   margin-left: 40px;
    492   min-height: 30px; }
    493   #content li.with-icon p {
    494     margin-left: 0 !important; }
    495   #content li.with-icon:before {
    496     position: absolute;
    497     left: -40px;
    498     top: 0;
    499     content: '';
    500     width: 30px;
    501     height: 30px; }
    502   #content li.with-icon.tablet:before {
    503     background-image: url(ico_phone_tablet.png); }
    504   #content li.with-icon.web:before {
    505     background-image: url(ico_web.png); }
    506   #content li.with-icon.checklist:before {
    507     background-image: url(ico_checklist.png); }
    508   #content li.with-icon.action:before {
    509     background-image: url(ico_action.png); }
    510   #content li.with-icon.use:before {
    511     background-image: url(ico_use.png); }
    512 
    513 /* figures and callouts */
    514 .figure {
    515   position: relative; }
    516   .figure.pad-below {
    517     margin-bottom: 20px; }
    518   .figure .figure-callout {
    519     position: absolute;
    520     color: #fff;
    521     font-weight: 500;
    522     font-size: 16px;
    523     line-height: 23px;
    524     text-align: center;
    525     background: transparent url(callout.png) no-repeat scroll 50% 50%;
    526     padding-right: 2px;
    527     width: 30px;
    528     height: 29px;
    529     z-index: 1000; }
    530     .figure .figure-callout.top {
    531       top: -9px; }
    532     .figure .figure-callout.right {
    533       right: -5px; }
    534 
    535 .figure-caption {
    536   margin: 0 10px 20px 10px;
    537   font-size: 14px;
    538   line-height: 20px;
    539   font-style: italic; }
    540 
    541 /* rows of figures */
    542 .figure-row {
    543   font-size: 0;
    544   line-height: 0;
    545   /* to prevent space between figures */ }
    546   .figure-row .figure {
    547     display: inline-block;
    548     vertical-align: top; }
    549   .figure-row .figure + .figure {
    550     margin-left: 10px;
    551     /* reintroduce space between figures */ }
    552 
    553 /* video  containers */
    554 .framed-galaxynexus-land-span-13 {
    555   background: transparent url(device_galaxynexus_blank_land_span13.png) no-repeat scroll top left;
    556   padding: 42px 122px 62px 126px;
    557   overflow: hidden; }
    558   .framed-galaxynexus-land-span-13, .framed-galaxynexus-land-span-13 video, .framed-galaxynexus-land-span-13 img {
    559     width: 512px;
    560     height: 286px; }
    561 
    562 .framed-galaxynexus-port-span-9 {
    563   background: transparent url(device_galaxynexus_blank_port_span9.png) no-repeat scroll top left;
    564   padding: 95px 122px 107px 124px;
    565   overflow: hidden; }
    566   .framed-galaxynexus-port-span-9, .framed-galaxynexus-port-span-9 video, .framed-galaxynexus-port-span-9 img {
    567     width: 274px;
    568     height: 488px; }
    569 
    570 .framed-galaxynexus-port-span-5 {
    571   background: transparent url(device_galaxynexus_blank_port_span5.png) no-repeat scroll top left;
    572   padding: 75px 31px 76px 33px;
    573   overflow: hidden; }
    574   .framed-galaxynexus-port-span-5, .framed-galaxynexus-port-span-5 video, .framed-galaxynexus-port-span-5 img {
    575     width: 216px;
    576     height: 384px; }
    577 
    578 /* landing page disclosures */
    579 .landing-page-link {
    580   text-decoration: none;
    581   font-weight: 500;
    582   color: #333333; }
    583   .landing-page-link:after {
    584     content: '';
    585     background: transparent url(disclosure_right.png) no-repeat scroll top left;
    586     width: 10px;
    587     height: 10px;
    588     display: inline-block;
    589     margin-left: 5px; }
    590 
    591 /* tooltips */
    592 .tooltip-box {
    593   position: absolute;
    594   background-color: rgba(0, 0, 0, 0.9);
    595   border-radius: 2px;
    596   font-size: 14px;
    597   line-height: 20px;
    598   color: #fff;
    599   padding: 6px 10px;
    600   max-width: 250px;
    601   z-index: 10000; }
    602   .tooltip-box.below:after {
    603     position: absolute;
    604     content: '';
    605     line-height: 0;
    606     display: block;
    607     top: -10px;
    608     left: 5px;
    609     border: 5px solid transparent;
    610     border-bottom-color: rgba(0, 0, 0, 0.9); }
    611 
    612 /* video note */
    613 .video-instructions {
    614   margin-top: 10px;
    615   margin-bottom: 10px; }
    616   .video-instructions:before {
    617     content: '';
    618     background: transparent url(ico_movie_inline.png) no-repeat scroll top left;
    619     display: inline-block;
    620     width: 12px;
    621     height: 12px;
    622     margin-right: 8px; }
    623   .video-instructions:after {
    624     content: 'Click to replay movie.'; }
    625 
    626 /* download buttons */
    627 .download-button {
    628   display: block;
    629   margin-bottom: 5px;
    630   text-decoration: none;
    631   background-color: #33b5e5;
    632   color: #fff !important;
    633   font-weight: 500;
    634   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
    635   padding: 6px 12px;
    636   border-radius: 2px; }
    637   .download-button:hover, .download-button:focus {
    638     background-color: #0099cc;
    639     color: #fff !important; }
    640   .download-button:active {
    641     background-color: #006699; }
    642 
    643 /* UI tables and other things found in Writing style and Settings pattern */
    644 .ui-table {
    645   width: 100%;
    646   background: #282828;
    647   color: #fff;
    648   border-radius: 2px;
    649   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    650   border-collapse: separate; }
    651   .ui-table th,
    652   .ui-table td {
    653     padding: 5px 10px; }
    654   .ui-table thead th {
    655     font-weight: 600; }
    656   .ui-table tfoot td {
    657     border-top: 1px solid #494949;
    658     border-right: 1px solid #494949;
    659     text-align: center; }
    660     .ui-table tfoot td:last-child {
    661       border-right: 0; }
    662 
    663 .layout-with-list-item-margins {
    664   margin-left: 30px !important; }
    665 
    666 .emulate-content-left-padding {
    667   margin-left: 10px; }
    668 
    669 .do-dont-label {
    670   margin-bottom: 10px;
    671   padding-left: 20px;
    672   background: transparent none no-repeat scroll 0px 3px; }
    673   .do-dont-label.bad {
    674     background-image: url(ico_wrong.png); }
    675   .do-dont-label.good {
    676     background-image: url(ico_good.png); }
    677