← Back to branch summary

~cjohnston/qa-dashboard/assets

« back to all changes in this revision

Viewing changes to r697/static/css/new-style.css

  • Committer: Chris Johnston
  • Date: 2013-12-02 21:31:20 UTC
  • Revision ID: chrisjohnston@ubuntu.com-20131202213120-59nnq087r99by0pr
"Dashboard commit r697"

Show diffs side-by-side

added added

removed removed

Lines of Context:
r697/static/css/new-style.css
 
1
html {
 
2
    font-size : 100%;
 
3
}
 
4
body {
 
5
    background : url("../images/body_bg.jpg") #fff;
 
6
    color : #333;
 
7
    font-family : Ubuntu, Arial, "libra sans", sans-serif;
 
8
    font-weight : 300;
 
9
}
 
10
body, nav, footer, header {
 
11
    margin: 0;
 
12
    padding: 0;
 
13
    border: 0;
 
14
    vertical-align: baseline;
 
15
}
 
16
code, li, p, pre {
 
17
    font-size : 1em;
 
18
    margin-bottom : 0.75em;
 
19
    line-height : 1.6;
 
20
    margin-bottom : 0.75em;
 
21
}
 
22
h1, h2, h3, h4 {
 
23
    font-weight : 300;
 
24
    line-height : 1.3;
 
25
}
 
26
h1 {
 
27
    font-size : 2.813em;
 
28
    margin-bottom : 0.267em;
 
29
}
 
30
h2 {
 
31
    font-size : 2em;
 
32
    margin-bottom : 0.375em;
 
33
}
 
34
h1 span, h2 span {
 
35
    display : block;
 
36
}
 
37
ol + h2, p + h2, pre + h2, ul + h2 {
 
38
    margin-top : 0.563em;
 
39
}
 
40
header nav a:link {
 
41
    font-weight : normal;
 
42
}
 
43
h3 {
 
44
    font-size : 1.438em;
 
45
    margin-bottom : 0.522em;
 
46
}
 
47
ol + h3, p + h3, pre + h3, ul + h3 {
 
48
    margin-top : 0.783em;
 
49
}
 
50
h4 {
 
51
    font-size : 1.219em;
 
52
    margin-bottom : 0.615em;
 
53
}
 
54
ol + h4, p + h4, pre + h4, ul + h4 {
 
55
    margin-top : 1.219em;
 
56
}
 
57
h5 {
 
58
    font-size : 1em;
 
59
    margin-bottom : 0.75em;
 
60
}
 
61
h6 {
 
62
    font-size : 0.813em;
 
63
    margin-bottom : 0.923em;
 
64
    text-transform : uppercase;
 
65
    letter-spacing : 0.1em;
 
66
}
 
67
li {
 
68
    margin-bottom : 0.4em;
 
69
}
 
70
header {
 
71
    margin : 0;
 
72
    padding : 0;
 
73
    border : 0;
 
74
    vertical-align : baseline;
 
75
}
 
76
header {
 
77
    display : block;
 
78
}
 
79
header.banner {
 
80
    background : #dd4814;
 
81
    position : relative;
 
82
    z-index : 2;
 
83
    width : 100%;
 
84
    margin-bottom : 20px;
 
85
    display : inline-block;
 
86
    border-top : 0;
 
87
    box-shadow : 0 2px 2px -2px #777 inset, 2px 1px #fff;
 
88
}
 
89
header.banner .nav-primary {
 
90
    border : 0;
 
91
    margin : 0 auto;
 
92
    overflow : hidden;
 
93
    width : 1200px;
 
94
}
 
95
header.banner .nav-primary ul {
 
96
    border-right : 1px solid rgb(92.905%, 40.05%, 21.604%);
 
97
    float : left;
 
98
    margin : 0;
 
99
    position : relative;
 
100
}
 
101
header.banner .nav-primary li {
 
102
    border-left : 1px solid rgb(77.497%, 25.248%, 7.013%);
 
103
    float : left;
 
104
    list-style-image : none;
 
105
    margin : 0;
 
106
    text-indent : 0;
 
107
    vertical-align : bottom;
 
108
}
 
