test.css

Julien Malik, 2012-06-12 10:56 AM

Download (17.2 KB)

 
1
 /* ----------------------------------------------
2
        Template Name : PageOne
3
        Template Code : S-0032
4
        Version : 1.0
5
        Author : Erwin Aligam
6
        Author URI : http://www.styleshout.com/
7
        Last Date Modified : November 28, 2011
8
 ------------------------------------------------ */
9

    
10
 /* ------------------------------------------------
11
    CUSTOM WEB FONTS
12
--------------------------------------------------*/
13
@font-face {
14
    font-family: 'MerriweatherRegular';
15
    src: url('fonts/merriweather-regular-webfont.eot');
16
    src: url('fonts/merriweather-regular-webfont.eot?#iefix') format('embedded-opentype'),
17
         url('fonts/merriweather-regular-webfont.woff') format('woff'),
18
         url('fonts/merriweather-regular-webfont.ttf') format('truetype'),
19
         url('fonts/merriweather-regular-webfont.svg#MerriweatherRegular') format('svg');
20
    font-weight: normal;
21
    font-style: normal;
22
}
23
@font-face {
24
    font-family: 'MerriweatherBold';
25
    src: url('fonts/merriweather-bold-webfont.eot');
26
    src: url('fonts/merriweather-bold-webfont.eot?#iefix') format('embedded-opentype'),
27
         url('fonts/merriweather-bold-webfont.woff') format('woff'),
28
         url('fonts/merriweather-bold-webfont.ttf') format('truetype'),
29
         url('fonts/merriweather-bold-webfont.svg#MerriweatherBold') format('svg');
30
    font-weight: normal;
31
    font-style: normal;
32
}
33

    
34
/* --------------------------------------
35
    RESET
36
----------------------------------------*/
37
html, body, div, span, applet, object, iframe,
38
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
39
a, abbr, acronym, address, big, cite, code,
40
del, dfn, em, img, ins, kbd, q, s, samp,
41
small, strike, strong, sub, sup, tt, var,
42
b, u, i, center,
43
dl, dt, dd, ol, ul, li,
44
fieldset, form, label, legend,
45
table, caption, tbody, tfoot, thead, tr, th, td,
46
article, aside, canvas, details, embed,
47
figure, figcaption, footer, header, hgroup,
48
menu, nav, output, ruby, section, summary,
49
time, mark, audio, video {
50
        margin: 0;
51
        padding: 0;
52
        border: 0;
53
        font-size: 100%;
54
        font: inherit;
55
        vertical-align: baseline;
56
}
57
/* HTML5 display-role reset for older browsers */
58
article, aside, details, figcaption, figure,
59
footer, header, hgroup, menu, nav, section {
60
        display: block;
61
}
62
body {
63
        line-height: 1;
64
}
65
ol, ul {
66
        list-style: none;
67
}
68
blockquote, q {
69
        quotes: none;
70
}
71
blockquote:before, blockquote:after,
72
q:before, q:after {
73
        content: '';
74
        content: none;
75
}
76
table {
77
        border-collapse: collapse;
78
        border-spacing: 0;
79
}
80

    
81
/* -------------------------------------------------------
82
    GENERAL
83
---------------------------------------------------------- */
84
html { overflow-y: scroll; }
85
body {
86
    font-family: Georgia, Serif;
87
    font-size: 16px;
88
    line-height: 25px;
89
    color: #3B3B3B;
90
    background: /* url(../images/25-pixel-baseline.png) left top repeat, */ url(../images/bg.png) left top repeat ;
91
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);
92
}
93

    
94
p { margin-bottom: 25px; }
95
p.intro { font-size: 18px; }
96

    
97
/* links */
98
a:link, a:visited {
99
    color: #285935;
100
    text-decoration: none;
101
    outline: 0;
102
}
103
a:hover, a:focus, a:active {
104
    color: #5E1F00;
105
}
106

    
107
/* Headers */
108
h1, h2, h3, h4, h5, h6 {
109
    font-family: 'MerriweatherBold', Serif;
110
}
111
h1 {
112
    font-size: 40px;
113
    line-height: 50px;
114
    letter-spacing: -0.9px;
115
    color: #046416;
116
    margin-left: -2px;
117
}
118
h2 {
119
    font-size: 22px;
120
    line-height: 25px;
121
    margin-top: 10px;
122
    margin-bottom: 15px;
123
}
124
h3 {
125
    font-size: 18px;
126
    line-height: 25px;
127
}
128

    
129
/* Lists */
130
ul, ol {
131
        margin-bottom: 25px;
132
        padding: 0 20px;
133
}
134
ul { list-style: disc; }
135
ol { list-style: decimal; }
136

    
137
dl { margin-bottom: 25px; }
138
dt {
139
    font-weight: bold;
140
    color: #046416;
141
}
142
dd {
143
    padding-left: 20px;
144
}
145

    
146
blockquote {
147
        margin: 25px 0;
148
         padding-left: 40px;
149
    padding-right: 30px;
150
    background: url(../images/quote.png) no-repeat 3px 0;
151
        font-weight: normal;
152
        font-size: 18px;
153
        font-style: italic;
154
}
155
input, select {
156
    vertical-align: middle;
157
}
158

    
159
strong, b {
160
    font-weight: bold; 
161
}
162
pre {
163
    white-space: pre;
164
    white-space: pre-wrap;
165
    word-wrap: break-word;
166
}
167
abbr[title], dfn[title] {
168
    border-bottom: 1px dotted;
169
    cursor: help;
170
}
171
mark {
172
    background-color: #FDD2B3;
173
}
174

    
175
/* Clearing and Alignment Classes */
176
.align-left {
177
    float: left;
178
}
179
.align-right {
180
    float: right;
181
}
182
.clearfix:after {
183
    visibility: hidden;
184
    display: block;
185
    font-size: 0;
186
    content: " ";
187
    clear: both;
188
    height: 0;
189
}
190
.ie7 .clearfix { zoom: 1; } /* IE7 */
191

    
192
/* ------------------------------------------------------
193
    STRUCTURE
194
--------------------------------------------------------- */
195
#header-wrap {
196
    background: url(../images/header-bg.png);
