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