109
header.banner .nav-primary ul li:last-child {
 
110
    border-right : 1px solid rgb(77.497%, 25.248%, 7.013%);
 
111
}
 
112
header.banner .nav-primary li a:link, header.banner .nav-primary li a:visited {
 
113
    font-size : 14px;
 
114
    border-left : 1px solid rgb(92.407%, 35.843%, 16.102%);
 
115
    color : #fff;
 
116
    display : block;
 
117
    margin-bottom : 0;
 
118
    padding : 12px 14px 14px;
 
119
    position : relative;
 
120
    text-align : center;
 
121
    text-decoration : none;
 
122
}
 
123
header.banner .nav-primary a.active {
 
124
    background : #b83a10;
 
125
    border-left : 1px solid rgb(92.407%, 35.843%, 16.102%);
 
126
}
 
127
header.banner .nav-primary li a:hover {
 
128
    background : #e1662f;
 
129
    border-top : 0;
 
130
    box-shadow : 0 2px 2px -2px #777 inset;
 
131
}
 
132
header.banner h2 {
 
133
    font-size : 1.563em;
 
134
    margin-bottom : 0.48em;
 
135
    display : block;
 
136
    left : 4px;
 
137
    margin-bottom : 0;
 
138
    position : relative;
 
139
    text-transform : lowercase;
 
140
    top : 14px;
 
141
}
 
142
header.banner a, header.banner h2 a:link, header.banner h2 a:visited {
 
143
    color : #fff;
 
144
    float : left;
 
145
    text-decoration : none;
 
146
}
 
147
header.banner .logo {
 
148
    border-left : 0;
 
149
    float : left;
 
150
    height : 48px;
 
151
    overflow : hidden;
 
152
}
 
153
header.banner .logo-ubuntu {
 
154
    background : url("//assets.ubuntu.com/sites/ubuntu/latest/u/img/ubuntu-logo.png") 0 10px no-repeat scroll transparent;
 
155
    font-size : 18px;
 
156
    margin-bottom : 0;
 
157
    position : relative;
 
158
    text-transform : lowercase;
 
159
    float : left;
 
160
    margin : 0;
 
161
    display : inline-block;
 
162
    height : 32px;
 
163
    min-width : 128px;
 
164
    margin-right : -20px;
 
165
    padding : 7px 14px 9px 0;
 
166
}
 
167
header.banner .logo-ubuntu img {
 
168
    margin-right : 8px;
 
169
    position : absolute;
 
170
    left : -999em;
 
171
}
 
172
header.banner .logo-ubuntu span {
 
173
    float : left;
 
174
    font-size : 23px;
 
175
    padding-left : 122px;
 
176
    padding-right : 20px;
 
177
    position : relative;
 
178
    top : 5px;
 
179
}
 
180
header.banner .nav-primary.nav-left .logo-ubuntu {
 
181
    float : right;
 
182
}
 
183
header.banner .nav-primary.nav-right .logo-ubuntu {
 
184
    float : left;
 
185
}
 
186
header.banner .nav-primary.nav-right ul {
 
187
       float : right;
 
188
}
 
189
header.banner .nav-primary.nav-right li {
 
190
       line-height: 22px;
 
191
}
 
192
header nav a:link {
 
193
    font-weight : normal;
 
194
}
 
195
header.banner .nav-primary ul {
 
196
    position : static;
 
197
}
 
198
header.banner .nav-primary li ul {
 
199
    border-radius : 10px;
 
200
    box-shadow : 0 2px 2px -1px #777;
 
201
    background : none 0 0 repeat scroll #f7f7f7;
 
202
    border : none 0;
 
203
    display : none;
 
204
    float : none;
 
205
    margin : 0;
 
206
    padding : 5px 0;
 
207
    position : absolute;
 
208
    top : 51px;
 
209
    width : 200px;
 
210
    border : #d5d5d5 solid 1px;
 
211
}
 
212
header.banner .nav-primary li ul .arrow-up {
 
213
    left : 0;
 
214
    margin-left : 20px;
 
215
    top : -8px;
 
216
    width : 200px;
 
217
    background-image : url("../images/arrow-up-smaller.png");
 
218
}
 