197
    width: 100%;
198
    height: 70px;
199
    z-index: 99999;
200
    position: fixed;
201
    top: 0;
202
    left: 0;
203
}
204
header {
205
    position: relative;
206
    width: 940px;
207
    height: 70px;
208
    margin: 0 auto;
209
}
210
.content-wrap {
211
    width: 940px;
212
    margin: 0 auto;
213
}
214
.content-wrap section {
215
    position: relative;
216
    padding: 125px 0 25px 0;
217
    background: url(../images/section-sep.png) repeat-x left 25px;
218
}
219
.content-wrap section section {
220
    background: none;
221
    margin: 0;
222
}
223
.content-wrap section .row {
224
    clear: both;
225
    overflow: hidden;
226
    margin-bottom: 25px;
227
}
228
.content-wrap section .row .col {
229
    float: left;
230
    margin: 0;
231
    padding: 0;
232
    width: 290px;
233
}
234
.content-wrap section .row .mid  {
235
    margin-left: 35px;
236
    margin-right: 35px;
237
}
238
.content-wrap section .no-bottom-margin{
239
    margin-bottom: 0;
240
}
241
.content-wrap section .primary {
242
    float: left;
243
    width: 620px;
244
}
245
.content-wrap section .primary p.intro {
246
    /* margin: 15px 0 10px 0; */
247
    margin: 15px 0 25px 0;
248
}
249
.content-wrap section aside {
250
    float: right;
251
    width: 285px;
252
}
253
.content-wrap section aside h2 {
254
    margin: 12.5px 0 12.5px 0;
255
}
256

    
257
.content-wrap section aside ul.link-list {
258
    font-size: 16px;
259
    margin: 0 0 25px 0;
260
    padding: 0;
261
    list-style: none;
262
    background: url(../images/section-sep.png) repeat-x left top;
263
}
264
.content-wrap section aside ul.link-list li {
265
    background: url(../images/section-sep.png) repeat-x left bottom;
266
    padding-left: 3px;
267
}
268
.content-wrap section aside ul.link-list li a {
269
    display: block;
270
    color: #3B3B3B;
271
    padding-top: 12.5px;
272
    padding-bottom: 12.5px;
273
}
274
.content-wrap section aside ul.link-list li a:hover,
275
.content-wrap section aside ul.link-list li a:focus,
276
.content-wrap section aside ul.link-list li a:active {
277
    color: #285935;
278
}
279
.content-wrap section aside .testimonials {
280
    margin: 0 0 25px 0;
281
}
282
.content-wrap section aside .testimonials blockquote {
283
    font-style: italic;
284
    font-size: 16px;
285
    padding-left: 27px;
286
    background: url(../images/quote-open.png) no-repeat left 5px;
287
    margin: 12.5px 0;
288
}
289
.content-wrap section aside .testimonials blockquote p {
290
    margin-bottom: 0;
291
}
292
.content-wrap section aside .testimonials blockquote cite {
293
    font-style: normal;
294
    text-transform: uppercase;
295
    font-size: 11px;
296
}
297

    
298
.content-wrap section .back-to-top {
299
    display: block;
300
    position: absolute;
301
    bottom: -65px;
302
    right: 10px;
303
    height: 43px;
304
    width: 43px;
305
    background: url(../images/back-to-top.png);
306
    text-indent: -9999px;
307
    z-index: 9999;
308
}
309
.ie7 .content-wrap section .back-to-top {
310
    bottom: -70px;
311
}
312

    
313
footer {
314
    position: relative;
315
    background: url(../images/section-sep.png) repeat-x left 25px;
316
    width: 940px;
317
    margin: 0 auto;
318
    padding-top: 125px;
319
}
320

    
321
/* -------------------------------------------
322
    Header
323
-------------------------------------------- */
324

    
325
/* Logo */
326
header hgroup {
327
    position: absolute;
328
    background: url(../images/logo.png) no-repeat;
329
    height: 31px;
330
    width: 312px;
331
    display: block;
332
    top: 25px;
333
    left: 0;
334
}
335
header hgroup h1 a {
336
    text-indent: -9999em;
337
    display: block;
338
    height: 31px;
339
    width: 130px;
340
}
341
header hgroup h3  {
342
    text-indent: -9999em;
343
    height: 0;
344
}
345

    
346
/* Main Navigation */
347
header nav {
348
    float: right;
349
    margin-top: 25px;
350
}
351
header nav ul {
352
    font: bold 12px/25px  Helvetica, Arial, Sans-serif;
353
    margin-right: -5px;
354
    padding: 0;
355
    list-style: none;
356
}
357
header nav ul li {
358
    float: left;
359
}
360
header nav ul a:link, header nav ul a:visited {
361
    color: #c5c4c4;
362
    margin-right: 20px;
363
    text-shadow: 0 -1px 0 rgba(10, 10, 10, 1);
364
}
365
header nav ul a:hover,
366
header nav ul a:active {
367
    color: #17a231
368
}
369

    
370
/* -----------------------------------------
371
    Main Section
372
------------------------------------------ */
373
section#main {
374
    width: 940px;
