| author | Eugen Sawin <sawine@me73.com> |
| Sat, 17 Dec 2011 19:20:30 +0100 | |
| changeset 71 | bf0295436e1c |
| parent 44 | 8ccd8d358d1f |
| child 72 | c78f182f7412 |
| permissions | -rw-r--r-- |
1 /*
2 ME73.com stylesheet
3 Author: Eugen Sawin <sawine@me73.com>
4 */
6 * { margin: 0; padding: 0; outline: 0 }
8 html { background: #222222; }
10 body {
11 /*font: 11px/165% 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;*/
12 font: 12px/1.4 Helvetica Neue, Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
13 color: #8D8D8D;
14 margin: 0;
15 padding: 0;
16 background: #222222;
17 text-align: center;
18 }
20 /* Links */
21 a, a:visited {
22 text-decoration: none;
23 color: #DEDEDE;
24 }
25 a:hover {
26 color: #fff;
27 border-bottom: 1px dotted #438800;
28 }
30 /* headers */
31 h1, h2, h3, h4 {
32 /*font-family: 'Trebuchet MS', Helvetica, Tahoma, Arial, Sans-serif;*/
33 /*color: #0AEAEA;*/
34 color: #FFF;
35 }
36 h1 {
37 font-size: 3.1em;
38 letter-spacing: -2px;
39 padding: 15px 10px 5px 10px;
40 }
41 h2 {
42 font-size: 1.7em;
43 /*color: #895F30;*/
44 color: #FFF;
45 padding: 20px 10px 5px 10px;
46 }
47 h3 {
48 font-size: 1.6em;
49 font-weight: normal;
50 padding: 10px 10px 10px 5px;
51 }
53 h4 {
54 color: #AbAbAb;
55 font-size: 1.1em;
56 /*font-weight: bold;*/
57 padding: 10px 5px 0px 0px;
58 }
60 h5 {
61 font-size: 1.0em;
62 padding: 0px 0px 0px 0px;
63 }
65 p, dl {
66 padding: 5px 20px;
67 margin: 0;
68 }
70 ul, ol {
71 margin: 5px 20px;
72 padding: 0px 20px;
73 }
74 ul { list-style: none; }
76 dt {
77 /*font-weight: bold;*/
78 color: #FAFAFA;
79 }
80 dd {
81 padding-left: 25px;
82 }
84 /* images */
85 img {
86 background: #1B1B1B;
87 border: 4px solid #262626;
88 padding: 0px;
89 }
91 img.float-right {
92 margin: 5px 0px 5px 10px;
93 }
95 img.float-left {
96 margin: 5px 10px 5px 0px;
97 }
99 canvas {
100 border: 4px solid #262626;
101 }
103 #logo {
104 border-style: none;
105 position: absolute;
106 margin: 0;
107 padding: 0;
108 color: #F8F8F8;
109 /* change the values of top and left to adjust the position of the logo*/
110 top: 60px; left: 20px;
111 height: 100px;
112 width: 670px;
113 }
115 code {
116 margin: 5px 0;
117 padding: 15px;
118 text-align: left;
119 display: block;
120 overflow: auto;
121 font: 500 1em/1.5em 'Lucida Console', 'Courier New', Monospace;
122 /* white-space: pre; */
123 background: #070707;
124 /*border: 1px solid #111; */
125 }
126 acronym {
127 cursor: help;
128 border-bottom: 1px dotted #5B5B5B;
129 }
130 blockquote {
131 margin: 15px 10px;
132 padding: 10px 10px 10px 35px;
133 background: #070707 url(quote.gif) no-repeat 10px 10px;
134 border: 1px solid #111;
135 font-weight: normal;
136 font-size: 17px;
137 line-height: 1.6em;
138 font-style: italic;
139 font-family: Georgia, 'Times New Roman', Times, serif;
140 color: #808080;
141 }
143 /* start - table */
144 table {
145 margin: 15px 0px;
146 border-collapse: collapse;
147 }
148 th {
149 color: #FAFAFA;
150 height: 38px;
151 padding-left: 0px;
152 padding-right: 12px;
153 text-align: left;
154 }
155 tr {
156 color: #5b5b5b;
157 height: 15px;
158 }
159 td {
160 padding-left: 0px;
161 padding-right: 12px;
162 }
163 /* end - table */
166 /* form elements */
167 form {
168 margin: 20px 10px;
169 padding: 15px 25px 25px 20px;
170 background: #070707;
171 /*border: 1px solid #111; */
172 }
173 form p {
174 /*border-bottom: 1px solid #101010;*/
175 padding: 12px 0 5px 0; margin: 0;
176 }
177 label {
178 font-weight: bold;
179 color: #FAFAFA;
180 }
181 input, select, textarea {
182 margin: 5px 0;
183 padding: 5px;
184 font: normal 1em Verdana, Tahoma, sans-serif;
185 color: #6A6969;
186 background: #0C0C0C;
187 /*border: 1px solid #1C1C1C;*/
188 }
189 option { padding-right: 0.5em; }
191 #name, #email, #message{
192 width: 480px;
193 }
194 input.button {
195 font: bold 12px Arial, Verdana, Sans-serif;
196 height: 30px;
197 padding: 2px 3px;
198 margin-top: 8px;
199 color: #48780E;
200 background: #000;
201 border-width: 1px;
202 border-style: solid;
203 border-color: #1B1B1B;
204 }
207 /* ------------------------------------------
208 LAYOUT
209 ------------------------------------------- */
210 #wrap {
211 width: 1020px;
212 margin: 0 auto;
213 text-align: left;
214 }
215 #content-wrap {
216 clear: both;
217 width: 1020px;
218 float: left;
219 padding-top: 15px;
220 padding-bottom: 50px;
221 }
222 #header {
223 position: relative;
224 width: 1020px;
225 height: 170px;
226 margin: 0;
227 padding: 0;
228 }
229 #header h1#logo-text a {
230 position: absolute;
231 margin: 0; padding: 0;
232 font: bold 65px 'Trebuchet MS', Tahoma, Helvetica, Arial, Sans-serif;
233 letter-spacing: -1.5px;
234 color: #F8F8F8;
235 text-decoration: none;
236 text-transform: none;
238 /* change the values of top and left to adjust the position of the logo*/
239 top: 70px; left: 30px;
240 }
241 #header h1#logo-text a:hover {
242 background: none;
243 margin-top: 100px;
244 padding-top: 100px;
245 }
246 #header img {
247 position: relative;
248 top: 90px;
249 left: 22px;
250 border: 0px;
251 }
253 #header p#intro {
254 position: absolute;
255 margin: 0;
256 padding: 0;
257 font-family: 'Trebuchet MS', Tahoma, Helvetica, Arial, Sans-serif;
258 font-weight: bold;
259 font-size: 16px;
260 line-height: 1.5em;
261 font-style: normal;
262 text-transform: none;
263 /*color: #6D7D2D;*/
264 color: #5ad715;
265 width: 400px;
267 /* change the values of top and left to adjust the position */
268 top: 145px;
269 left: 22px;
270 }
272 /* Navigation */
273 #nav {
274 position: absolute;
275 margin: 0;
276 padding: 0;
277 height: 50px;
278 left: 0px;
279 top: 30px;
280 }
281 #nav ul {
282 float: left;
283 list-style: none;
284 height: 50px;
285 margin: 0 0 0 10px;
286 padding: 0;
287 display: inline;
288 }
289 #nav ul li {
290 display: inline;
291 margin: 0;
292 padding: 0;
293 }
294 #nav ul li a {
295 float: left;
296 margin: 0;
297 padding: 0 12px;
298 font-weight: bold;
299 font-size: 1.25em;
300 text-decoration: none;
301 color: #c95723;
302 color: #999;
303 text-transform: uppercase;
304 }
305 #nav ul li a:hover,
306 #nav ul li a:active {
307 color: #eee;
308 background: none;
309 border: none;
310 }
311 #nav ul li#current a {
312 color: #D33972;
313 }
315 #subnav{
316 position: absolute;
317 margin: 17px 280px;
318 padding: 0;
319 height: 50px;
320 left: 10px;
321 top: 30px;
322 }
324 #subnav ul {
325 float: left;
326 list-style: none;
327 height: 50px;
328 margin: 0 0 0 10px;
329 padding: 0;
330 display: inline;
331 }
332 #subnav ul li {
333 display: inline;
334 margin: 0;
335 padding: 0;
336 }
337 #subnav ul li a {
338 float: left;
339 margin: 0;
340 padding: 0 12px;
341 font: bold 15px/50px 'Trebuchet MS', Helvetica, Arial, Geneva, sans-serif;
342 text-decoration: none;
343 color: #5ad715;
344 text-transform: uppercase;
345 }
346 #subnav ul li a:hover,
347 #subnav ul li a:active {
348 color: #eee;
349 background: none;
350 border: none;
351 }
352 #subnav ul li#current a {
353 color: #D33972;
354 }
356 /* Main Column */
357 #main {
358 float: left;
359 width: 670px;
360 padding: 0;
361 margin: 0 0 0 2px;
362 display: inline;
363 }
364 #main h2 {
365 padding: 5px 22px;
366 margin: 15px 5px 0px 0px;
367 /*font: bold 2.4em 'Trebuchet MS', Helvetica, Arial, sans-serif; */
368 /*color: #45D5E6;
369 color: #00cccc;*/
370 color: #FFF;
371 }
372 #main h2 a {
373 /*color: #45D5E6;*/
374 color: #FFF;
375 text-decoration: none;
376 border: none;
377 }
378 #main ul li {
379 /*list-style-image: url(images/bullet.png);*/
380 list-style: disc;
381 }
383 /* Sidebar */
384 #sidebar {
385 float: right;
386 width: 300px;
387 padding: 0;
388 margin: 0px 18px 0 0;
389 display: inline;
390 color: #5D5D5D;
391 /*border: 4px solid #262626;*/
392 }
394 #random_quote {
395 color: #c95723;
396 font-style: italic;
397 }
399 #sidebar h3 {
400 /*padding: 5px 12px;
401 margin: 15px 5px 10px 0;
402 font: bold 2.4em 'Trebuchet MS', Tahoma, Helvetica, Arial, sans-serif;
403 color: #45D5E6;*/
404 /*border-bottom: 1px solid #121212; */
405 /*background-image: url(pattern.gif); */
406 }
407 #sidebar ul.sidemenu {
408 text-align: left;
409 margin: 20px 5px 20px 0px;
410 padding: 0;
411 /*border-top: 1px solid #111; */
412 }
413 #sidebar ul.sidemenu li {
414 list-style: none;
415 padding: 8px 10px;
416 margin: 0;
417 /*border-bottom: 1px solid #111;*/
418 }
419 * html body #sidebar ul.sidemenu li {
420 height: 1%;
421 }
422 #sidebar ul.sidemenu li a {
423 text-decoration: none;
424 border: none;
425 color: #666666;
426 font-weight: bold;
427 /*font-family: 'Trebuchet MS', Tahoma, Helvetica, Arial, Sans-serif;*/
428 font-size: 9pt;
429 }
430 #sidebar ul.sidemenu li a span {
431 color: #444;
432 /*font-family: Georgia, 'Times New Roman', Times, serif;*/
433 font-style: italic;
434 font-weight: normal;
435 font-size: 8pt;
436 }
437 #sidebar ul.sidemenu li a:hover,
438 #sidebar ul.sidemenu li a:hover span {
439 color: #fff;
440 }
441 #sidebar ul.sidemenu ul { margin: 0 0 0 0px; padding: 0; }
442 #sidebar ul.sidemenu ul li { border: none; }
444 /* header quick search */
445 #sidebar form#quick-search {
446 padding: 0;
447 margin: 20px 0 35px 0;
448 border: none;
449 width: 290px; height: 33px;
450 /*background: url(header-search.gif) no-repeat; */
451 }
452 #sidebar form#quick-search p {
453 margin: 0;
454 padding: 0;
455 }
456 #sidebar form#quick-search input {
457 float: left;
458 border: none;
459 background: transparent;
460 color: #4E4E4E;
461 margin: 0;
462 }
463 #sidebar form#quick-search .tbox {
464 margin: 5px 0 0 0px;
465 width: 240px;
466 display: inline;
467 }
468 #search form#quick-search .btn{
469 width: 24px; height: 24px;
470 }
471 #sidebar form#quick-search label {
472 display: none;
473 }
475 /* footer */
476 #footer {
477 clear: both;
478 /*padding: 1em 0 2.5em 0;*/
479 background: #222222;
480 color: #4E4E4E;
481 width: 100%;
482 float: left;
483 }
484 #footer a {
485 color: #4E4E4E;
486 /*color: #0E909C;*/
487 border: none;
488 }
489 #footer a:hover {
490 color: #fafafa;
491 }
492 #footer .rssfeed {
493 background: url(images/rss.gif) no-repeat left 1px;
494 padding-left: 17px;
495 }
496 #footer-left {
497 float: left;
498 width: 70%;
499 }
500 #footer-right {
501 float: right;
502 width: 25%;
503 }
505 .download a
506 {
507 color: #5ad715;
508 }
510 /* postmeta */
511 .postmeta {
512 padding: 7px 5px;
513 margin: 5px 5px 5px 5px;
514 font-size: 1em;
515 color: #545454;
516 /*border: 1px solid #111; */
517 background: #222222;
518 }
519 .postmeta .date{ margin: 0 10px 0 5px; }
520 .postmeta a.comments { margin: 0 10px 0 5px; }
521 .postmeta a.readmore { margin: 0 10px 0 5px; }
523 .post-info { font-size: .95em; padding-top: 3px; margin-left: 5px; color: #444; }
524 .post-info a, .post-info a:visited { color: #AE275A; }
526 /* alignment classes */
527 .float-left { float: left; }
528 .float-right { float: right; }
529 .align-left { text-align: left; }
530 .align-right { text-align: right; }
532 /* display and additional classes */
533 .no-border {
534 border: none;
535 }
537 .clearer {
538 clear: both;
539 }
541 .clear {
542 display:inline-block;
543 }
545 .clear:after {
546 display:block;
547 visibility:hidden;
548 clear:both;
549 height:0;
550 content: ".";
551 }