1/* Copyright 2014 The Chromium Authors. All rights reserved. 2 * Use of this source code is governed by a BSD-style license that can be 3 * found in the LICENSE file. */ 4 5* { 6 box-sizing: border-box; 7 color: rgba(0, 0, 0, .87); 8 font-family: Helvetica, sans-serif; 9 font-size: 14px; 10 margin: 0; 11 padding: 0; 12} 13 14a { 15 color: rgb(67, 133, 244); 16 text-decoration: none; 17} 18 19body { 20 background: #ddd; 21} 22 23h1 { 24 font-size: 34px; 25 font-weight: normal; 26 line-height: 40px; 27} 28 29h2 { 30 font-size: 16px; 31 font-weight: normal; 32} 33 34h4 { 35 font-size: 14px; 36} 37 38div.container { 39 background: #fff; 40 box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); 41 height: 600px; 42 width: 800px; 43} 44 45div.header { 46 background: url(../images/header-optin-1x.png) no-repeat; 47 height: 240px; 48 vertical-align: bottom; 49} 50 51div.header-text { 52 height: 240px; 53 padding: 60px; 54} 55 56div.header-text h1 { 57 color: #fff; 58 margin-top: 44px; 59} 60 61div.header-text h2 { 62 color: #fff; 63 margin-top: 20px; 64} 65 66div.content { 67 height: 240px; 68 margin: 60px 60px auto 60px; 69} 70 71.close { 72 background: url(../images/bt-close-1x.png); 73 float: right; 74 height: 60px; 75 width: 60px; 76} 77 78 79button.grayed-out { 80 color: rgba(0, 0, 0, .28); 81} 82 83.col-3 { 84 color: rgba(0, 0, 0, .54); 85 line-height: 24px; 86 width: 504px; 87} 88 89.col-3 h4 { 90 line-height: 100%; 91 margin-bottom: 27px; 92} 93 94.col-2 { 95 color: rgba(0, 0, 0, .54); 96 float: left; 97 line-height: 24px; 98 width: 332px; 99} 100 101.col-2 h4 { 102 line-height: 100%; 103 margin-top: 27px; 104} 105 106.col-spacing { 107 float: left; 108 height: 160px; 109 width: 16px; 110} 111 112a.link-button { 113 display: inline-block; 114 font-size: 14px; 115 margin-top: 22px; 116 text-decoration: none; 117 text-transform: uppercase; 118} 119 120div.buttonbar { 121 background: rgba(0, 0, 0, .06); 122 height: 60px; 123 padding: 12px 60px; 124} 125 126.buttonbar button { 127 background: none; 128 border: none; 129 border-radius: 2px; 130 float: right; 131 height: 36px; 132 margin-left: 8px; 133 min-width: 88px; 134 padding: 8px; 135 text-transform: uppercase; 136} 137 138button.primary { 139 color: rgb(67, 133, 244); 140} 141 142.v-spacing-for-no-subheading { 143 height: 43px; 144} 145 146.train { 147 clear: both; 148 margin-bottom: 24px; 149 white-space: nowrap; 150} 151 152.train .icon { 153 display: inline-block; 154 height: 24px; 155 margin-right: 16px; 156 vertical-align: top; 157 width: 24px; 158} 159 160.train .text { 161 display: inline-block; 162 line-height: 24px; 163 vertical-align: top; 164 width: 292px; 165} 166 167.train.listening .text { 168 color: rgba(0, 0, 0, .87); 169} 170 171.train.not-started .text { 172 color: rgba(0, 0, 0, .54); 173} 174 175.train.recorded .text { 176 color: rgba(66, 133, 244, 1); 177} 178 179.train.error .text { 180 color: rgb(213, 0, 0); 181} 182 183.train.listening .icon { 184 background: url(../images/placeholder-loader-1x.png) no-repeat; 185} 186 187.train.not-started .icon { 188 background: url(../images/ic-check-gray-1x.png) no-repeat; 189} 190 191.train.recorded .icon { 192 background: url(../images/ic-check-blue-1x.png) no-repeat; 193} 194 195.train.error .icon { 196 background: url(../images/placeholder-loader-error-1x.png) no-repeat; 197} 198 199.mic { 200 background: url(../images/mic-1x.png) no-repeat; 201 height: 80px; 202 left: 666px; 203 position: absolute; 204 top: 200px; 205 width: 80px; 206} 207 208.check { 209 clear: both; 210 height: 24px; 211 margin-bottom: 24px; 212} 213 214.check .icon { 215 background: url(../images/ic-check-blue-1x.png) no-repeat; 216 display: inline-block; 217 height: 24px; 218 margin-right: 16px; 219 vertical-align: top; 220 width: 24px; 221} 222 223.check .text { 224 color: rgba(0, 0, 0, .54); 225 display: inline-block; 226 height: 24px; 227 line-height: 24px; 228 vertical-align: top; 229} 230