219
header.banner .nav-primary li ul li {
 
220
    border : none 0;
 
221
    float : none;
 
222
}
 
223
header.banner .nav-primary li ul li a:link, header.banner .nav-primary li ul li a:visited {
 
224
    border : none 0;
 
225
    color : #333;
 
226
    padding : 0 0 11px 14px;
 
227
    text-align : left;
 
228
    width : 170px;
 
229
}
 
230
header.banner .nav-primary li ul li a:hover {
 
231
    background : none 0 0 repeat scroll transparent;
 
232
    box-shadow : none;
 
233
    color : #DD4814;
 
234
}
 
235
header.banner .nav-primary li ul li.first a:link, header.banner .nav-primary li ul li.first a:visited, header.banner .nav-primary li ul li:first-of-type a:link {
 
236
    padding : 10px 14px;
 
237
}
 
238
header.banner .nav-primary li ul li.active a:link, header.banner .nav-primary li ul li.active a:visited {
 
239
    background : none 0 0 repeat scroll transparent !important ;
 
240
}
 
241
header.banner .nav-primary li ul .promo {
 
242
    border-top : 1px solid #D5D5D5;
 
243
    float : left;
 
244
    margin-top : 5px;
 
245
    padding : 15px 0 0;
 
246
}
 
247
header.banner .nav-primary li ul .promo a:link, header.banner .nav-primary li ul .promo a:visited {
 
248
    background : none 0 0 repeat scroll transparent;
 
249
    border-left : 0 none;
 
250
    color : #333;
 
251
    height : auto;
 
252
    padding : 0;
 
253
    text-align : left;
 
254
}
 
255
header.banner .nav-primary li ul .promo p {
 
256
    margin : 0 10px;
 
257
}
 
258
header.banner .nav-primary li ul .promo a:hover {
 
259
    box-shadow : none;
 
260
    color : #DD4814;
 
261
}
 
262
header.banner .nav-primary li ul .promo img {
 
263
    margin-top : 14px;
 
264
    margin-bottom : -6px;
 
265
    border-radius : 0 0 10px 10px;
 
266
    position : relative;
 
267
    top : 1px;
 
268
}
 
269
header.banner .nav-primary li ul .promo .category {
 
270
    color : #AEA79F;
 
271
    font-size : 11px;
 
272
    margin : 0 10px;
 
273
    text-transform : uppercase;
 
274
}
 
275
header.banner .nav-primary li:hover ul {
 
276
    display : block;
 
277
}
 
278
.nav-secondary {
 
279
    border-bottom : 1px solid #dfdcd9;
 
280
    margin-bottom : 0;
 
281
}
 
282
.nav-secondary ul {
 
283
    float : left;
 
284
    margin-bottom : 10px;
 
285
    margin-left : 2px;
 
286
}
 
287
.nav-secondary ul li {
 
288
    float : left;
 
289
    margin-top : 16px;
 
290
    font-size : 14px;
 
291
    margin-right : 15px;
 
292
}
 
293
.nav-secondary ul li a:link, .nav-secondary ul li a:visited {
 
294
    color : #333;
 
295
    font-size : 14px;
 
296
    float : left;
 
297
}
 
298
.nav-secondary ul li a:active, .nav-secondary ul li a:hover {
 
299
    color : #dd4814;
 
300
    text-decoration : none;
 
301
}
 
302
.nav-secondary ul li, .nav-secondary ul li.active a:link, .nav-secondary ul li.active a:visited {
 
303
    color : #dd4814;
 
304
    text-decoration : none;
 
305
}
 
306
.nav-secondary ul.breadcrumb {
 
307
    margin-left : 20px;
 
308
}
 
309
.nav-secondary ul.breadcrumb li, .nav-secondary ul.breadcrumb li a:link, .nav-secondary ul.breadcrumb li a:visited {
 
310
    color : #aea79f;
 
311
    margin-right : 8px;
 
312
}
 
313
.nav-secondary ul.breadcrumb li.active a:link, .nav-secondary ul.breadcrumb li.active a:visited {
 
314
    color : #dd4814;
 
315
}
 
316
nav ol, nav ul {
 
317
    list-style : none;
 
318
    list-style-image : none;
 
319
}
 
