| /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| html { |
| height: 100%; |
| width: 100%; |
| } |
| |
| body { |
| -webkit-align-items: center; |
| -webkit-flex-direction: column; |
| background-color: #f4f4f4; |
| box-sizing: border-box; |
| display: -webkit-flex; |
| font-family: Droid Sans; |
| height: 100%; |
| margin: 0 auto; |
| max-width: 600px; |
| padding: 20px; |
| width: 100%; |
| } |
| |
| a { |
| color: rgb(51, 181, 229); |
| } |
| |
| .spacing { |
| -webkit-flex: 1; |
| } |
| |
| #logo { |
| -webkit-flex-shrink: 1; |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: contain; |
| min-height: 60px; |
| width: 100%; |
| } |
| |
| #take-a-tour { |
| -webkit-flex: none; |
| background: -webkit-gradient( |
| linear, left top, left bottom, from(#f5f5f5), to(#f1f1f1)); |
| border: 1px solid #ccc; |
| border-radius: 2px; |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), |
| inset 0 0 2px rgba(255, 255, 255, 0.6); |
| color: rgb(73, 73, 74); |
| display: block; |
| font-size: 20px; |
| font-weight: bold; |
| margin: 20px auto 0; |
| max-width: 400px; |
| padding: 11px 0; |
| text-align: center; |
| text-decoration: none; |
| width: 100%; |
| } |
| |
| #take-a-tour:active { |
| border: 1px solid #a1a1a1; |
| box-shadow: inset 0 5px 15px rgba(100, 100, 100, 0.20); |
| } |
| |
| .footer { |
| -webkit-flex: none; |
| color: #646464; |
| font-size: 1.3em; |
| margin-top: 20px; |
| text-align: center; |
| } |
| |
| /* Logos */ |
| @media only screen and (-webkit-min-device-pixel-ratio: 1.0) { |
| #logo { |
| -webkit-flex-basis: 152px; |
| background-image: url(images/holo_logo_200.png); |
| max-width: 536px; |
| } |
| } |
| @media only screen and (-webkit-min-device-pixel-ratio: 1.3) { |
| #logo { |
| -webkit-flex-basis: 114px; |
| background-image: url(images/holo_logo_200.png); |
| max-width: 402px; |
| } |
| } |
| @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { |
| #logo { |
| -webkit-flex-basis: 76px; |
| background-image: url(images/holo_logo_150.png); |
| max-width: 268px; |
| } |
| } |
| @media only screen and (-webkit-min-device-pixel-ratio: 2.0) { |
| #logo { |
| -webkit-flex-basis: 76px; |
| background-image: url(images/holo_logo_200.png); |
| max-width: 268px; |
| } |
| } |
| |
| /* Increase spacing on larger screens. */ |
| @media only screen and (min-height: 601px) { |
| body { |
| padding: 100px 20px; |
| } |
| |
| #take-a-tour, |
| #footer { |
| margin-top: 60px; |
| } |
| } |