← Back to branch summary

~jorge/+junk/maas-website

« back to all changes in this revision

Viewing changes to css/base.css

  • Committer: Jorge O. Castro
  • Date: 2012-12-04 16:42:26 UTC
  • Revision ID: jorge@ubuntu.com-20121204164226-ksffv115tvbc3ie9
Add theme to version control

Show diffs side-by-side

added added

removed removed

Lines of Context:
css/base.css
 
1
/**
 
2
* Ubuntu Developer base stylesheet
 
3
*
 
4
* A base stylesheet containing site-wide styles
 
5
*
 
6
* @project Ubuntu Developer
 
7
* @version 1.0
 
8
* @author Canonical Web Team: Steve Edwards
 
9
* @copyright 2011 Canonical Ltd.
 
10
*/
 
11
 
 
12
/**
 
13
* @section Global
 
14
*/
 
15
 
 
16
body {
 
17
        font-family: 'Ubuntu', 'Ubuntu Beta', UbuntuBeta, Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;
 
18
        font-size: 13px;
 
19
        line-height: 1.4;
 
20
        color: #333;
 
21
}
 
22
a {
 
23
        color: #dd4814;
 
24
        text-decoration: none;
 
25
        outline: 0;
 
26
}
 
27
p, dl {
 
28
        margin-bottom: 10px;
 
29
}
 
30
strong {
 
31
        font-weight: bold;
 
32
}
 
33
em {
 
34
        font-style: italic;
 
35
}
 
36
code{
 
37
        padding: 10px;
 
38
        font-family: 'Ubuntu Mono', 'Consolas', 'Monaco', 'DejaVu Sans Mono', Courier, monospace;
 
39
        background-color: #fdf6f2;
 
40
        display: block;
 
41
        margin-bottom: 10px;
 
42
                -moz-border-radius: 4px;
 
43
                -webkit-border-radius: 4px;
 
44
        border-radius: 4px;
 
45
}
 
46
h1 {
 
47
        font-size: 36px;
 
48
        line-height: 1.1;
 
49
        margin-bottom: 20px;
 
50
}
 
51
article h1,
 
52
h2 {
 
53
        font-size: 24px;
 
54
        line-height: 1.2;
 
55
        margin-bottom: 14px;
 
56
}
 
57
h3 {
 
58
        font-size: 16px;
 
59
        line-height: 1.3;
 
60
        margin-bottom: 8px;
 
61
}
 
62
h4 {
 
63
        font-weight: bold;
 
64
}
 
65
 
 
66
time {
 
67
        color:#999;
 
68
}
 
69
 
 
70
/**
 
71
* @section Structure
 
72
*/
 
73
 
 
74
.header-login,
 
75
.header-navigation div,
 
76
.header-content div {
 
77
        margin: 0 auto;
 
78
        width: 940px;
 
79
}
 
80
 
 
81
.header-content h1{
 
82
        background-color:#ffffff;
 
83
        display:inline-block;
 
84
}
 
85
 
 
86
.header-content h2{
 
87
        background-color:#ffffff;
 
88
        display:table;
 
89
}
 
90
 
 
91
.header-login ul {
 
92
        margin: 4px 0;
 
93
        float: right;
 
94
}
 
95
.header-login li {
 
96
        margin-right: 10px;
 
97
        float: left;
 
98
}
 
99
.header-login a {
 
100
        color: #333;
 
101
}
 
102
.header-navigation {
 
103
        border-top: 2px solid #dd4814;
 
104
        border-bottom: 2px solid #dd4814;
 
105
        background-color: #fff;
 
106
        height: 54px;
 
107
        clear: right;
 
108
        overflow: hidden;
 
109
}
 
110
.header-navigation nav ul {
 
111
        border-right: 1px solid #dd4814;
 
112
        float: right;
 
113
}
 
114
.header-navigation nav li {
 
115
        border-left: 1px solid #dd4814;
 
116
        float: left;
 
117
        height: 54px;
 
118
}
 