320
.wrapper {
 
321
    box-sizing : border-box;
 
322
    background : #fff;
 
323
    margin : 0 auto;
 
324
    text-align : left;
 
325
    width : 1200px;
 
326
    position : relative;
 
327
}
 
328
.inner-wrapper {
 
329
    box-shadow : 0 0 3px #c9c9c9;
 
330
    box-sizing : border-box;
 
331
    border-radius : 4px;
 
332
    background : #fff;
 
333
    clear : both;
 
334
    display : block;
 
335
    float : left;
 
336
    width : 100%;
 
337
    margin : 10px 0 30px;
 
338
    padding-bottom : 20px;
 
339
    position : relative;
 
340
    z-index : 1;
 
341
}
 
342
form fieldset {
 
343
    border-radius : 4px;
 
344
    background-repeat : no-repeat;
 
345
    background-color : #efeeec;
 
346
    background-position : -15px -15px;
 
347
    border : 0;
 
348
    margin-bottom : 8px;
 
349
    padding : 15px 20px 15px 94px;
 
350
}
 
351
form fieldset h3 {
 
352
    border-bottom : 1px dotted #dfdcd9;
 
353
    margin-bottom : 9px;
 
354
    padding-bottom : 10px;
 
355
}
 
356
form fieldset li:first-child {
 
357
    margin-top : 0;
 
358
}
 
359
form input[type="text"], form textarea {
 
360
    border-radius : 2px;
 
361
    background : #fff;
 
362
    border : #999 solid 1px;
 
363
    font-family : Ubuntu, Arial, "libra sans", sans-serif;
 
364
    display : block;
 
365
    padding : 4px;
 
366
}
 
367
form input:focus, form textarea:focus {
 
368
    border : #000 solid 1px;
 
369
}
 
370
form textarea[readonly="readonly"] {
 
371
    color : #999;
 
372
}
 
373
form input[type="checkbox"], form input[type="radio"] {
 
374
    margin : 0;
 
375
    width : auto;
 
376
    display: block;
 
377
}
 
378
form input[type="checkbox"] + label, form input[type="radio"] + label {
 
379
    display : inline;
 
380
    margin-left : 5px;
 
381
    vertical-align : middle;
 
382
    width : auto;
 
383
}
 
384
form input[type="submit"] {
 
385
    font-size : 1em;
 
386
    margin-bottom : 0.75em;
 
387
    border-radius : 4px;
 
388
    background-color : #dd4814;
 
389
    box-shadow : none;
 
390
    border : 0;
 
391
    color : #fff;
 
392
    display : block;
 
393
    padding : 10px 14px;
 
394
    text-shadow : none;
 
395
    width : auto;
 
396
    margin-bottom : 0;
 
397
}
 
398
form input[type="submit"]:hover {
 
399
    background : #dd4814;
 
400
}
 
401
form label {
 
402
    cursor : pointer;
 
403
    display : block;
 
404
    margin-bottom : 4px;
 
405
}
 
406
form label span {
 
407
    color : #df382c;
 
408
}
 
409
form ul {
 
410
    margin-left : 0;
 
411
}
 
412
form li {
 
413
    list-style : none outside none;
 
414
    margin-top : 14px;
 
415
}
 
416
form button[type="submit"] {
 
417
    border : 0;
 
418
    display : inline-block;
 
419
    font-family : Ubuntu, Arial, "libra sans", sans-serif;
 
420
    text-decoration : none;
 
421
    font-weight : 300;
 
422
}
 
423
form input[type="reset"] {
 
424
    display : none;
 
425
}
 
426
footer.global {
 
427
    background : #f7f7f7;
 
428
    border-top : 0;
 
429
    box-shadow : 0 2px 2px -1px #d3d3d3 inset;
 
430
    clear : both;
 
431
    display : block;
 
432
    padding : 30px 0 20px;
 
433
    position : relative;
 
434
    width : 100%;
 
435
}
 
436
footer.global .footer-a {
 
437
    border-bottom : 1px solid #d8d8d8;
 
438
    clear : both;
 
439
    padding-bottom : 20px;
 
440
    margin-bottom : 20px;
 
441
}
 
