source: main/kwarapoly.theme/trunk/kwarapoly/theme/kwarapoly_theme/css/style.css @ 11476

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

Adjust style sheets.

File size: 16.3 KB
RevLine 
[10866]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;
[10872]116  background-color: #FAFAFA;
117  background-image: linear-gradient(to bottom, #4aa94a, #f4f4f4);
[10866]118}
119
120#user-options {
121  position:absolute;
122  top:10px;
[10872]123  right:0px;
[10866]124}
125
126#user-options ul {
127  margin:0;
128}
129
130#user-options ul li {
131  list-style:none;
132  display:inline;
133  text-align: left;
134}
135
136#logo-container {
137  height:90px;
138  margin:20px;
139  text-align:center;
140  float:left;
141}
142
143.ie8 #logo-container,
144.ie8 #logo-container h1,
145.ie7 #logo-container,
146.ie7 #logo-container h1 {
147  width:70%;
148}
149
150#logo-container #logo {
151  float: left;
152  margin: 5px;
153  margin-top: -10px;
154}
155
156#logo-container h1 {
157  float: left;
158  font-size: 27px;
159  position: relative;
160  top: 0px;
161  text-align:left;
162  margin-left:10px;
163}
164
165#logo-container h1 a {
166  color:#444;
167}
168
169#logo-container h1 a:hover {
170  text-decoration:none;
171}
172
173/** Navigation **/
174.navbar .navbar-inner {
175  padding: 0;
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
[10872]811  #user-options {
812    position:absolute;
813    top:105px;
814    right:0px;
815  }
816
[10866]817  #partners-tile {
818    height:140px;
819  }
820
821  #partners-tile li {
822    margin-right:1%;
823  }
824
825  #partners-tile li#fme {
826    margin-left:1%;
827  }
828
829  #partners-tile li img {
830    width:83%;
831  }
832}
833
834@media (max-width: 767px) {
835
836  /** Base **/
837  body {
838    padding-top:20px;
839  }
840
841  /** Header **/
[10872]842
843  #logo-container {
844    margin: 10px;
845    text-align:none;
846    float:none;
847    position:relative;
848  }
849
850  #logo-container #logo{
851    float:none;
852    display: block;
853    margin-left: auto;
854    margin-right: auto;
855    margin-bottom: 0px;
856    margin-bottom: -15px;
857  }
858
859  #logo-container h1 {
860    visibility:hidden;
861    height: 0px;
862  }
863
[10866]864  .navbar .navbar-inner {
865    padding-bottom:5px;
866  }
867
868  .navbar .btn-navbar {
869    clear:right;
870    float:left;
871    margin-bottom:0px;
872  }
873
874  .nav-collapse, .nav-collapse.collapse {
875    top:7px;
876  }
877
[10872]878  #user-options {
879    position:absolute;
880    top:105px;
881    right:0px;
882  }
883
[10866]884  /** Modules **/
885  .slider-container .slider-text p {
886    font-size:14px;
887    max-height:145px;
888  }
889
890  .slider-container .slider-text .relative {
891    padding:20px 10px;
892  }
893
894  .home-option {
895    margin-bottom:30px;
896  }
897
898  .home-option .text {
899    height:inherit;
900  }
901
902  #partners-tile {
903    height:inherit;
904  }
905
906  #partners-tile ul {
907  margin:0;
908  }
909
910  #partners-tile li {
911    width:100% !important;
912  }
913
914  #partners-tile li img {
915    width:inherit;
916  }
917
918  /** Footer **/
919  .footer .copyright {
920    display:block;
921    float:none;
922  }
923
924  .footer .section {
925    margin:20px 0;
926    float:none;
927    padding:0;
928  }
929
930  .footer .section li {
931    margin:10px 0;
932  }
933
934  .footer .address {
935    float: none;
936    margin: 5px 0;
937    padding:0;
938  }
939}
940
941@media (max-width: 594px) {
942
943  /** Header **/
944
945
946  #user-options {
947    position:absolute;
[10872]948    top:105px;
949    right:0px;
[10866]950  }
951
952}
953
954@media (max-width: 512px) {
955
956  /** Base **/
957  h1 {
958    font-size:26px;
959    text-align:center;
960  }
961
962  /** Navigation **/
963  .navbar-form {
964    margin:0px;
965    position:relative;
966    left:-10px;
967  }
968
969  .navbar-form input[type="text"] {
970    width:68%;
971    float:left;
972    margin-right:3px;
973  }
974
975  /** Containers **/
976  .content-container {
977    padding:20px;
978  }
979
980  /** Modules **/
981  .centered-btns_nav {
982    opacity:0.1 !important;
983  }
984
985  .gallery li .gallery-object {
986    float:none;
987    margin: 0 auto;
988    width:200px;
989  }
990
991  .slider-container .slider-text {
992    width:90%;
993    margin:20px auto;
994    float:none;
995  }
996
997  .slider-container .slider-image {
998    display:none;
999  }
1000
1001  /** Buttons **/
1002  .search-btn {
1003    float:right;
1004  }
1005
1006  .navbar .btn-navbar {
1007    margin:10px 0 0px 5px;
1008    width:96%;
1009  }
1010
1011}
1012
1013@media (max-width: 320px) {
1014
1015  /** Modules **/
1016  #fb-container {
1017    width:260px;
1018    overflow:hidden;
1019  }
1020
1021  .fb-like-box {
1022    width:260px;
1023    overflow:hidden;
1024  }
1025
1026}
Note: See TracBrowser for help on using the repository browser.