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

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

Replace tabs.

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: 0px;
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.7;
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:active {
543opacity: 1.0;
544}
545
546.centered-btns_nav.next {
547left: auto;
548background-position: right top;
549right: 0;
550}
551
552.centered-btns_nav:focus {
553outline: none;
554}
555
556.centered-btns_tabs {
557margin-top: 20px;
558text-align: center;
559}
560
561.centered-btns_tabs li {
562display: inline;
563float: none;
564_float: left;
565  *float: left;
566margin-right: 5px;
567}
568
569.centered-btns_tabs a {
570text-indent: -9999px;
571overflow: hidden;
572-webkit-border-radius: 15px;
573-moz-border-radius: 15px;
574border-radius: 15px;
575background: #ccc;
576background: rgba(0,0,0, .2);
577display: inline-block;
578_display: block;
579  *display: block;
580-webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
581-moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
582box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
583width: 9px;
584height: 9px;
585}
586
587.centered-btns_here a {
588background: #222;
589background: rgba(0,0,0, .8);
590}
591
592.slider {
593  height: 310px;
594  position: relative;
595  z-index: 1;
596}
597
598.slider-container {
599  position:relative;
600  height:310px;
601  margin:0px auto;
602  display:block;
603}
604
605.slider-container .slider-image-container {
606  float:right;
607  width:49%;
608  margin:30px 0;
609}
610
611.slider-container .slider-image {
612  border-bottom: 3px solid #006633;
613  border-top: 3px solid #006633;
614  height: 240px;
615}
616
617.slider-container .slider-text {
618  display: block;
619  margin:40px 0;
620  text-align: center;
621  float:left;
622  width:43%;
623}
624
625.slider-container .slider-text .highlight {
626  font-weight:bold;
627  color:#006633;
628  text-shadow:none;
629}
630
631.slider-container .slider-text h3 {
632  font-weight: bold;
633}
634
635.slider-container .slider-text h3 a {
636  color:#006633;
637}
638
639.slider-container .slider-text p {
640  font-size: 16px;
641}
642
643.centered-btns_nav {
644  -webkit-border-top-right-radius: 5px;
645  -webkit-border-bottom-right-radius: 5px;
646  -moz-border-radius-topright: 5px;
647  -moz-border-radius-bottomright: 5px;
648  border-top-right-radius: 5px;
649  border-bottom-right-radius: 5px;
650}
651
652.centered-btns_nav.next {
653  -webkit-border-top-left-radius: 5px;
654  -webkit-border-bottom-left-radius: 5px;
655  -moz-border-radius-topleft: 5px;
656  -moz-border-radius-bottomleft: 5px;
657  border-top-left-radius: 5px;
658  border-bottom-left-radius: 5px;
659
660  -webkit-border-top-right-radius: 0px;
661  -webkit-border-bottom-right-radius: 0px;
662  -moz-border-radius-topright: 0px;
663  -moz-border-radius-bottomright: 0px;
664  border-top-right-radius: 0px;
665  border-bottom-right-radius: 0px;
666}
667
668/** Partners **/
669.full-col {
670  float:left;
671  width:100%;
672}
673
674#partners-tile {
675  height:120px;
676  margin-bottom:30px;
677  padding:0px 50px;
678}
679
680#partners-tile li {
681  display: block;
682  float: left;
683  list-style: none;
684  text-align:center;
685}
686
687#partners-tile li span.title {
688  display:none;
689}
690
691#partners-tile li {
692  margin-right:6%;
693}
694
695#partners-tile li#fme {
696  margin-left:4%;
697}
698
699#partners-tile li#nuc {
700  margin-right:0;
701}
702
703
704#partners-tile li#fme img { margin:28px 0; }
705#partners-tile li#uspf img { margin:25px 0; }
706#partners-tile li#tetfund img { margin:50px 0; }
707#partners-tile li#ncc img { margin:37px 0; }
708#partners-tile li#nuc img { margin:23px 0; }
709
710
711/** Images **/
712.content-container img {
713  margin:5px;
714  border:2px solid #e0e0e0;
715}
716
717.content-container img.left-image {
718  float:left;
719  margin-left:0px;
720  margin-right:10px;
721}
722
723img.about-unique-image {
724  float:none;
725  display:block;
726  margin:20px auto;
727}
728
729/** Gallery **/
730.gallery {
731  margin:0;
732}
733
734.gallery li {
735  list-style:none;
736  display:inline;
737  cursor:pointer;
738}
739
740.gallery img:hover {
741  border:2px solid #006633;
742}
743
744.gallery li .gallery-object {
745  position:relative;
746  display:block;
747  float:left;
748}
749
750.gallery img {
751  width:180px;
752}
753
754.gallery .title {
755  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
756  bottom: 7px;
757  color: #FFFFFF;
758  font-size: 16px;
759  height: 20px;
760  left: 7px;
761  padding: 5px 0;
762  position: absolute;
763  text-align: center;
764  width: 180px;
765}
766
767/** Buttons **/
768.btn-primary {
769  color: #fff;
770  border: solid 1px #117744;
771  background: #666600;
772  background: -webkit-gradient(linear, left top, left bottom, from(#006633), to(#117744));
773  background: -moz-linear-gradient(top,  #006633,  #117744);
774  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#006633', endColorstr='#117744');
775}
776
777.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
778    background-color: #449966;
779    color: #FFFFFF;
780}
781
782
783@media (max-width: 1200px) {
784  .left-col, .right-col {
785    width:100%;
786  }
787
788  .content-container {
789    min-height:inherit;
790  }
791
792  .footer .copyright {
793    float:none;
794  }
795}
796
797@media (max-width: 981px) {
798  .slider-container .slider-image {
799    top:0px;
800  }
801
802  .navbar-form {
803    visibility:hidden;
804    height: 0px;
805  }
806
807  #partners-tile {
808    height:140px;
809  }
810
811  #partners-tile li {
812    margin-right:1%;
813  }
814
815  #partners-tile li#fme {
816    margin-left:1%;
817  }
818
819  #partners-tile li img {
820    width:83%;
821  }
822}
823
824@media (max-width: 767px) {
825
826  /** Base **/
827  body {
828    padding-top:20px;
829  }
830
831  /** Header **/
832  .navbar .navbar-inner {
833    padding-bottom:5px;
834  }
835
836  .navbar .btn-navbar {
837    clear:right;
838    float:left;
839    margin-bottom:0px;
840  }
841
842  .nav-collapse, .nav-collapse.collapse {
843    top:7px;
844  }
845
846  /** Modules **/
847  .slider-container .slider-text p {
848    font-size:14px;
849    max-height:145px;
850  }
851
852  .slider-container .slider-text .relative {
853    padding:20px 10px;
854  }
855
856  .home-option {
857    margin-bottom:30px;
858  }
859
860  .home-option .text {
861    height:inherit;
862  }
863
864  #partners-tile {
865    height:inherit;
866  }
867
868  #partners-tile ul {
869  margin:0;
870  }
871
872  #partners-tile li {
873    width:100% !important;
874  }
875
876  #partners-tile li img {
877    width:inherit;
878  }
879
880  /** Footer **/
881  .footer .copyright {
882    display:block;
883    float:none;
884  }
885
886  .footer .section {
887    margin:20px 0;
888    float:none;
889    padding:0;
890  }
891
892  .footer .section li {
893    margin:10px 0;
894  }
895
896  .footer .address {
897    float: none;
898    margin: 5px 0;
899    padding:0;
900  }
901}
902
903@media (max-width: 594px) {
904
905  /** Header **/
906
907
908  #logo-container {
909    margin:10px;
910    text-align:none;
911    float:none;
912    position:relative;
913  }
914
915  #header-head {
916    height: 50px;
917  }
918
919  #user-options {
920    position:absolute;
921    top:10px;
922    right:10px;
923  }
924
925  #logo-container #logo{
926    float:none;
927    display: block;
928    margin-left: auto;
929    margin-right: auto;
930    margin-bottom: 0px;
931    margin-bottom: -15px;
932
933  }
934
935  #logo-container h1 {
936    visibility:hidden;
937    height: 0px;
938  }
939}
940
941@media (max-width: 512px) {
942
943  /** Base **/
944  h1 {
945    font-size:26px;
946    text-align:center;
947  }
948
949  /** Navigation **/
950  .navbar-form {
951    margin:0px;
952    position:relative;
953    left:-10px;
954  }
955
956  .navbar-form input[type="text"] {
957    width:68%;
958    float:left;
959    margin-right:3px;
960  }
961
962  /** Containers **/
963  .content-container {
964    padding:20px;
965  }
966
967  /** Modules **/
968  .centered-btns_nav {
969    opacity:0.1 !important;
970  }
971
972  .gallery li .gallery-object {
973    float:none;
974    margin: 0 auto;
975    width:200px;
976  }
977
978  .slider-container .slider-text {
979    width:90%;
980    margin:20px auto;
981    float:none;
982  }
983
984  .slider-container .slider-image {
985    display:none;
986  }
987
988  /** Buttons **/
989  .search-btn {
990    float:right;
991  }
992
993  .navbar .btn-navbar {
994    margin:10px 0 0px 5px;
995    width:96%;
996  }
997
998}
999
1000@media (max-width: 320px) {
1001
1002  /** Modules **/
1003  #fb-container {
1004    width:260px;
1005    overflow:hidden;
1006  }
1007
1008  .fb-like-box {
1009    width:260px;
1010    overflow:hidden;
1011  }
1012
1013}
Note: See TracBrowser for help on using the repository browser.