| author | Eugen Sawin <sawine@me73.com> |
| Fri, 06 Jan 2012 17:20:14 +0100 | |
| changeset 87 | c19fea1cd73f |
| parent 80 | ba69edadfc4c |
| child 109 | 70bbd11a38a7 |
| 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-right: 5px;
419 background-image: url(images/me2.png);
420 height: 64px;
421 width: 64px;
422 }
424 #sidebar a:hover {
425 background-image: url(images/me.png);
426 }
428 #random_quote {
429 color: #c95723;
430 font-style: italic;
431 }
433 #sidebar h2 {
434 font-size: 2.3em;
435 color: black;
436 }
438 #sidebar h3 {
439 /*padding: 5px 12px;
440 margin: 15px 5px 10px 0;
441 font: bold 2.4em 'Trebuchet MS', Tahoma, Helvetica, Arial, sans-serif;
442 color: #45D5E6;*/
443 /*border-bottom: 1px solid #121212; */
444 /*background-image: url(pattern.gif); */
445 }
446 #sidebar ul.sidemenu {
447 text-align: left;
448 margin: 20px 5px 20px 0px;
449 padding: 0;
450 /*border-top: 1px solid #111; */
451 }
452 #sidebar ul.sidemenu li {
453 list-style: none;
454 padding: 8px 10px;
455 margin: 0;
456 /*border-bottom: 1px solid #111;*/
457 }
458 * html body #sidebar ul.sidemenu li {
459 height: 1%;
460 }
461 #sidebar ul.sidemenu li a {
462 text-decoration: none;
463 border: none;
464 color: #666666;
465 font-weight: bold;
466 /*font-family: 'Trebuchet MS', Tahoma, Helvetica, Arial, Sans-serif;*/
467 font-size: 9pt;
468 }
469 #sidebar ul.sidemenu li a span {
470 color: #444;
471 /*font-family: Georgia, 'Times New Roman', Times, serif;*/
472 font-style: italic;
473 font-weight: normal;
474 font-size: 8pt;
475 }
476 #sidebar ul.sidemenu li a:hover,
477 #sidebar ul.sidemenu li a:hover span {
478 color: #fff;
479 }
480 #sidebar ul.sidemenu ul { margin: 0 0 0 0px; padding: 0; }
481 #sidebar ul.sidemenu ul li { border: none; }
483 /* header quick search */
484 #sidebar form#quick-search {
485 padding: 0;
486 margin: 20px 0 35px 0;
487 border: none;
488 width: 290px; height: 33px;
489 /*background: url(header-search.gif) no-repeat; */
490 }
491 #sidebar form#quick-search p {
492 margin: 0;
493 padding: 0;
494 }
495 #sidebar form#quick-search input {
496 float: left;
497 border: none;
498 background: transparent;
499 color: #4E4E4E;
500 margin: 0;
501 }
502 #sidebar form#quick-search .tbox {
503 margin: 5px 0 0 0px;
504 width: 240px;
505 display: inline;
506 }
507 #search form#quick-search .btn{
508 width: 24px; height: 24px;
509 }
510 #sidebar form#quick-search label {
511 display: none;
512 }
514 /* footer */
515 #footer {
516 clear: both;
517 /*padding: 1em 0 2.5em 0;*/
518 background: #222222;
519 color: #4E4E4E;
520 width: 100%;
521 float: left;
522 }
523 #footer a {
524 color: #4E4E4E;
525 /*color: #0E909C;*/
526 border: none;
527 }
528 #footer a:hover {
529 color: #fafafa;
530 }
531 #footer .rssfeed {
532 background: url(images/rss.gif) no-repeat left 1px;
533 padding-left: 17px;
534 }
535 #footer-left {
536 float: left;
537 width: 70%;
538 }
539 #footer-right {
540 float: right;
541 width: 25%;
542 }
544 .download a
545 {
546 color: #5ad715;
547 }
549 /* postmeta */
550 .postmeta {
551 padding: 7px 5px;
552 margin: 5px 5px 5px 5px;
553 font-size: 1em;
554 color: #545454;
555 /*border: 1px solid #111; */
556 background: #222222;
557 }
558 .postmeta .date{ margin: 0 10px 0 5px; }
559 .postmeta a.comments { margin: 0 10px 0 5px; }
560 .postmeta a.readmore { margin: 0 10px 0 5px; }
562 .post-info { font-size: .95em; padding-top: 3px; margin-left: 5px; color: #444; }
563 .post-info a, .post-info a:visited { color: #AE275A; }
565 /* alignment classes */
566 .float-left { float: left; }
567 .float-right { float: right; }
568 .align-left { text-align: left; }
569 .align-right { text-align: right; }
571 /* display and additional classes */
572 .no-border {
573 border: none;
574 }
576 .clearer {
577 clear: both;
578 }
580 .clear {
581 display:inline-block;
582 }
584 .clear:after {
585 display:block;
586 visibility:hidden;
587 clear:both;
588 height:0;
589 content: ".";
590 }