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

Last change on this file since 17403 was 13675, checked in by Henrik Bettermann, 9 years ago

Replace bootstrap.py and adjust buildout.cfg.

Extend ignore list.

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