375
    background: none;
376
}
377
section#main h1 {
378
    margin-top: 10px;
379
    margin-bottom: 15px;
380
}
381
section#main .intro-box {
382
    float:left;
383
    width:460px;
384
    min-height: 300px;
385
}
386
section#main .row .col h2 {
387
    margin-top: 15px;
388
    margin-bottom: 10px;
389
}
390

    
391
/* Slider */
392
.slider-wrapper {
393
    float: right;
394
    position: relative;
395
    background: url(../images/slider.png) no-repeat;
396
    margin-top: 30px;
397
    margin-bottom: 13px;
398
    width: 420px;
399
    height: 234px;
400
}
401
.slider-wrapper #slider {
402
    position: absolute;
403
    top: 18px;
404
    left: 18.5px;
405
    width: 383px; /* Make sure your images are the same size */
406
    height: 198px; /* Make sure your images are the same size *//
407
}
408
.slider-wrapper .nivoSlider {
409
        position: relative;
410
        background: #fff url(../images/loading.gif) no-repeat 50% 50%;
411
}
412
.slider-wrapper .nivoSlider img {
413
        position: absolute;
414
        top: 0px;
415
        left: 0px;
416
        display: none;
417
}
418
.slider-wrapper .nivoSlider a {
419
        border: 0;
420
        display: block;
421
}
422
.slider-wrapper .nivo-controlNav {
423
        position: absolute;
424
        left: 50%;
425
        bottom: -45px;
426
    margin-left: -30px ; /* Tweak this to center bullets */
427
}
428
.slider-wrapper .nivo-controlNav a {
429
        display: block;
430
        width: 13px;
431
        height: 14px;
432
        background: url(../images/bullets.png) no-repeat;
433
        text-indent: -9999px;
434
        border: 0;
435
        margin-right: 10px;
436
        float: left;
437
}
438
.slider-wrapper .nivo-controlNav a.active {
439
        background-position: 0 -14px;
440
}
441
.slider-wrapper .nivo-directionNav a {
442
        display: block;
443
        width: 33px;
444
        height: 52px;
445
        background: url(../images/arrows.png) no-repeat;
446
        text-indent: -9999px;
447
        border: 0;
448
}
449
.slider-wrapper a.nivo-nextNav {
450
        background-position: -33px 0;
451
        right: -50px;
452
    top: 70px;
453
}
454
.slider-wrapper a.nivo-prevNav {
455
        left: -48.5px;
456
    top: 70px;
457
}
458
.slider-wrapper .nivo-caption {
459
    /* font-family: Helvetica, Arial, sans-serif; */
460
    padding: 5px 10px;
461
    width: 363px;
462
    font-size: 12px;
463
    text-shadow: none;
464
    text-align: center;
465
}
466
.slider-wrapper .nivo-caption p {
467
    text-shadow: none;
468
    color: #CBCBCB;
469
}
470
.slider-wrapper .nivo-caption a {
471
    color: #66CC33;
472
    /* border-bottom: 1px dotted #fff; */
473
}
474
.slider-wrapper .nivo-caption a:hover {
475
    color:#fff;
476
}
477

    
478
/* -----------------------------------------
479
   Services
480
------------------------------------------- */
481
section#services h1 {
482
   margin: 0 0 25px 0;
