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

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

Only apply left float to some form elements inside listitems.

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