Not Reviewed
Show More
Add another comment
| @@ -1,27 +1,30 | |||||
|
|
1 | @charset "utf-8"; |
|
1 | @charset "utf-8"; |
|
|
2 | @import "palette"; |
|
2 | @import "palette"; |
|
|
3 |
|
3 | ||
|
|
4 |
.content |
|
4 | .content { |
|
|
5 | padding: 1ex 3em; |
|
5 | ol, ul { |
|
|
6 | background-color: $foreground; |
|
6 | background-color: $foreground; |
|
|
7 | margin: 0; |
|
7 | margin: 0; |
|
|
8 | } |
|
8 | } |
|
|
9 |
|
9 | ||
|
|
10 | .content ul { |
|
10 | ol { |
|
|
11 | list-style-type: none; |
|
11 | padding: 1ex 3em; |
|
|
12 | padding: 1ex 2em; |
|
12 | } |
|
|
13 | background-color: $foreground; |
|
13 | |
|
|
14 | margin: 0; |
|
14 | ul { |
|
|
15 | } |
|
15 | list-style-type: none; |
|
|
16 |
|
16 | padding: 1ex 2em; | |
|
|
17 | .content a { |
|
17 | } |
|
|
18 | color: $text-accent; |
|
||
|
|
19 | } |
|
||
|
|
20 |
|
|||
|
|
21 | .content a:visited { |
|
||
|
|
22 | color: $link-visited; |
|
||
|
|
23 | } |
|
||
|
|
24 |
|
18 | ||
|
|
25 | .content a:hover { |
|
19 | a { |
|
|
26 | color: $link-hover; |
|
20 | color: $text-accent; |
|
|
|
21 | |||
|
|
|
22 | &:visited { | ||
|
|
|
23 | color: $link-visited; | ||
|
|
|
24 | } | ||
|
|
|
25 | |||
|
|
|
26 | &:hover { | ||
|
|
|
27 | color: $link-hover; | ||
|
|
|
28 | } | ||
|
|
|
29 | } | ||
|
|
27 | } |
|
30 | } |
| This diff has been collapsed as it changes many lines, (966 lines changed) Show them Hide them | |||||
| @@ -2,331 +2,390 | |||||
|
|
2 | @import "fonts"; |
|
2 | @import "fonts"; |
|
|
3 | @import "palette"; |
|
3 | @import "palette"; |
|
|
4 |
|
4 | ||
|
|
5 | h2, |
|
5 | h2, h3 a { |
|
|
6 | h3 a { |
|
6 | margin: 0; |
|
|
7 |
|
|
7 | padding: 0; |
|
|
8 | padding: 0px; |
|
||
|
|
9 | color: $text-accent; |
|
8 | color: $text-accent; |
|
|
10 | } |
|
9 | } |
|
|
11 |
|
10 | ||
|
|
12 | .content .column { width:330px } |
|
||
|
|
13 |
|
|||
|
|
14 | /* Dress up the comic */ |
|
11 | /* Dress up the comic */ |
|
|
15 | #comic { |
|
12 | #comic { |
|
|
16 | margin-top: 0px; |
|
13 | /* Give IE hasLayout to fix a neg margin bug */ |
|
|
17 | height: 1%; /* Give IE hasLayout to fix a neg margin bug */ |
|
14 | height: 1%; |
|
|
|
15 | margin-top: 0; | ||
|
|
18 | width: auto; |
|
16 | width: auto; |
|
|
19 | } |
|
||
|
|
20 |
|
|||
|
|
21 |
|
|||
|
|
22 | #comic .nl { |
|
||
|
|
23 | padding-top: 5px; |
|
||
|
|
24 | padding-bottom: 5px; |
|
||
|
|
25 | background-color: $nl-background; |
|
||
|
|
26 | margin: -5em auto 0px; |
|
||
|
|
27 | border-top: solid 5em $text-normal; |
|
||
|
|
28 | width: 700px; |
|
||
|
|
29 | text-align: center; |
|
||
|
|
30 | } |
|
||
|
|
31 |
|
17 | ||
|
|
32 | #comic .navpanel { |
|
18 | .nl { |
|
|
33 | position: relative; |
|
19 | padding-top: 5px; |
|
|
34 | margin: auto; |
|
20 | padding-bottom: 5px; |
|
|
|
21 | background-color: $nl-background; | ||
|
|
|
22 | margin: -5em auto 0; | ||
|
|
|
23 | border-top: solid 5em $text-normal; | ||
|
|
|
24 | width: 700px; | ||
|
|
|
25 | text-align: center; | ||
|
|
|
26 | } | ||
|
|
|
27 | |||
|
|
|
28 | .navpanel { | ||
|
|
|
29 | position: relative; | ||
|
|
|
30 | margin: auto; | ||
|
|
|
31 | |||
|
|
|
32 | .navcontrols { | ||
|
|
|
33 | position: absolute; | ||
|
|
|
34 | z-index: 1; | ||
|
|
|
35 | |||
|
|
|
36 | ul { | ||
|
|
|
37 | width: 124px; | ||
|
|
|
38 | height: 33px; | ||
|
|
|
39 | margin: 0; | ||
|
|
|
40 | padding: 0; | ||
|
|
|
41 | clear: both; | ||
|
|
|
42 | |||
|
|
|
43 | li { | ||
|
|
|
44 | display: block; | ||
|
|
|
45 | float: left; | ||
|
|
|
46 | |||
|
|
|
47 | a, span { | ||
|
|
|
48 | display: block; | ||
|
|
|
49 | padding-top: 33px; | ||
|
|
|
50 | width: 62px; | ||
|
|
|
51 | height: 0; | ||
|
|
|
52 | overflow: hidden; | ||
|
|
|
53 | } | ||
|
|
|
54 | } | ||
|
|
|
55 | } | ||
|
|
|
56 | } | ||
|
|
|
57 | |||
|
|
|
58 | .search-filter { | ||
|
|
|
59 | margin-bottom: 15px; | ||
|
|
|
60 | } | ||
|
|
|
61 | |||
|
|
|
62 | #q { | ||
|
|
|
63 | width: 350px; | ||
|
|
|
64 | } | ||
|
|
|
65 | |||
|
|
|
66 | #go, #iego { | ||
|
|
|
67 | vertical-align: middle; | ||
|
|
|
68 | padding-bottom: 2px; | ||
|
|
|
69 | } | ||
|
|
|
70 | } | ||
|
|
|
71 | |||
|
|
|
72 | div.navpanel { | ||
|
|
|
73 | /* Make IE draw panel above glow border */ | ||
|
|
|
74 | position: relative; | ||
|
|
|
75 | z-index: 1; | ||
|
|
|
76 | height: 33px; | ||
|
|
|
77 | padding: 0; | ||
|
|
|
78 | width: 650px; | ||
|
|
|
79 | |||
|
|
|
80 | .navcontrols { | ||
|
|
|
81 | right: 25px; | ||
|
|
|
82 | } | ||
|
|
|
83 | |||
|
|
|
84 | #title { | ||
|
|
|
85 | padding: 1ex; | ||
|
|
|
86 | } | ||
|
|
|
87 | } | ||
|
|
|
88 | |||
|
|
|
89 | form.navpanel { | ||
|
|
|
90 | margin-top: -28px; | ||
|
|
|
91 | padding: 0; | ||
|
|
|
92 | width: 625px; | ||
|
|
|
93 | |||
|
|
|
94 | .navcontrols { | ||
|
|
|
95 | right: 0; | ||
|
|
|
96 | } | ||
|
|
|
97 | } | ||
|
|
|
98 | |||
|
|
|
99 | /* Need to gank the button out of the document flow somehow */ | ||
|
|
|
100 | .search-field { | ||
|
|
|
101 | position: relative; | ||
|
|
|
102 | |||
|
|
|
103 | a { | ||
|
|
|
104 | position: absolute; | ||
|
|
|
105 | } | ||
|
|
|
106 | } | ||
|
|
|
107 | |||
|
|
|
108 | .search-filter { | ||
|
|
|
109 | padding: 0 25px; | ||
|
|
|
110 | margin-bottom: 15px; | ||
|
|
|
111 | } | ||
|
|
35 | } |
|
112 | } |
|
|
36 |
|
113 | ||
|
|
37 | #comic div.navpanel { |
|
||
|
|
38 | position: relative; /* Make IE draw panel above glow border */ |
|
||
|
|
39 | z-index: 1; |
|
||
|
|
40 | height: 33px; |
|
||
|
|
41 | padding: 0px; |
|
||
|
|
42 | width: 650px; |
|
||
|
|
43 | } |
|
||
|
|
44 |
|
114 | ||
|
|
45 | #comic form.navpanel { |
|
115 | /* Top Nav */ |
|
|
46 | margin-top: -28px; |
|
116 | #comic .navpanel .navcontrols.top { |
|
|
47 | padding: 0px; |
|
117 | li.prev { |
|
|
48 | width: 625px; |
|
118 | background: url(../parts/nav2-top-prev.png) no-repeat; |
|
|
49 | } |
|
119 | } |
|
|
50 |
|
120 | ||
|
|
51 | /* Need to gank the button out of the document flow somehow */ |
|
121 | li.next { |
|
|
52 | #comic .search-field { position:relative } |
|
122 | background: url(../parts/nav2-top-next.png) no-repeat; |
|
|
53 | #comic .search-field a { position:absolute } |
|
123 | } |
|
|
54 |
|
124 | ||
|
|
55 | #comic .search-filter { |
|
125 | li.prevoff { |
|
|
56 | padding:0px 25px; |
|
126 | background: url(../parts/nav2-top-prevoff.png) no-repeat; |
|
|
57 | margin-bottom: 15px; |
|
127 | } |
|
|
58 | } |
|
||
|
|
59 |
|
128 | ||
|
|
60 | #comic .navpanel .navcontrols { |
|
129 | li.nextoff { |
|
|
61 | position: absolute; |
|
130 | background: url(../parts/nav2-top-nextoff.png) no-repeat; |
|
|
62 | z-index: 1; |
|
131 | } |
|
|
63 | } |
|
132 | } |
|
|
64 |
|
133 | ||
|
|
65 | #comic div.navpanel .navcontrols { right:25px } |
|
134 | /* Bottom Nav */ |
|
|
66 |
#comic |
|
135 | #comic .navpanel .navcontrols.bottom { |
|
|
|
136 | li.prev { | ||
|
|
|
137 | background: url(../parts/nav2-bottom-prev.png) no-repeat; | ||
|
|
|
138 | } | ||
|
|
67 |
|
139 | ||
|
|
68 | #comic .navpanel .navcontrols ul { |
|
140 | li.next { |
|
|
69 | width: 124px; height: 33px; |
|
141 | background: url(../parts/nav2-bottom-next.png) no-repeat; |
|
|
70 | margin: 0px; |
|
142 | } |
|
|
71 | padding: 0px; |
|
||
|
|
72 | clear: both; |
|
||
|
|
73 | } |
|
||
|
|
74 |
|
143 | ||
|
|
75 | #comic .navpanel .navcontrols ul li { |
|
144 | li.prevoff { |
|
|
76 | display: block; |
|
145 | background: url(../parts/nav2-bottom-prevoff.png) no-repeat; |
|
|
77 | float: left; |
|
146 | } |
|
|
78 | } |
|
||
|
|
79 |
|
147 | ||
|
|
80 | #comic .navpanel .navcontrols ul li a, |
|
148 | li.nextoff { |
|
|
81 | #comic .navpanel .navcontrols ul li span { |
|
149 | background: url(../parts/nav2-bottom-nextoff.png) no-repeat; |
|
|
82 | display: block; |
|
150 | } |
|
|
83 | padding-top: 33px; |
|
||
|
|
84 | width: 62px; |
|
||
|
|
85 | height: 0px; |
|
||
|
|
86 | overflow: hidden; |
|
||
|
|
87 | } |
|
151 | } |
|
|
88 |
|
152 | ||
|
|
|
153 | /* Form Nav only for disable */ | ||
|
|
|
154 | #comic .navpanel .navcontrols { | ||
|
|
|
155 | li.findprevoff { | ||
|
|
|
156 | background: url(../parts/nav2-prevfindoff.png) no-repeat; | ||
|
|
|
157 | } | ||
|
|
89 |
|
158 | ||
|
|
90 | /* Top Nav */ |
|
159 | li.findnextoff { |
|
|
|
160 | background: url(../parts/nav2-nextfindoff.png) no-repeat; | ||
|
|
|
161 | } | ||
|
|
91 |
|
162 | ||
|
|
92 | #comic .navpanel .navcontrols.top li.prev { |
|
163 | ul#searchprevnext { |
|
|
93 | background: url(../parts/nav2-top-prev.png) no-repeat; |
|
164 | li { |
|
|
|
165 | height: 33px; | ||
|
|
|
166 | } | ||
|
|
|
167 | } | ||
|
|
94 | } |
|
168 | } |
|
|
95 |
|
169 | ||
|
|
96 | #comic .navpanel .navcontrols.top li.next { |
|
170 | #comic .transcript { |
|
|
97 | background: url(../parts/nav2-top-next.png) no-repeat; |
|
171 | list-style-type: none; |
|
|
98 | } |
|
172 | padding: 66px 50px; |
|
|
|
173 | margin: 0; | ||
|
|
99 |
|
174 | ||
|
|
100 | #comic .navpanel .navcontrols.top li.prevoff { |
|
175 | .panelhead { |
|
|
101 | background: url(../parts/nav2-top-prevoff.png) no-repeat; |
|
176 | font-size: larger; |
|
|
102 | } |
|
177 | font-weight: bold; |
|
|
|
178 | } | ||
|
|
103 |
|
179 | ||
|
|
104 | #comic .navpanel .navcontrols.top li.nextoff { |
|
180 | dl { |
|
|
105 | background: url(../parts/nav2-top-nextoff.png) no-repeat; |
|
181 | padding-left: 50px; |
|
|
106 | } |
|
182 | } |
|
|
107 |
|
183 | ||
|
|
108 | /* Bottom Nav */ |
|
184 | dt { |
|
|
|
185 | float: left; | ||
|
|
|
186 | padding-right: 1em; | ||
|
|
|
187 | font-weight: bold; | ||
|
|
|
188 | } | ||
|
|
109 |
|
189 | ||
|
|
110 | #comic .navpanel .navcontrols.bottom li.prev { |
|
190 | dd { |
|
|
111 | background: url(../parts/nav2-bottom-prev.png) no-repeat; |
|
191 | margin-left: 5.5em; |
|
|
|
192 | padding-left: 0; | ||
|
|
|
193 | padding-bottom: 0.5ex; | ||
|
|
|
194 | } | ||
|
|
112 | } |
|
195 | } |
|
|
113 |
|
196 | ||
|
|
114 | #comic .navpanel .navcontrols.bottom li.next { |
|
197 | /* Make the archive link stand out */ |
|
|
115 | background: url(../parts/nav2-bottom-next.png) no-repeat; |
|
198 | #comic #archivelink { |
|
|
116 | } |
|
199 | background-color: $text-normal; |
|
|
117 |
|
200 | ||
|
|
118 | #comic .navpanel .navcontrols.bottom li.prevoff { |
|
201 | a { |
|
|
119 | background: url(../parts/nav2-bottom-prevoff.png) no-repeat; |
|
202 | color: $nl-background; |
|
|
120 | } |
|
||
|
|
121 |
|
203 | ||
|
|
122 | #comic .navpanel .navcontrols.bottom li.nextoff { |
|
204 | &:hover { |
|
|
123 | background: url(../parts/nav2-bottom-nextoff.png) no-repeat; |
|
205 | color: $link-hover; |
|
|
|
206 | } | ||
|
|
|
207 | } | ||
|
|
124 | } |
|
208 | } |
|
|
125 |
|
209 | ||
|
|
126 | /* Form Nav only for disable */ |
|
210 | /* Boxes between the comic and the rants */ |
|
|
127 |
|
211 | #megagear { | |
|
|
128 | #comic .navpanel .navcontrols li.findprevoff { |
|
212 | text-align: center; |
|
|
129 | background: url(../parts/nav2-prevfindoff.png) no-repeat; |
|
||
|
|
130 | } |
|
213 | } |
|
|
131 |
|
214 | ||
|
|
132 | #comic .navpanel .navcontrols li.findnextoff { |
|
215 | #newsbox { |
|
|
133 | background: url(../parts/nav2-nextfindoff.png) no-repeat; |
|
216 | overflow: visible; |
|
|
134 | } |
|
217 | height: 60px; |
|
|
135 |
|
218 | ||
|
|
136 | #comic .navpanel .navcontrols ul#searchprevnext li { |
|
219 | .leftcol { |
|
|
137 | height: 33px; |
|
220 | // left: 5px; |
|
|
138 | } |
|
221 | } |
|
|
139 |
|
222 | ||
|
|
140 | #comic div.navpanel #title { |
|
223 | .rightcol { |
|
|
141 | padding: 1ex; |
|
224 | // right: 5px; |
|
|
142 | } |
|
225 | } |
|
|
143 |
|
226 | ||
|
|
144 | #comic .navpanel .search-filter { |
|
227 | div { |
|
|
145 | margin-bottom: 15px; |
|
228 | border: none; |
|
|
146 | } |
|
229 | overflow: visible; |
|
|
|
230 | } | ||
|
|
147 |
|
231 | ||
|
|
148 | #comic .navpanel #q { |
|
232 | a { |
|
|
149 | width: 350px; |
|
233 | color: $text-accent; |
|
|
150 | } |
|
234 | } |
|
|
151 |
|
235 | ||
|
|
152 | #comic .navpanel #go, |
|
236 | ul { |
|
|
153 | #comic .navpanel #iego { |
|
237 | margin-left: 3ex; |
|
|
154 | vertical-align: middle; |
|
238 | padding-left: 0; |
|
|
155 | padding-bottom: 2px; |
|
239 | } |
|
|
156 | } |
|
||
|
|
157 |
|
240 | ||
|
|
158 | #comic .transcript { |
|
241 | h3 { |
|
|
159 | list-style-type:none; |
|
242 | text-align: center; |
|
|
160 | padding: 66px 50px; |
|
243 | } |
|
|
161 | margin: 0px; |
|
||
|
|
162 | } |
|
244 | } |
|
|
163 |
|
245 | ||
|
|
164 | #comic .transcript .panelhead { |
|
246 | #support { |
|
|
165 |
font-size: |
|
247 | font-size: 80%; |
|
|
166 | font-weight: bold; |
|
248 | border-bottom: 5px solid $nl-background; |
|
|
167 | } |
|
||
|
|
168 |
|
249 | ||
|
|
169 | #comic .transcript dl { padding-left:50px } |
|
250 | div.thewrap { |
|
|
170 | #comic .transcript dt { |
|
251 | div { |
|
|
171 | float: left; |
|
252 | // Fix a bug caused by OpenAds injecting a <div> into the status area which |
|
|
172 | padding-right: 1em; |
|
253 | // partially obscures the 'support' heading |
|
|
173 | font-weight: bold; |
|
254 | background-color: transparent; |
|
|
|
255 | } | ||
|
|
|
256 | } | ||
|
|
174 | } |
|
257 | } |
|
|
175 |
|
258 | ||
|
|
176 | #comic .transcript dd { |
|
259 | #newsbox div.thewrap, #support div.thewrap { |
|
|
177 | margin-left: 5.5em; |
|
260 | border-bottom: none; |
|
|
178 | padding-left: 0px; |
|
261 | margin: 0; |
|
|
179 |
padding |
|
262 | padding: 0; |
|
|
|
263 | background: url(../parts/twitter-seperator.png) 6px 0 $infobox; | ||
|
|
180 | } |
|
264 | } |
|
|
181 |
|
265 | ||
|
|
182 | /* Make the archive link stand out */ |
|
266 | #status { |
|
|
183 | #comic #archivelink { background-color: $text-normal; } |
|
267 | dl { |
|
|
184 | #comic #archivelink a { color: $nl-background; } |
|
268 | margin: 1em; |
|
|
185 | #comic #archivelink a:hover { color: $link-hover; } |
|
269 | } |
|
|
186 |
|
|||
|
|
187 | /* Boxes between the comic and the rants */ |
|
||
|
|
188 | #megagear { text-align:center } |
|
||
|
|
189 |
|
270 | ||
|
|
190 | #newsbox a { color: $text-accent; } |
|
271 | dt { |
|
|
191 | #newsbox ul { |
|
272 | float: left; |
|
|
192 | margin-left: 3ex; |
|
273 | } |
|
|
193 | padding-left: 0px; |
|
||
|
|
194 | } |
|
||
|
|
195 | #newsbox h3 { |
|
||
|
|
196 | text-align: center; |
|
||
|
|
197 | } |
|
||
|
|
198 | #support { font-size: 80%; } |
|
||
|
|
199 |
|
274 | ||
|
|
200 | #status dl { |
|
275 | dd { |
|
|
201 |
margin: |
|
276 | margin-left: 7em; |
|
|
202 | } |
|
277 | color: $text-accent; |
|
|
203 |
|
278 | ||
|
|
204 | #status dt { |
|
279 | div#percentbox { |
|
|
205 | float: left; |
|
280 | padding: 1px; |
|
|
|
281 | width: 90%; | ||
|
|
|
282 | border: 1px solid $percent-border; | ||
|
|
|
283 | margin: 0; | ||
|
|
|
284 | } | ||
|
|
|
285 | } | ||
|
|
206 | } |
|
286 | } |
|
|
207 |
|
287 | ||
|
|
208 | #status dd { |
|
288 | .content .column { |
|
|
209 | margin-left: 7em; |
|
289 | width: 330px; |
|
|
210 | color: $text-accent; |
|
||
|
|
211 | } |
|
290 | } |
|
|
212 |
|
291 | ||
|
|
213 | #status dd div#percentbox { |
|
292 | .content div.column.leftcol, .content div.column.rightcol { |
|
|
214 | padding: 1px; |
|
293 | border: none; |
|
|
215 | width: 90%; |
|
||
|
|
216 | border: 1px solid $percent-border; |
|
||
|
|
217 | margin: 0px; |
|
||
|
|
218 | } |
|
294 | } |
|
|
219 |
|
295 | ||
|
|
220 | #newsbox div.thewrap, |
|
296 | .content div#status, .content div#fred_twitter { |
|
|
221 | #support div.thewrap { |
|
297 | border: none; |
|
|
222 | border-bottom:none; |
|
298 | background: none; |
|
|
223 | margin:0; |
|
||
|
|
224 | padding:0; |
|
||
|
|
225 | background: url(../parts/twitter-seperator.png) 6px 0 $infobox; |
|
||
|
|
226 | } |
|
299 | } |
|
|
227 |
|
300 | ||
|
|
228 | /* Fix a bug caused by OpenAds injecting a <div> into the status area which |
|
301 | #status ul, #fred_twitter ul { |
|
|
229 | * partially obscures the 'support' heading |
|
302 | margin-top: 0; |
|
|
230 | */ |
|
||
|
|
231 | #support div.thewrap div { |
|
||
|
|
232 | background-color: transparent; |
|
||
|
|
233 | } |
|
303 | } |
|
|
234 |
|
304 | ||
|
|
235 | .content div.column.leftcol, |
|
||
|
|
236 | .content div.column.rightcol { border: none; } |
|
||
|
|
237 |
|
|||
|
|
238 | .content div#status, |
|
||
|
|
239 | .content div#fred_twitter { border: none; background: none; } |
|
||
|
|
240 |
|
|||
|
|
241 | #support { border-bottom: 5px solid $nl-background; } |
|
||
|
|
242 |
|
|||
|
|
243 | #status ul, #fred_twitter ul { margin-top:0px } |
|
||
|
|
244 |
|
|||
|
|
245 | #status li, #fred_twitter li { |
|
305 | #status li, #fred_twitter li { |
|
|
246 | padding-top: 4px; |
|
306 | padding-top: 4px; |
|
|
247 | padding-right: 1em; |
|
307 | padding-right: 1em; |
|
|
248 | } |
|
308 | } |
|
|
249 |
|
309 | ||
|
|
250 | #newsbox { |
|
||
|
|
251 | overflow: visible; |
|
||
|
|
252 | height: 60px; |
|
||
|
|
253 | } |
|
||
|
|
254 |
|
|||
|
|
255 | /* |
|
||
|
|
256 | #newsbox .leftcol { |
|
||
|
|
257 | left: 5px; |
|
||
|
|
258 | } |
|
||
|
|
259 |
|
|||
|
|
260 | #newsbox .rightcol { |
|
||
|
|
261 | right: 5px; |
|
||
|
|
262 | } |
|
||
|
|
263 | */ |
|
||
|
|
264 |
|
|||
|
|
265 | #newsbox div { |
|
||
|
|
266 | border:none; |
|
||
|
|
267 | overflow:visible; |
|
||
|
|
268 | } |
|
||
|
|
269 |
|
|||
|
|
270 | #blogbits { |
|
310 | #blogbits { |
|
|
271 |
padding: |
|
311 | padding: 0; |
|
|
272 |
width: |
|
312 | width: 370px; |
|
|
273 | } |
|
313 | |
|
|
274 |
|
314 | ul { | |
|
|
275 | #blogbits ul |
|
315 | margin: 0; |
|
|
276 | { |
|
316 | padding: 0; |
|
|
277 | margin: 0px; |
|
317 | text-align: center; |
|
|
278 | padding: 0px; |
|
318 | list-style-type: none; |
|
|
279 | text-align: center; |
|
319 | } |
|
|
280 | list-style-type: none; |
|
320 | |
|
|
|
321 | ul#blogbitslist { | ||
|
|
|
322 | margin-left: 250px; | ||
|
|
|
323 | } | ||
|
|
|
324 | |||
|
|
|
325 | ul#feed-list { | ||
|
|
|
326 | margin: auto; | ||
|
|
|
327 | |||
|
|
|
328 | li { | ||
|
|
|
329 | display: inline-block; | ||
|
|
|
330 | margin: 0; | ||
|
|
|
331 | padding: 7.5px 4px; | ||
|
|
|
332 | color: $text-normal; | ||
|
|
|
333 | } | ||
|
|
|
334 | } | ||
|
|
|
335 | |||
|
|
|
336 | #feed-list { | ||
|
|
|
337 | ul { | ||
|
|
|
338 | display: none; | ||
|
|
|
339 | position: absolute; | ||
|
|
|
340 | z-index: 1; | ||
|
|
|
341 | border: solid 5px $nl-background; | ||
|
|
|
342 | width: 400px; | ||
|
|
|
343 | background: $background; | ||
|
|
|
344 | text-align: left; | ||
|
|
|
345 | } | ||
|
|
|
346 | } | ||
|
|
|
347 | |||
|
|
|
348 | a.rightcol, a.leftcol { | ||
|
|
|
349 | img { | ||
|
|
|
350 | width: 180px; | ||
|
|
|
351 | } | ||
|
|
|
352 | } | ||
|
|
|
353 | |||
|
|
|
354 | a.rightcol { | ||
|
|
|
355 | img { | ||
|
|
|
356 | padding-left: 5px; | ||
|
|
|
357 | } | ||
|
|
|
358 | } | ||
|
|
|
359 | |||
|
|
|
360 | a.leftcol { | ||
|
|
|
361 | img { | ||
|
|
|
362 | padding-right: 5px; | ||
|
|
|
363 | } | ||
|
|
|
364 | } | ||
|
|
281 | } |
|
365 | } |
|
|
282 |
|
366 | ||
|
|
283 | #blogbits ul#blogbitslist { margin-left:250px } |
|
367 | #feed-list h4 { |
|
|
284 | #blogbits ul#feed-list { |
|
||
|
|
285 | margin: auto; |
|
368 | margin: auto; |
|
|
286 | } |
|
369 | color: $text-accent; |
|
|
287 |
|
370 | text-align: center; | |
|
|
288 | #blogbits #feed-list ul { |
|
371 | font-size: medium; |
|
|
289 | display: none; |
|
||
|
|
290 | position: absolute; |
|
||
|
|
291 | z-index: 1; |
|
||
|
|
292 | border: solid 5px black; |
|
||
|
|
293 | width: 400px; |
|
372 | width: 400px; |
|
|
294 | background: $background; |
|
||
|
|
295 | text-align: left; |
|
||
|
|
296 | } |
|
||
|
|
297 |
|
|||
|
|
298 | #blogbits ul#feed-list li { |
|
||
|
|
299 | display: inline-block; |
|
||
|
|
300 | margin: 0px; |
|
||
|
|
301 | padding: 7.5px 4px; |
|
||
|
|
302 | color: $text-normal; |
|
||
|
|
303 | } |
|
||
|
|
304 |
|
|||
|
|
305 | #blogbits a.rightcol img, |
|
||
|
|
306 | #blogbits a.leftcol img { |
|
||
|
|
307 | width: 180px; |
|
||
|
|
308 | } |
|
||
|
|
309 |
|
|||
|
|
310 | #blogbits a.rightcol img { |
|
||
|
|
311 | padding-left: 5px; |
|
||
|
|
312 | } |
|
373 | } |
|
|
313 |
|
374 | ||
|
|
314 | #blogbits a.leftcol img { |
|
375 | #facebook { |
|
|
315 | padding-right: 5px; |
|
376 | border: none; |
|
|
316 | } |
|
377 | padding: 0; |
|
|
317 |
|
378 | ||
|
|
318 | #facebook img { |
|
379 | img { |
|
|
319 |
width: |
|
380 | width: 300px; |
|
|
320 |
height: |
|
381 | height: 60px; |
|
|
|
382 | } | ||
|
|
321 | } |
|
383 | } |
|
|
322 |
|
384 | ||
|
|
323 | #facebook { |
|
385 | #support { |
|
|
324 | border: none; |
|
386 | position: relative; |
|
|
325 | padding: 0px; |
|
||
|
|
326 | } |
|
387 | } |
|
|
327 |
|
388 | ||
|
|
328 | #support { position:relative } |
|
||
|
|
329 |
|
|||
|
|
330 | #support .thewrap .column .glowwrap, |
|
389 | #support .thewrap .column .glowwrap, |
|
|
331 | #support .thewrap .column .glowwrap a { |
|
390 | #support .thewrap .column .glowwrap a { |
|
|
332 | display: block; |
|
391 | display: block; |
| @@ -349,215 +408,228 h3 a { | |||||
|
|
349 | right: 10px; |
|
408 | right: 10px; |
|
|
350 | height: 16px; |
|
409 | height: 16px; |
|
|
351 |
|
410 | ||
|
|
352 |
margin: 0 |
|
411 | margin: 0; |
|
|
353 |
border: 0 |
|
412 | border: 0; |
|
|
354 |
padding: 0 |
|
413 | padding: 0; |
|
|
355 |
|
414 | ||
|
|
356 | background-color: transparent; |
|
415 | background-color: transparent; |
|
|
357 | } |
|
||
|
|
358 |
|
416 | ||
|
|
359 | #newsbox .adinfo a, #support .adinfo a { |
|
417 | a { |
|
|
360 | color: $text-accent; |
|
418 | color: $text-accent; |
|
|
361 | font-size: 11px; |
|
419 | font-size: 11px; |
|
|
362 | } |
|
420 | } |
|
|
363 |
|
421 | ||
|
|
364 | #newsbox .adinfo p, #support .adinfo p { |
|
422 | p { |
|
|
365 |
margin: 0 |
|
423 | margin: 0 10px 0 0; |
|
|
|
424 | } | ||
|
|
366 | } |
|
425 | } |
|
|
367 |
|
426 | ||
|
|
368 | /* Rant Columns */ |
|
427 | /* Rant Columns */ |
|
|
369 | #console { |
|
428 | #console { |
|
|
370 | overflow: hidden; |
|
429 | overflow: hidden; |
|
|
371 | } |
|
||
|
|
372 |
|
|||
|
|
373 | #console h3 { |
|
||
|
|
374 | padding: 0.75ex; |
|
||
|
|
375 | background-color: $foreground; |
|
||
|
|
376 |
|
|||
|
|
377 | font-family: $banner-font; |
|
||
|
|
378 | font-size: xx-large; |
|
||
|
|
379 | text-align: center; |
|
||
|
|
380 | } |
|
||
|
|
381 |
|
|||
|
|
382 | #console .date, |
|
||
|
|
383 | #console .rantbody { |
|
||
|
|
384 | margin: 5px; |
|
||
|
|
385 | padding: 5px; |
|
||
|
|
386 | width: 330px; |
|
||
|
|
387 | } |
|
||
|
|
388 |
|
|||
|
|
389 | #feed-list h4 { |
|
||
|
|
390 | margin: auto; |
|
||
|
|
391 | color: $text-accent; |
|
||
|
|
392 | text-align: center; |
|
||
|
|
393 | font-size: medium; |
|
||
|
|
394 | width: 400px; |
|
||
|
|
395 | } |
|
||
|
|
396 |
|
|||
|
|
397 | #console h4 { |
|
||
|
|
398 | margin: auto; |
|
||
|
|
399 | padding: 0.75ex 0px; |
|
||
|
|
400 | width: 330px; |
|
||
|
|
401 |
|
|||
|
|
402 | background-color: $foreground; |
|
||
|
|
403 | color: $text-accent; |
|
||
|
|
404 |
|
|||
|
|
405 | text-align: center; |
|
||
|
|
406 | font-size: medium; |
|
||
|
|
407 | } |
|
||
|
|
408 |
|
|||
|
|
409 | #console h4 a {color: $text-accent;} |
|
||
|
|
410 |
|
|||
|
|
411 | #console .rantbody { |
|
||
|
|
412 | margin-top: 0px; |
|
||
|
|
413 | padding-top: 0px; |
|
||
|
|
414 | } |
|
||
|
|
415 |
|
|||
|
|
416 | /* force <pre> to not break our boxes */ |
|
||
|
|
417 | #console .rantbody pre { |
|
||
|
|
418 | white-space: pre-wrap; |
|
||
|
|
419 | white-space: -moz-pre-wrap; |
|
||
|
|
420 | word-wrap: break-word; |
|
||
|
|
421 | } |
|
||
|
|
422 |
|
|||
|
|
423 | #console .leftcol { |
|
||
|
|
424 | width: 350px; |
|
||
|
|
425 | color: $text-normal; |
|
||
|
|
426 | } |
|
||
|
|
427 |
|
|||
|
|
428 | #console .rightcol { |
|
||
|
|
429 | width: 350px; |
|
||
|
|
430 | color: $text-accent; |
|
||
|
|
431 | } |
|
||
|
|
432 |
|
|||
|
|
433 | #console .rantimage { |
|
||
|
|
434 | background: url(../parts/mt-glow-mainrant-vert.png) repeat-y; |
|
||
|
|
435 | width: 350px; |
|
||
|
|
436 | height: 285px; |
|
||
|
|
437 | } |
|
||
|
|
438 |
|
|||
|
|
439 | #console .ri-top { |
|
||
|
|
440 | background: url(../parts/mt-glow-mainrant-top.png) top no-repeat; |
|
||
|
|
441 | width: 350px; |
|
||
|
|
442 | height: 245px; |
|
||
|
|
443 | } |
|
||
|
|
444 |
|
|||
|
|
445 | #console .ri-bottom { |
|
||
|
|
446 | background: url(../parts/mt-glow-mainrant-bottom.png) bottom no-repeat; |
|
||
|
|
447 | width: 350px; |
|
||
|
|
448 | } |
|
||
|
|
449 |
|
|||
|
|
450 | #console .ri-matte { |
|
||
|
|
451 | padding: 20px 0px 20px 0px; |
|
||
|
|
452 | margin: 0px 25px; |
|
||
|
|
453 | width: 300px; |
|
||
|
|
454 | height: 245px; |
|
||
|
|
455 | } |
|
||
|
|
456 |
|
|||
|
|
457 | #console .rantimage p, |
|
||
|
|
458 | #console .rantimage p img { |
|
||
|
|
459 | float: none; |
|
||
|
|
460 | width: 300px; |
|
||
|
|
461 | height: 245px; |
|
||
|
|
462 | text-align: left; |
|
||
|
|
463 | padding: 0px; |
|
||
|
|
464 | margin: 0px; |
|
||
|
|
465 | } |
|
||
|
|
466 |
|
|||
|
|
467 | #console .rantnav { |
|
||
|
|
468 | margin: 2em 0px; |
|
||
|
|
469 | text-align: center; |
|
||
|
|
470 | } |
|
||
|
|
471 |
|
430 | ||
|
|
472 | #console .nameplate { |
|
431 | h3 { |
|
|
473 | background-color: $foreground; |
|
432 | padding: 0.75ex; |
|
|
474 | width: 350px |
|
433 | background-color: $foreground; |
|
|
|
434 | |||
|
|
|
435 | font-family: $banner-font; | ||
|
|
|
436 | font-size: xx-large; | ||
|
|
|
437 | text-align: center; | ||
|
|
|
438 | } | ||
|
|
|
439 | |||
|
|
|
440 | h4 { | ||
|
|
|
441 | margin: auto; | ||
|
|
|
442 | padding: 0.75ex 0; | ||
|
|
|
443 | width: 330px; | ||
|
|
|
444 | |||
|
|
|
445 | background-color: $foreground; | ||
|
|
|
446 | color: $text-accent; | ||
|
|
|
447 | |||
|
|
|
448 | text-align: center; | ||
|
|
|
449 | font-size: medium; | ||
|
|
|
450 | |||
|
|
|
451 | a { | ||
|
|
|
452 | color: $text-accent; | ||
|
|
|
453 | } | ||
|
|
|
454 | } | ||
|
|
|
455 | |||
|
|
|
456 | .date, .rantbody { | ||
|
|
|
457 | margin: 5px; | ||
|
|
|
458 | padding: 5px; | ||
|
|
|
459 | width: 330px; | ||
|
|
|
460 | } | ||
|
|
|
461 | |||
|
|
|
462 | .rantbody { | ||
|
|
|
463 | margin-top: 0; | ||
|
|
|
464 | padding-top: 0; | ||
|
|
|
465 | |||
|
|
|
466 | pre { | ||
|
|
|
467 | /* force <pre> to not break our boxes */ | ||
|
|
|
468 | white-space: pre-wrap; | ||
|
|
|
469 | white-space: -moz-pre-wrap; | ||
|
|
|
470 | word-wrap: break-word; | ||
|
|
|
471 | } | ||
|
|
|
472 | } | ||
|
|
|
473 | |||
|
|
|
474 | .leftcol, .rightcol { | ||
|
|
|
475 | width: 350px; | ||
|
|
|
476 | } | ||
|
|
|
477 | |||
|
|
|
478 | .leftcol { | ||
|
|
|
479 | color: $text-normal; | ||
|
|
|
480 | } | ||
|
|
|
481 | |||
|
|
|
482 | .rightcol { | ||
|
|
|
483 | color: $text-accent; | ||
|
|
|
484 | } | ||
|
|
|
485 | |||
|
|
|
486 | .rantimage { | ||
|
|
|
487 | background: url(../parts/mt-glow-mainrant-vert.png) repeat-y; | ||
|
|
|
488 | width: 350px; | ||
|
|
|
489 | height: 285px; | ||
|
|
|
490 | |||
|
|
|
491 | p, p img { | ||
|
|
|
492 | float: none; | ||
|
|
|
493 | width: 300px; | ||
|
|
|
494 | height: 245px; | ||
|
|
|
495 | text-align: left; | ||
|
|
|
496 | padding: 0; | ||
|
|
|
497 | margin: 0; | ||
|
|
|
498 | } | ||
|
|
|
499 | } | ||
|
|
|
500 | |||
|
|
|
501 | .ri-top, .ri-bottom { | ||
|
|
|
502 | width: 350px; | ||
|
|
|
503 | } | ||
|
|
|
504 | |||
|
|
|
505 | .ri-top { | ||
|
|
|
506 | background: url(../parts/mt-glow-mainrant-top.png) top no-repeat; | ||
|
|
|
507 | height: 245px; | ||
|
|
|
508 | } | ||
|
|
|
509 | |||
|
|
|
510 | .ri-bottom { | ||
|
|
|
511 | background: url(../parts/mt-glow-mainrant-bottom.png) bottom no-repeat; | ||
|
|
|
512 | } | ||
|
|
|
513 | |||
|
|
|
514 | .ri-matte { | ||
|
|
|
515 | padding: 20px 0 20px 0; | ||
|
|
|
516 | margin: 0 25px; | ||
|
|
|
517 | width: 300px; | ||
|
|
|
518 | height: 245px; | ||
|
|
|
519 | } | ||
|
|
|
520 | |||
|
|
|
521 | .rantnav { | ||
|
|
|
522 | margin: 2em 0; | ||
|
|
|
523 | text-align: center; | ||
|
|
|
524 | } | ||
|
|
|
525 | |||
|
|
|
526 | .nameplate { | ||
|
|
|
527 | background-color: $foreground; | ||
|
|
|
528 | width: 350px; | ||
|
|
|
529 | |||
|
|
|
530 | span { | ||
|
|
|
531 | display: block; | ||
|
|
|
532 | height: 48px; | ||
|
|
|
533 | background-repeat: no-repeat; | ||
|
|
|
534 | background-position: top center; | ||
|
|
|
535 | } | ||
|
|
|
536 | |||
|
|
|
537 | h3 { | ||
|
|
|
538 | display: none; | ||
|
|
|
539 | } | ||
|
|
|
540 | } | ||
|
|
|
541 | |||
|
|
|
542 | .oldrant { | ||
|
|
|
543 | margin-top: 1.5em; | ||
|
|
|
544 | border-top: medium solid $text-normal; | ||
|
|
|
545 | padding-top: 1em; | ||
|
|
|
546 | width: 345px; | ||
|
|
|
547 | |||
|
|
|
548 | .rantimage { | ||
|
|
|
549 | float: left; | ||
|
|
|
550 | background: url(../parts/mt-glow-oldrant-vert.png) repeat-y; | ||
|
|
|
551 | width: 176px; | ||
|
|
|
552 | height: 141px; | ||
|
|
|
553 | |||
|
|
|
554 | p, p img { | ||
|
|
|
555 | float: none; | ||
|
|
|
556 | width: 150px; | ||
|
|
|
557 | height: 123px; | ||
|
|
|
558 | text-align: left; | ||
|
|
|
559 | padding: 0; | ||
|
|
|
560 | margin: 0; | ||
|
|
|
561 | } | ||
|
|
|
562 | } | ||
|
|
|
563 | |||
|
|
|
564 | .ri-top, .ri-bottom { | ||
|
|
|
565 | width: 178px; | ||
|
|
|
566 | } | ||
|
|
|
567 | |||
|
|
|
568 | .ri-top { | ||
|
|
|
569 | background: url(../parts/mt-glow-oldrant-top.png) top no-repeat; | ||
|
|
|
570 | height: 123px; | ||
|
|
|
571 | } | ||
|
|
|
572 | |||
|
|
|
573 | .ri-bottom { | ||
|
|
|
574 | background: url(../parts/mt-glow-oldrant-bottom.png) bottom no-repeat; | ||
|
|
|
575 | } | ||
|
|
|
576 | |||
|
|
|
577 | .ri-matte { | ||
|
|
|
578 | padding: 9px 0 9px 0; | ||
|
|
|
579 | margin: 0 13px; | ||
|
|
|
580 | width: 150px; | ||
|
|
|
581 | height: 123px; | ||
|
|
|
582 | } | ||
|
|
|
583 | |||
|
|
|
584 | .nameplate { | ||
|
|
|
585 | margin-top: 43px; | ||
|
|
|
586 | background-color: $foreground; | ||
|
|
|
587 | width: 150px; | ||
|
|
|
588 | float: right; | ||
|
|
|
589 | } | ||
|
|
|
590 | |||
|
|
|
591 | h4 { | ||
|
|
|
592 | float: right; | ||
|
|
|
593 | margin:5px 0 5px 5px; | ||
|
|
|
594 | } | ||
|
|
|
595 | } | ||
|
|
475 | } |
|
596 | } |
|
|
476 |
|
597 | ||
|
|
477 | #console .nameplate span { |
|
598 | /* Shaded borders around images */ |
|
|
|
599 | #strip, #strip span { | ||
|
|
|
600 | /* Everyone treat <span> like <div> */ | ||
|
|
478 | display: block; |
|
601 | display: block; |
|
|
479 | height: 48px; |
|
||
|
|
480 | background-repeat: no-repeat; |
|
||
|
|
481 | background-position: top center; |
|
||
|
|
482 | } |
|
||
|
|
483 |
|
|||
|
|
484 | #console .nameplate h3 { |
|
||
|
|
485 | display: none; |
|
||
|
|
486 | } |
|
||
|
|
487 |
|
|||
|
|
488 | #console .oldrant { |
|
||
|
|
489 | margin-top: 1.5em; |
|
||
|
|
490 | border-top: medium solid $text-normal; |
|
||
|
|
491 | padding-top: 1em; |
|
||
|
|
492 | width: 345px; |
|
||
|
|
493 | } |
|
||
|
|
494 |
|
|||
|
|
495 | #console .oldrant .rantimage { |
|
||
|
|
496 | float:left; |
|
||
|
|
497 | background: url(../parts/mt-glow-oldrant-vert.png) repeat-y; |
|
||
|
|
498 | width: 176px; |
|
||
|
|
499 | height: 141px; |
|
||
|
|
500 | } |
|
||
|
|
501 |
|
|||
|
|
502 | #console .oldrant .ri-top { |
|
||
|
|
503 | background: url(../parts/mt-glow-oldrant-top.png) top no-repeat; |
|
||
|
|
504 | width: 178px; |
|
||
|
|
505 | height: 123px; |
|
||
|
|
506 | } |
|
||
|
|
507 |
|
|||
|
|
508 | #console .oldrant .ri-bottom { |
|
||
|
|
509 | background: url(../parts/mt-glow-oldrant-bottom.png) bottom no-repeat; |
|
||
|
|
510 | width: 178px; |
|
||
|
|
511 | } |
|
||
|
|
512 |
|
|||
|
|
513 | #console .oldrant .ri-matte { |
|
||
|
|
514 | padding: 9px 0px 9px 0px; |
|
||
|
|
515 | margin: 0px 13px; |
|
||
|
|
516 | width: 150px; |
|
||
|
|
517 | height: 123px; |
|
||
|
|
518 | } |
|
||
|
|
519 |
|
602 | ||
|
|
520 | #console .oldrant .rantimage p, |
|
603 | /* Shrinkwrap blocks for IE */ |
|
|
521 | #console .oldrant .rantimage p img { |
|
604 | display: inline-block; |
|
|
522 | float: none; |
|
||
|
|
523 | width: 150px; |
|
||
|
|
524 | height: 123px; |
|
||
|
|
525 | text-align: left; |
|
||
|
|
526 | padding: 0px; |
|
||
|
|
527 | margin: 0px; |
|
||
|
|
528 | } |
|
||
|
|
529 |
|
|||
|
|
530 | #console .oldrant .nameplate { |
|
||
|
|
531 | margin-top: 43px; |
|
||
|
|
532 | background-color: $foreground; |
|
||
|
|
533 | width: 150px; |
|
||
|
|
534 | float: right; |
|
||
|
|
535 | } |
|
||
|
|
536 |
|
|||
|
|
537 | #console .oldrant h4 { |
|
||
|
|
538 | float: right; |
|
||
|
|
539 | margin:5px 0pt 5px 5px; |
|
||
|
|
540 | } |
|
||
|
|
541 |
|
|||
|
|
542 | /* Shaded borders around images */ |
|
||
|
|
543 | #strip, |
|
||
|
|
544 | #strip span { |
|
||
|
|
545 | display: block; /* Everyone treat <span> like <div> */ |
|
||
|
|
546 | display: inline-block; /* Shrinkwrap blocks for IE */ |
|
||
|
|
547 | } |
|
605 | } |
|
|
548 |
|
606 | ||
|
|
549 | /* hasLayout */ |
|
607 | /* hasLayout */ |
|
|
550 |
* html #strip, * html #strip span { |
|
608 | * html #strip, * html #strip span { |
|
|
|
609 | height: 1%; | ||
|
|
|
610 | } | ||
|
|
551 |
|
611 | ||
|
|
552 | #strip { |
|
612 | #strip { |
|
|
553 |
|
|
613 | /* Shrinkwrap blocks for everyone else */ |
|
|
|
614 | display: table; | ||
|
|
554 | position: relative; |
|
615 | position: relative; |
|
|
555 | margin: -33px auto 0px; |
|
616 | margin: -33px auto 0px; |
|
|
556 | min-width: 650px; |
|
617 | min-width: 650px; |
|
|
|
618 | |||
|
|
|
619 | img { | ||
|
|
|
620 | margin: 33px 25px; | ||
|
|
|
621 | } | ||
|
|
|
622 | |||
|
|
|
623 | iframe { | ||
|
|
|
624 | border: none; | ||
|
|
|
625 | margin: 33px 25px; | ||
|
|
|
626 | width: 1024px; | ||
|
|
|
627 | height: 576px; | ||
|
|
|
628 | } | ||
|
|
557 | } |
|
629 | } |
|
|
558 |
|
630 | ||
|
|
559 | div#strip { |
|
631 | div#strip { |
|
|
560 | width:700px; |
|
632 | width: 700px; |
|
|
561 | background-color: $comic-background; |
|
633 | background-color: $comic-background; |
|
|
562 | } |
|
634 | } |
|
|
563 |
|
635 | ||
| @@ -593,26 +665,28 div#strip { | |||||
|
|
593 | background: url(../parts/mt-shadow-vert-right.png) repeat-y right; |
|
665 | background: url(../parts/mt-shadow-vert-right.png) repeat-y right; |
|
|
594 | } |
|
666 | } |
|
|
595 |
|
667 | ||
|
|
596 | #strip img { |
|
668 | #strip-transcript { |
|
|
597 | margin: 33px 25px; |
|
669 | padding: 10px; |
|
|
598 | } |
|
670 | } |
|
|
599 |
|
671 | ||
|
|
600 | #strip iframe { |
|
672 | /* Center the comic */ |
|
|
601 | border: none; |
|
673 | #comic { |
|
|
602 | margin: 33px 25px; |
|
674 | text-align: center; |
|
|
603 | width: 1024px; |
|
675 | |
|
|
604 | height: 576px; |
|
676 | * { |
|
|
|
677 | text-align: left; | ||
|
|
|
678 | } | ||
|
|
605 | } |
|
679 | } |
|
|
606 |
|
680 | ||
|
|
607 | #strip-transcript { |
|
681 | /* Overload header texts */ |
|
|
608 | padding: 10px 10px 10px 10px; |
|
682 | #metabox h2 span { |
|
|
|
683 | background: url(../parts/mt-blk_bar-metabox.png) no-repeat; | ||
|
|
609 | } |
|
684 | } |
|
|
610 |
|
685 | ||
|
|
611 | /* Center the comic */ |
|
686 | #support h2 span { |
|
|
612 | #comic { text-align:center } |
|
687 | background: url(../parts/mt-blk_bar-support.png) no-repeat; |
|
|
613 | #comic * { text-align:left } |
|
688 | } |
|
|
614 |
|
689 | ||
|
|
615 | /* Overload header texts */ |
|
690 | #console h2 span { |
|
|
616 |
|
|
691 | background: url(../parts/mt-blk_bar-console.png) no-repeat; |
|
|
617 | #support h2 span { background: url(../parts/mt-blk_bar-support.png) no-repeat } |
|
692 | } |
|
|
618 | #console h2 span { background: url(../parts/mt-blk_bar-console.png) no-repeat } |
|
||
| @@ -3,18 +3,26 | |||||
|
|
3 | @import "palette"; |
|
3 | @import "palette"; |
|
|
4 |
|
4 | ||
|
|
5 | /* Set basic element styles */ |
|
5 | /* Set basic element styles */ |
|
|
6 | img { border: none; } |
|
6 | img { |
|
|
|
7 | border: none; | ||
|
|
|
8 | } | ||
|
|
7 |
|
9 | ||
|
|
8 | a { |
|
10 | a { |
|
|
9 | text-decoration: none; |
|
11 | text-decoration: none; |
|
|
10 | color: $link-normal; |
|
12 | color: $link-normal; |
|
|
11 | } |
|
||
|
|
12 |
|
13 | ||
|
|
13 | a:visited { color: $link-visited; } |
|
14 | &:visited { |
|
|
14 | a:hover { color: $link-hover; } |
|
15 | color: $link-visited; |
|
|
|
16 | } | ||
|
|
|
17 | |||
|
|
|
18 | &:hover { | ||
|
|
|
19 | color: $link-hover; | ||
|
|
|
20 | } | ||
|
|
|
21 | } | ||
|
|
15 |
|
22 | ||
|
|
16 | body { |
|
23 | body { |
|
|
17 |
|
|
24 | /* Make IE not hate positioned elements */ |
|
|
|
25 | position: relative; | ||
|
|
18 |
|
26 | ||
|
|
19 | margin: auto; |
|
27 | margin: auto; |
|
|
20 | padding: 14px; |
|
28 | padding: 14px; |
| @@ -23,18 +31,23 body { | |||||
|
|
23 |
|
31 | ||
|
|
24 | font-size: 0.8em; |
|
32 | font-size: 0.8em; |
|
|
25 | font-family: $font-stack; |
|
33 | font-family: $font-stack; |
|
|
26 | } |
|
||
|
|
27 |
|
34 | ||
|
|
28 | /* Set default widths for page boxes */ |
|
35 | div { |
|
|
29 | body div { |
|
36 | /* Set default widths for page boxes */ |
|
|
30 | position: relative; |
|
37 | position: relative; |
|
|
31 | margin: auto; |
|
38 | margin: auto; |
|
|
32 | width: 700px; |
|
39 | width: 700px; |
|
|
|
40 | |||
|
|
|
41 | div { | ||
|
|
|
42 | width: auto; | ||
|
|
|
43 | } | ||
|
|
|
44 | } | ||
|
|
33 | } |
|
45 | } |
|
|
34 | body div div { width: auto; } |
|
||
|
|
35 |
|
46 | ||
|
|
36 | /* Make the headers look nice */ |
|
47 | /* Make the headers look nice */ |
|
|
37 | h1 { margin: 0; } |
|
48 | h1 { |
|
|
|
49 | margin: 0; | ||
|
|
|
50 | } | ||
|
|
38 |
|
51 | ||
|
|
39 | h2 { |
|
52 | h2 { |
|
|
40 | text-align: left; |
|
53 | text-align: left; |
| @@ -43,7 +56,8 h2 { | |||||
|
|
43 |
|
56 | ||
|
|
44 | /* Create special elements and classes */ |
|
57 | /* Create special elements and classes */ |
|
|
45 | h2, .blackbar { |
|
58 | h2, .blackbar { |
|
|
46 |
|
|
59 | /* Take that, old gecko! */ |
|
|
|
60 | height: 18px; | ||
|
|
47 | margin: 0; |
|
61 | margin: 0; |
|
|
48 | padding: 0 1ex; |
|
62 | padding: 0 1ex; |
|
|
49 |
|
63 | ||
| @@ -52,20 +66,31 h2, .blackbar { | |||||
|
|
52 |
|
66 | ||
|
|
53 | font-size: 16px; |
|
67 | font-size: 16px; |
|
|
54 | font-weight: 100; |
|
68 | font-weight: 100; |
|
|
55 |
font-family: |
|
69 | font-family: $banner-font; |
|
|
56 | letter-spacing: 0.5ex; |
|
70 | letter-spacing: 0.5ex; |
|
|
|
71 | |||
|
|
|
72 | span { | ||
|
|
|
73 | display: block; | ||
|
|
|
74 | width: 100%; | ||
|
|
|
75 | height: 100%; | ||
|
|
|
76 | } | ||
|
|
|
77 | } | ||
|
|
|
78 | |||
|
|
|
79 | .clearer { | ||
|
|
|
80 | clear: both; | ||
|
|
57 | } |
|
81 | } |
|
|
58 |
|
82 | ||
|
|
59 | h2 span, .blackbar span { |
|
83 | br.clearer { |
|
|
60 | display: block; |
|
84 | line-height: 0; |
|
|
61 | width: 100%; |
|
||
|
|
62 | height: 100%; |
|
||
|
|
63 | } |
|
85 | } |
|
|
64 |
|
86 | ||
|
|
65 | .clearer { clear: both; } |
|
87 | .leftcol { |
|
|
66 | br.clearer { line-height: 0; } |
|
88 | float: left; |
|
|
67 | .leftcol { float: left } |
|
89 | } |
|
|
68 | .rightcol { float: right } |
|
90 | |
|
|
|
91 | .rightcol { | ||
|
|
|
92 | float: right; | ||
|
|
|
93 | } | ||
|
|
69 |
|
94 | ||
|
|
70 | .nl { |
|
95 | .nl { |
|
|
71 | margin: 0; |
|
96 | margin: 0; |
| @@ -75,39 +100,48 br.clearer { line-height: 0; } | |||||
|
|
75 | text-align: center; |
|
100 | text-align: center; |
|
|
76 |
|
101 | ||
|
|
77 | list-style-type: none; |
|
102 | list-style-type: none; |
|
|
|
103 | |||
|
|
|
104 | li { | ||
|
|
|
105 | display: inline; | ||
|
|
|
106 | margin: 0; | ||
|
|
|
107 | padding: 0 0.5ex; | ||
|
|
|
108 | color: $text-normal; | ||
|
|
|
109 | } | ||
|
|
|
110 | |||
|
|
|
111 | a { | ||
|
|
|
112 | color: $text-normal; | ||
|
|
|
113 | text-decoration: none; | ||
|
|
|
114 | |||
|
|
|
115 | &:link, &:visited { | ||
|
|
|
116 | color: $text-normal; | ||
|
|
|
117 | } | ||
|
|
|
118 | |||
|
|
|
119 | &:hover { | ||
|
|
|
120 | color: $link-hover; | ||
|
|
|
121 | } | ||
|
|
|
122 | } | ||
|
|
78 | } |
|
123 | } |
|
|
79 |
|
124 | ||
|
|
80 | .nl li { |
|
||
|
|
81 | display: inline; |
|
||
|
|
82 | margin: 0px; |
|
||
|
|
83 | padding: 0em 0.5ex; |
|
||
|
|
84 | color: $text-normal; |
|
||
|
|
85 | } |
|
||
|
|
86 |
|
|||
|
|
87 | .nl a { color: $text-normal; text-decoration: none; } |
|
||
|
|
88 | .nl a:link, .nl a:visited { color: $text-normal; } |
|
||
|
|
89 | .nl a:hover { color: $link-hover; } |
|
||
|
|
90 |
|
|||
|
|
91 | .content { |
|
125 | .content { |
|
|
92 | margin-top: 1em; |
|
126 | margin-top: 1em; |
|
|
93 | margin-bottom: 1em; |
|
127 | margin-bottom: 1em; |
|
|
94 | background-color: $nl-background; |
|
128 | background-color: $nl-background; |
|
|
95 | color: $text-normal; |
|
129 | color: $text-normal; |
|
|
96 | } |
|
130 | |
|
|
97 |
|
131 | div { | |
|
|
98 | .content div { |
|
132 | /* Satisfy internal floated elements */ |
|
|
99 | /* Satisfy internal floated elements */ |
|
133 | overflow: hidden; |
|
|
100 | overflow: hidden; |
|
134 | height: 100%; |
|
|
101 | height: 100%; |
|
135 | |
|
|
102 |
|
136 | border: solid 5px $nl-background; | |
|
|
103 | border: solid 5px $nl-background; |
|
137 | background-color: $infobox; |
|
|
104 | background-color: $infobox; |
|
138 | padding: 5px; |
|
|
105 | padding: 5px; |
|
139 | } |
|
|
106 | } |
|
140 | |
|
|
107 |
|
141 | .clearer { | |
|
|
108 | .content .clearer { |
|
142 | border: none; |
|
|
109 | border: none; |
|
143 | padding: 0; |
|
|
110 | padding: 0px; |
|
144 | } |
|
|
111 | } |
|
145 | } |
|
|
112 |
|
146 | ||
|
|
113 | /* Correct a word wrapping bug in the ad bar */ |
|
147 | /* Correct a word wrapping bug in the ad bar */ |
| @@ -117,52 +151,51 br.clearer { line-height: 0; } | |||||
|
|
117 | text-align: center; |
|
151 | text-align: center; |
|
|
118 | font-size: 1px; |
|
152 | font-size: 1px; |
|
|
119 | letter-spacing: 500px; |
|
153 | letter-spacing: 500px; |
|
|
120 | } |
|
154 | |
|
|
121 |
|
155 | #megagear-ad, #kickstarter-ad, #cologuys-ad { | |
|
|
122 | #adbar #megagear-ad { |
|
156 | position: absolute; |
|
|
123 | position: absolute; |
|
157 | top: 14px; |
|
|
124 | top: 14px; |
|
158 | } |
|
|
125 | left: 0px; |
|
159 | |
|
|
126 | } |
|
160 | #megagear-ad { |
|
|
127 |
|
161 | left: 0; | |
|
|
128 | #adbar #kickstarter-ad { |
|
162 | } |
|
|
129 | position: absolute; |
|
163 | |
|
|
130 | top: 14px; |
|
164 | #kickstarter-ad { |
|
|
131 | left: 115px; |
|
165 | left: 115px; |
|
|
132 | } |
|
166 | } |
|
|
133 |
|
167 | ||
|
|
134 |
|
|
168 | #cologuys-ad { |
|
|
135 | position: absolute; |
|
169 | right: 0; |
|
|
136 | top: 14px; |
|
170 | } |
|
|
137 | right: 0px; |
|
171 | |
|
|
138 | } |
|
172 | .glowwrap { |
|
|
139 |
|
173 | position: absolute; | |
|
|
140 | #adbar .glowwrap { |
|
174 | display: block; |
|
|
141 | position: absolute; |
|
175 | top: 0; |
|
|
142 | display: block; |
|
176 | left: 50%; |
|
|
143 | top: 0px; |
|
177 | width: 468px; |
|
|
144 | left: 50%; |
|
178 | margin-left: -246px; |
|
|
145 | width: 468px; |
|
179 | |
|
|
146 | margin-left: -246px; |
|
180 | background-image: url(../parts/banner_bg.gif); |
|
|
147 |
|
181 | padding: 14px 12px; | |
|
|
148 | background-image: url(../parts/banner_bg.gif); |
|
182 | } |
|
|
149 | padding: 14px 12px; |
|
||
|
|
150 | } |
|
183 | } |
|
|
151 |
|
184 | ||
|
|
152 | /* Style the top banner */ |
|
185 | /* Style the top banner */ |
|
|
153 | #banner { |
|
186 | #banner { |
|
|
154 | background-color: $nl-background; |
|
187 | background-color: $nl-background; |
|
|
155 | text-align: center; |
|
188 | text-align: center; |
|
|
156 | } |
|
189 | |
|
|
157 |
|
190 | h2 { | |
|
|
158 | #banner h2 { |
|
191 | color: $text-normal; |
|
|
159 | color: $text-normal; |
|
192 | font-family: $banner-font; |
|
|
160 | font-family: $banner-font; |
|
193 | } |
|
|
161 | } |
|
194 | |
|
|
162 |
|
195 | .nl { | |
|
|
163 | #banner .nl { |
|
196 | padding-bottom: 5px; |
|
|
164 |
padding- |
|
197 | padding-top: 5px; |
|
|
165 | padding-top: 5px; |
|
198 | } |
|
|
166 | } |
|
199 | } |
|
|
167 |
|
200 | ||
|
|
168 | /* Style the footer */ |
|
201 | /* Style the footer */ |
| @@ -171,16 +204,21 br.clearer { line-height: 0; } | |||||
|
|
171 | color: $text-credits; |
|
204 | color: $text-credits; |
|
|
172 | padding-bottom: 0.5ex; |
|
205 | padding-bottom: 0.5ex; |
|
|
173 | margin-top: 1em; |
|
206 | margin-top: 1em; |
|
|
|
207 | |||
|
|
|
208 | p { | ||
|
|
|
209 | margin: 0; | ||
|
|
|
210 | text-align: center; | ||
|
|
|
211 | padding: 0.5ex; | ||
|
|
|
212 | font-family: $credits-font; | ||
|
|
|
213 | font-size: x-small; | ||
|
|
|
214 | } | ||
|
|
174 | } |
|
215 | } |
|
|
175 |
|
216 | ||
|
|
176 | #credits p { |
|
217 | /* Overload header texts */ |
|
|
177 | margin: 0px; |
|
218 | #banner .blackbar span { |
|
|
178 | text-align: center; |
|
219 | background: url(../parts/mt3-bar-comic.gif) no-repeat |
|
|
179 | padding: 0.5ex; |
|
||
|
|
180 | font-family: $credits-font; |
|
||
|
|
181 | font-size: x-small; |
|
||
|
|
182 | } |
|
220 | } |
|
|
183 |
|
221 | ||
|
|
184 | /* Overload header texts */ |
|
222 | #credits h2 span { |
|
|
185 |
|
|
223 | background: url(../parts/mt-blk_bar-credits.png) no-repeat |
|
|
186 | #credits h2 span { background: url(../parts/mt-blk_bar-credits.png) no-repeat } |
|
224 | } |
| @@ -3,24 +3,40 | |||||
|
|
3 |
|
3 | ||
|
|
4 | .search { |
|
4 | .search { |
|
|
5 | margin: 10px; |
|
5 | margin: 10px; |
|
|
6 | } |
|
6 | |
|
|
7 |
|
7 | #q { | |
|
|
8 | .search #q { |
|
8 | width: 45%; |
|
|
9 | width: 45%; |
|
9 | } |
|
|
10 | } |
|
10 | } |
|
|
11 |
|
11 | ||
|
|
12 | .results { |
|
12 | .results { |
|
|
13 | margin: 0; |
|
13 | margin: 0; |
|
|
14 | padding: 1ex 2em; |
|
14 | padding: 1ex 2em; |
|
|
15 | background-color: $foreground; |
|
15 | background-color: $foreground; |
|
|
|
16 | color: $text-accent; | ||
|
|
|
17 | a { | ||
|
|
|
18 | color: $text-accent; | ||
|
|
|
19 | |||
|
|
|
20 | &:visited { | ||
|
|
|
21 | color: $link-visited; | ||
|
|
|
22 | } | ||
|
|
|
23 | |||
|
|
|
24 | &:hover { | ||
|
|
|
25 | color: $link-hover; | ||
|
|
|
26 | } | ||
|
|
|
27 | } | ||
|
|
16 | } |
|
28 | } |
|
|
17 |
|
29 | ||
|
|
18 | .results, .results a { color: $text-accent; } |
|
30 | #syntax { |
|
|
19 | .results a:visited { color: $link-visited; } |
|
31 | code { color: $text-accent; } |
|
|
20 | .results a:hover { color: $link-hover; } |
|
32 | form { margin: 0; } |
|
|
21 |
|
33 | h2 { | |
|
|
22 | #syntax code { color: $text-accent; } |
|
34 | span { |
|
|
23 | #syntax form { margin: 0; } |
|
35 | // Overload header texts |
|
|
|
36 | background: url(../parts/mt-blk_bar-search_syntax.png) no-repeat; | ||
|
|
|
37 | } | ||
|
|
|
38 | } | ||
|
|
|
39 | } | ||
|
|
24 |
|
40 | ||
|
|
25 | dt { |
|
41 | dt { |
|
|
26 | font-size: larger; |
|
42 | font-size: larger; |
| @@ -29,6 +45,3 dt { | |||||
|
|
29 | ol { |
|
45 | ol { |
|
|
30 | list-style-type: none; |
|
46 | list-style-type: none; |
|
|
31 | } |
|
47 | } |
|
|
32 |
|
|||
|
|
33 | /* Overload header texts */ |
|
||
|
|
34 | #syntax h2 span { background:url(../parts/mt-blk_bar-search_syntax.png) no-repeat } |
|
||
| @@ -7,16 +7,16 | |||||
|
|
7 | height: 100%; |
|
7 | height: 100%; |
|
|
8 | border: none; |
|
8 | border: none; |
|
|
9 | margin: 0 1em; |
|
9 | margin: 0 1em; |
|
|
10 | } |
|
10 | |
|
|
11 |
|
11 | img { | |
|
|
12 | #inner img |
|
12 | display: block; |
|
|
13 | { |
|
13 | margin: { |
|
|
14 | display: block; |
|
14 | left: auto; |
|
|
15 | margin-left: auto; |
|
15 | right: auto; |
|
|
16 | margin-right: auto; |
|
16 | } |
|
|
17 | } |
|
17 | } |
|
|
18 |
|
18 | ||
|
|
19 | #inner h3 |
|
19 | h3 { |
|
|
20 | { |
|
20 | color: $text-accent; |
|
|
21 | color: $text-accent; |
|
21 | } |
|
|
22 | } |
|
22 | } |
Comments 0
You need to be logged in to leave comments.
Login now