source: main/ngren.theme/branches/filip-fixes/ngren/theme/ngren_theme/css/style.css @ 11096

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

Apply uli manual modifications from live site.

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