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

Last change on this file since 15388 was 12074, checked in by Henrik Bettermann, 10 years ago

Display an image instead of text for NGREN logo.

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