|
1 /******************************************** |
|
2 AUTHOR: Erwin Aligam |
|
3 WEBSITE: http://www.styleshout.com/ |
|
4 TEMPLATE NAME: PixelGreen |
|
5 TEMPLATE CODE: S-0010 |
|
6 VERSION: 1.2 |
|
7 LAST MODIFIED: June-05-2007 |
|
8 *******************************************/ |
|
9 |
|
10 /******************************************** |
|
11 HTML ELEMENTS |
|
12 ********************************************/ |
|
13 |
|
14 /* top elements */ |
|
15 * { padding: 0; margin: 0; } |
|
16 |
|
17 body { |
|
18 margin: 0; padding: 0; |
|
19 font: normal 73%/1.5em 'Trebuchet MS', Tahoma, sans-serif; |
|
20 color: #555; |
|
21 background: #FFF url(/site-content/images/bg.jpg) repeat-x; |
|
22 text-align: center; |
|
23 } |
|
24 |
|
25 /* links */ |
|
26 a { background: inherit; color: #72A545; text-decoration: none; } |
|
27 a:hover { background: inherit; color: #006699; text-decoration: underline; } |
|
28 |
|
29 /* headers */ |
|
30 h1, h2, h3 { font: bold 1em 'Trebuchet MS', Tahoma, Sans-serif; } |
|
31 h1 { font-size: 1.4em; color: #65944A; } |
|
32 h2 { font-size: 1.2em; text-transform: uppercase; } |
|
33 h3 { font-size: 1.2em; } |
|
34 |
|
35 p, h1, h2, h3 { |
|
36 margin: 10px 15px; |
|
37 } |
|
38 .list{ |
|
39 |
|
40 } |
|
41 ul, ol { |
|
42 margin: 10px 30px; |
|
43 padding: 0 15px; |
|
44 } |
|
45 |
|
46 /* images */ |
|
47 img { |
|
48 border: 1px solid #DADADA; |
|
49 padding: 5px; |
|
50 background: #FAFAFA; |
|
51 } |
|
52 img.float-right { |
|
53 margin: 5px 0px 5px 15px; |
|
54 } |
|
55 img.float-left { |
|
56 margin: 5px 15px 5px 0px; |
|
57 } |
|
58 |
|
59 code { |
|
60 margin: 5px 0; |
|
61 padding: 10px; |
|
62 text-align: left; |
|
63 display: block; |
|
64 overflow: auto; |
|
65 font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace; |
|
66 /* white-space: pre; */ |
|
67 background: #FAFAFA; |
|
68 border: 1px solid #f2f2f2; |
|
69 border-left: 3px solid #72A545; |
|
70 } |
|
71 acronym { |
|
72 cursor: help; |
|
73 border-bottom: 1px solid #777; |
|
74 } |
|
75 blockquote { |
|
76 margin: 15px; padding: 0 0 0 20px; |
|
77 background-color: #FAFAFA; |
|
78 background-position: 8px 10px; |
|
79 border: 1px solid #f2f2f2; |
|
80 border-left: 3px solid #72A545; |
|
81 font: bold 1.2em/1.5em "Trebuchet MS", Tahoma, sans-serif; |
|
82 color: #666666; |
|
83 } |
|
84 |
|
85 /* start - table */ |
|
86 table { |
|
87 border-collapse: collapse; |
|
88 margin: 10px 15px; |
|
89 } |
|
90 th strong { |
|
91 color: #fff; |
|
92 } |
|
93 th { |
|
94 background: #74A846; |
|
95 height: 29px; |
|
96 padding-left: 11px; |
|
97 padding-right: 11px; |
|
98 color: #fff; |
|
99 text-align: left; |
|
100 border-left: 1px solid #B6D59A; |
|
101 border-bottom: solid 2px #FFF; |
|
102 } |
|
103 tr { |
|
104 height: 30px; |
|
105 } |
|
106 td { |
|
107 padding-left: 11px; |
|
108 padding-right: 11px; |
|
109 /* border-left: 1px solid #FFE1C3; */ |
|
110 border-left: 1px solid #FFF; |
|
111 border-bottom: solid 1px #ffffff; |
|
112 } |
|
113 td.first,th.first { |
|
114 border-left: 0px; |
|
115 } |
|
116 tr.row-a { |
|
117 background: #F8F8F8; |
|
118 } |
|
119 tr.row-b { |
|
120 background: #EFEFEF; |
|
121 } |
|
122 /* end - table */ |
|
123 |
|
124 /* form elements */ |
|
125 form { |
|
126 margin:10px 15px; padding: 0; |
|
127 border: 1px solid #f2f2f2; |
|
128 background-color: #FAFAFA; |
|
129 } |
|
130 label { |
|
131 float: left; |
|
132 width: 40%; |
|
133 font-weight:bold; |
|
134 margin:5px 0; |
|
135 margin-right: 1em; |
|
136 text-align: right; |
|
137 } |
|
138 input { |
|
139 padding: 3px; |
|
140 margin-left: 3%; |
|
141 width: 40%; |
|
142 border:1px solid #eee; |
|
143 font: normal 1em "Trebuchet MS", Tahoma, sans-serif; |
|
144 color:#777; |
|
145 } |
|
146 select { |
|
147 margin-left: 3%; |
|
148 width: auto; |
|
149 } |
|
150 textarea { |
|
151 width:40%; |
|
152 margin-left: 3%; |
|
153 padding:3px; |
|
154 font: normal 1em "Trebuchet MS", Tahoma, sans-serif; |
|
155 border:1px solid #eee; |
|
156 height:100px; |
|
157 display:inline; |
|
158 color:#777; |
|
159 } |
|
160 input.button { |
|
161 width: auto; |
|
162 float: none; |
|
163 font: bold 1em Arial, Sans-serif; |
|
164 background: #FFF url(/site-content/images/gradientbg.jpg) repeat-x; |
|
165 padding: 2px 3px; |
|
166 margin-left: 35%; |
|
167 color: #333; |
|
168 border: 1px solid #DADADA; |
|
169 } |
|
170 ul.errorlist { |
|
171 width: 60%; |
|
172 color: #ff0000; |
|
173 margin:5px 0; |
|
174 margin-right: 1em; |
|
175 text-align: right; |
|
176 } |
|
177 |
|
178 /* search form */ |
|
179 .searchform { |
|
180 background-color: transparent; |
|
181 border: none; margin: 0; padding: 0; |
|
182 } |
|
183 .searchform p { margin: 10px; padding: 0; } |
|
184 .searchform input.textbox { |
|
185 width: 130px; |
|
186 color: #333; |
|
187 height: 20px; |
|
188 padding: 2px; |
|
189 vertical-align: top; |
|
190 } |
|
191 .searchform input.button { |
|
192 font: bold 12px Arial, Sans-serif; |
|
193 color: #333; |
|
194 width: 60px; |
|
195 height: 26px; |
|
196 border: 1px solid #DADADA; |
|
197 padding: 3px 5px; |
|
198 vertical-align: top; |
|
199 } |
|
200 |
|
201 /*********************** |
|
202 LAYOUT |
|
203 ************************/ |
|
204 |
|
205 #header-content, #content, #footer-content { |
|
206 width: 90%; |
|
207 } |
|
208 |
|
209 /* header */ |
|
210 #header { |
|
211 height: 100px; |
|
212 text-align: center; |
|
213 } |
|
214 #header-content { |
|
215 margin: 0 auto; padding: 0; |
|
216 position: relative; |
|
217 } |
|
218 #header-content h1#logo { |
|
219 position: absolute; |
|
220 font: bold 45px 'Trebuchet MS', Sans-serif; |
|
221 letter-spacing: -2px; |
|
222 color: #FFF; |
|
223 margin: 0; padding: 0; |
|
224 |
|
225 /* change the values of left and top to adjust the position of the logo */ |
|
226 top: 0; left: 0px; |
|
227 } |
|
228 #header-content h1#logo a { |
|
229 text-decoration: none; |
|
230 color: #FFF; |
|
231 } |
|
232 #header-content #slogan { |
|
233 position: absolute; |
|
234 font: bold 12px 'Trebuchet Ms', Sans-serif; |
|
235 text-transform: none; |
|
236 color: #FFF; |
|
237 margin: 0; padding: 0; |
|
238 |
|
239 /* change the values of left and top to adjust the position of the slogan */ |
|
240 top: 55px; left: 40px; |
|
241 } |
|
242 |
|
243 /* header menu */ |
|
244 #header-content ul { |
|
245 position: absolute; |
|
246 right: -5px; top: 15px; |
|
247 font: bolder 1.3em 'Trebuchet MS', sans-serif; |
|
248 color: #FFF; |
|
249 list-style: none; |
|
250 margin: 0; padding: 0; |
|
251 } |
|
252 #header-content li { |
|
253 display: inline; |
|
254 } |
|
255 #header-content li a { |
|
256 float: left; |
|
257 display: block; |
|
258 padding: 3px 12px; |
|
259 color: #FFF; |
|
260 background-color: #333; |
|
261 text-decoration: none; |
|
262 border-right: 1px solid #272727; |
|
263 } |
|
264 #header-content li a:hover { |
|
265 background: #65944A; |
|
266 color: #FFF; |
|
267 } |
|
268 #header-content li a#current { |
|
269 background: #65944A; |
|
270 color: #FFF; |
|
271 } |
|
272 |
|
273 /* header photo */ |
|
274 .headerphoto { |
|
275 margin: 0 auto; |
|
276 width: 90%; |
|
277 height: 200px; |
|
278 padding: 15px 10px 10px 10px; |
|
279 background: #FFF url(/site-content/images/headerphoto.jpg) no-repeat center; |
|
280 } |
|
281 |
|
282 /* content */ |
|
283 #content-wrap { |
|
284 clear: both; |
|
285 float: left; |
|
286 width: 100%; |
|
287 } |
|
288 #content { |
|
289 text-align: left; |
|
290 padding: 0; |
|
291 margin: 0 auto; |
|
292 } |
|
293 |
|
294 /* sidebar */ |
|
295 #sidebar { |
|
296 float: right; |
|
297 width: 30%; |
|
298 margin: 0 0 10px 0; padding: 0; |
|
299 } |
|
300 #sidebar h1 { |
|
301 padding: 10px 0px 5px 10px; |
|
302 margin: 0; |
|
303 font: bold 1.3em 'Trebuchet MS', Tahoma, Sans-serif; |
|
304 } |
|
305 .sidebox { |
|
306 background: #F5F5F5; |
|
307 border: 1px solid #EFEDED; |
|
308 margin-bottom: 10px; |
|
309 } |
|
310 |
|
311 /* sidebar menu */ |
|
312 #sidebar ul.sidemenu { |
|
313 list-style:none; |
|
314 margin: 10px 0 15px 0; |
|
315 padding: 0; |
|
316 background: #F2F2F2; |
|
317 } |
|
318 #sidebar ul.sidemenu li { |
|
319 padding: 0px 10px; |
|
320 } |
|
321 #sidebar ul.sidemenu a { |
|
322 display:block; |
|
323 font-weight:normal; |
|
324 color: #333; |
|
325 height: 1.5em; |
|
326 padding:.3em 0 .3em 15px; |
|
327 line-height: 1.5em; |
|
328 border-bottom: 1px dashed #D4D4D4; |
|
329 text-decoration:none; |
|
330 } |
|
331 #sidebar ul.sidemenu a.top{ |
|
332 border-top: 1px dashed #D4D4D4; |
|
333 } |
|
334 #sidebar ul.sidemenu a:hover { |
|
335 padding: .3em 0 .3em 10px; |
|
336 border-left: 5px solid #65944A; |
|
337 color: #65944A; |
|
338 } |
|
339 |
|
340 /* main */ |
|
341 #main { |
|
342 float: left; |
|
343 width: 68%; |
|
344 margin: 0 0 10px 0; padding: 0; |
|
345 } |
|
346 #main h1 { |
|
347 padding: 10px 0px 0px 5px; |
|
348 margin: 0 0 0 10px; |
|
349 border-bottom: 1px solid #f2f2f2; |
|
350 font: normal 1.5em 'Trebuchet MS', Tahoma, Sans-serif; |
|
351 } |
|
352 |
|
353 .post { |
|
354 margin: 0; padding: 0; |
|
355 background: #FFF url(/site-content/images/gradientbg.jpg) repeat-x; |
|
356 border: 1px solid #EFEDED; |
|
357 } |
|
358 .post .post-footer { |
|
359 background-color: #FAFAFA; |
|
360 border: 1px solid #f2f2f2; |
|
361 padding: 5px; margin-top: 20px; |
|
362 font-size: 95%; |
|
363 } |
|
364 .post .post-footer .date { |
|
365 background: url(/site-content/images/'clock.gif') no-repeat 0 center; |
|
366 padding-left: 20px; margin: 0 10px 0 5px; |
|
367 } |
|
368 .post .post-footer .comments { |
|
369 background: url(/site-content/images/'comment.gif') no-repeat 0 center; |
|
370 padding-left: 20px; margin: 0 10px 0 5px; |
|
371 } |
|
372 .post .post-footer .readmore { |
|
373 background: url(/site-content/images/'page.gif') no-repeat 0 center; |
|
374 padding-left: 20px; margin: 0 10px 0 5px; |
|
375 } |
|
376 |
|
377 /* footer */ |
|
378 #footer { |
|
379 clear: both; |
|
380 margin: 0; padding: 0; |
|
381 font: normal .95em/1.6em 'Trebuchet MS', Tahoma, Arial, sans-serif; |
|
382 text-align: left; |
|
383 } |
|
384 |
|
385 #footer h1, #footer p { margin-left: 0; } |
|
386 |
|
387 #footer-content { |
|
388 border-top: 1px solid #EAEAEA; |
|
389 margin: 0 auto; |
|
390 padding-left: 15px; |
|
391 } |
|
392 #footer-content a { |
|
393 text-decoration: none; |
|
394 color: #777; |
|
395 } |
|
396 #footer-content a:hover { |
|
397 text-decoration: underline; |
|
398 color: #333; |
|
399 } |
|
400 #footer-content ul { |
|
401 list-style: none; |
|
402 margin: 0; padding: 0; |
|
403 } |
|
404 #footer-content .col { |
|
405 width: 32%; |
|
406 padding: 0 5px 30px 0; |
|
407 } |
|
408 #footer-content .col2 { |
|
409 width: 33%; |
|
410 padding: 0 0 30px 0; |
|
411 } |
|
412 |
|
413 /* alignment classes */ |
|
414 .float-left { float: left; } |
|
415 .float-right { float: right; } |
|
416 .align-left { text-align: left; } |
|
417 .align-right { text-align: right; } |
|
418 |
|
419 /* additional classes */ |
|
420 .clear { clear: both; } |
|
421 .gray { color: #BFBFBF; } |
|
422 |
|
423 |
|
424 /* My Form Elements */ |
|
425 div.review-center-box { |
|
426 margin:10px 15px; |
|
427 padding: 10px; |
|
428 height: auto; |
|
429 border: 1px solid #f2f2f2; |
|
430 background-color: #FAFAFA; |
|
431 } |
|
432 div.review-left { |
|
433 float: left; |
|
434 width: 20%; |
|
435 font-weight:bold; |
|
436 margin: 0 5% 1em 20%; |
|
437 text-align: right; |
|
438 } |
|
439 div.review-right { |
|
440 width: 80%; |
|
441 margin: 1px 0 0 10%; |
|
442 font: normal 1em "Trebuchet MS", Tahoma, sans-serif; |
|
443 color:#777; |
|
444 } |