119
.header-navigation nav a {
 
120
        padding: 18px 14px 0;
 
121
        font-size: 14px;
 
122
        display: block;
 
123
        height: 36px;
 
124
}
 
125
.header-navigation nav a:hover {
 
126
        background-color: #fcece7;
 
127
}
 
128
.header-navigation nav .current_page_item a,
 
129
.header-navigation nav .current_page_parent a,
 
130
.header-navigation nav .current_page_ancestor a {
 
131
        background-color: #dd4814;
 
132
        color: #fff;
 
133
}
 
134
.header-navigation input {
 
135
        margin: 12px 10px 0 10px;
 
136
        padding: 5px;
 
137
        border-top: 1px solid #a1a1a1;
 
138
        border-right: 1px solid #e0e0e0;
 
139
        border-bottom: 1px solid #fff;
 
140
        border-left: 1px solid #e0e0e0;
 
141
        width: 90px;
 
142
        font-style: italic;
 
143
        color: #ccc;
 
144
                -moz-border-radius: 3px;
 
145
                -webkit-border-radius: 3px;
 
146
        border-radius: 3px;
 
147
                -moz-box-shadow: inset 0 1px 1px #e0e0e0;
 
148
           -webkit-box-shadow: inset 0 1px 1px #e0e0e0;
 
149
   box-shadow: inset 0 1px 1px #e0e0e0;
 
150
}
 
151
.header-navigation h2 {
 
152
        margin: 18px 0 0 6px;
 
153
        text-transform: lowercase;
 
154
        font-size: 22px;
 
155
        color: #dd4814;
 
156
        float: left;
 
157
}
 
158
.header-navigation .logo-ubuntu {
 
159
        float: left;
 
160
}
 
161
.header-content .header-navigation-secondary {
 
162
        margin-bottom: 40px;
 
163
        padding: 0;
 
164
        position: relative;
 
165
        z-index: 2;
 
166
}
 
167
.header-navigation-secondary div {
 
168
        padding: 0;
 
169
        border: 2px solid #dd4814;
 
170
                -moz-border-radius: 0px 0px 4px 4px;
 
171
                -webkit-border-radius: 0px 0px 4px 4px;
 
172
        border-radius: 0px 0px 4px 4px;
 
173
        background: #fff;
 
174
        border-top: 0px;
 
175
        width: 936px;
 
176
}
 
177
.header-navigation-secondary nav li {
 
178
        float: left;
 
179
}
 
180
.header-navigation-secondary nav li a {
 
181
        color: #333;
 
182
        display: block;
 
183
        height: 25px;
 
184
        padding: 8px 8px 0;
 
185
}
 
186
.header-navigation-secondary nav li:hover,
 
187
.header-navigation-secondary nav .current_page_item a {
 
188
        background: url("../img/sec-nav-hover.gif");
 
189
}
 
190
.header-content {
 
191
        padding-bottom: 30px;
 
192
        border-bottom: 1px solid #e0e0e0;
 
193
                -moz-box-shadow: 0 1px 3px #e0e0e0;
 
194
                -webkit-box-shadow: 0 1px 3px #e0e0e0;
 
195
        box-shadow: 0 1px 3px #e0e0e0;
 
196
        margin-bottom: 3px;
 
197
        position: relative;
 
198
        overflow: hidden;
 
199
}
 
200
footer {
 
201
        padding: 10px 10px 40px 10px;
 
202
        position: relative;
 
203
                -moz-border-radius: 0 0 4px 4px;
 
204
                -webkit-border-radius: 0 0 4px 4px;
 
205
        border-radius: 0 0 4px 4px;
 
206
        font-size: 12px;
 
207
        background: url("../img/background-footer.png") repeat scroll 0 0 #f7f6f5;
 
208
}
 
209
footer div {
 
210
        margin: 0 auto;
 
211
    padding: 0 10px;
 
212
    width: 940px;
 
213
}
 