483
}
484
section#services .row .col img.align-left {
485
    margin-top: 13px;
486
    margin-right: 12px;
487
}
488

    
489
/* ---------------------------------------
490
    Portfolio
491
----------------------------------------- */
492
section#portfolio ul.folio-list {
493
    margin: 25px 0;
494
    padding: 0;
495
    width: 970px;
496
    list-style: none;
497
}
498
section#portfolio ul.folio-list li {
499
    float: left;
500
    margin-right: 29px;
501
    margin-bottom: 10px;
502
    margin-top: 10px;
503
    width: 294px;
504
    height: 230px;
505
    max-height: 250px;
506
}
507
section#portfolio ul.folio-list li .thumb {
508
    margin: 0 0 5px 0;
509
    padding: 0;
510
    background: url(../images/thumb-frame.png) no-repeat;
511
    width: 294px;
512
    height: 205px;
513
}
514
section#portfolio ul.folio-list li .thumb img {
515
    margin-top: 18px;
516
    margin-left: 18px;
517
}
518
section#portfolio ul.folio-list li h3.entry-title {
519
    font-size: 14px;
520
    line-height: 25px;
521
    margin-left: 16px;
522
}
523

    
524
/* ------------------------------------------------
525
    About
526
------------------------------------------------ */
527
section#about-us .primary .row .first {
528
    margin-right: 35px;
529
}
530
section#about-us .primary ul.the-team {
531
    margin: 25px 0 25px 0;
532
    padding: 0;
533
    list-style: none;
534
}
535
section#about-us .primary ul.the-team li {
536
    float: left;
537
    width: 290px;
538
    height: 150px;
539
}
540
section#about-us .primary ul.the-team li a {
541
    color: #3B3B3B;
542
}
543
section#about-us .primary ul.the-team li a:hover,
544
section#about-us .primary ul.the-team li a:focus,
545
section#about-us .primary ul.the-team li a:active {
546
    color: #285935;
547
}
548

    
549
section#about-us .primary ul.the-team li .thumbnail {
550
    position: relative;
551
    float: left;
552
    background: url(../images/thumb-bg.png) no-repeat;
553
    width: 120px;
554
    height: 150px;
555
    margin-right: 12px;
556
}
557
section#about-us .primary ul.the-team li .thumbnail img {
558
    position: absolute;
559
    top: 19px;
560
    left: 18px;
561
}
562
section#about-us .primary ul.the-team li p {
563
    font-size: 14px;
564
    line-height: 20px;
565
    margin: 5px 0 0 0;
566
}
567
section#about-us .primary ul.the-team li p.mname {
568
    font-family: "MerriweatherBold", Serif;
569
    margin: 10px 0 0 0;
570
}
571
section#about-us .primary ul.the-team li.odd {
572
    margin-right: 35px;
573
}
574

    
575
section#about-us aside .download-btn {
576
    background: url(../images/btn-bg.png);
577
    display: block;
578
    width: 250px;
579
    height: 53px;
580
    border: 1px solid #066a19;
581
    margin: 0 0 20px 0;
582
    text-align: center;
583
    line-height: 55px;
584

    
585
    font-family: "MerriweatherBold", Georgia, Serif;
586
    font-size: 20px;
587
    color: #ffffff;
588
    text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
589

    
590
    box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
591
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
592
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
593
}
594

    
595
/* ---------------------------------------------------
596
    Contact
597
----------------------------------------------------- */
598
section#contact .primary form {
599
    width: 500px;
600
    background: url(../images/form-bg.png);
601
    margin: 35px 0 25px 0;
