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