214
footer a {
 
215
        color: #000;
 
216
}
 
217
footer nav ul {
 
218
        margin: 10px 17px 30px 0;
 
219
        width: 172px;
 
220
        display: inline-block;
 
221
        vertical-align: top;
 
222
        height: auto;
 
223
        zoom: 1;
 
224
        *display: inline;
 
225
}
 
226
footer nav ul.last {
 
227
        margin-right: 0;
 
228
}
 
229
footer nav li {
 
230
        margin-bottom: 8px;
 
231
}
 
232
footer nav li:first-child {
 
233
        font-weight: bold;
 
234
}
 
235
footer p {
 
236
        margin-bottom: 0;
 
237
}
 
238
#content {
 
239
        padding-top: 35px;
 
240
}
 
241
.arrow-nav {
 
242
        display: none;
 
243
        position: absolute;
 
244
        top: -1px;
 
245
        z-index: 3;
 
246
}
 
247
.shadow {
 
248
        margin: 30px 0 3px 0;
 
249
        border-bottom: 1px solid #e0e0e0;
 
250
                -moz-box-shadow: 0 2px 3px #e0e0e0;
 
251
                -webkit-box-shadow: 0 2px 3px #e0e0e0;
 
252
        box-shadow: 0 2px 3px #e0e0e0;
 
253
        height: 3px;
 
254
}
 
255
 
 
256
/**
 
257
* @section Site-wide
 
258
*/
 
259
 
 
260
#content h2{
 
261
        font-size:24px;
 
262
}
 
263
 
 
264
.box-orange {
 
265
        padding: 10px;
 
266
        border: 3px solid #dd4814;
 
267
                -moz-border-radius: 4px;
 
268
                -webkit-border-radius: 4px;
 
269
        border-radius: 4px;
 
270
}
 
271
.box-orange .link-action-small {
 
272
        float: right;
 
273
        margin: 0 0 0 20px;
 
274
}
 
275
.link-bug {
 
276
        margin-left: 10px;
 
277
        color: #999;
 
278
}
 
279
.link-action {
 
280
        float: left;
 
281
        margin-bottom: 20px;
 
282
        padding: 8px 12px;
 
283
        display: block;
 
284
        background-color: #dd4814;
 
285
        color: #fff;
 
286
                -moz-border-radius: 20px;
 
287
                -webkit-border-radius: 20px;
 
288
        border-radius: 20px;
 
289
        font-size: 16px;
 
290
        line-height: 1.3;
 
291
        border-top: 3px solid #e6633a;
 
292
        border-bottom: 3px solid #c03d14;
 
293
}
 
294
.link-action2 {
 
295
        float: left;
 
296
        display: block;
 
297
        color: #fff;
 
298
        font-size: 16px;
 
299
        line-height: 1.3;
 
300
}
 
301
.link-action2 span{
 
302
        display:block;
 
303
        float:left;
 
304
}
 
305
.link-action2 .cta-left{
 
306
        background:url(../img/button-cta-left.png) no-repeat;
 
307
        width:22px;
 
308
        height:48px;
 
309
}
 
310
.link-action2 .cta-center{
 
311
        background:url(../img/button-cta-slice.png) repeat-x;
 
312
        line-height:45px;
 
313
        height:48px;
 
314
}
 
315
.link-action2 .cta-right{
 
316
        background:url(../img/button-cta-right.png) no-repeat;
 
317
        width:22px;
 
318
        height:48px;
 
319
}
 
320
 
 
321
.link-action-small {
 
322
        float: left;
 
323
        display: block;
 
324
        color: #fff;
 
325
        font-size: 16px;
 
326
}
 
327
.link-action-small span{
 
328
        display:block;
 
329
        float:left;
 
330
        height:42px;
 
331
}
 
332
.link-action-small .cta-left{
 
333
        background:url(../img/button-cta-left-small.png) no-repeat;
 
334
        width:19px;
 
335
}
 
