source: main/ngren.theme/trunk/ngren/theme/ngren_theme/css/style.css @ 10190

Last change on this file since 10190 was 10190, checked in by uli, 11 years ago

Add original theme as delivered by Fafalter.

File size: 14.3 KB
Line 
1/** BASE **/
2body {
3        padding-top: 20px;
4        padding-bottom: 60px;
5        background-color:#f4f4f4;
6        /* background-image: url(../img/p6.png); */
7        background-position: 0 0;
8        background-repeat: repeat;
9}
10
11body, h1, h2, h3, h4, h4, h6 {
12        font-family: 'Open Sans', sans-serif;
13}
14
15h3 {
16        color:#006633;
17        font-size:22.5px;
18}
19
20hr {
21        margin:30px 0;
22}
23
24select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
25        height:16px;
26}
27
28/** COMMON **/
29.border-radius {
30        -webkit-border-radius: 5px;
31        -moz-border-radius: 5px;
32        border-radius: 5px;
33}
34
35.center {
36        text-align:center;
37}
38
39.relative {
40        position:relative;
41}
42
43/** GRADIENT MODULES **/
44.green-gradient {
45        background-color: #005522;
46        background-image: -moz-linear-gradient(top, #006633, #117744);
47        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#117744));
48        background-image: -webkit-linear-gradient(top, #006633, #117744);
49        background-image: -o-linear-gradient(top, #006633, #117744);
50        background-image: linear-gradient(to bottom, #006633, #117744);
51        background-repeat: repeat-x;
52        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff006633', endColorstr='#ff117744', GradientType=0);
53}
54
55.gradient-radius-module {
56        background-color: #005522;
57        background-image: -moz-linear-gradient(top, #FFFFFF, #F2F2F2);
58        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#F2F2F2));
59        background-image: -webkit-linear-gradient(top, #FFFFFF, #F2F2F2);
60        background-image: -o-linear-gradient(top, #FFFFFF, #F2F2F2);
61        background-image: linear-gradient(to bottom, #FFFFFF, #F2F2F2);
62        background-repeat: repeat-x;
63        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffFFFFFF', endColorstr='#ffF2F2F2', GradientType=0);
64
65        -moz-border-radius:5px;
66        -webkit-border-radius:5px;
67        border-radius:5px;
68
69        border:1px solid #D4D4D4;
70}
71
72.white-background {
73        background:#fff;
74        -webkit-border-bottom-right-radius: 5px;
75        -webkit-border-bottom-left-radius: 5px;
76        -moz-border-radius-bottomright: 5px;
77        -moz-border-radius-bottomleft: 5px;
78        border-bottom-right-radius: 5px;
79        border-bottom-left-radius: 5px;
80}
81
82/** STRUCTURE **/
83
84.left-col {
85        width:680px;
86        float:left;
87}
88
89.ie7 .left-col,
90.ie8 .left-col {
91        width: 100%;
92}
93
94.right-col {
95        width:300px;
96        float:right;
97}
98
99.ie7 .right-col,
100.ie8 .right-col {
101        width: 100%;
102}
103
104.ie7 .row-fluid .span6 {
105        width:40%;
106}
107
108/** Header **/
109
110#header-head {
111        height:130px;
112}
113
114#user-options {
115        float:right;
116        padding:10px 20px;
117}
118
119#user-options ul {
120        margin:0;
121}
122
123#user-options ul li {
124        list-style:none;
125        display:inline;
126}
127
128#logo-container {
129        height:90px;
130        margin:20px;
131        text-align:center;
132        float:left;
133}
134
135.ie8 #logo-container,
136.ie8 #logo-container h1,
137.ie7 #logo-container,
138.ie7 #logo-container h1 {
139        width:70%;
140}
141
142#logo-container #logo {
143        float: left;
144        margin: 5px;
145        width: 110px;
146}
147
148#logo-container h1 {
149        float: left;
150        font-size: 27px;
151        position: relative;
152        top: -7px;
153        text-align:left;
154        margin-left:10px;
155}
156
157#logo-container h1 a {
158        color:#444;
159}
160
161#logo-container h1 a:hover {
162        text-decoration:none;
163}
164
165/** Navigation **/
166.navbar .navbar-inner {
167        padding: 0;
168        background-color:inherit;
169        box-shadow:none;
170}
171
172.navbar .nav-container {
173        width:100%;
174        border-top:1px solid #ccc;
175}
176
177.navbar .nav > li > a {
178        border-bottom:3px solid rgba(0,0,0,0);
179}
180
181.navbar .nav > li > a:hover, .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
182        border-bottom:3px solid #006633;
183        background-image:none;
184        background-color:inherit;
185        box-shadow:none;
186}
187
188.navbar .nav li a {
189        font-weight: bold;
190        text-align: left;
191        border-left: 1px solid rgba(255,255,255,.75);
192        border-right: 1px solid rgba(0,0,0,.1);
193}
194
195.navbar-form {
196        bottom: 8px;
197        position: absolute;
198        right: 8px;
199}
200
201.navbar-form.mobile {
202        position:relative;
203        float:right;
204        top:5px;
205        right:10px;
206}
207
208.navbar-form input[type="text"] {
209        width:200px;
210}
211
212.navbar .nav > li > .dropdown-menu:after,
213.navbar .nav > li > .dropdown-menu:before {
214        display:none;
215}
216
217.navbar .btn-navbar {
218        color:#006633;
219        font-weight:bold;
220        text-shadow:0px 1px 0px #ddd;
221        width:97%;
222        margin:10px;
223}
224
225.navbar .btn-navbar:hover {
226        color:#005522;
227}
228
229.dropdown-menu {
230        top:41px;
231        -webkit-border-radius: 0px;
232        -moz-border-radius: 0px;
233        border-radius: 0px;
234}
235
236.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
237        background-color:#006633;
238        background-image: linear-gradient(to bottom, #117744, #006633);
239}
240
241ul.nav li.dropdown:hover > ul.dropdown-menu{
242        display: block;
243}
244
245.container .navbar .container {
246        width: auto;
247}
248
249/** Containers **/
250.container {
251        margin: 0 auto;
252        max-width: 1000px;
253}
254
255.curly-shadow {
256        background:#fff;
257        margin-bottom: 24px;
258        position: relative;
259}
260
261.curly-shadow-container {
262        background:url("../img/subtle_dots.png") repeat scroll 0 0 transparent;
263        height:310px;
264}
265
266.curly-shadow:after {
267        bottom: 20px;
268        box-shadow: 6px 11px 4px rgba(0,0,0,0.2);
269        content: "";
270        height: 20px;
271        right: 5px;
272        position: absolute;
273        transform: skew(-14deg) rotate(3deg);
274        width: 70%;
275        z-index: -1;
276}
277
278.curly-shadow:before {
279        bottom: 20px;
280        box-shadow: 6px 11px 4px rgba(0,0,0,0.2);
281        content: "";
282        height: 20px;
283        left: 5px;
284        position: absolute;
285        transform: skew(-14deg) rotate(-3deg);
286        width: 70%;
287        z-index: -1;
288}
289
290/** Content Container **/
291.content-container {
292        padding:20px 40px;
293        margin-bottom:20px;
294        min-height:566px;
295        position:relative;
296}
297
298.post-social {
299        float:right;
300        margin:20px 0;
301}
302
303.post-social div {
304        display:inline;
305}
306
307.post-social .twitter {
308        margin:5px 0;
309}
310
311.post-social .facebook {
312        margin:0px;
313}
314
315.list-left,
316.list-right {
317        list-style:none;
318}
319
320.list-left li,
321.list-right li {
322        margin:10px;
323}
324
325.list-left {
326        float:left;
327}
328
329.list-right {
330        float:right;
331}
332
333/** Footer **/
334.footer {
335        border-top: 1px solid #D4D4D4;
336        float: left;
337        margin-top: 10px;
338        padding: 10px 0;
339        width: 100%;
340}
341
342.footer .section {
343        padding:0 20px;
344        float:right;
345}
346
347.footer .section ul {
348        margin:0;
349}
350
351.footer .section li.title {
352        font-weight:bold;
353}
354
355.footer .section li {
356        margin:5px 0;
357        list-style:none;
358}
359
360.footer .fb-footer {
361        padding:0;
362}
363
364.footer .tw-footer {
365        padding:0;
366}
367
368.footer .copyright {
369        margin:5px 0px;
370        color:#999;
371        float:left;
372}
373
374.footer .address {
375        color: #999999;
376        float: right;
377        margin: 5px;
378        padding:0 20px;
379}
380
381.footer .address ul {
382        margin:0;
383}
384
385.footer .address li {
386        list-style:none;
387}
388
389/** TEXT / TITLES / MESSAGES **/
390h4.title {
391        color:#006633;
392        border-bottom:3px solid #006633;
393        padding-bottom:5px;
394}
395
396
397/** MODULES **/
398/** Home option **/
399.home-option {
400        padding:20px 40px;
401        margin-bottom:20px;
402}
403
404.home-option h3 {
405        color:#006633;
406        font-weight:bold;
407        font-size:16px;
408        line-height:20px;
409}
410
411.home-option h3 a {
412        color:#006633;
413}
414
415.home-option .text {
416        height:40px;
417}
418
419.home-icon {
420        margin:5px;
421        width:78px;
422}
423
424/** Streaming **/
425.streaming {
426        padding:20px 40px;
427        margin-bottom:20px;
428        height:230px;
429        overflow:hidden;
430}
431
432.streaming li {
433        list-style:none;
434        height:110px;
435}
436
437.streaming h4 a {
438        color:#444;
439}
440
441#streaming-news {
442        height:220px;
443        overflow:hidden;
444}
445
446/** Slider **/
447.rslides {
448position: relative;
449list-style: none;
450overflow: hidden;
451width: 100%;
452padding: 0;
453margin: 0;
454}
455
456.rslides li {
457-webkit-backface-visibility: hidden;
458position: absolute;
459display: none;
460width: 100%;
461left: 0;
462top: 0;
463}
464
465.rslides li:first-child {
466position: relative;
467display: block;
468float: left;
469}
470
471.rslides img {
472display: block;
473height: auto;
474float: left;
475width: 100%;
476border: 0;
477}
478
479.rslides {
480margin: 0 auto;
481}
482
483.rslides_container {
484margin-bottom: 50px;
485position: relative;
486float: left;
487width: 100%;
488}
489
490.centered-btns_nav {
491z-index: 3;
492position: absolute;
493-webkit-tap-highlight-color: rgba(0,0,0,0);
494top: 50%;
495left: 0;
496opacity: 0.7;
497text-indent: -9999px;
498overflow: hidden;
499text-decoration: none;
500height: 61px;
501width: 38px;
502background: transparent url("../img/themes.gif") no-repeat left top;
503margin-top: -45px;
504}
505
506.centered-btns_nav:active {
507opacity: 1.0;
508}
509
510.centered-btns_nav.next {
511left: auto;
512background-position: right top;
513right: 0;
514}
515
516.centered-btns_nav:focus {
517outline: none;
518}
519
520.centered-btns_tabs {
521margin-top: 20px;
522text-align: center;
523}
524
525.centered-btns_tabs li {
526display: inline;
527float: none;
528_float: left;
529  *float: left;
530margin-right: 5px;
531}
532
533.centered-btns_tabs a {
534text-indent: -9999px;
535overflow: hidden;
536-webkit-border-radius: 15px;
537-moz-border-radius: 15px;
538border-radius: 15px;
539background: #ccc;
540background: rgba(0,0,0, .2);
541display: inline-block;
542_display: block;
543  *display: block;
544-webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
545-moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
546box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
547width: 9px;
548height: 9px;
549}
550
551.centered-btns_here a {
552background: #222;
553background: rgba(0,0,0, .8);
554}
555
556.slider {
557        height: 310px;
558        position: relative;
559        z-index: 1;
560}
561
562.slider-container {
563        position:relative;
564        height:310px;
565        margin:0px auto;
566        display:block;
567}
568
569.slider-container .slider-image-container {
570        float:right;
571        width:49%;
572        margin:30px 0;
573}
574
575.slider-container .slider-image {
576        border-bottom: 3px solid #006633;
577        border-top: 3px solid #006633;
578        height: 240px;
579}
580
581.slider-container .slider-text {
582        display: block;
583        margin:40px 0;
584        text-align: center;
585        float:left;
586        width:43%;
587}
588
589.slider-container .slider-text .highlight {
590        font-weight:bold;
591        color:#006633;
592        text-shadow:none;
593}
594
595.slider-container .slider-text h3 {
596        font-weight: bold;
597}
598
599.slider-container .slider-text h3 a {
600        color:#006633;
601}
602
603.slider-container .slider-text p {
604        font-size: 16px;
605}
606
607.centered-btns_nav {
608        -webkit-border-top-right-radius: 5px;
609        -webkit-border-bottom-right-radius: 5px;
610        -moz-border-radius-topright: 5px;
611        -moz-border-radius-bottomright: 5px;
612        border-top-right-radius: 5px;
613        border-bottom-right-radius: 5px;
614}
615
616.centered-btns_nav.next {
617        -webkit-border-top-left-radius: 5px;
618        -webkit-border-bottom-left-radius: 5px;
619        -moz-border-radius-topleft: 5px;
620        -moz-border-radius-bottomleft: 5px;
621        border-top-left-radius: 5px;
622        border-bottom-left-radius: 5px;
623
624        -webkit-border-top-right-radius: 0px;
625        -webkit-border-bottom-right-radius: 0px;
626        -moz-border-radius-topright: 0px;
627        -moz-border-radius-bottomright: 0px;
628        border-top-right-radius: 0px;
629        border-bottom-right-radius: 0px;
630}
631
632/** Partners **/
633.full-col {
634        float:left;
635        width:100%;
636}
637
638#partners-tile {
639        height:120px;
640        margin-bottom:30px;
641        padding:0px 50px;
642}
643
644#partners-tile li {
645        display: block;
646        float: left;
647        list-style: none;
648        text-align:center;
649}
650
651#partners-tile li span.title {
652        display:none;
653}
654
655#partners-tile li {
656        margin-right:6%;
657}
658
659#partners-tile li#fme {
660        margin-left:4%;
661}
662
663#partners-tile li#nuc {
664        margin-right:0;
665}
666
667
668#partners-tile li#fme img { margin:28px 0; }
669#partners-tile li#uspf img { margin:25px 0; }
670#partners-tile li#tetfund img { margin:50px 0; }
671#partners-tile li#ncc img { margin:37px 0; }
672#partners-tile li#nuc img { margin:23px 0; }
673
674
675/** Images **/
676.content-container img {
677        margin:5px;
678        border:2px solid #e0e0e0;
679}
680
681.content-container img.left-image {
682        float:left;
683        margin-left:0px;
684        margin-right:10px;
685}
686
687img.about-unique-image {
688        float:none;
689        display:block;
690        margin:20px auto;
691}
692
693/** Gallery **/
694.gallery {
695        margin:0;
696}
697
698.gallery li {
699        list-style:none;
700        display:inline;
701        cursor:pointer;
702}
703
704.gallery img:hover {
705        border:2px solid #006633;
706}
707
708.gallery li .gallery-object {
709        position:relative;
710        display:block;
711        float:left;
712}
713
714.gallery img {
715        width:180px;
716}
717
718.gallery .title {
719        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
720        bottom: 7px;
721        color: #FFFFFF;
722        font-size: 16px;
723        height: 20px;
724        left: 7px;
725        padding: 5px 0;
726        position: absolute;
727        text-align: center;
728        width: 180px;
729}
730
731/** Buttons **/
732.btn-primary {
733        color: #fff;
734        border: solid 1px #117744;
735        background: #666600;
736        background: -webkit-gradient(linear, left top, left bottom, from(#006633), to(#117744));
737        background: -moz-linear-gradient(top,  #006633,  #117744);
738        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#006633', endColorstr='#117744');
739}
740
741@media (max-width: 1200px) {
742        .left-col, .right-col {
743                width:100%;
744        }
745
746        .content-container {
747                min-height:inherit;
748        }
749
750        .footer .copyright {
751                float:none;
752        }
753}
754
755@media (max-width: 981px) {
756        .slider-container .slider-image {
757                top:0px;
758        }
759
760        #partners-tile {
761                height:140px;
762        }
763
764        #partners-tile li {
765                margin-right:1%;
766        }
767
768        #partners-tile li#fme {
769                margin-left:1%;
770        }
771
772        #partners-tile li img {
773                width:83%;
774        }
775}
776
777@media (max-width: 767px) {
778
779        /** Base **/
780        body {
781                padding-top:20px;
782        }
783
784        /** Header **/
785        .navbar .navbar-inner {
786                padding-bottom:5px;
787        }
788
789        .navbar .btn-navbar {
790                clear:right;
791                float:left;
792                margin-bottom:0px;
793        }
794
795        .nav-collapse, .nav-collapse.collapse {
796                top:7px;
797        }
798
799        /** Modules **/
800        .slider-container .slider-text p {
801                font-size:14px;
802                max-height:145px;
803        }
804
805        .slider-container .slider-text .relative {
806                padding:20px 10px;
807        }
808
809        .home-option {
810                margin-bottom:30px;
811        }
812
813        .home-option .text {
814                height:inherit;
815        }
816
817        #partners-tile {
818                height:inherit;
819        }
820
821        #partners-tile ul {
822        margin:0;
823        }
824
825        #partners-tile li {
826                width:100% !important;
827        }
828
829        #partners-tile li img {
830                width:inherit;
831        }
832
833        /** Footer **/
834        .footer .copyright {
835                display:block;
836                float:none;
837        }
838
839        .footer .section {
840                margin:20px 0;
841                float:none;
842                padding:0;
843        }
844
845        .footer .section li {
846                margin:10px 0;
847        }
848
849        .footer .address {
850                float: none;
851                margin: 5px 0;
852                padding:0;
853        }
854}
855
856@media (max-width: 594px) {
857
858        /** Header **/
859        #logo-container {
860                height:160px;
861                margin:20px 0;
862        }
863
864        #logo-container #logo{
865                float:none;
866        }
867
868        #logo-container h1 {
869                float:none;
870                margin:10px auto;
871                text-align:center;
872                font-size:17px;
873                padding:0 15px;
874        }
875}
876
877@media (max-width: 512px) {
878
879        /** Base **/
880        h1 {
881                font-size:26px;
882                text-align:center;
883        }
884
885        /** Navigation **/
886        .navbar-form {
887                margin:0px;
888                position:relative;
889                left:-10px;
890        }
891
892        .navbar-form input[type="text"] {
893                width:68%;
894                float:left;
895                margin-right:3px;
896        }
897
898        #user-options {
899                padding:10px 20px;
900        }
901
902        /** Containers **/
903        .content-container {
904                padding:20px;
905        }
906
907        /** Modules **/
908        .centered-btns_nav {
909                opacity:0.1 !important;
910        }
911
912        .gallery li .gallery-object {
913                float:none;
914                margin: 0 auto;
915                width:200px;
916        }
917
918        .slider-container .slider-text {
919                width:90%;
920                margin:20px auto;
921                float:none;
922        }
923
924        .slider-container .slider-image {
925                display:none;
926        }
927
928        /** Buttons **/
929        .search-btn {
930                float:right;
931        }
932
933        .navbar .btn-navbar {
934                margin:10px 0 0px 5px;
935                width:96%;
936        }
937
938}
939
940@media (max-width: 320px) {
941
942        /** Modules **/
943        #fb-container {
944                width:260px;
945                overflow:hidden;
946        }
947
948        .fb-like-box {
949                width:260px;
950                overflow:hidden;
951        }
952
953}
Note: See TracBrowser for help on using the repository browser.