1 | * {
|
2 | margin: 0;
|
3 | padding: 0;
|
4 | }
|
5 |
|
6 | html {
|
7 | background: #efefef;
|
8 | font: normal 62.5%/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif;
|
9 | color: #666;
|
10 | -moz-osx-font-smoothing: auto;
|
11 | -webkit-font-smoothing: subpixel-antialiased;
|
12 | }
|
13 |
|
14 | body {
|
15 | padding: 1px 0 0;
|
16 | }
|
17 |
|
18 | main {
|
19 | width: 640px;
|
20 | margin: 120px auto 0;
|
21 | }
|
22 |
|
23 | .box {
|
24 | margin: 0 auto 10px;
|
25 | padding: 15px 20px 10px;
|
26 | background: white;
|
27 | box-shadow: 0 0 20px silver;
|
28 | }
|
29 |
|
30 | h1 {
|
31 | margin: 0 auto 15px;
|
32 | padding: 0 0 5px;
|
33 | border-bottom: 1px solid silver;
|
34 | font: 100 2.4rem "Helvetica Neue", Helvetica, Arial, sans-serif;
|
35 | letter-spacing: 1px;
|
36 | }
|
37 |
|
38 | h1 strong {
|
39 | font-weight: normal;
|
40 | }
|
41 |
|
42 | ul {
|
43 | list-style: none;
|
44 | }
|
45 |
|
46 | li {
|
47 | margin: 0 auto 10px;
|
48 | }
|
49 |
|
50 | li a {
|
51 | display: block;
|
52 | font: normal 1.2rem "Helvetica Neue", Helvetica, Arial, sans-serif;
|
53 | color: #444;
|
54 | text-decoration: none;
|
55 | }
|
56 |
|
57 | li a img {
|
58 | display: inline-block;
|
59 | margin-right: 10px;
|
60 | vertical-align: middle;
|
61 | border: 0;
|
62 | }
|
63 |
|
64 | li a strong {
|
65 | display: inline-block;
|
66 | width: 350px;
|
67 | margin-right: 10px;
|
68 | overflow: hidden;
|
69 | color: #88e;
|
70 | text-overflow: ellipsis;
|
71 | vertical-align: middle;
|
72 | }
|
73 |
|
74 | li a time {
|
75 | display: inline-block;
|
76 | width: 125px;
|
77 | margin-right: 10px;
|
78 | overflow: hidden;
|
79 | vertical-align: middle;
|
80 | color: grey;
|
81 | text-align: right;
|
82 | }
|
83 |
|
84 | li a span {
|
85 | display: inline-block;
|
86 | width: 65px;
|
87 | overflow: hidden;
|
88 | vertical-align: middle;
|
89 | color: grey;
|
90 | text-align: center;
|
91 | }
|
92 |
|
93 | footer {
|
94 | font: 100 1.4rem "Helvetica Neue", Helvetica, Arial, sans-serif;
|
95 | letter-spacing: 1px;
|
96 | text-align: right;
|
97 | }
|
98 |
|
99 | footer a {
|
100 | color: #88e;
|
101 | text-decoration: none;
|
102 | }
|
103 |
|
104 | footer span {
|
105 | font-weight: normal;
|
106 | }
|
107 |
|
108 | .box.error {
|
109 | margin: 0 auto 20px;
|
110 | padding: 15px 20px 10px;
|
111 | background: #c30;
|
112 | box-shadow: 0 0 20px silver;
|
113 | }
|
114 |
|
115 | .box.error h1 {
|
116 | color: white;
|
117 | }
|
118 |
|
119 | .box.error p {
|
120 | margin: 0 auto 10px;
|
121 | font: 100 1.4rem "Helvetica Neue", Helvetica, Arial, sans-serif;
|
122 | letter-spacing: 1px;
|
123 | color: white;
|
124 | }
|
125 |
|
126 | .box.error p strong {
|
127 | font: normal 1em Monaco, Consolas, "Lucida Console", monospace;
|
128 | }
|