336
.link-action-small .cta-center{
 
337
        background:url(../img/button-cta-slice-small.png) repeat-x;
 
338
        line-height:42px;
 
339
}
 
340
.link-action-small .cta-right{
 
341
        background:url(../img/button-cta-right-small.png) no-repeat;
 
342
        width:19px;
 
343
}
 
344
 
 
345
.link-action:active {
 
346
        position: relative;
 
347
        top: 1px;
 
348
}
 
349
.link-action2:active {
 
350
        position: relative;
 
351
        top: 1px;
 
352
}
 
353
.link-action-small:active {
 
354
        position: relative;
 
355
        top: 1px;
 
356
}
 
357
.list-bullets li {
 
358
        margin-bottom: 10px;
 
359
        list-style: disc;
 
360
        list-style-position: inside;
 
361
}
 
362
.box {
 
363
        margin-bottom: 30px;
 
364
        padding: 15px;
 
365
        border: 1px solid #aea79f;
 
366
                -moz-border-radius: 4px;
 
367
                -webkit-border-radius: 4px;
 
368
        border-radius: 4px;
 
369
}
 
370
.box-padded {
 
371
        margin-bottom: 30px;
 
372
        padding: 5px;
 
373
        border: 2px solid #aea79f;
 
374
                -moz-border-radius: 4px;
 
375
                -webkit-border-radius: 4px;
 
376
        border-radius: 4px;
 
377
        background: url("../img/pattern-featured.gif") repeat scroll 0 0 #ebe9e7;
 
378
        overflow: hidden;
 
379
}
 
380
.box-padded h3 {
 
381
         margin: 5px 0 10px 5px;
 
382
}
 
383
.box-padded div {
 
384
        padding: 10px;
 
385
        border: 1px solid #aea79f;
 
386
                -moz-border-radius: 4px;
 
387
                -webkit-border-radius: 4px;
 
388
        border-radius: 4px;
 
389
        background-color: #fff;
 
390
        overflow: hidden;
 
391
}
 
392
.box-padded li {
 
393
        padding: 0 10px;
 
394
        float: left;
 
395
        width: 211px;
 
396
        border-right: 1px dotted #aea79f;
 
397
}
 
398
.box-padded li.first {
 
399
        padding: 0;
 
400
        margin-bottom: 0;
 
401
}
 
402
.box-padded li.last {
 
403
        border: 0;
 
404
        width: 217px;
 
405
}
 
406
.box-padded img {
 
407
        margin: 0 10px 10px 0;
 
408
        float: left;
 
409
                -moz-border-radius: 8px;
 
410
                -webkit-border-radius: 8px;
 
411
        border-radius: 8px;
 
412
}
 
413
.box-clear {
 
414
        margin-bottom: 40px;
 
415
}
 
416
.box-clear .grid-4.first {
 
417
        margin-right: 15px;
 
418
        padding-right: 15px;
 
419
}
 
420
.box-clear .grid-4 {
 
421
        margin-left: 0;
 
422
        margin-right: 10px;
 
423
        padding-right: 10px;
 
424
        width: 298px;
 
425
}
 
426
.box-clear time {
 
427
        display: block;
 
428
        border-bottom: 1px dotted #aea79f;
 
429
        padding-bottom: 10px;
 
430
        margin-bottom: 10px;
 
431
}
 
432
.box-clear div.first {
 
433
        border-right: 1px dotted #aea79f;
 
434
}
 
435
.box-clear a {
 
436
        display: block;
 
437
}
 
438
.box-clear .rss {
 
439
        background: url("../img/rss.jpg") no-repeat scroll 0 center;
 
440
        padding-left: 20px;
 
441
}
 
442
.box-clear .location {
 
443
        display: block;
 
444
        margin-bottom: 1px;
 
445
}
 
446
.box-clear .last {
 
447
        margin: 0;
 
448
        padding-right: 0;
 
449
                -moz-border-radius: 4px;
 
450
                -webkit-border-radius: 4px;
 
451
        border-radius: 4px;
 
452
        width: 293px;
 
453
}
 
