| author | Eugen Sawin <sawine@me73.com> |
| Tue, 21 Feb 2012 01:20:51 +0100 | |
| changeset 109 | 70bbd11a38a7 |
| parent 82 | cb8897d7f508 |
| child 111 | 27fb50daa87d |
| 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 {
75 list-style-type: square;
76 }
78 dt {
79 /*font-weight: bold;*/
80 color: #FAFAFA;
81 }
82 dd {
83 padding-left: 25px;
84 }
86 /* images */
87 img {
88 background: #1B1B1B;
89 border: 4px solid #262626;
90 padding: 0px;
91 }
93 img.float-right {
94 margin: 5px 0px 5px 10px;
95 }
97 img.float-left {
98 margin: 5px 10px 5px 0px;
99 }
101 canvas {
102 border: 4px solid #262626;
103 }
105 code {
106 margin: 5px 0;
107 padding: 15px;
108 text-align: left;
109 display: block;
110 overflow: auto;
111 font: 500 1em/1.5em 'Lucida Console', 'Courier New', Monospace;
112 /* white-space: pre; */
113 background: #070707;
114 /*border: 1px solid #111; */
115 }
116 acronym {
117 cursor: help;
118 border-bottom: 1px dotted #5B5B5B;
119 }
120 blockquote {
121 margin: 15px 10px;
122 padding: 10px 10px 10px 35px;
123 background: #070707 url(quote.gif) no-repeat 10px 10px;
124 border: 1px solid #111;
125 font-weight: normal;
126 font-size: 17px;
127 line-height: 1.6em;
128 font-style: italic;
129 font-family: Georgia, 'Times New Roman', Times, serif;
130 color: #808080;
131 }
133 /* start - table */
134 table {
135 margin: 15px 0px;
136 border-collapse: collapse;
137 }
138 th {
139 color: #FAFAFA;
140 height: 38px;
141 padding-left: 0px;
142 padding-right: 12px;
143 text-align: left;
144 }
145 tr {
146 color: #5b5b5b;
147 height: 15px;
148 }
149 td {
150 padding-left: 0px;
151 padding-right: 12px;
152 }
153 /* end - table */
156 /* form elements */
157 form {
158 margin: 20px 10px;
159 padding: 15px 25px 25px 20px;
160 background: #070707;
161 /*border: 1px solid #111; */
162 }
163 form p {
164 /*border-bottom: 1px solid #101010;*/
165 padding: 12px 0 5px 0; margin: 0;
166 }
167 label {
168 font-weight: bold;
169 color: #FAFAFA;
170 }
171 input, select, textarea {
172 margin: 5px 0;
173 padding: 5px;
174 font: normal 1em Verdana, Tahoma, sans-serif;
175 color: #6A6969;
176 background: #0C0C0C;
177 /*border: 1px solid #1C1C1C;*/
178 }
179 option { padding-right: 0.5em; }
181 #name, #email, #message{
182 width: 480px;
183 }
184 input.button {
185 font: bold 12px Arial, Verdana, Sans-serif;
186 height: 30px;
187 padding: 2px 3px;
188 margin-top: 8px;
189 color: #48780E;
190 background: #000;
191 border-width: 1px;
192 border-style: solid;
193 border-color: #1B1B1B;
194 }
197 /* ------------------------------------------
198 LAYOUT
199 ------------------------------------------- */
200 #logo {
201 border-style: none;
202 position: relative;
203 margin: 0;
204 padding: 0;
205 color: #F8F8F8;
206 /* change the values of top and left to adjust the position of the logo*/
207 top: 20px;
208 left: 25px;
209 height: 100px;
210 width: 670px;
211 }
213 #gameoflife {
214 background: black;
215 }
217 #sim {
218 border-style: none;
219 position: relative;
220 margin: 0;
221 padding: 0;
222 color: #F8F8F8;
223 /* change the values of top and left to adjust the position of the logo*/
224 top: 20px;
225 left: 25px;
226 height: 50px;
227 width: 670px;
228 }
230 #wrap {
231 position: relative;
232 width: 1020px;
233 margin: 0 auto;
234 text-align: left;
235 }
236 #content-wrap {
237 clear: both;
238 width: 1020px;
239 float: left;
240 padding-top: 15px;
241 padding-bottom: 50px;
242 }
243 #header {
244 position: relative;
245 width: 1020px;
246 height: 170px;
247 margin: 0;
248 padding: 0;
249 }
250 #header h1#logo-text a {
251 position: absolute;
252 margin: 0; padding: 0;
253 font: bold 65px 'Trebuchet MS', Tahoma, Helvetica, Arial, Sans-serif;
254 letter-spacing: -1.5px;
255 color: #F8F8F8;
256 text-decoration: none;
257 text-transform: none;
259 /* change the values of top and left to adjust the position of the logo*/
260 top: 70px; left: 30px;
261 }
262 #header h1#logo-text a:hover {
263 background: none;
264 margin-top: 100px;
265 padding-top: 100px;
266 }
267 #header img {
268 position: relative;
269 top: 90px;
270 left: 22px;
271 border: 0px;
272 }
274 #header p#intro {
275 position: absolute;
276 margin: 0;
277 padding: 0;
278 font-family: 'Trebuchet MS', Tahoma, Helvetica, Arial, Sans-serif;
279 font-weight: bold;
280 font-size: 16px;
281 line-height: 1.5em;
282 font-style: normal;
283 text-transform: none;
284 /*color: #6D7D2D;*/
285 color: #5ad715;
286 width: 400px;
288 /* change the values of top and left to adjust the position */
289 top: 145px;
290 left: 22px;
291 }
293 /* Navigation */
294 #nav {
295 position: absolute;
296 margin: 0;
297 padding: 0;
298 height: 50px;
299 left: 0px;
300 top: 30px;
301 }
302 #nav ul {
303 float: left;
305 height: 50px;
306 margin: 0 0 0 10px;
307 padding: 0;
308 display: inline;
309 }
310 #nav ul li {
311 display: inline;
312 margin: 0;
313 padding: 0;
314 }
315 #nav ul li a {
316 float: left;
317 margin: 0;
318 padding: 0 12px;
319 font-weight: bold;
320 font-size: 1.25em;
321 text-decoration: none;
322 color: #c95723;
323 color: #999;
324 text-transform: uppercase;
325 }
326 #nav ul li a:hover,
327 #nav ul li a:active {
328 color: #eee;
329 background: none;
330 border: none;
331 }
332 #nav ul li#current a {
333 color: #D33972;
334 }
336 #subnav{
337 position: absolute;
338 margin: 17px 280px;
339 padding: 0;
340 height: 50px;
341 left: 10px;
342 top: 30px;
343 }
345 #subnav ul {
346 float: left;
348 height: 50px;
349 margin: 0 0 0 10px;
350 padding: 0;
351 display: inline;
352 }
353 #subnav ul li {
354 display: inline;
355 margin: 0;
356 padding: 0;
357 }
358 #subnav ul li a {
359 float: left;
360 margin: 0;
361 padding: 0 12px;
362 font: bold 15px/50px 'Trebuchet MS', Helvetica, Arial, Geneva, sans-serif;
363 text-decoration: none;
364 color: #5ad715;
365 text-transform: uppercase;
366 }
367 #subnav ul li a:hover,
368 #subnav ul li a:active {
369 color: #eee;
370 background: none;
371 border: none;
372 }
373 #subnav ul li#current a {
374 color: #D33972;
375 }
377 /* Main Column */
378 #main {
379 float: left;
380 width: 670px;
381 padding: 0;
382 margin: 0 0 0 2px;
383 display: inline;
384 }
385 #main h2 {
386 padding: 5px 22px;
387 margin: 15px 5px 0px 0px;
388 /*font: bold 2.4em 'Trebuchet MS', Helvetica, Arial, sans-serif; */
389 /*color: #45D5E6;
390 color: #00cccc;*/
391 color: #FFF;
392 }
393 #main h2 a {
394 /*color: #45D5E6;*/
395 color: #FFF;
396 text-decoration: none;
397 border: none;
398 }
399 #main ul li {
400 /*list-style-image: url(images/bullet.png);*/
401 list-style-type: square;
402 }
404 /* Sidebar */
405 #sidebar {
406 float: right;
407 width: 300px;
408 padding: 0;
409 margin: 0px 18px 0 0;
410 display: inline;
411 color: #5D5D5D;
412 /*border: 4px solid #262626;*/
413 }
415 #sidebar a {
416 display: inline-block;
417 border: 4px solid #262626;
418 margin-left: 18px;
419 margin-top: 5px;
420 background-image: url(images/me2.png);
421 height: 64px;
422 width: 64px;
423 color: #5D5D5D;
424 }
426 #sidebar a:hover {
427 background-image: url(images/me.png);
428 color: #eee;
429 }
431 #sidebar p {
432 margin: 0px 18px 0 0;
433 padding-top: 0px;
434 padding-left: 74px;
435 width: 300px;
436 }
438 #random_quote {
439 position: relative;
440 left: -74px;
441 margin-top: 5px;
442 color: #c95723;
443 font-style: italic;
444 }
446 #sidebar h2 {
447 font-size: 2.3em;
448 color: black;
449 }
451 #sidebar h3 {
452 /*padding: 5px 12px;
453 margin: 15px 5px 10px 0;
454 font: bold 2.4em 'Trebuchet MS', Tahoma, Helvetica, Arial, sans-serif;
455 color: #45D5E6;*/
456 /*border-bottom: 1px solid #121212; */
457 /*background-image: url(pattern.gif); */
458 }
459 #sidebar ul.sidemenu {
460 text-align: left;
461 margin: 20px 5px 20px 0px;
462 padding: 0;
463 /*border-top: 1px solid #111; */
464 }
465 #sidebar ul.sidemenu li {
466 list-style: none;
467 padding: 8px 10px;
468 margin: 0;
469 /*border-bottom: 1px solid #111;*/
470 }
471 * html body #sidebar ul.sidemenu li {
472 height: 1%;
473 }
474 #sidebar ul.sidemenu li a {
475 text-decoration: none;
476 border: none;
477 color: #666666;
478 font-weight: bold;
479 /*font-family: 'Trebuchet MS', Tahoma, Helvetica, Arial, Sans-serif;*/
480 font-size: 9pt;
481 }
482 #sidebar ul.sidemenu li a span {
483 color: #444;
484 /*font-family: Georgia, 'Times New Roman', Times, serif;*/
485 font-style: italic;
486 font-weight: normal;
487 font-size: 8pt;
488 }
489 #sidebar ul.sidemenu li a:hover,
490 #sidebar ul.sidemenu li a:hover span {
491 color: #fff;
492 }
493 #sidebar ul.sidemenu ul { margin: 0 0 0 0px; padding: 0; }
494 #sidebar ul.sidemenu ul li { border: none; }
496 /* header quick search */
497 #sidebar form#quick-search {
498 padding: 0;
499 margin: 20px 0 35px 0;
500 border: none;
501 width: 290px; height: 33px;
502 /*background: url(header-search.gif) no-repeat; */
503 }
504 #sidebar form#quick-search p {
505 margin: 0;
506 padding: 0;
507 }
508 #sidebar form#quick-search input {
509 float: left;
510 border: none;
511 background: transparent;
512 color: #4E4E4E;
513 margin: 0;
514 }
515 #sidebar form#quick-search .tbox {
516 margin: 5px 0 0 0px;
517 width: 240px;
518 display: inline;
519 }
520 #search form#quick-search .btn{
521 width: 24px; height: 24px;
522 }
523 #sidebar form#quick-search label {
524 display: none;
525 }
527 /* footer */
528 #footer {
529 clear: both;
530 /*padding: 1em 0 2.5em 0;*/
531 background: #222222;
532 color: #4E4E4E;
533 width: 100%;
534 float: left;
535 }
536 #footer a {
537 color: #4E4E4E;
538 /*color: #0E909C;*/
539 border: none;
540 }
541 #footer a:hover {
542 color: #fafafa;
543 }
544 #footer .rssfeed {
545 background: url(images/rss.gif) no-repeat left 1px;
546 padding-left: 17px;
547 }
548 #footer-left {
549 float: left;
550 width: 70%;
551 }
552 #footer-right {
553 float: right;
554 width: 25%;
555 }
557 .download a
558 {
559 color: #5ad715;
560 }
562 /* postmeta */
563 .postmeta {
564 padding: 7px 5px;
565 margin: 5px 5px 5px 5px;
566 font-size: 1em;
567 color: #545454;
568 /*border: 1px solid #111; */
569 background: #222222;
570 }
571 .postmeta .date{ margin: 0 10px 0 5px; }
572 .postmeta a.comments { margin: 0 10px 0 5px; }
573 .postmeta a.readmore { margin: 0 10px 0 5px; }
575 .post-info { font-size: .95em; padding-top: 3px; margin-left: 5px; color: #444; }
576 .post-info a, .post-info a:visited { color: #AE275A; }
578 /* alignment classes */
579 .float-left { float: left; }
580 .float-right { float: right; }
581 .align-left { text-align: left; }
582 .align-right { text-align: right; }
584 /* display and additional classes */
585 .no-border {
586 border: none;
587 }
589 .clearer {
590 clear: both;
591 }
593 .clear {
594 display:inline-block;
595 }
597 .clear:after {
598 display:block;
599 visibility:hidden;
600 clear:both;
601 height:0;
602 content: ".";
603 }