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

Last change on this file since 11078 was 10444, checked in by Henrik Bettermann, 11 years ago

Change logo again.

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