1 /* |
|
2 * Skeleton V1.2 |
|
3 * Copyright 2011, Dave Gamache |
|
4 * www.getskeleton.com |
|
5 * Free to use under the MIT license. |
|
6 * http://www.opensource.org/licenses/mit-license.php |
|
7 * 6/20/2012 |
|
8 */ |
|
9 |
|
10 /* Table of Content |
|
11 ================================================== |
|
12 #Typography |
|
13 #Buttons |
|
14 #Generic Styles |
|
15 #Separators |
|
16 #Nav |
|
17 #Intro |
|
18 #Work |
|
19 #Services |
|
20 #About |
|
21 #Contact |
|
22 #Media Queries |
|
23 #Font-Face */ |
|
24 |
|
25 |
|
26 /* #Typography |
|
27 ================================================== */ |
|
28 |
|
29 h1, h2, h3 { |
|
30 font-family: 'Oswald', sans-serif; |
|
31 } |
|
32 |
|
33 h1 { |
|
34 color: #434343; |
|
35 font-size: 120px; |
|
36 font-weight: 700; |
|
37 text-transform: uppercase; |
|
38 position: relative; |
|
39 z-index: 150; |
|
40 margin-bottom: 70px; |
|
41 } |
|
42 |
|
43 h1.small { |
|
44 font-size: 90px; |
|
45 margin-bottom: 40px; |
|
46 } |
|
47 |
|
48 h2 { |
|
49 font-size: 60px; |
|
50 font-weight: 700; |
|
51 color: #434343; |
|
52 text-transform: uppercase; |
|
53 text-align: center; |
|
54 margin-top: 90px; |
|
55 margin-bottom: 80px; |
|
56 } |
|
57 |
|
58 span.lines { |
|
59 border-top: 1px solid #aeaeae; |
|
60 border-bottom: 1px solid #aeaeae; |
|
61 } |
|
62 |
|
63 h3 { |
|
64 font-size: 30px; |
|
65 text-transform: uppercase; |
|
66 font-weight: 600; |
|
67 color: #434343; |
|
68 } |
|
69 |
|
70 h4 { |
|
71 font-family: 'Source Sans Pro', sans-serif; |
|
72 font-size: 36px; |
|
73 font-weight: 600; |
|
74 color: #434343; |
|
75 text-transform: uppercase; |
|
76 } |
|
77 |
|
78 h5 { |
|
79 font-family: 'Source Sans Pro', sans-serif; |
|
80 font-size: 24px; |
|
81 font-weight: 600; |
|
82 text-transform: uppercase; |
|
83 color: #434343; |
|
84 } |
|
85 |
|
86 p, body { |
|
87 font-family: 'Source Sans Pro', sans-serif; |
|
88 font-size: 16px; |
|
89 font-weight: 400; |
|
90 line-height: 23px; |
|
91 color: #3d3d3d; |
|
92 } |
|
93 |
|
94 .dark-bg p, .dark-bg { |
|
95 color: #f9f9f9; |
|
96 } |
|
97 |
|
98 .dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg h4, .dark-bg h5 { |
|
99 color: #FFF; |
|
100 } |
|
101 |
|
102 |
|
103 |
|
104 /* #Buttons |
|
105 ================================================== */ |
|
106 |
|
107 .button1, |
|
108 input[type="submit"], |
|
109 input[type="reset"], |
|
110 input[type="button"] { |
|
111 background: #3a3a3a; |
|
112 border: 0; |
|
113 color: #fff; |
|
114 display: inline-block; |
|
115 font-size: 15px; |
|
116 font-weight: 400; |
|
117 text-transform: uppercase; |
|
118 text-decoration: none; |
|
119 cursor: pointer; |
|
120 margin-bottom: 20px; |
|
121 line-height: normal; |
|
122 padding: 6px 10px; |
|
123 font-family: 'Source Sans Pro', sans-serif; |
|
124 } |
|
125 |
|
126 .button1:hover, |
|
127 input[type="submit"]:hover, |
|
128 input[type="reset"]:hover, |
|
129 input[type="button"]:hover { |
|
130 color: #3a3a3a; |
|
131 background: #e8e8e8; |
|
132 border: 0; |
|
133 } |
|
134 |
|
135 .button1:active, |
|
136 button1:active, |
|
137 input[type="submit"]:active, |
|
138 input[type="reset"]:active, |
|
139 input[type="button"]:active { |
|
140 color: #3a3a3a; |
|
141 background: #e8e8e8; |
|
142 border: 0; |
|
143 } |
|
144 |
|
145 .signup .button2 { |
|
146 color: #3a3a3a; |
|
147 } |
|
148 |
|
149 .button2 { |
|
150 background: #e8e8e8; |
|
151 border: 0; |
|
152 color: #fff; |
|
153 display: inline-block; |
|
154 font-size: 15px; |
|
155 font-weight: 400; |
|
156 text-transform: uppercase; |
|
157 text-decoration: none; |
|
158 cursor: pointer; |
|
159 line-height: normal; |
|
160 padding: 6px 10px; |
|
161 font-family: 'Source Sans Pro', sans-serif; |
|
162 } |
|
163 |
|
164 .button2:hover { |
|
165 color: #e8e8e8; |
|
166 background: #3a3a3a; |
|
167 border: 0; |
|
168 } |
|
169 |
|
170 .button2 a { |
|
171 color: inherit; |
|
172 text-decoration: none; |
|
173 } |
|
174 |
|
175 /* Fix for odd Mozilla border & padding issues */ |
|
176 .button1::-moz-focus-inner, |
|
177 input::-moz-focus-inner { |
|
178 border: 0; |
|
179 padding: 0; |
|
180 } |
|
181 |
|
182 |
|
183 |
|
184 /* #Generic Styles |
|
185 ================================================== */ |
|
186 |
|
187 .action { |
|
188 margin-top: 50px; |
|
189 padding: 40px 0 0 0; |
|
190 text-align: center; |
|
191 border-top: 1px solid #d3d3d3; |
|
192 } |
|
193 |
|
194 .action p { |
|
195 font-size: 22px; |
|
196 font-weight: 600; |
|
197 color: #515151; |
|
198 } |
|
199 |
|
200 .dark-bg .action p { |
|
201 color: #ececec; |
|
202 } |
|
203 |
|
204 |
|
205 |
|
206 /* #Separators |
|
207 ================================================== */ |
|
208 |
|
209 p.separator { |
|
210 font-size: 30px; |
|
211 font-weight: 600; |
|
212 font-style: italic; |
|
213 color: #fff; |
|
214 line-height: 38px; |
|
215 text-transform: uppercase; |
|
216 position: relative; |
|
217 z-index: 200; |
|
218 text-align: center; |
|
219 padding-top: 240px; |
|
220 } |
|
221 |
|
222 #separator1 { |
|
223 width: 100%; |
|
224 height: 500px; |
|
225 position: relative; |
|
226 } |
|
227 |
|
228 #separator1 .bg { |
|
229 background: url(../images/bg2.jpg) repeat center; |
|
230 background-size: cover !important; |
|
231 -webkit-background-size: cover !important; |
|
232 margin: 0 auto; |
|
233 padding: 0; |
|
234 position: absolute; |
|
235 z-index: 200; |
|
236 width: 100%; |
|
237 height: 500px; |
|
238 } |
|
239 |
|
240 #separator1 .bg2 { |
|
241 background: url(../images/bg2.jpg) repeat center; |
|
242 } |
|
243 |
|
244 #separator1 .bg3 { |
|
245 background: url(../images/bg3.jpg) repeat center; |
|
246 } |
|
247 |
|
248 #separator1 .bg4 { |
|
249 background: url(../images/bg4.jpg) repeat center; |
|
250 } |
|
251 |
|
252 |
|
253 |
|
254 /* #Nav |
|
255 ================================================== */ |
|
256 |
|
257 nav { |
|
258 background: #fff; |
|
259 width: 100%; |
|
260 position: relative; |
|
261 z-index: 1000; |
|
262 text-align: center; |
|
263 height: 40px; |
|
264 -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3); |
|
265 box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3); |
|
266 } |
|
267 |
|
268 nav ul { |
|
269 padding-top: 10px; |
|
270 } |
|
271 |
|
272 nav ul li { |
|
273 display: inline; |
|
274 border-right: 1px solid #e6e6e6; |
|
275 padding: 6px 26px 8px 26px; |
|
276 margin: 0; |
|
277 } |
|
278 |
|
279 nav ul li:first-child { |
|
280 border-left: 1px solid #e6e6e6; |
|
281 } |
|
282 |
|
283 nav a { |
|
284 font-family: 'Source Sans Pro', sans-serif; |
|
285 font-size: 16px; |
|
286 color: #515151; |
|
287 font-weight: 300; |
|
288 text-decoration: none; |
|
289 text-transform: uppercase; |
|
290 } |
|
291 |
|
292 nav a:visited { |
|
293 color: #515151; |
|
294 } |
|
295 |
|
296 nav a:hover { |
|
297 color: #000; |
|
298 } |
|
299 |
|
300 |
|
301 |
|
302 /* #Intro |
|
303 ================================================== */ |
|
304 |
|
305 #intro { |
|
306 width: 100%; |
|
307 height: 600px; |
|
308 text-align: center; |
|
309 } |
|
310 |
|
311 #intro h1 { |
|
312 color: #FFF; |
|
313 } |
|
314 |
|
315 #intro .bg1 { |
|
316 background: url(../images/bg1.jpg) 0 0 repeat; |
|
317 background-position: 0 0 !important; |
|
318 background-size: cover; |
|
319 -webkit-background-size: cover; |
|
320 margin: 0 auto; |
|
321 padding: 0; |
|
322 position: absolute; |
|
323 z-index: 100; |
|
324 width: 100%; |
|
325 height: 600px; |
|
326 } |
|
327 |
|
328 .title { |
|
329 position: relative; |
|
330 width: 100%; |
|
331 text-align: center; |
|
332 z-index: 150px; |
|
333 padding-top: 70px; |
|
334 } |
|
335 |
|
336 .intro-line { |
|
337 position: relative; |
|
338 z-index: 150; |
|
339 border-top: 1px solid #ededed; |
|
340 width: 670px; |
|
341 margin: 0 auto 50px auto; |
|
342 } |
|
343 |
|
344 .title p { |
|
345 font-size: 24px; |
|
346 line-height: 30px; |
|
347 color: #fff; |
|
348 position: relative; |
|
349 z-index: 150; |
|
350 } |
|
351 |
|
352 .social-intro { |
|
353 margin-top: 45px; |
|
354 position: relative; |
|
355 z-index: 150; |
|
356 } |
|
357 |
|
358 .social-intro ul li { |
|
359 display: inline; |
|
360 margin: 0 5px; |
|
361 } |
|
362 |
|
363 .social-intro a { |
|
364 opacity: 0.7; |
|
365 } |
|
366 |
|
367 .social-intro a:hover { |
|
368 opacity: 1; |
|
369 } |
|
370 |
|
371 |
|
372 |
|
373 /* #Work |
|
374 ================================================== */ |
|
375 |
|
376 .bg { |
|
377 position: relative; |
|
378 background-color: #FFF; |
|
379 z-index: 300; |
|
380 padding-top: 20px; |
|
381 padding-bottom: 40px; |
|
382 -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9); |
|
383 box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9); |
|
384 } |
|
385 |
|
386 .dark-bg { |
|
387 background: url(../images/bg-dark.jpg) repeat !important; |
|
388 } |
|
389 |
|
390 .flexslider { |
|
391 margin-top: 40px; |
|
392 } |
|
393 |
|
394 p.mid-text { |
|
395 margin-top: 40px; |
|
396 } |
|
397 |
|
398 .portfolio { |
|
399 text-align: center; |
|
400 margin-top: 40px; |
|
401 } |
|
402 |
|
403 p.proj-title { |
|
404 margin-bottom: 5px; |
|
405 padding-bottom: 2px; |
|
406 border-bottom: 1px solid #d3d3d3; |
|
407 text-transform: uppercase; |
|
408 } |
|
409 |
|
410 p.proj-desc { |
|
411 margin-bottom: 35px; |
|
412 padding-bottom: 2px; |
|
413 border-bottom: 1px solid #d3d3d3; |
|
414 } |
|
415 |
|
416 |
|
417 |
|
418 /* #Services |
|
419 ================================================== */ |
|
420 |
|
421 #services { |
|
422 background: url(../images/bg-dark.jpg) repeat; |
|
423 position: relative; |
|
424 z-index: 300; |
|
425 padding-top: 40px; |
|
426 padding-bottom: 40px; |
|
427 -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9); |
|
428 box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9); |
|
429 } |
|
430 |
|
431 .serv-list { |
|
432 text-align: center; |
|
433 margin-top: 60px; |
|
434 } |
|
435 |
|
436 .serv-list h4 { |
|
437 margin-bottom: 50px; |
|
438 } |
|
439 |
|
440 .serv-list p { |
|
441 margin-top: 35px; |
|
442 } |
|
443 |
|
444 |
|
445 .pricing { |
|
446 text-align: center; |
|
447 margin-bottom: 20px; |
|
448 } |
|
449 |
|
450 .pricing h3 { |
|
451 margin-top: 70px; |
|
452 margin-bottom: 60px; |
|
453 } |
|
454 |
|
455 p.p-name { |
|
456 background: url(../images/price-name-bg.jpg) repeat; |
|
457 font-size: 22px; |
|
458 font-weight: 600; |
|
459 text-transform: uppercase; |
|
460 padding: 12px 0 8px 0; |
|
461 margin: 0; |
|
462 color: #fff; |
|
463 } |
|
464 |
|
465 p.p-price { |
|
466 background: url(../images/price-bg.jpg) repeat; |
|
467 font-size: 28px; |
|
468 font-weight: 600; |
|
469 text-transform: uppercase; |
|
470 color: #fff; |
|
471 padding: 20px 0 16px 0; |
|
472 margin: 0; |
|
473 } |
|
474 |
|
475 span.p-small { |
|
476 font-size: 14px; |
|
477 color: #a0a0a0; |
|
478 } |
|
479 |
|
480 .pricing ul { |
|
481 background: url(../images/price-feat-bg.jpg) repeat; |
|
482 margin: 0; |
|
483 } |
|
484 |
|
485 .pricing ul li { |
|
486 font-size: 14px; |
|
487 text-transform: uppercase; |
|
488 color: #d7d7d7; |
|
489 border-bottom: 1px solid #333333; |
|
490 padding: 10px 0; |
|
491 margin: 0; |
|
492 } |
|
493 |
|
494 .signup { |
|
495 padding: 14px 0; |
|
496 margin-bottom: 30px; |
|
497 } |
|
498 |
|
499 .signup button2 { |
|
500 margin: 0; |
|
501 } |
|
502 |
|
503 .signup { |
|
504 background: url(../images/price-bg.jpg) repeat; |
|
505 } |
|
506 |
|
507 |
|
508 |
|
509 /* #About |
|
510 ================================================== */ |
|
511 |
|
512 .skills { |
|
513 margin-top: 30px; |
|
514 } |
|
515 |
|
516 .skills h3 { |
|
517 text-align: center; |
|
518 margin-bottom: 30px; |
|
519 } |
|
520 |
|
521 .skills p { |
|
522 font-size: 14px; |
|
523 text-transform: uppercase; |
|
524 margin: 0; |
|
525 line-height: 18px; |
|
526 } |
|
527 |
|
528 .skill-bg { |
|
529 background: #e5e5e5; |
|
530 position: relative; |
|
531 width: 100%; |
|
532 height: 31px; |
|
533 margin-bottom: 15px; |
|
534 } |
|
535 |
|
536 .skill1 { |
|
537 background: #d1d1d1; |
|
538 width: 63%; |
|
539 height: 31px; |
|
540 } |
|
541 |
|
542 .skill2 { |
|
543 background: #c8c7c7; |
|
544 width: 72%; |
|
545 height: 31px; |
|
546 } |
|
547 |
|
548 .skill3 { |
|
549 background: #bdbdbd; |
|
550 width: 77%; |
|
551 height: 31px; |
|
552 } |
|
553 |
|
554 .skill4 { |
|
555 background: #b3b2b2; |
|
556 width: 85%; |
|
557 height: 31px; |
|
558 } |
|
559 |
|
560 .skill5 { |
|
561 background: #a9a8a8; |
|
562 width: 90%; |
|
563 height: 31px; |
|
564 } |
|
565 |
|
566 |
|
567 .team { |
|
568 margin-top: 60px; |
|
569 text-align: center; |
|
570 } |
|
571 |
|
572 .team h3 { |
|
573 margin-bottom: 50px; |
|
574 } |
|
575 |
|
576 p.t-name { |
|
577 font-size: 20px; |
|
578 font-weight: 600; |
|
579 text-transform: uppercase; |
|
580 color: #424242; |
|
581 margin-top: 15px; |
|
582 margin-bottom: 0; |
|
583 } |
|
584 |
|
585 p.t-type { |
|
586 font-size: 16px; |
|
587 font-weight: 300; |
|
588 font-style: italic; |
|
589 color: #707070; |
|
590 margin-bottom: 10px; |
|
591 } |
|
592 |
|
593 .team ul { |
|
594 margin-bottom: 10px; |
|
595 } |
|
596 |
|
597 .team ul li { |
|
598 display: inline; |
|
599 margin: 0 3px; |
|
600 } |
|
601 |
|
602 .team ul a:hover { |
|
603 opacity: 0.7; |
|
604 } |
|
605 |
|
606 |
|
607 |
|
608 /* #Contact |
|
609 ================================================== */ |
|
610 |
|
611 #contact { |
|
612 background: url(../images/bg-dark.jpg) repeat; |
|
613 position: relative; |
|
614 z-index: 300; |
|
615 padding-top: 20px; |
|
616 -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9); |
|
617 box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9); |
|
618 } |
|
619 |
|
620 #contact a { |
|
621 color: #FFF; |
|
622 text-decoration: none; |
|
623 } |
|
624 |
|
625 |
|
626 /*** contact form ***/ |
|
627 |
|
628 .done { |
|
629 font-family: 'Source Sans Pro', sans-serif; |
|
630 color: #fff; |
|
631 font-size: 14px; |
|
632 margin-bottom: 15px; |
|
633 padding: 10px; |
|
634 display: none; |
|
635 } |
|
636 |
|
637 .contact-form { |
|
638 position: relative; |
|
639 z-index: 300; |
|
640 margin-top: 20px; |
|
641 } |
|
642 |
|
643 .contact-form p { |
|
644 font-family: 'Source Sans Pro', sans-serif; |
|
645 font-size: 14px; |
|
646 color: #fff; |
|
647 text-transform: uppercase; |
|
648 margin-bottom: 2px; |
|
649 } |
|
650 |
|
651 .contact-form input { |
|
652 background: url(../images/cont-form-bg.jpg) repeat; |
|
653 width: 98%; |
|
654 height: 28px; |
|
655 margin-bottom: 10px; |
|
656 padding-left: 4px; |
|
657 font-family: 'Source Sans Pro', sans-serif; |
|
658 font-weight: 400; |
|
659 font-size: 16px; |
|
660 color: #fff; |
|
661 border: 0; |
|
662 } |
|
663 |
|
664 .contact-form textarea { |
|
665 background: url(../images/cont-form-bg.jpg) repeat; |
|
666 margin-bottom: 10px; |
|
667 padding-left: 5px; |
|
668 font-family: 'Source Sans Pro', sans-serif; |
|
669 font-weight: 400; |
|
670 font-size: 16px; |
|
671 color: #fff; |
|
672 width: 98%; |
|
673 height: 125px; |
|
674 border: 0; |
|
675 } |
|
676 |
|
677 .contact-form input.submit-button { |
|
678 background: #e8e8e8; |
|
679 border: 0; |
|
680 color: #3a3a3a; |
|
681 display: inline-block; |
|
682 font-size: 14px; |
|
683 font-weight: 400; |
|
684 text-transform: uppercase; |
|
685 text-decoration: none; |
|
686 cursor: pointer; |
|
687 margin-bottom: 20px; |
|
688 line-height: 0; |
|
689 padding: 3px 4px 0 4px; |
|
690 font-family: 'Source Sans Pro', sans-serif; |
|
691 width: 60px; |
|
692 height: 24px; |
|
693 } |
|
694 |
|
695 .contact-form input.submit-button:hover { |
|
696 color: #e8e8e8; |
|
697 background: #3a3a3a; |
|
698 border: 0; |
|
699 } |
|
700 |
|
701 |
|
702 .contact-info { |
|
703 margin-top: 50px; |
|
704 } |
|
705 |
|
706 .contact-info h5 { |
|
707 margin-bottom: 40px; |
|
708 } |
|
709 |
|
710 .contact-info img { |
|
711 vertical-align: middle; |
|
712 margin-right: 10px; |
|
713 } |
|
714 |
|
715 |
|
716 .social { |
|
717 padding-top: 15px; |
|
718 } |
|
719 |
|
720 .social ul li { |
|
721 display: inline; |
|
722 margin-right: 5px; |
|
723 } |
|
724 |
|
725 .social img:hover { |
|
726 opacity: 0.7; |
|
727 } |
|
728 |
|
729 |
|
730 .copyright { |
|
731 border-top: 1px solid #858585; |
|
732 text-align: center; |
|
733 margin-top: 30px; |
|
734 padding-top: 30px; |
|
735 } |
|
736 |
|
737 .copyright p { |
|
738 color: #858585; |
|
739 font-size: 14px; |
|
740 } |
|
741 |
|
742 /* #Wordpress related css |
|
743 ================================================== */ |
|
744 |
|
745 .wp-caption { |
|
746 max-width: 100%; |
|
747 border: 1px solid #DDDDDD; |
|
748 margin-bottom: 10px; |
|
749 padding: 6px 2px 0; |
|
750 } |
|
751 .wp-caption-text { |
|
752 font-size: 11px; |
|
753 padding: 0 4px 5px; |
|
754 } |
|
755 .aligncenter { |
|
756 display: block; |
|
757 margin: 0 auto; |
|
758 } |
|
759 .alignleft { |
|
760 float: left; |
|
761 margin: 0px 10px 10px 0px; |
|
762 } |
|
763 .alignright { |
|
764 float: right; |
|
765 margin: 0px 0px 10px 10px; |
|
766 } |
|
767 .sticky { |
|
768 } |
|
769 .single-navigation { |
|
770 position: relative; |
|
771 z-index: 1000; |
|
772 } |
|
773 .single-navigation .prev { |
|
774 float: left; |
|
775 } |
|
776 .single-navigation .next { |
|
777 float: right; |
|
778 } |
|
779 .gallery-caption { |
|
780 |
|
781 } |
|
782 |
|
783 .single h2 { |
|
784 margin: 39px 0 22px; |
|
785 } |
|
786 |
|
787 p.singlemeta { |
|
788 text-align: center; |
|
789 margin-bottom: 30px; |
|
790 font-size: 21px; |
|
791 } |
|
792 |
|
793 form#contactform input { |
|
794 width: 125px; |
|
795 } |
|
796 #respond label { |
|
797 display: none; |
|
798 float: none; |
|
799 height:0px; |
|
800 } |
|
801 #respond input, #respond textarea, #respond select { |
|
802 width: 254px; |
|
803 padding: 7px 13px; |
|
804 border: 1px solid #ddd; |
|
805 margin: 0px 28px 0px 0; |
|
806 font:12px 'Open Sans', Arial, Helvetica, sans-serif; |
|
807 line-height:20px; |
|
808 float:left; |
|
809 } |
|
810 textarea#comment, input#author, input#email, input#url { |
|
811 color:#707070; |
|
812 } |
|
813 #respond textarea { |
|
814 width: 93% !important; |
|
815 } |
|
816 #respond input:focus, #respond textarea:focus { |
|
817 border: 1px solid #000; |
|
818 } |
|
819 #respond input { |
|
820 margin-bottom: 15px !important; |
|
821 } |
|
822 #respond fieldset { |
|
823 padding-left:0px; |
|
824 } |
|
825 #respond legend { |
|
826 padding:7px 10px; |
|
827 font-weight:bold; |
|
828 color:#000; |
|
829 border:1px solid #eee; |
|
830 -webkit-border-radius:5px; |
|
831 -moz-border-radius:5px; |
|
832 margin-bottom:0 !important; |
|
833 margin-bottom:20px; |
|
834 } |
|
835 #respond span.required { |
|
836 padding-left:28px; |
|
837 background:url(images/bg-bullet.png) no-repeat 12px 5px; |
|
838 margin-left:-28px; |
|
839 } |
|
840 |
|
841 li.comment { |
|
842 color: #707070; |
|
843 margin-bottom: 10px; |
|
844 padding-left: 11px; |
|
845 clear: both; |
|
846 } |
|
847 |
|
848 ol.commentlist { |
|
849 margin-left: 0; |
|
850 list-style-type: none; |
|
851 } |
|
852 |
|
853 ol.commentlist a { |
|
854 text-decoration: none; |
|
855 font-size: 13px; |
|
856 } |
|
857 |
|
858 ol.commentlist a:hover { |
|
859 text-decoration: underline; |
|
860 } |
|
861 |
|
862 .commentlist .avatar { |
|
863 float: left; |
|
864 margin: 3px 0 0; |
|
865 } |
|
866 .commentlist .no-wrap { |
|
867 margin-left: 110px; |
|
868 margin-top: 10px; |
|
869 } |
|
870 |
|
871 .no-wrap .meta { |
|
872 font-size: 16px; |
|
873 color: #000; |
|
874 } |
|
875 |
|
876 .no-wrap p { |
|
877 margin-bottom: 12px; |
|
878 font-size: 14px; |
|
879 } |
|
880 |
|
881 li.bypostauthor { |
|
882 |
|
883 } |
|
884 |
|
885 .tags { |
|
886 padding: 5px 0 15px; |
|
887 } |
|
888 |
|
889 .tags a { |
|
890 text-transform: none; |
|
891 text-decoration: none; |
|
892 color: inherit; |
|
893 } |
|
894 |
|
895 .page-template-blog-php h2, .category h2 { |
|
896 margin-top: 60px; |
|
897 margin-bottom: 60px; |
|
898 } |
|
899 |
|
900 .pic { |
|
901 background: none repeat scroll 0 0 #FFFFFF; |
|
902 border: 1px solid #D2D2D2; |
|
903 margin-bottom: 5px; |
|
904 margin-top: 15px; |
|
905 padding: 3px; |
|
906 z-index: 99; |
|
907 } |
|
908 |
|
909 .proj-img { |
|
910 cursor: pointer; |
|
911 overflow: hidden; |
|
912 position: relative; |
|
913 } |
|
914 |
|
915 .proj-img a { |
|
916 background: url("../images/zoom.png") no-repeat scroll 50% 50% transparent; |
|
917 display: inline-block; |
|
918 height: 100%; |
|
919 position: absolute; |
|
920 top: -500px; |
|
921 width: 100%; |
|
922 z-index: 10; |
|
923 } |
|
924 |
|
925 .proj-img a { |
|
926 background: url("../images/zoom.png") no-repeat scroll 50% 50% transparent; |
|
927 display: inline-block; |
|
928 height: 100%; |
|
929 position: absolute; |
|
930 top: -500px; |
|
931 width: 100%; |
|
932 z-index: 10; |
|
933 } |
|
934 |
|
935 .proj-img i { |
|
936 background: none repeat scroll 0 0 #493636; |
|
937 display: block; |
|
938 font-style: normal; |
|
939 height: 100%; |
|
940 left: 0; |
|
941 opacity: 0; |
|
942 position: absolute; |
|
943 text-indent: -9000px; |
|
944 top: 0; |
|
945 width: 100%; |
|
946 z-index: 9; |
|
947 } |
|
948 |
|
949 .quote-nav-left, .quote-nav-right { |
|
950 float: left; |
|
951 } |
|
952 |
|
953 .quote-slider { |
|
954 margin-left: 35px; |
|
955 max-width: 100%; |
|
956 } |
|
957 |
|
958 .panel { |
|
959 width: 100%; |
|
960 } |
|
961 |
|
962 p.quoter { |
|
963 color: #493636; |
|
964 font: 700 10px 'Source Sans Pro',Arial,Helvetica,sans-serif; |
|
965 padding: 0 0 7px; |
|
966 text-transform: uppercase; |
|
967 margin-top: -13px; |
|
968 } |
|
969 |
|
970 .quote-nav-left a, .quote-nav-right a { |
|
971 display: block; |
|
972 text-align: center; |
|
973 text-decoration: none; |
|
974 } |
|
975 .quote-nav-right a { |
|
976 background: url("../images/bg-coda-right.jpg") no-repeat scroll 0 0 transparent; |
|
977 height: 19px; |
|
978 margin-left: -19px; |
|
979 margin-top: 10px; |
|
980 padding: 0; |
|
981 text-indent: -9000px; |
|
982 width: 19px; |
|
983 } |
|
984 |
|
985 .quote-nav-left a { |
|
986 background: url("../images/bg-coda-left.jpg") no-repeat scroll 0 0 transparent; |
|
987 height: 19px; |
|
988 margin-left: 0; |
|
989 margin-top: 30px; |
|
990 padding: 0; |
|
991 text-indent: -9000px; |
|
992 width: 19px; |
|
993 } |
|
994 |
|
995 .twitter_small { |
|
996 width:46px; |
|
997 height:46px; |
|
998 float:left; |
|
999 margin-top: -8px; |
|
1000 background:url(../images/bg-twitter.png) no-repeat left top; |
|
1001 } |
|
1002 |
|
1003 .twitter_small a { |
|
1004 text-indent:-9000px; |
|
1005 text-decoration:none; |
|
1006 width:46px; |
|
1007 height:46px; |
|
1008 display:block; |
|
1009 } |
|
1010 |
|
1011 .twitter2_small { |
|
1012 width:16px; |
|
1013 height:16px; |
|
1014 float:left; |
|
1015 margin: 5px 0 15px 15px; |
|
1016 background:url(../images/bg-twitter2.png) no-repeat left top; |
|
1017 } |
|
1018 |
|
1019 .twitter2_small a { |
|
1020 text-indent:-9000px; |
|
1021 text-decoration:none; |
|
1022 width:16px; |
|
1023 height:16px; |
|
1024 display:block; |
|
1025 } |
|
1026 .twitter2_small a:hover { |
|
1027 background:url(../images/bg-twitter2Hover.png) no-repeat left top; |
|
1028 } |
|
1029 |
|
1030 .facebook_small { |
|
1031 width:16px; |
|
1032 height:16px; |
|
1033 float:left; |
|
1034 margin: 5px 0 5px 15px; |
|
1035 background:url(../images/bg-facebook.png) no-repeat left top; |
|
1036 } |
|
1037 |
|
1038 .facebook_small a { |
|
1039 text-indent:-9000px; |
|
1040 text-decoration:none; |
|
1041 width:16px; |
|
1042 height:16px; |
|
1043 display:block; |
|
1044 } |
|
1045 |
|
1046 .facebook_small a:hover { |
|
1047 background:url(../images/bg-facebookHover.png) no-repeat left top; |
|
1048 } |
|
1049 |
|
1050 .dribble_small { |
|
1051 width:16px; |
|
1052 height:16px; |
|
1053 float:left; |
|
1054 margin: 5px 0 15px 15px; |
|
1055 background:url(../images/bg-dribble.png) no-repeat left top; |
|
1056 } |
|
1057 |
|
1058 .dribble_small a { |
|
1059 text-indent:-9000px; |
|
1060 text-decoration:none; |
|
1061 width:16px; |
|
1062 height:16px; |
|
1063 display:block; |
|
1064 } |
|
1065 |
|
1066 .dribble_small a:hover { |
|
1067 background:url(../images/bg-dribbleHover.png) no-repeat left top; |
|
1068 } |
|
1069 |
|
1070 .flickr_small { |
|
1071 width:16px; |
|
1072 height:16px; |
|
1073 float:left; |
|
1074 margin: 5px 0 15px 15px; |
|
1075 background:url(../images/bg-flickr.png) no-repeat left top; |
|
1076 } |
|
1077 |
|
1078 .flickr_small a { |
|
1079 text-indent:-9000px; |
|
1080 text-decoration:none; |
|
1081 width:16px; |
|
1082 height:16px; |
|
1083 display:block; |
|
1084 } |
|
1085 |
|
1086 .flickr_small a:hover { |
|
1087 background:url(../images/bg-flickrHover.png) no-repeat left top; |
|
1088 } |
|
1089 |
|
1090 .vimeo_small { |
|
1091 width:17px; |
|
1092 height:16px; |
|
1093 float:left; |
|
1094 margin: 5px 0 15px 15px; |
|
1095 background:url(../images/bg-vimeo.png) no-repeat left top; |
|
1096 } |
|
1097 |
|
1098 .vimeo_small a { |
|
1099 text-indent:-9000px; |
|
1100 text-decoration:none; |
|
1101 width:17px; |
|
1102 height:16px; |
|
1103 display:block; |
|
1104 } |
|
1105 |
|
1106 .vimeo_small a:hover { |
|
1107 background:url(../images/bg-vimeoHover.png) no-repeat left top; |
|
1108 } |
|
1109 |
|
1110 ul.list { |
|
1111 display:block; |
|
1112 position:relative; |
|
1113 padding:0px; |
|
1114 margin-bottom:-1px; |
|
1115 list-style-type: none; |
|
1116 } |
|
1117 ul.float { |
|
1118 float:left; |
|
1119 width:50%; |
|
1120 list-style-type: none; |
|
1121 } |
|
1122 ul.list li { |
|
1123 padding:4px 0px 5px 0; |
|
1124 width:auto; |
|
1125 border-bottom:1px solid #ddd; |
|
1126 } |
|
1127 ul.float li { |
|
1128 margin-right:20px; |
|
1129 } |
|
1130 ul.bullet li { |
|
1131 padding:4px 0px 5px 21px; |
|
1132 background:url(../images/list-dot.jpg) no-repeat 1px 13px; |
|
1133 } |
|
1134 ul.check li { |
|
1135 padding:4px 0px 5px 21px; |
|
1136 background:url(../images/list-check.png) no-repeat 1px 11px; |
|
1137 } |
|
1138 |
|
1139 .post { |
|
1140 margin-bottom: 15px; |
|
1141 } |
|
1142 .post h3 { |
|
1143 border-bottom: 1px solid #D3D3D3; |
|
1144 padding-bottom: 9px; |
|
1145 } |
|
1146 |
|
1147 .post h3 a { |
|
1148 font-weight: normal; |
|
1149 text-decoration: none; |
|
1150 } |
|
1151 |
|
1152 .post p.line2nd { |
|
1153 color: #7F7F7F; |
|
1154 font-size: 15px; |
|
1155 line-height: normal; |
|
1156 margin-bottom: 11px; |
|
1157 } |
|
1158 |
|
1159 |
|
1160 |
|
1161 /* #Media Queries |
|
1162 ================================================== */ |
|
1163 |
|
1164 /* Smaller than standard 960 (devices and browsers) */ |
|
1165 |
|
1166 /* Smaller than standard 960 (devices and browsers) */ |
|
1167 @media only screen and (max-width: 1024px) { |
|
1168 |
|
1169 .title { |
|
1170 position: relative; |
|
1171 } |
|
1172 |
|
1173 #intro { |
|
1174 height: 500px; |
|
1175 } |
|
1176 |
|
1177 .title { |
|
1178 padding-top: 20px; |
|
1179 } |
|
1180 |
|
1181 h1 { |
|
1182 font-size: 100px !important; |
|
1183 margin-bottom: 60px; |
|
1184 } |
|
1185 h1.small { |
|
1186 font-size: 80px !important; |
|
1187 margin-bottom: 20px; |
|
1188 } |
|
1189 |
|
1190 } |
|
1191 |
|
1192 |
|
1193 @media only screen and (max-width: 959px) { |
|
1194 |
|
1195 .title { |
|
1196 position: relative; |
|
1197 } |
|
1198 |
|
1199 } |
|
1200 |
|
1201 /* Tablet Portrait size to standard 960 (devices and browsers) */ |
|
1202 @media only screen and (min-width: 768px) and (max-width: 959px) { |
|
1203 #contact { |
|
1204 height: 1200px; |
|
1205 } |
|
1206 } |
|
1207 |
|
1208 /* All Mobile Sizes (devices and browser) */ |
|
1209 @media only screen and (max-width: 767px) { |
|
1210 nav a { |
|
1211 font-size: 12px !important; |
|
1212 } |
|
1213 nav ul li { |
|
1214 padding-left: 15px; |
|
1215 padding-right: 15px; |
|
1216 line-height: 33px; |
|
1217 } |
|
1218 nav ul { |
|
1219 padding-top: 0; |
|
1220 } |
|
1221 } |
|
1222 |
|
1223 /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ |
|
1224 @media only screen and (min-width: 480px) and (max-width: 767px) { |
|
1225 nav a { |
|
1226 font-size: 12px !important; |
|
1227 } |
|
1228 h1 { |
|
1229 font-size: 70px !important; |
|
1230 margin-bottom: 20px; |
|
1231 } |
|
1232 |
|
1233 h1.small { |
|
1234 font-size: 40px !important; |
|
1235 margin-bottom: 20px; |
|
1236 } |
|
1237 |
|
1238 .title p { |
|
1239 font-size: 20px !important; |
|
1240 line-height: 28px; |
|
1241 } |
|
1242 |
|
1243 nav ul li { |
|
1244 padding-left: 10px; |
|
1245 padding-right: 10px; |
|
1246 } |
|
1247 } |
|
1248 |
|
1249 /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ |
|
1250 @media only screen and (max-width: 479px) { |
|
1251 |
|
1252 #intro { |
|
1253 height: 430px; |
|
1254 } |
|
1255 |
|
1256 .title { |
|
1257 position: relative; |
|
1258 padding-top: 30px; |
|
1259 } |
|
1260 |
|
1261 .intro-line { |
|
1262 display: none; |
|
1263 } |
|
1264 |
|
1265 h1 { |
|
1266 font-size: 60px !important; |
|
1267 margin-bottom: 20px; |
|
1268 } |
|
1269 |
|
1270 h1.small { |
|
1271 font-size: 30px !important; |
|
1272 margin-bottom: 20px; |
|
1273 } |
|
1274 |
|
1275 .title p { |
|
1276 font-size: 18px !important; |
|
1277 line-height: 28px; |
|
1278 } |
|
1279 |
|
1280 |
|
1281 nav ul li { |
|
1282 padding-left: 5px; |
|
1283 padding-right: 5px; |
|
1284 } |
|
1285 |
|
1286 } |
|
1287 |
|
1288 |
|
1289 /* #Font-Face |
|
1290 ================================================== */ |
|
1291 /* This is the proper syntax for an @font-face file |
|
1292 Just create a "fonts" folder at the root, |
|
1293 copy your FontName into code below and remove |
|
1294 comment brackets */ |
|
1295 |
|
1296 /* @font-face { |
|
1297 font-family: 'FontName'; |
|
1298 src: url('../fonts/FontName.eot'); |
|
1299 src: url('../fonts/FontName.eot?iefix') format('eot'), |
|
1300 url('../fonts/FontName.woff') format('woff'), |
|
1301 url('../fonts/FontName.ttf') format('truetype'), |
|
1302 url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); |
|
1303 font-weight: normal; |
|
1304 font-style: normal; } |
|
1305 */ |
|