| author | Eugen Sawin <sawine@me73.com> |
| Thu, 05 Jan 2012 15:32:41 +0100 | |
| changeset 79 | 72b5c635d6df |
| parent 77 | 9c443a61358c |
| child 80 | ba69edadfc4c |
| 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 #logo {
106 border-style: none;
107 position: relative;
108 margin: 0;
109 padding: 0;
110 color: #F8F8F8;
111 /* change the values of top and left to adjust the position of the logo*/
112 top: 40px;
113 left: 25px;
114 height: 100px;
115 width: 670px;
116 }
118 #sim {
119 border-style: none;
120 position: relative;
121 margin: 0;
122 padding: 0;
123 color: #F8F8F8;
124 /* change the values of top and left to adjust the position of the logo*/
125 top: 37px;
126 left: 25px;
127 height: 30px;
128 width: 670px;
129 }
131 code {
132 margin: 5px 0;
133 padding: 15px;
134 text-align: left;
135 display: block;
136 overflow: auto;
137 font: 500 1em/1.5em 'Lucida Console', 'Courier New', Monospace;
138 /* white-space: pre; */
139 background: #070707;
140 /*border: 1px solid #111; */
141 }
142 acronym {
143 cursor: help;
144 border-bottom: 1px dotted #5B5B5B;
145 }
146 blockquote {
147 margin: 15px 10px;
148 padding: 10px 10px 10px 35px;
149 background: #070707 url(quote.gif) no-repeat 10px 10px;
150 border: 1px solid #111;
151 font-weight: normal;
152 font-size: 17px;
153 line-height: 1.6em;
154 font-style: italic;
155 font-family: Georgia, 'Times New Roman', Times, serif;
156 color: #808080;
157 }
159 /* start - table */
160 table {
161 margin: 15px 0px;
162 border-collapse: collapse;
163 }
164 th {
165 color: #FAFAFA;
166 height: 38px;
167 padding-left: 0px;
168 padding-right: 12px;
169 text-align: left;
170 }
171 tr {
172 color: #5b5b5b;
173 height: 15px;
174 }
175 td {
176 padding-left: 0px;
177 padding-right: 12px;
178 }
179 /* end - table */
182 /* form elements */
183 form {
184 margin: 20px 10px;
185 padding: 15px 25px 25px 20px;
186 background: #070707;
187 /*border: 1px solid #111; */
188 }
189 form p {
190 /*border-bottom: 1px solid #101010;*/
191 padding: 12px 0 5px 0; margin: 0;
192 }
193 label {
194 font-weight: bold;
195 color: #FAFAFA;
196 }
197 input, select, textarea {
198 margin: 5px 0;
199 padding: 5px;
200 font: normal 1em Verdana, Tahoma, sans-serif;
201 color: #6A6969;
202 background: #0C0C0C;
203 /*border: 1px solid #1C1C1C;*/
204 }
205 option { padding-right: 0.5em; }
207 #name, #email, #message{
208 width: 480px;
209 }
210 input.button {
211 font: bold 12px Arial, Verdana, Sans-serif;
212 height: 30px;
213 padding: 2px 3px;
214 margin-top: 8px;
215 color: #48780E;
216 background: #000;
217 border-width: 1px;
218 border-style: solid;
219 border-color: #1B1B1B;
220 }
223 /* ------------------------------------------
224 LAYOUT
225 ------------------------------------------- */
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: 150px;
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 #random_quote {
412 color: #c95723;
413 font-style: italic;
414 }
416 #sidebar h2 {
417 font-size: 2.3em;
418 color: black;
419 }
421 #sidebar h3 {
422 /*padding: 5px 12px;
423 margin: 15px 5px 10px 0;
424 font: bold 2.4em 'Trebuchet MS', Tahoma, Helvetica, Arial, sans-serif;
425 color: #45D5E6;*/
426 /*border-bottom: 1px solid #121212; */
427 /*background-image: url(pattern.gif); */
428 }
429 #sidebar ul.sidemenu {
430 text-align: left;
431 margin: 20px 5px 20px 0px;
432 padding: 0;
433 /*border-top: 1px solid #111; */
434 }
435 #sidebar ul.sidemenu li {
436 list-style: none;
437 padding: 8px 10px;
438 margin: 0;
439 /*border-bottom: 1px solid #111;*/
440 }
441 * html body #sidebar ul.sidemenu li {
442 height: 1%;
443 }
444 #sidebar ul.sidemenu li a {
445 text-decoration: none;
446 border: none;
447 color: #666666;
448 font-weight: bold;
449 /*font-family: 'Trebuchet MS', Tahoma, Helvetica, Arial, Sans-serif;*/
450 font-size: 9pt;
451 }
452 #sidebar ul.sidemenu li a span {
453 color: #444;
454 /*font-family: Georgia, 'Times New Roman', Times, serif;*/
455 font-style: italic;
456 font-weight: normal;
457 font-size: 8pt;
458 }
459 #sidebar ul.sidemenu li a:hover,
460 #sidebar ul.sidemenu li a:hover span {
461 color: #fff;
462 }
463 #sidebar ul.sidemenu ul { margin: 0 0 0 0px; padding: 0; }
464 #sidebar ul.sidemenu ul li { border: none; }
466 /* header quick search */
467 #sidebar form#quick-search {
468 padding: 0;
469 margin: 20px 0 35px 0;
470 border: none;
471 width: 290px; height: 33px;
472 /*background: url(header-search.gif) no-repeat; */
473 }
474 #sidebar form#quick-search p {
475 margin: 0;
476 padding: 0;
477 }
478 #sidebar form#quick-search input {
479 float: left;
480 border: none;
481 background: transparent;
482 color: #4E4E4E;
483 margin: 0;
484 }
485 #sidebar form#quick-search .tbox {
486 margin: 5px 0 0 0px;
487 width: 240px;
488 display: inline;
489 }
490 #search form#quick-search .btn{
491 width: 24px; height: 24px;
492 }
493 #sidebar form#quick-search label {
494 display: none;
495 }
497 /* footer */
498 #footer {
499 clear: both;
500 /*padding: 1em 0 2.5em 0;*/
501 background: #222222;
502 color: #4E4E4E;
503 width: 100%;
504 float: left;
505 }
506 #footer a {
507 color: #4E4E4E;
508 /*color: #0E909C;*/
509 border: none;
510 }
511 #footer a:hover {
512 color: #fafafa;
513 }
514 #footer .rssfeed {
515 background: url(images/rss.gif) no-repeat left 1px;
516 padding-left: 17px;
517 }
518 #footer-left {
519 float: left;
520 width: 70%;
521 }
522 #footer-right {
523 float: right;
524 width: 25%;
525 }
527 .download a
528 {
529 color: #5ad715;
530 }
532 /* postmeta */
533 .postmeta {
534 padding: 7px 5px;
535 margin: 5px 5px 5px 5px;
536 font-size: 1em;
537 color: #545454;
538 /*border: 1px solid #111; */
539 background: #222222;
540 }
541 .postmeta .date{ margin: 0 10px 0 5px; }
542 .postmeta a.comments { margin: 0 10px 0 5px; }
543 .postmeta a.readmore { margin: 0 10px 0 5px; }
545 .post-info { font-size: .95em; padding-top: 3px; margin-left: 5px; color: #444; }
546 .post-info a, .post-info a:visited { color: #AE275A; }
548 /* alignment classes */
549 .float-left { float: left; }
550 .float-right { float: right; }
551 .align-left { text-align: left; }
552 .align-right { text-align: right; }
554 /* display and additional classes */
555 .no-border {
556 border: none;
557 }
559 .clearer {
560 clear: both;
561 }
563 .clear {
564 display:inline-block;
565 }
567 .clear:after {
568 display:block;
569 visibility:hidden;
570 clear:both;
571 height:0;
572 content: ".";
573 }