| author | Eugen Sawin <sawine@me73.com> |
| Thu, 05 Jan 2012 17:03:06 +0100 | |
| changeset 80 | ba69edadfc4c |
| parent 78 | 1e4ba37124e3 |
| child 82 | cb8897d7f508 |
| 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 #sim {
214 border-style: none;
215 position: relative;
216 margin: 0;
217 padding: 0;
218 color: #F8F8F8;
219 /* change the values of top and left to adjust the position of the logo*/
220 top: 20px;
221 left: 25px;
222 height: 50px;
223 width: 670px;
224 }
226 #wrap {
227 position: relative;
228 width: 1020px;
229 margin: 0 auto;
230 text-align: left;
231 }
232 #content-wrap {
233 clear: both;
234 width: 1020px;
235 float: left;
236 padding-top: 15px;
237 padding-bottom: 50px;
238 }
239 #header {
240 position: relative;
241 width: 1020px;
242 height: 170px;
243 margin: 0;
244 padding: 0;
245 }
246 #header h1#logo-text a {
247 position: absolute;
248 margin: 0; padding: 0;
249 font: bold 65px 'Trebuchet MS', Tahoma, Helvetica, Arial, Sans-serif;
250 letter-spacing: -1.5px;
251 color: #F8F8F8;
252 text-decoration: none;
253 text-transform: none;
255 /* change the values of top and left to adjust the position of the logo*/
256 top: 70px; left: 30px;
257 }
258 #header h1#logo-text a:hover {
259 background: none;
260 margin-top: 100px;
261 padding-top: 100px;
262 }
263 #header img {
264 position: relative;
265 top: 90px;
266 left: 22px;
267 border: 0px;
268 }
270 #header p#intro {
271 position: absolute;
272 margin: 0;
273 padding: 0;
274 font-family: 'Trebuchet MS', Tahoma, Helvetica, Arial, Sans-serif;
275 font-weight: bold;
276 font-size: 16px;
277 line-height: 1.5em;
278 font-style: normal;
279 text-transform: none;
280 /*color: #6D7D2D;*/
281 color: #5ad715;
282 width: 400px;
284 /* change the values of top and left to adjust the position */
285 top: 145px;
286 left: 22px;
287 }
289 /* Navigation */
290 #nav {
291 position: absolute;
292 margin: 0;
293 padding: 0;
294 height: 50px;
295 left: 0px;
296 top: 30px;
297 }
298 #nav ul {
299 float: left;
301 height: 50px;
302 margin: 0 0 0 10px;
303 padding: 0;
304 display: inline;
305 }
306 #nav ul li {
307 display: inline;
308 margin: 0;
309 padding: 0;
310 }
311 #nav ul li a {
312 float: left;
313 margin: 0;
314 padding: 0 12px;
315 font-weight: bold;
316 font-size: 1.25em;
317 text-decoration: none;
318 color: #c95723;
319 color: #999;
320 text-transform: uppercase;
321 }
322 #nav ul li a:hover,
323 #nav ul li a:active {
324 color: #eee;
325 background: none;
326 border: none;
327 }
328 #nav ul li#current a {
329 color: #D33972;
330 }
332 #subnav{
333 position: absolute;
334 margin: 17px 280px;
335 padding: 0;
336 height: 50px;
337 left: 10px;
338 top: 30px;
339 }
341 #subnav ul {
342 float: left;
344 height: 50px;
345 margin: 0 0 0 10px;
346 padding: 0;
347 display: inline;
348 }
349 #subnav ul li {
350 display: inline;
351 margin: 0;
352 padding: 0;
353 }
354 #subnav ul li a {
355 float: left;
356 margin: 0;
357 padding: 0 12px;
358 font: bold 15px/50px 'Trebuchet MS', Helvetica, Arial, Geneva, sans-serif;
359 text-decoration: none;
360 color: #5ad715;
361 text-transform: uppercase;
362 }
363 #subnav ul li a:hover,
364 #subnav ul li a:active {
365 color: #eee;
366 background: none;
367 border: none;
368 }
369 #subnav ul li#current a {
370 color: #D33972;
371 }
373 /* Main Column */
374 #main {
375 float: left;
376 width: 670px;
377 padding: 0;
378 margin: 0 0 0 2px;
379 display: inline;
380 }
381 #main h2 {
382 padding: 5px 22px;
383 margin: 15px 5px 0px 0px;
384 /*font: bold 2.4em 'Trebuchet MS', Helvetica, Arial, sans-serif; */
385 /*color: #45D5E6;
386 color: #00cccc;*/
387 color: #FFF;
388 }
389 #main h2 a {
390 /*color: #45D5E6;*/
391 color: #FFF;
392 text-decoration: none;
393 border: none;
394 }
395 #main ul li {
396 /*list-style-image: url(images/bullet.png);*/
397 list-style-type: square;
398 }
400 /* Sidebar */
401 #sidebar {
402 float: right;
403 width: 300px;
404 padding: 0;
405 margin: 0px 18px 0 0;
406 display: inline;
407 color: #5D5D5D;
408 /*border: 4px solid #262626;*/
409 }
411 #sidebar a {
412 display: inline-block;
413 border: 4px solid #262626;
414 margin-right: 5px;
415 background-image: url(images/me2.png);
416 height: 64px;
417 width: 64px;
418 }
420 #sidebar a:hover {
421 background-image: url(images/me.png);
422 }
424 #random_quote {
425 color: #c95723;
426 font-style: italic;
427 }
429 #sidebar h2 {
430 font-size: 2.3em;
431 color: black;
432 }
434 #sidebar h3 {
435 /*padding: 5px 12px;
436 margin: 15px 5px 10px 0;
437 font: bold 2.4em 'Trebuchet MS', Tahoma, Helvetica, Arial, sans-serif;
438 color: #45D5E6;*/
439 /*border-bottom: 1px solid #121212; */
440 /*background-image: url(pattern.gif); */
441 }
442 #sidebar ul.sidemenu {
443 text-align: left;
444 margin: 20px 5px 20px 0px;
445 padding: 0;
446 /*border-top: 1px solid #111; */
447 }
448 #sidebar ul.sidemenu li {
449 list-style: none;
450 padding: 8px 10px;
451 margin: 0;
452 /*border-bottom: 1px solid #111;*/
453 }
454 * html body #sidebar ul.sidemenu li {
455 height: 1%;
456 }
457 #sidebar ul.sidemenu li a {
458 text-decoration: none;
459 border: none;
460 color: #666666;
461 font-weight: bold;
462 /*font-family: 'Trebuchet MS', Tahoma, Helvetica, Arial, Sans-serif;*/
463 font-size: 9pt;
464 }
465 #sidebar ul.sidemenu li a span {
466 color: #444;
467 /*font-family: Georgia, 'Times New Roman', Times, serif;*/
468 font-style: italic;
469 font-weight: normal;
470 font-size: 8pt;
471 }
472 #sidebar ul.sidemenu li a:hover,
473 #sidebar ul.sidemenu li a:hover span {
474 color: #fff;
475 }
476 #sidebar ul.sidemenu ul { margin: 0 0 0 0px; padding: 0; }
477 #sidebar ul.sidemenu ul li { border: none; }
479 /* header quick search */
480 #sidebar form#quick-search {
481 padding: 0;
482 margin: 20px 0 35px 0;
483 border: none;
484 width: 290px; height: 33px;
485 /*background: url(header-search.gif) no-repeat; */
486 }
487 #sidebar form#quick-search p {
488 margin: 0;
489 padding: 0;
490 }
491 #sidebar form#quick-search input {
492 float: left;
493 border: none;
494 background: transparent;
495 color: #4E4E4E;
496 margin: 0;
497 }
498 #sidebar form#quick-search .tbox {
499 margin: 5px 0 0 0px;
500 width: 240px;
501 display: inline;
502 }
503 #search form#quick-search .btn{
504 width: 24px; height: 24px;
505 }
506 #sidebar form#quick-search label {
507 display: none;
508 }
510 /* footer */
511 #footer {
512 clear: both;
513 /*padding: 1em 0 2.5em 0;*/
514 background: #222222;
515 color: #4E4E4E;
516 width: 100%;
517 float: left;
518 }
519 #footer a {
520 color: #4E4E4E;
521 /*color: #0E909C;*/
522 border: none;
523 }
524 #footer a:hover {
525 color: #fafafa;
526 }
527 #footer .rssfeed {
528 background: url(images/rss.gif) no-repeat left 1px;
529 padding-left: 17px;
530 }
531 #footer-left {
532 float: left;
533 width: 70%;
534 }
535 #footer-right {
536 float: right;
537 width: 25%;
538 }
540 .download a
541 {
542 color: #5ad715;
543 }
545 /* postmeta */
546 .postmeta {
547 padding: 7px 5px;
548 margin: 5px 5px 5px 5px;
549 font-size: 1em;
550 color: #545454;
551 /*border: 1px solid #111; */
552 background: #222222;
553 }
554 .postmeta .date{ margin: 0 10px 0 5px; }
555 .postmeta a.comments { margin: 0 10px 0 5px; }
556 .postmeta a.readmore { margin: 0 10px 0 5px; }
558 .post-info { font-size: .95em; padding-top: 3px; margin-left: 5px; color: #444; }
559 .post-info a, .post-info a:visited { color: #AE275A; }
561 /* alignment classes */
562 .float-left { float: left; }
563 .float-right { float: right; }
564 .align-left { text-align: left; }
565 .align-right { text-align: right; }
567 /* display and additional classes */
568 .no-border {
569 border: none;
570 }
572 .clearer {
573 clear: both;
574 }
576 .clear {
577 display:inline-block;
578 }
580 .clear:after {
581 display:block;
582 visibility:hidden;
583 clear:both;
584 height:0;
585 content: ".";
586 }