Mercurial > kallithea

comparison pylons_app/public/css/style.css @ 0:564e40829f80

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
initial commit.
author Marcin Kuzminski
date Thu, 18 Feb 2010 13:01:57 +0100
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:564e40829f80
1
2 /*-------[ general ]---------------------------------*/
3
4 body {
5 background:#f0f0f0;
6 font:14px Arial, Tahoma, Sans-Serif;
7 color:#444;
8 margin:30px 0 30px 0;
9 padding:0;
10 line-height:21px;
11 }
12 p,ul,ol,h1,h2,h3,h4,blockquote,fieldset,form {
13 margin:0;
14 padding:0;
15 }
16 a {
17 outline:none;
18 text-decoration:none;
19 color:#296785;
20 }
21 a:hover {
22 color:#000;
23 }
24 img {
25 border:none;
26 }
27 .left-img {
28 float:left;
29 border:1px solid #ccc;
30 margin:5px 10px 0 0;
31 padding:5px;
32 }
33 .right-img {
34 float:right;
35 border:1px solid #ccc;
36 margin:5px 0 0 10px;
37 padding:5px;
38 }
39 blockquote {
40 background:url(/images/blockquote.gif) no-repeat top left;
41 padding:10px 0 0 40px;
42 font-style:italic;
43 }
44 .clearfix:after {
45 content: ".";
46 display: block;
47 height: 0;
48 clear: both;
49 visibility: hidden;
50 }
51
52 /*-------[ top-glow (just a little beauty! i know it maybe against semantics but i can't find a good solution) ]---------------------------------*/
53
54 #top-glow {
55 width:940px;
56 height:20px;
57 background:url(/images/top-glow.jpg) no-repeat;
58 margin:0 auto;
59 }
60
61 /*-------[ container ]---------------------------------*/
62
63 #container {
64 width: 900px;
65 padding:0 20px 0 20px;
66 margin:0 auto;
67 background:url(/images/container-bg.jpg) repeat-y;
68 }
69
70 /*-------[ header ]---------------------------------*/
71
72 #header {
73 width:900px;
74 height:120px;
75 background:url(/images/header.jpg) repeat-y;
76 border-top:1px solid #fff;
77 }
78 #logo {
79 width:263px;
80 height:40px;
81 position:absolute;
82 margin:37px 0 0 30px;
83 }
84 #logo a {
85 background:url(/images/logo.png) no-repeat;
86 text-indent:-9999pt;
87 display:block;
88 width:263px;
89 height:40px;
90 }
91
92 /*-------[ navigation ]---------------------------------*/
93
94 #navigation {
95 width:900px;
96 height:44px;
97 background:url(/images/navigation.jpg) no-repeat;
98 }
99 #navigation ul {
100 list-style:none;
101 padding-left:30px;
102 }
103 #navigation li {
104 float:left;
105 }
106 #navigation li a {
107 display:block;
108 text-indent:-9999pt;
109 margin:16px 17px 0 0;
110 }
111 #navigation li a:hover, #navigation a.selected {
112 background-position:0 -10px;
113 }
114 #home-button {
115 width:36px;
116 height:10px;
117 background:url(/images/home-button.png) no-repeat;
118 }
119 #about-button {
120 width:45px;
121 height:10px;
122 background:url(/images/about-button.png) no-repeat;
123 }
124 #services-button {
125 width:64px;
126 height:10px;
127 background:url(/images/services-button.png) no-repeat;
128 }
129 #portfolio-button {
130 width:74px;
131 height:10px;
132 background:url(/images/portfolio-button.png) no-repeat;
133 }
134 #blog-button {
135 width:34px;
136 height:10px;
137 background:url(/images/blog-button.png) no-repeat;
138 }
139 #contact-button {
140 width:64px;
141 height:10px;
142 background:url(/images/contact-button.png) no-repeat;
143 }
144
145 /*-------[ featured ]---------------------------------*/
146
147 #featured {
148 width:840px;
149 background:url(/images/featured.jpg) repeat-y;
150 border-bottom:1px solid #4A4C4E;
151 padding:30px;
152 color:#fff;
153 }
154 #featured-title {
155 text-indent:-9999pt;
156 background:url(/images/featured-title.png) no-repeat;
157 height:31px;
158 margin-bottom:20px;
159 }
160 #featured-left {
161 float:left;
162 width:393px;
163 margin-right:50px;
164 }
165 #featured-right {
166 float:right;
167 width:385px;
168 height:205px;
169 display:block;
170 border:1px solid #11879C;
171 padding:5px;
172 background:#fff;
173 }
174 #featured-right a {
175 margin:5px 0 0 5px;
176 }
177 #featured-buttons {
178 margin-top:20px;
179 }
180 #featured-buttons a {
181 float:left;
182 display:block;
183 width:143px;
184 height:47px;
185 text-indent:-9999pt;
186 margin-right:25px;
187 }
188 #featured-buttons a:hover {
189 background-position:0 0;
190 }
191 #learn-more {
192 background:url(/images/learn-more.png) 0 -47px no-repeat;
193 }
194 #our-services {
195 background:url(/images/our-services.png) 0 -47px no-repeat;
196 }
197
198 /*-------[ main ]---------------------------------*/
199
200 #main {
201 width:840px;
202 padding:30px 30px 15px 30px;
203 }
204
205 /*-------[ sidebar ]---------------------------------*/
206
207 #sidebar {
208 float:right;
209 width:250px;
210 }
211 .sidebox {
212 width:250px;
213 border:1px solid #b1b1b1;
214 margin-bottom:30px;
215 background:#fafafa;
216 color:#5d5d5d;
217 }
218 .sidebox-content {
219 padding:15px;
220 }
221 .sidebox h2 {
222 text-indent:-9999pt;
223 height:40px;
224 display:block;
225 border-bottom:1px solid #B1B1B1;
226 }
227 .sidebox p {
228 margin-bottom:10px;
229 }
230 .sidebox ul {
231 list-style:none;
232 }
233 .sidebox li {
234 margin-bottom:10px;
235 }
236 .sidebox li:last-child {
237 margin-bottom:0;
238 }
239 .list {
240 list-style:square !important;
241 margin-left:15px;
242 }
243 .list li {
244 margin-bottom:3px;
245 }
246 #recent-posts-title {
247 background:url(/images/recent-posts-title.jpg) no-repeat;
248 }
249 #recent-posts a {
250 color:#5D5D5D;
251 }
252 #recent-posts a:hover {
253 color:#296785;
254 }
255 .more-link {
256 color:#296785;
257 }
258 #clients-title {
259 background:url(/images/clients-title.jpg) no-repeat;
260 }
261 #location-title {
262 background:url(/images/location-title.jpg) no-repeat;
263 }
264 #categories-title {
265 background:url(/images/categories-title.jpg) no-repeat;
266 }
267
268 /*-------[ search form ]---------------------------------*/
269 #searchform {
270 margin-bottom:15px;
271 }
272 #searchform fieldset {
273 border:none;
274 }
275 #search-button {
276 padding:5px 0 5px 0;
277 background:#e3e3e3;
278 border:none;
279 color:#444;
280 width:60px;
281 text-align:center;
282 float:right;
283 display:block;
284 }
285 #search-field {
286 border:1px solid #ccc;
287 background:#F2F2F2;
288 padding:5px;
289 color:#444;
290 width:170px;
291 float:left;
292 display:block;
293 }
294 #search-field:focus {
295 border:1px solid #aaa;
296 background:#fff;
297 }
298 /*-------[ content ]---------------------------------*/
299
300 #content {
301 width:560px;
302 float:left;
303 margin-right:30px;
304 }
305 #content h2 {
306 border-bottom:1px solid #ccc;
307 padding-bottom:3px;
308 margin-bottom:15px;
309 font:20px Arial, Tahoma, Sans-Serif;
310 }
311 #content p {
312 margin-bottom:15px;
313 }
314 #content h3, #content h4, #content h5, #content h6 {
315 margin-bottom:10px;
316 color:#1B7883;
317 font-family:Arial, Tahoma, Verdana, Sans-Serif;
318 }
319 #content h3 {
320 font-size:18px;
321 }
322 #content h4 {
323 font-size:16px;
324 }
325 #content h5 {
326 font-size:14px;
327 }
328 #content h6 {
329 font-size:13px;
330 }
331 #content ul {
332 margin:10px 0 15px 30px;
333 }
334 #content ol {
335 margin:10px 0 15px 30px;
336 }
337 #content table {
338 border-left:1px solid #ccc;
339 border-top:1px solid #ccc;
340 margin-bottom:15px;
341 width:100%;
342 }
343 #content td, #content th {
344 border-right:1px solid #ccc;
345 border-bottom:1px solid #ccc;
346 padding:5px;
347 font-size:13px;
348 text-align:left;
349 }
350 #content th {
351 font-size:13px;
352 color:#000;
353 font-weight:normal;
354 background:#f2f2f2;
355 }
356 .br { /* use this for an extra 10px space if needed */
357 display:block;
358 margin:10px;
359 }
360 .bullet {
361 list-style-image:url(/images/bullet.gif) !important;
362 }
363
364 /*-------[ blog styles ]---------------------------------*/
365
366 .post {
367 margin-bottom:30px;
368 }
369 h2.post-title {
370 margin-bottom:5px !important;
371 }
372 .post-meta {
373 font-size:12px;
374 margin-bottom:10px;
375 }
376 .post-comments {
377 background:url(/images/speech_bubble_48.png) no-repeat;
378 padding:11px 0 15px 0;
379 width:48px;
380 display:block;
381 text-align:center;
382 font-size:18px;
383 color:#444;
384 position:absolute;
385 margin:-28px 0 0 514px;
386 }
387 .post-comments:hover {
388 color:#000;
389 }
390
391 #previous-next {
392 margin-bottom:15px;
393 }
394 #next {
395 float:right;
396 }
397 #prev {
398 float:left;
399 }
400
401 /*-------[ front page ]---------------------------------*/
402
403 .frontpage-box {
404 margin-bottom:10px;
405 }
406 .frontpage-box-img {
407 float:left;
408 width:48px;
409 height:48px;
410 margin:15px 22px 0 0;
411 }
412 .frontpage-box-text {
413 float:right;
414 width:490px;
415 }
416 .frontpage-box h3 {
417 font:16px Arial, Tahoma, Sans-Serif !important;
418 margin-bottom:5px !important;
419 color:#1B7883 !important;
420 }
421
422 /*-------[ portfolio ]---------------------------------*/
423
424 #portfolio {
425 width:840px;
426 }
427 #portfolio h2 {
428 border-bottom:1px solid #ccc;
429 padding-bottom:3px;
430 margin-bottom:30px;
431 font:20px Arial, Tahoma, Sans-Serif;
432 }
433 ul.work-gallery {
434 list-style:none;
435 width:870px;
436 position:relative;
437 }
438 .work-gallery li {
439 float:left;
440 width:260px;
441 margin:0 30px 0 0;
442 min-height:220px;
443 font-size:12px;
444 line-height:19px;
445 }
446 a.work-thumb {
447 display:block;
448 border:1px solid #ccc;
449 padding:5px;
450 width:248px;
451 height:138px;
452 }
453 a.work-thumb:hover {
454 border:1px solid #999;
455 }
456 .work-name {
457 padding:2px 5px 2px 7px;
458 background:#fff;
459 position:absolute;
460 margin:-40px 0 0 1px;
461 }
462 .work-description {
463 margin-top:5px;
464 }
465
466 /*-------[ contact form ]---------------------------------*/
467
468 #contactform fieldset {
469 border:none;
470 }
471 #contactform input {
472 width:170px;
473 }
474 #contactform textarea {
475 width:450px;
476 height:170px;
477 }
478 #contactform input, #contactform textarea {
479 display:block;
480 border:1px solid #ccc;
481 padding:5px;
482 background:#f2f2f2;
483 font:12px Arial, Tahoma, Sans-Serif;
484 color:#444;
485 margin-bottom:10px;
486 }
487 #contactform input:focus, #contactform textarea:focus {
488 border:1px solid #aaa;
489 background:#fff;
490 }
491 .send {
492 width:80px !important;
493 background:#eee;
494 border:1px solid #bbb !important;
495 color:#444 !important;
496 cursor:pointer;
497 }
498 .send:hover {
499 border:1px solid #777 !important;
500 }
501
502 /*-------[ footer ]---------------------------------*/
503
504 #footer {
505 padding:15px 30px 15px 30px;
506 background:#f2f2f2;
507 border-top:1px solid #bbb;
508 font-size:13px;
509 }
510 #footer p {
511 float:left;
512 }
513 #footer ul {
514 float:right;
515 list-style:none;
516 }
517 #footer li {
518 float:left;
519 margin-left:15px;
520 }
521
522 /*-------[ bottom glow (just a little beauty! i know it maybe against semantics but i can't find a good solution) ]---------------------------------*/
523
524 #bottom-glow {
525 background:url(/images/bottom-glow.jpg) no-repeat;
526 width:940px;
527 height:22px;
528 margin:0 auto;
529 }
530
531 /*-------[ browser hacks ]---------------------------------*/
532
533 .ie6 #navigation li a {
534 overflow:hidden;
535 }
536 .ie6 #navigation li a:hover, .ie6 #navigation a.selected, .ie7 #navigation li a:hover, .ie7 #navigation a.selected {
537 margin-top:17px;
538 }
539 .ie6 #featured {
540 padding:30px 30px 0 30px;
541 }
542 .ie6 #featured-buttons a:hover, .ie7 #featured-buttons a:hover {
543 background-position:0 0;
544 margin-top:-1px;
545 }
546 .ie6 .work-gallery {
547 margin-right:-60px;
548 }
549 .ie6 .work-gallery li {
550 margin-bottom:30px;
551 }
552 .ie6 .frontpage-box, .ie6 #footer, .ie7 .frontpage-box, .ie7 #footer {
553 height:1%;
554 }