- Timestamp:
- 20 Jun 2013, 08:47:46 (11 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
main/ngren.theme/trunk/ngren/theme/ngren_theme/css/style.css
r10315 r10316 1 1 /** BASE **/ 2 2 body { 3 4 5 6 7 8 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 9 } 10 10 11 11 body, h1, h2, h3, h4, h4, h6 { 12 12 font-family: 'Open Sans', sans-serif; 13 13 } 14 14 15 15 h3 { 16 17 16 color:#006633; 17 font-size:22.5px; 18 18 } 19 19 20 20 hr { 21 21 margin:30px 0; 22 22 } 23 23 24 24 select, 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 25 height:16px; 26 26 } 27 27 … … 32 32 /** COMMON **/ 33 33 .border-radius { 34 35 36 34 -webkit-border-radius: 5px; 35 -moz-border-radius: 5px; 36 border-radius: 5px; 37 37 } 38 38 39 39 .center { 40 40 text-align:center; 41 41 } 42 42 43 43 .relative { 44 44 position:relative; 45 45 } 46 46 47 47 /** GRADIENT MODULES **/ 48 48 .green-gradient { 49 50 51 52 53 54 55 56 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 57 } 58 58 59 59 .gradient-radius-module { 60 61 62 63 64 65 66 67 68 69 70 71 72 73 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 74 } 75 75 76 76 .white-background { 77 78 79 80 81 82 83 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 84 } 85 85 … … 87 87 88 88 .left-col { 89 90 89 width:680px; 90 float:left; 91 91 } 92 92 93 93 .ie7 .left-col, 94 94 .ie8 .left-col { 95 95 width: 100%; 96 96 } 97 97 98 98 .right-col { 99 100 99 width:300px; 100 float:right; 101 101 } 102 102 103 103 .ie7 .right-col, 104 104 .ie8 .right-col { 105 105 width: 100%; 106 106 } 107 107 108 108 .ie7 .row-fluid .span6 { 109 109 width:40%; 110 110 } 111 111 … … 113 113 114 114 #header-head { 115 115 height:140px; 116 116 } 117 117 … … 123 123 124 124 #user-options ul { 125 125 margin:0; 126 126 } 127 127 128 128 #user-options ul li { 129 130 129 list-style:none; 130 display:inline; 131 131 text-align: left; 132 132 } 133 133 134 134 #logo-container { 135 136 137 138 135 height:90px; 136 margin:20px; 137 text-align:center; 138 float:left; 139 139 } 140 140 … … 143 143 .ie7 #logo-container, 144 144 .ie7 #logo-container h1 { 145 145 width:70%; 146 146 } 147 147 148 148 #logo-container #logo { 149 150 151 152 149 float: left; 150 margin: 5px; 151 margin-top: 0px; 152 width: 150px; 153 153 } 154 154 155 155 #logo-container h1 { 156 157 158 159 160 161 156 float: left; 157 font-size: 27px; 158 position: relative; 159 top: 0px; 160 text-align:left; 161 margin-left:10px; 162 162 } 163 163 164 164 #logo-container h1 a { 165 165 color:#444; 166 166 } 167 167 168 168 #logo-container h1 a:hover { 169 169 text-decoration:none; 170 170 } 171 171 172 172 /** Navigation **/ 173 173 .navbar .navbar-inner { 174 175 176 174 padding: 0; 175 background-color:inherit; 176 box-shadow:none; 177 177 } 178 178 179 179 .navbar .nav-container { 180 181 180 width:100%; 181 border-top:1px solid #ccc; 182 182 } 183 183 184 184 .navbar .nav > li > a { 185 185 border-bottom:3px solid rgba(0,0,0,0); 186 186 } 187 187 188 188 .navbar .nav > li > a:hover, .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus { 189 190 191 192 189 border-bottom:3px solid #006633; 190 background-image:none; 191 background-color:inherit; 192 box-shadow:none; 193 193 } 194 194 195 195 .navbar .nav li a { 196 197 198 199 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 200 } 201 201 202 202 .navbar-form { 203 204 205 203 bottom: 8px; 204 position: absolute; 205 right: 8px; 206 206 } 207 207 208 208 .navbar-form.mobile { 209 210 211 212 209 position:relative; 210 float:right; 211 top:5px; 212 right:10px; 213 213 } 214 214 215 215 .navbar-form input[type="text"] { 216 216 width:200px; 217 217 } 218 218 219 219 .navbar .nav > li > .dropdown-menu:after, 220 220 .navbar .nav > li > .dropdown-menu:before { 221 221 display:none; 222 222 } 223 223 224 224 .navbar .btn-navbar { 225 226 227 228 229 225 color:#006633; 226 font-weight:bold; 227 text-shadow:0px 1px 0px #ddd; 228 width:97%; 229 margin:10px; 230 230 } 231 231 232 232 .navbar .btn-navbar:hover { 233 233 color:#005522; 234 234 } 235 235 236 236 .dropdown-menu { 237 238 239 240 237 top:41px; 238 -webkit-border-radius: 0px; 239 -moz-border-radius: 0px; 240 border-radius: 0px; 241 241 } 242 242 243 243 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a { 244 245 244 background-color:#006633; 245 background-image: linear-gradient(to bottom, #117744, #006633); 246 246 } 247 247 248 248 ul.nav li.dropdown:hover > ul.dropdown-menu{ 249 249 display: block; 250 250 } 251 251 … … 255 255 256 256 .container .navbar .container { 257 257 width: auto; 258 258 } 259 259 260 260 /** Containers **/ 261 261 .container { 262 263 262 margin: 0 auto; 263 max-width: 1000px; 264 264 } 265 265 266 266 .curly-shadow { 267 268 269 267 background:#fff; 268 margin-bottom: 24px; 269 position: relative; 270 270 } 271 271 272 272 .curly-shadow-container { 273 274 273 background:url("../img/subtle_dots.png") repeat scroll 0 0 transparent; 274 height:310px; 275 275 } 276 276 277 277 .curly-shadow:after { 278 279 280 281 282 283 284 285 286 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 287 } 288 288 289 289 .curly-shadow:before { 290 291 292 293 294 295 296 297 298 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 299 } 300 300 301 301 /** Content Container **/ 302 302 .content-container { 303 304 305 306 303 padding:20px 40px; 304 margin-bottom:20px; 305 min-height:566px; 306 position:relative; 307 307 } 308 308 309 309 .post-social { 310 311 310 float:right; 311 margin:20px 0; 312 312 } 313 313 314 314 .post-social div { 315 315 display:inline; 316 316 } 317 317 318 318 .post-social .twitter { 319 319 margin:5px 0; 320 320 } 321 321 322 322 .post-social .facebook { 323 323 margin:0px; 324 324 } 325 325 326 326 .list-left, 327 327 .list-right { 328 328 list-style:none; 329 329 } 330 330 331 331 .list-left li, 332 332 .list-right li { 333 333 margin:10px; 334 334 } 335 335 336 336 .list-left { 337 337 float:left; 338 338 } 339 339 340 340 .list-right { 341 341 float:right; 342 342 } 343 343 344 344 /** Footer **/ 345 345 .footer { 346 347 348 349 350 346 border-top: 1px solid #D4D4D4; 347 float: left; 348 margin-top: 10px; 349 padding: 10px 0; 350 width: 100%; 351 351 } 352 352 353 353 .footer .section { 354 355 354 padding:0 20px; 355 float:right; 356 356 } 357 357 358 358 .footer .section ul { 359 359 margin:0; 360 360 } 361 361 362 362 .footer .section li.title { 363 363 font-weight:bold; 364 364 } 365 365 366 366 .footer .section li { 367 368 367 margin:5px 0; 368 list-style:none; 369 369 } 370 370 371 371 .footer .fb-footer { 372 372 padding:0; 373 373 } 374 374 375 375 .footer .tw-footer { 376 376 padding:0; 377 377 } 378 378 379 379 .footer .copyright { 380 381 382 380 margin:5px 0px; 381 color:#999; 382 float:left; 383 383 } 384 384 385 385 .footer .address { 386 387 388 389 386 color: #999999; 387 float: right; 388 margin: 5px; 389 padding:0 20px; 390 390 } 391 391 392 392 .footer .address ul { 393 393 margin:0; 394 394 } 395 395 396 396 .footer .address li { 397 397 list-style:none; 398 398 } 399 399 400 400 /** forms **/ 401 401 #content fieldset { 402 403 402 border: 0.1em solid; 403 border-color: -moz-use-text-color -moz-use-text-color #E5E5E5; 404 404 border-color: #E5E5E5; 405 405 } … … 411 411 margin: 1px; 412 412 passing: 0.0em 0.5em; 413 413 padding: 0.5em; 414 414 } 415 415 … … 425 425 /** TEXT / TITLES / MESSAGES **/ 426 426 h4.title { 427 428 429 427 color:#006633; 428 border-bottom:3px solid #006633; 429 padding-bottom:5px; 430 430 } 431 431 … … 434 434 /** Home option **/ 435 435 .home-option { 436 437 436 padding:20px 40px; 437 margin-bottom:20px; 438 438 } 439 439 440 440 .home-option h3 { 441 442 443 444 441 color:#006633; 442 font-weight:bold; 443 font-size:16px; 444 line-height:20px; 445 445 } 446 446 447 447 .home-option h3 a { 448 448 color:#006633; 449 449 } 450 450 451 451 .home-option .text { 452 452 height:40px; 453 453 } 454 454 455 455 .home-icon { 456 457 456 margin:5px; 457 width:78px; 458 458 } 459 459 460 460 /** Streaming **/ 461 461 .streaming { 462 463 464 465 462 padding:20px 40px; 463 margin-bottom:20px; 464 height:230px; 465 overflow:hidden; 466 466 } 467 467 468 468 .streaming li { 469 470 469 list-style:none; 470 height:110px; 471 471 } 472 472 473 473 .streaming h4 a { 474 474 color:#444; 475 475 } 476 476 477 477 #streaming-news { 478 479 478 height:220px; 479 overflow:hidden; 480 480 } 481 481 … … 591 591 592 592 .slider { 593 594 595 593 height: 310px; 594 position: relative; 595 z-index: 1; 596 596 } 597 597 598 598 .slider-container { 599 600 601 602 599 position:relative; 600 height:310px; 601 margin:0px auto; 602 display:block; 603 603 } 604 604 605 605 .slider-container .slider-image-container { 606 607 608 606 float:right; 607 width:49%; 608 margin:30px 0; 609 609 } 610 610 611 611 .slider-container .slider-image { 612 613 614 612 border-bottom: 3px solid #006633; 613 border-top: 3px solid #006633; 614 height: 240px; 615 615 } 616 616 617 617 .slider-container .slider-text { 618 619 620 621 622 618 display: block; 619 margin:40px 0; 620 text-align: center; 621 float:left; 622 width:43%; 623 623 } 624 624 625 625 .slider-container .slider-text .highlight { 626 627 628 626 font-weight:bold; 627 color:#006633; 628 text-shadow:none; 629 629 } 630 630 631 631 .slider-container .slider-text h3 { 632 632 font-weight: bold; 633 633 } 634 634 635 635 .slider-container .slider-text h3 a { 636 636 color:#006633; 637 637 } 638 638 639 639 .slider-container .slider-text p { 640 640 font-size: 16px; 641 641 } 642 642 643 643 .centered-btns_nav { 644 645 646 647 648 649 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 650 } 651 651 652 652 .centered-btns_nav.next { 653 654 655 656 657 658 659 660 661 662 663 664 665 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 666 } 667 667 668 668 /** Partners **/ 669 669 .full-col { 670 671 670 float:left; 671 width:100%; 672 672 } 673 673 674 674 #partners-tile { 675 676 677 675 height:120px; 676 margin-bottom:30px; 677 padding:0px 50px; 678 678 } 679 679 680 680 #partners-tile li { 681 682 683 684 681 display: block; 682 float: left; 683 list-style: none; 684 text-align:center; 685 685 } 686 686 687 687 #partners-tile li span.title { 688 688 display:none; 689 689 } 690 690 691 691 #partners-tile li { 692 692 margin-right:6%; 693 693 } 694 694 695 695 #partners-tile li#fme { 696 696 margin-left:4%; 697 697 } 698 698 699 699 #partners-tile li#nuc { 700 700 margin-right:0; 701 701 } 702 702 … … 711 711 /** Images **/ 712 712 .content-container img { 713 714 713 margin:5px; 714 border:2px solid #e0e0e0; 715 715 } 716 716 717 717 .content-container img.left-image { 718 719 720 718 float:left; 719 margin-left:0px; 720 margin-right:10px; 721 721 } 722 722 723 723 img.about-unique-image { 724 725 726 724 float:none; 725 display:block; 726 margin:20px auto; 727 727 } 728 728 729 729 /** Gallery **/ 730 730 .gallery { 731 731 margin:0; 732 732 } 733 733 734 734 .gallery li { 735 736 737 735 list-style:none; 736 display:inline; 737 cursor:pointer; 738 738 } 739 739 740 740 .gallery img:hover { 741 741 border:2px solid #006633; 742 742 } 743 743 744 744 .gallery li .gallery-object { 745 746 747 745 position:relative; 746 display:block; 747 float:left; 748 748 } 749 749 750 750 .gallery img { 751 751 width:180px; 752 752 } 753 753 754 754 .gallery .title { 755 756 757 758 759 760 761 762 763 764 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 765 } 766 766 767 767 /** Buttons **/ 768 768 .btn-primary { 769 770 771 772 773 774 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 775 } 776 776 … … 782 782 783 783 @media (max-width: 1200px) { 784 785 786 787 788 789 790 791 792 793 794 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 795 } 796 796 797 797 @media (max-width: 981px) { 798 799 800 798 .slider-container .slider-image { 799 top:0px; 800 } 801 801 802 802 .navbar-form { … … 805 805 } 806 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 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 822 } 823 823 824 824 @media (max-width: 767px) { 825 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 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 901 } 902 902 903 903 @media (max-width: 594px) { 904 904 905 905 /** Header **/ 906 906 907 907 908 908 #logo-container { 909 909 margin:10px; 910 910 text-align:none; 911 911 float:none; 912 912 position:relative; 913 913 } 914 914 915 915 #header-head { 916 917 } 918 919 916 height: 50px; 917 } 918 919 #user-options { 920 920 position:absolute; 921 top:10px; right:10px; 922 } 923 924 #logo-container #logo{ 925 float:none; 921 top:10px; 922 right:10px; 923 } 924 925 #logo-container #logo{ 926 float:none; 926 927 display: block; 927 928 margin-left: auto; … … 930 931 margin-bottom: -15px; 931 932 932 933 934 933 } 934 935 #logo-container h1 { 935 936 visibility:hidden; 936 937 height: 0px; 937 938 } 938 939 } 939 940 940 941 @media (max-width: 512px) { 941 942 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 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 } 996 997 997 998 } … … 999 1000 @media (max-width: 320px) { 1000 1001 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 } 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 TracChangeset for help on using the changeset viewer.