0
|
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 } |