454
 
 
455
/* Widgets */
 
456
 
 
457
.ui-state-focus {
 
458
        outline: none;
 
459
}
 
460
.ui-accordion {
 
461
        border-bottom: 1px dotted #aea79f;
 
462
}
 
463
.ui-accordion a {
 
464
        display: block;
 
465
}
 
466
.ui-accordion h3 {
 
467
        margin-bottom: 0;
 
468
        border-top: 1px dotted #aea79f;
 
469
        position: relative;
 
470
        font-size: 13px;
 
471
        font-weight: bold;
 
472
}
 
473
.ui-accordion h3 a {
 
474
        padding: 10px 0;
 
475
        color: #333;
 
476
}
 
477
.ui-accordion h4 {
 
478
        margin-bottom: 5px;
 
479
}
 
480
.ui-accordion div fieldset {
 
481
        padding-bottom: 5px;
 
482
}
 
483
.ui-accordion div li,
 
484
.ui-accordion div input {
 
485
        margin-bottom: 10px;
 
486
}
 
487
.ui-accordion .ui-icon {
 
488
        position: absolute;
 
489
        top: 15px;
 
490
        right: 0;
 
491
        display: block;
 
492
        width: 8px;
 
493
        height: 8px;
 
494
        background: url("../img/icon-accordion-inactive.png") 0 0 no-repeat transparent;
 
495
}
 
496
.ui-accordion .ui-state-active .ui-icon {
 
497
        background-image: url("../img/icon-accordion-active.png");
 
498
}
 
499
.ui-accordion .current_page_item a {
 
500
        color: #333;
 
501
}
 
502
.container-tweet {
 
503
                -moz-border-radius: 4px 4px 4px 4px;
 
504
                -webkit-border-radius: 4px 4px 4px 4px;
 
505
        border-radius: 4px 4px 4px 4px;
 
506
        padding: 10px 10px 10px;
 
507
        background-color: #f7f7f7;
 
508
}
 
509
.container-tweet .tweet-follow {
 
510
        margin-top: 10px;
 
511
        margin-bottom: -10px;
 
512
        padding-left: 55px;
 
513
        padding-bottom: 6px;
 
514
        background: url("../img/tweet-follow.png") 0 5px no-repeat;
 
515
        display: block;
 
516
}
 
517
.container-tweet .tweet-follow span {
 
518
        font-size: 16px;
 
519
        font-weight: bold;
 
520
        line-height: 1.2;
 
521
        display: block;
 
522
}
 
523
.tweet a {
 
524
        display: inline;
 
525
}
 
526
.tweet .tweet_text {
 
527
        padding: 10px;
 
528
        background-color: #fff;
 
529
                -moz-border-radius: 4px 4px 4px 4px;
 
530
                -webkit-border-radius: 4px 4px 4px 4px;
 
531
        border-radius: 4px 4px 4px 4px;
 
532
        border: 1px solid #dd4814;
 
533
        font-size: 16px;
 
534
        display: block;
 
535
        clear: both;
 
536
}
 
537
.tweet.tweet-small .tweet_text {
 
538
        font-size: inherit;
 
539
}
 
540
.tweet .tweet_text a {
 
541
        color: #333;
 
542
}
 
543
.tweet .tweet_time,
 
544
.tweet .tweet_user_and_time {
 
545
        padding: 15px 0 10px 0;
 
546
        position: relative;
 
547
        top: -2px;
 
548
        background: url("../img/tweet-arrow.png") no-repeat;
 
549
        display: block;
 
550
}
 
551
.tweet .tweet_odd .tweet_time,
 
552
.tweet .tweet_odd .tweet_user_and_time {
 
553
        background-position: right 0;
 
554
        float: right;
 
555
}
 
556
.tweet .tweet_even .tweet_time,
 
557
.tweet .tweet_even .tweet_user_and_time {
 
558
        background-position: left 0;
 
559
        float: left;
 
560
}
 