442
footer.global .footer-a div {
 
443
    padding-bottom : 10px;
 
444
}
 
445
footer.global .footer-a ul {
 
446
    border-collapse : collapse;
 
447
    display : table;
 
448
    float : none;
 
449
    margin-left : -15px;
 
450
    padding-bottom : 0;
 
451
    width : 100%;
 
452
}
 
453
footer.global .footer-a ul li {
 
454
    border-right : 1px dotted #aea79f;
 
455
    display : table-cell;
 
456
    float : none;
 
457
    margin-left : 15px;
 
458
    padding-bottom : 5px;
 
459
    padding-left : 15px;
 
460
    padding-right : 5px;
 
461
    width : auto;
 
462
    width : 124px;
 
463
}
 
464
footer.global .footer-a ul li.last-item, footer.global .footer-a ul li:last-child {
 
465
    border : 0;
 
466
    padding-right : 0;
 
467
}
 
468
footer.global .footer-a ul ul {
 
469
    margin-left : 0;
 
470
    display : block;
 
471
}
 
472
footer.global .footer-a li li {
 
473
    margin-left : 0;
 
474
    float : none;
 
475
    width : auto;
 
476
    display : block;
 
477
    min-height : 0;
 
478
    border : 0;
 
479
    margin-bottom : 2px;
 
480
    padding-left : 0;
 
481
    padding-bottom : inherit;
 
482
    background : 0;
 
483
}
 
484
footer.global .footer-a li li:last-child {
 
485
    margin-bottom : 0;
 
486
}
 
487
footer.global .footer-a li li a {
 
488
    display : block;
 
489
}
 
490
footer.global .inline-lists ul, footer.global .legal, footer.global nav div.footer-a div {
 
491
    margin : 0 auto;
 
492
    width : 1200px;
 
493
}
 
494
footer.global .legal {
 
495
    background : url("//assets.ubuntu.com/sites/ubuntu/latest/u/img/logos/logo-ubuntu-grey.png") 100% 0 no-repeat;
 
496
    position : relative;
 
497
    clear : both;
 
498
    min-height : 40px;
 
499
}
 
500
footer.global nav ul li h2 a:after {
 
501
    content : "";
 
502
}
 
503
footer.global ul {
 
504
    margin : 0;
 
505
    width: 100%;
 
506
    visibility: visible;
 
507
    height: auto;
 
508
    padding-left: 0;
 
509
}
 
510
footer.global nav ul li.two-col {
 
511
    display : inline-block;
 
512
    min-height : 10em;
 
513
    vertical-align : top;
 
514
}
 
515
footer.global nav ul li li {
 
516
    font-size : 0.75em;
 
517
    margin-bottom : 1em;
 
518
    margin-bottom : 0;
 
519
}
 
520
footer.global ul li li a:link, footer.global ul li li a:visited {
 
521
    color : #333;
 
522
    margin-bottom : 0;
 
523
}
 
524
footer.global h2 a:active, footer.global h2 a:hover, footer.global ul li li a:active, footer.global ul li li a:hover {
 
525
    color : #dd4814;
 
526
    text-decoration : underline;
 
527
}
 
528
footer.global p, footer.global ul.inline li a, footer.global ul.inline li.info {
 
529
    color : #333;
 
530
    font-size : 12px;
 
531
    margin-bottom : 0;
 
532
}
 
533
footer.global ul.inline li a:hover {
 
534
    color : #dd4814;
 
535
}
 
536
footer.global ul.inline li:after {
 
537
    color : #aea79f;
 
538
    content : "•";
 
539
    vertical-align : middle;
 
540
    margin : 0 5px;
 
541
}
 
542
footer.global ul.inline li:last-child {
 
543
    width : 120px;
 
544
}
 
545
footer.global ul.inline li:last-child:after {
 
546
    content : "";
 
547
}
 
548
.inline {
 
549
    margin-left : 0;
 
550
}
 
551
.inline li {
 
552
    display : inline;
 
553
    list-style : none;
 
554
    margin-left : 0;
 
555
    float : left;
 
556
}
 
557
.clear {
 
558
    clear: both;
 
559
}