OLD | NEW |
1 /* Reset */ | 1 /* Reset */ |
2 body, h1, h2, h3, h4, li, ol, p, pre, section, ul { | 2 body, h1, h2, h3, h4, li, ol, p, pre, section, ul { |
3 margin: 0; | 3 margin: 0; |
4 padding: 0; | 4 padding: 0; |
5 } | 5 } |
6 | 6 |
7 body { | 7 body { |
8 font-family: Georgia, serif; | 8 font-family: Georgia, serif; |
9 background: #e4e4e4; | 9 background: #e8e8e8; |
10 color: #333; | 10 color: #333; |
11 } | 11 background-image: url('body-bg.png'); |
12 | 12 background-repeat: repeat; |
13 h1 { | |
14 font: 700 22px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
15 sans-serif; | |
16 margin: 0 0 22px 0; | |
17 } | 13 } |
18 | 14 |
19 h2 { | 15 h2 { |
20 font: 400 28px/44px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | 16 font: 400 28px/44px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
21 sans-serif; | 17 sans-serif; |
22 margin: 22px 0; | 18 margin: 0 0 22px 0; |
23 } | 19 } |
24 | 20 |
25 h3 { | 21 h3 { |
26 font: 600 14px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | 22 font: 600 14px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
27 sans-serif; | 23 sans-serif; |
28 color: #999; | 24 color: #999; |
29 margin: 22px 0 0 0; | 25 margin: 22px 0 0 0; |
30 } | 26 } |
31 | 27 |
32 h4 { | 28 h4 { |
(...skipping 15 matching lines...) Expand all Loading... |
48 font: 14px/22px Menlo, Monaco, Consolas, Courier, monospace; | 44 font: 14px/22px Menlo, Monaco, Consolas, Courier, monospace; |
49 color: hsl(220, 20%, 30%); | 45 color: hsl(220, 20%, 30%); |
50 background: hsl(220, 20%, 95%); | 46 background: hsl(220, 20%, 95%); |
51 margin: 22px 0; | 47 margin: 22px 0; |
52 padding: 0 4px; | 48 padding: 0 4px; |
53 border-radius: 4px; | 49 border-radius: 4px; |
54 overflow: hidden; | 50 overflow: hidden; |
55 } | 51 } |
56 | 52 |
57 a { | 53 a { |
58 color: hsl(220, 50%, 50%); | 54 color: #15c; |
59 text-decoration: none; | 55 text-decoration: none; |
60 } | 56 } |
61 | 57 |
62 a:hover { | 58 a:hover { |
63 color: hsl(220, 100%, 70%); | 59 text-decoration: underline; |
64 } | 60 } |
65 | 61 |
66 a:visited { | 62 a:visited { |
67 color: hsl(270, 50%, 40%); | 63 color: #15c; |
68 } | 64 } |
69 | 65 |
70 li { | 66 li { |
71 font-size: 16px; | 67 font-size: 16px; |
72 line-height: 22px; | 68 line-height: 22px; |
73 } | 69 } |
74 | 70 |
75 ol, ul { | 71 ol, ul { |
76 padding-left: 22px; | 72 padding-left: 22px; |
77 } | 73 } |
78 | 74 |
79 hr { | 75 hr { |
80 border: none; | 76 border: none; |
81 height: 1px; | 77 height: 1px; |
82 background: #ccc; | 78 background: #ccc; |
83 margin: 22px 0 21px 0; | 79 margin: 22px 0 21px 0; |
84 } | 80 } |
85 | 81 |
86 hr + h2 { | 82 hr + h2 { |
87 margin-top: 21px; /* To compensate for the thickness of the hr. */ | 83 margin-top: 21px; /* To compensate for the thickness of the hr. */ |
88 } | 84 } |
89 | 85 |
90 .page { | 86 .page { |
91 max-width: 960px; /* 43 x 22px */ | 87 max-width: 1000px; |
92 background: #fff; | 88 background: #fff; |
93 margin: 0 auto 22px auto; | 89 margin: 0 auto 22px auto; |
94 border: solid 1px #ccc; | 90 border: solid 1px #ccc; |
95 border-top: none; | 91 border-top: none; |
| 92 box-shadow: 0 0 50px #888; |
| 93 |
| 94 background-image: url('content-bg.png'); |
| 95 background-repeat: repeat-y; |
| 96 } |
| 97 |
| 98 .header { |
| 99 background: #333; |
| 100 background-image: url('header-bg.png'); |
| 101 height: 44px; |
| 102 color: hsl(0, 0%, 50%); |
| 103 font: 400 15px/44px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| 104 sans-serif; |
| 105 } |
| 106 |
| 107 .header .logo { |
| 108 background-image: url('dart-logo-small.png'); |
| 109 width: 66px; |
| 110 height: 44px; |
| 111 float: left; |
| 112 } |
| 113 |
| 114 .header a { |
| 115 color: hsl(0, 0%, 80%); |
| 116 } |
| 117 |
| 118 .header a:hover { |
| 119 color: hsl(0, 0%, 100%); |
96 } | 120 } |
97 | 121 |
98 .nav { | 122 .nav { |
99 float: left; | 123 float: left; |
100 width: 263px; /* 12 x 22px - 1 for border */ | 124 width: 263px; /* 12 x 22px - 1 for border */ |
101 padding: 22px 22px; | 125 padding: 0 22px; |
102 overflow: hidden; | 126 overflow: hidden; |
103 background: #f4f4f4; | 127 background: #f4f4f4; |
104 border-right: solid 1px #ccc; | 128 border-right: solid 1px #ccc; |
105 } | 129 } |
106 | 130 |
107 .nav h2 { | 131 .nav h2 { |
108 font: 400 16px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | 132 font: 400 16px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
109 sans-serif; | 133 sans-serif; |
110 margin: 0 -21px; | 134 margin: 0 -21px; |
111 padding: 11px 22px; | 135 padding: 11px 22px; |
(...skipping 187 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
299 } | 323 } |
300 | 324 |
301 p { | 325 p { |
302 border-left: solid 4px purple; | 326 border-left: solid 4px purple; |
303 } | 327 } |
304 | 328 |
305 section { | 329 section { |
306 border-left: solid 4px gray; | 330 border-left: solid 4px gray; |
307 } | 331 } |
308 */ | 332 */ |
OLD | NEW |