561
 
 
562
/* Search */
 
563
 
 
564
#content .list-search li {
 
565
        list-style-type:none;
 
566
        border:0px;
 
567
        margin-bottom: 15px;
 
568
        padding-top: 15px;
 
569
}
 
570
 
 
571
/* Blog */
 
572
 
 
573
.blog-article #nav-single {
 
574
        margin-top: 30px;
 
575
        margin-bottom: 30px;
 
576
}
 
577
.blog-article #nav-single .nav-next {
 
578
        float: right;
 
579
}
 
580
.blog-article article header .entry-meta {
 
581
        margin-bottom: 20px;
 
582
}
 
583
.blog-article article .entry-meta {
 
584
        color: #999;
 
585
}
 
586
.blog-article #respond form input[type="submit"] {
 
587
        float: left;
 
588
        cursor: pointer;
 
589
        margin-bottom: 20px;
 
590
        padding: 8px 12px;
 
591
        display: block;
 
592
        background-color: #dd4814;
 
593
        color: #fff;
 
594
                -moz-border-radius: 20px;
 
595
                -webkit-border-radius: 20px;
 
596
        border-radius: 20px;
 
597
        font-size: 16px;
 
598
        line-height: 1.3;
 
599
        border-top: 3px solid #e6633a;
 
600
        border-left: 3px solid #e6633a;
 
601
        border-right: 3px solid #e6633a;
 
602
        border-bottom: 3px solid #c03d14;
 
603
}
 
604
.blog-article #respond form input[type="submit"]:active {
 
605
        position: relative;
 
606
        top: 1px;
 
607
}
 
608
 
 
609
.alignnone{
 
610
    float:left;
 
611
    margin:10px 20px 10px 0;
 
612
}
 
613
.alignleft{
 
614
    float:left;
 
615
    margin:10px 20px 10px 0;
 
616
}
 
617
.alignright{
 
618
    float:right;
 
619
   margin:10px 0 10px 20px;
 
620
}
 
621
 
 
622
.aligncenter{
 
623
        float:left;
 
624
    margin:10px 20px 10px 0;
 
625
}
 
626
.entry-content h2, .entry-content h3{
 
627
    margin-top:20px;
 
628
}
 
629
.entry-content ul li{
 
630
    list-style-type: circle;
 
631
    margin-left:16px;
 
632
}
 
633
 
 
634
.entry-content hr{
 
635
        border:none;
 
636
        border-top: 1px dotted #AEA79F;
 
637
}
 
638
 
 
639
/**
 
640
 * Section StackTack
 
641
 */
 
642
 
 
643
.stacktack.stacktack-container{
 
644
  box-shadow: 0 0 0;
 
645
  border-radius: 0px;
 
646
  border: 0;
 
647
  font-size: 13px;
 
648
  padding: 0;
 
649
  margin: 0;
 
650
}
 
651
 
 
652
.stacktack.stacktack-container a, .stacktack.stacktack-container a:hover{
 
653
  color: #DD4814;
 
654
}
 
655
 
 
656
.stacktack.stacktack-container a:hover{
 
657
  text-decoration: underline;
 
658
}
 
659
 
 
660
.stacktack.stacktack-container code, .stacktack.stacktack-container pre{
 
661
  padding: 10px;
 
662
  font-family: 'Ubuntu Mono', 'Consolas', 'Monaco', 'DejaVu Sans Mono', Courier, monospace;
 
663
  background-color: #FDF6F2;
 
664
  display: block;
 
665
  margin-bottom: 10px;
 
666
  -moz-border-radius: 4px;
 
667
  -webkit-border-radius: 4px;
 
668
  border-radius: 4px;
 
669
}
 
670
 
 
671
 
 
672
.stacktack.stacktack-container code {
 
673
  padding: 0px;
 
674
  display: inline-block;
 
675
}
 
676
 
 
677
.stacktack.stacktack-container img {
 
678
  max-width: 940px;
 
679
}