602
    padding: 50px 40px 50px 40px;
603
}
604
section#contact .primary form p {
605
        font-family: "MerriweatherBold", Serif;
606
    font-size: 14.5px;
607
        color: #046416;
608
}
609
section#contact .primary form label {
610
    display: block;
611
    font-family: "MerriweatherBold", Serif;
612
    font-size: 14px;
613
    line-height: 25px;
614
    margin: 0 0 5px 0;
615
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);
616
}
617
section#contact .primary form label span {
618
    color: #046416;
619
}
620
section#contact .primary form input,
621
section#contact .primary form select,
622
section#contact .primary form textarea {
623
    margin-bottom: 20px;
624
        padding: 9px 10px;
625
    color: #6A6969;
626
    background: #cbcbcb;
627
        border-width: 1px;
628
        border-style: solid;
629
          border-color: #b8b8b8 #EBEBEB #EBEBEB #b8b8b8;
630
        font: 15px Helvetica, Arial, Sans-serif;
631

    
632
    -moz-box-shadow:inset 0 3px 1px rgba(0, 0, 0, .1);
633
    -webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, .1);
634
    box-shadow:inset 0 1px 3px rgba(0, 0, 0, .1);
635
}
636
section#contact .primary form textarea {
637
    height: 325px;
638
    margin-bottom: 0;
639
}
640
section#contact .primary form input:focus,
641
section#contact .primary form select:focus,
642
section#contact .primary form textarea:focus {
643
        background: #F0F0F0;
644
}
645
section#contact .primary form input.button {
646
           height: 38px;
647
        margin: 5px 0;
648
        background: #1F8532 url(../images/btn-bg.png);
649
    border: 1px solid #066a19;
650
    font-family: "MerriweatherBold", Georgia, Serif;
651
    font-size: 14px;
652
    color: #ffffff;
653
    cursor: pointer;
654
    text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
655

    
656
    box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
657
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
658
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
659
}
660
.ie7 section#contact .primary form input.button {
661
    padding: 0 2px;
662
}
663
#name, #email, #message, #subject, #website {
664
        width: 475px;
665
}
666

    
667
section#contact aside .social li a {
668
    padding-left: 35px;
669
}
670
section#contact aside .social li.facebook a {
671
    background: url(../images/social/facebook.png) no-repeat left 11px;
672
}
673
section#contact aside .social li.googleplus a {
674
    background: url(../images/social/googleplus.png) no-repeat left 11px;
675
}
676
section#contact aside .social li.twitter a {
677
    background: url(../images/social/twitter.png) no-repeat left 11px;
678
}
679
section#contact aside .social li.dribble a {
680
    background: url(../images/social/dribble.png) no-repeat left 11px;
681
}
682
section#contact aside .social li.linkedin a {
683
    background: url(../images/social/linkedin.png) no-repeat left 11px;
684
}
685
section#contact aside .social li.delicious a {
686
    background: url(../images/social/delicious.png) no-repeat left 11px;
687
}
688
section#contact aside .social li.flickr a {
689
    background: url(../images/social/flickr.png) no-repeat left 11px;
690
}
691

    
692
/* ----------------------------------------------------
693
    Footer
694
----------------------------------------------------- */
695
footer p.footer-text {
696
    font-family: "MerriweatherRegular", Serif;
697
    font-size: .75em;
698
    padding: 0 10px;
699
    margin-bottom: 0;
700
    clear: both;
701
}
702
footer .footer-content {
703
    position: relative;
704
    width: 900px;
705
    top: -105px;
706
}
707
footer ul.footer-menu {
708
    float: left;
709
    margin: 20px 0 5px -3px;
710
    padding: 0;
711
    list-style: none;
712
}
713
footer  ul.footer-menu li {
714
    float: left;
715
}
716
footer  ul.footer-menu li a {
717
    display: block;
718
    font-family: "MerriweatherBold", Serif;
719
    font-size: .75em;
720
    line-height: 1em;
721
    color: #3B3B3B;
722
    padding: 1px 12px;
723
    border-left:  1px  solid #ADADAD;
724
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);
725
}
726
footer  ul.footer-menu li a:hover,
727
footer  ul.footer-menu li a:focus,
728
footer  ul.footer-menu li a:active {
729
    color: #285935;
730
}
731
footer  ul.footer-menu li.rss-feed a {
732
    background: url(../images/rss.png) no-repeat right 0;
733
    padding-right: 20px;
734
}
735
footer  ul.footer-menu li:first-child a {
736
    border: none;
737
}
738

    
739