|
1 | | -html, body { |
2 | | - margin:0; |
3 | | - padding:0; |
4 | | - height:100%; |
5 | | - width:100%; |
6 | | - font: 0.86em/120% Tahoma, Arial, sans-serif; |
7 | | - color:#333; |
8 | | - background:transparent; |
| 1 | +@import 'normalize.css'; |
| 2 | + |
| 3 | +body { |
| 4 | + font-family: Tahoma,Verdana,Segoe,sans-serif; |
| 5 | + color:#333; |
| 6 | + background:url("../images/background.jpg") #eee; |
9 | 7 | } |
10 | 8 |
|
11 | | -html { |
12 | | - background:url("../images/background.jpg") #eee; |
| 9 | +h2 { |
| 10 | + margin-top: 0; |
13 | 11 | } |
14 | 12 |
|
15 | 13 | a:hover, a:active { outline: none; } |
16 | 14 | a, a:active, a:visited { color: #607890; text-decoration:none;} |
17 | 15 | a:hover { color: #036; } |
18 | 16 |
|
19 | | -h1, h2, h3 { |
20 | | - font-size: medium; |
21 | | - font-weight: normal; |
22 | | - margin:0; |
23 | | - padding:.5em; |
24 | | -} |
25 | | - |
26 | | -h3 { |
27 | | - padding-top:1.5em; |
28 | | - padding-bottom:1em; |
29 | | -} |
30 | | - |
31 | 17 | ul#donate, ul#sponsors { |
32 | | - list-style-type: none; |
33 | | - padding-left: .5em; |
34 | | - margin-left: .5em; |
| 18 | + list-style-type: none; |
| 19 | + padding-left: .5em; |
| 20 | + margin-left: .5em; |
35 | 21 | } |
36 | 22 |
|
37 | 23 | ul#donate li { |
38 | 24 | margin-bottom: 1em; |
39 | 25 | } |
40 | 26 |
|
41 | | -p { padding-left:1.5em;} |
42 | | - |
43 | | -h1 { |
44 | | - font-size:xx-large; |
| 27 | +.block { |
| 28 | + margin:0 auto 1rem auto; |
| 29 | + padding:2em; |
| 30 | + max-width:70em; |
| 31 | + background:#fff; |
| 32 | + box-shadow: 0px 2px 4px rgba(0,0,0,.2); |
| 33 | + border-radius: 5px; |
| 34 | + border:1px solid #ccc; |
| 35 | + background: #fafafa; |
45 | 36 | } |
46 | 37 |
|
47 | | -.block { |
48 | | - margin:0 auto; |
49 | | - margin-top:1em; |
50 | | - margin-bottom:1em; |
51 | | - padding:.5em; |
52 | | - max-width:70em; |
53 | | - |
54 | | - background:#fff; |
55 | | - -webkit-box-shadow: 0px 2px 5px #aaa; |
56 | | - -moz-box-shadow: 0px 2px 5px #aaa; |
57 | | - box-shadow: 0px 2px 5px #aaa; |
58 | | - -webkit-border-radius: 5px; |
59 | | - -moz-border-radius: 5px; |
60 | | - border-radius: 5px; |
61 | | - border:1px solid #ccc; |
62 | | -} |
63 | | - |
64 | | -#title { |
| 38 | +header#title { |
65 | 39 | background:#369; |
66 | 40 | color:#eee; |
67 | | - margin:0; |
| 41 | + margin:0 0 2rem 0; |
68 | 42 | padding:.5em; |
69 | | - border-bottom:1px solid black; |
70 | | - -webkit-box-shadow: 0px 5px 5px #aaa; |
71 | | - -moz-box-shadow: 0px 5px 5px #aaa; |
72 | | - box-shadow: 0px 5px 5px #aaa; |
| 43 | + box-shadow: 0px 2px 4px rgba(0,0,0,.2); |
73 | 44 | } |
74 | 45 |
|
75 | 46 | #browsers { |
76 | | - width:90%; |
77 | | - margin:0 auto; |
| 47 | + width:90%; |
| 48 | + margin:0 auto; |
| 49 | +} |
| 50 | + |
| 51 | +.logo-list a { |
| 52 | + display: inline-block; |
| 53 | + padding: 1rem; |
| 54 | + border: 1px solid #ccc; |
| 55 | + text-align: center; |
| 56 | + width: 8rem; |
| 57 | + margin: 0 .5rem .5rem 0; |
| 58 | + box-shadow: 0px 1px 2px rgba(0,0,0,.2); |
| 59 | + border-radius: 3px; |
| 60 | + background: #fafafa; |
78 | 61 | } |
79 | 62 |
|
80 | | -.logo-list { |
81 | | - padding-left:1.5em; |
82 | | - margin:1em 0; |
| 63 | +.logo-list a:hover { |
| 64 | + background: #fff; |
| 65 | + box-shadow: 0px 2px 3px rgba(0,0,0,.2) |
| 66 | +} |
| 67 | + |
| 68 | +.logo-list a:active { |
| 69 | + box-shadow: inset 0 1px 2px rgba(0,0,0,.2); |
| 70 | + background: #e5e5e5; |
| 71 | +} |
| 72 | + |
| 73 | +.logo-list a img { |
| 74 | + display: block; |
| 75 | + margin: 0 auto .5rem; |
| 76 | + height: 80px; |
| 77 | + width: auto; |
| 78 | +} |
| 79 | + |
| 80 | +.logo-list a span { |
| 81 | + display: block; |
83 | 82 | } |
84 | 83 |
|
85 | 84 | .logo { |
86 | | - height:5em; |
87 | | - width:5em; |
88 | | - margin-right:1em; |
| 85 | + height:5em; |
| 86 | + width:5em; |
| 87 | + margin-right:1em; |
89 | 88 | } |
90 | 89 |
|
91 | 90 | #submitbutton { |
92 | | - background-color: #333; |
93 | | - color: #fff; |
94 | | - -webkit-border-radius: 5px; |
95 | | - -moz-border-radius: 5px; |
96 | | - border-radius: 5px; |
| 91 | + background-color: #333; |
| 92 | + color: #fff; |
| 93 | + border-radius: 5px; |
| 94 | +} |
| 95 | + |
| 96 | +header#title > div { |
| 97 | + display: inline-block; |
| 98 | + width: 24rem; |
97 | 99 | } |
98 | 100 |
|
99 | | -header > div { |
100 | | - display: inline-block; |
101 | | - width: 24rem; |
| 101 | +header#title h1, |
| 102 | +header#title p { |
| 103 | + margin: .5rem 0; |
102 | 104 | } |
103 | 105 |
|
104 | 106 | #eu-horizon { |
105 | | - float: right; |
106 | | - width: 240px; |
107 | | - margin: 1.1rem 0; |
| 107 | + float: right; |
| 108 | + width: 240px; |
| 109 | + margin: .8rem 0; |
108 | 110 | } |
109 | 111 |
|
110 | 112 | textarea { |
111 | | - width: 40em; |
112 | | - height: 5em; |
113 | | - max-width: 90%; |
| 113 | + width: 40em; |
| 114 | + height: 5em; |
| 115 | + max-width: 90%; |
114 | 116 | } |
115 | 117 |
|
116 | 118 |
|
117 | 119 | @media screen and (max-width: 660px) { |
118 | 120 | header > div img { |
119 | 121 | display: none; |
120 | 122 | } |
121 | | - header > div { |
122 | | - width: 14rem; |
123 | | - } |
124 | | - h1 { |
125 | | - font-size: large; |
126 | | - } |
127 | | - p { |
128 | | - padding: 0 .5rem; |
| 123 | + header#title > div { |
| 124 | + width: 18rem; |
129 | 125 | } |
130 | 126 | .block { |
131 | | - margin: 1rem .5rem; |
| 127 | + margin: 1rem; |
132 | 128 | } |
133 | 129 | } |
0 commit comments