1 2/* IMPORTS ------------------------------------------------------------*/ 3 4@import url('reset.css'); 5 6@import url('styled-elements.css'); 7 8/* HACKS ------------------------------------------------------------*/ 9 10.clear{ 11 clear:both; 12 height:1px; 13} 14 15.inv{ display:none; } 16 17.alignleft{ 18 float: left; 19 margin: 5px 10px 5px 0px; 20} 21 22 23/* GENERAL ------------------------------------------------------------*/ 24 25 26body { 27 line-height: 1; 28 color: #696969; 29 background: #f1f1f1 url(../img/bg/patterns/obl-1x1.png); 30 font-family: Arial, Helvetica, sans-serif; 31 font-size: 100%; 32} 33 34#wrapper{ 35 width: 100%; 36 margin: 5px auto; 37 background: #363636; 38 min-height: 500px; 39 font-size: 14px; 40 line-height: 1.5em; 41 border-radius: 10px; 42 -moz-border-radius: 10px; 43 -webkit-border-radius: 10px; 44} 45 46#header{ 47 height: 50px; 48 position: relative; 49 z-index: 10; 50} 51 52#main{ 53 background: #ffffff; 54 position: relative; 55 border-radius: 10px; 56 -moz-border-radius: 10px; 57 -webkit-border-radius: 10px; 58} 59 60#content{ 61 min-height: 200px; 62 overflow: hidden; 63 margin-bottom: 20px; 64} 65 66#content_inner{ 67 padding: 0px 10px 0px 10px; 68} 69 70#footer{ 71 position: relative; 72 color: #fff; 73} 74 75#logo{ 76 position: absolute; 77 top: 10px; 78 left: 10px; 79} 80 81#content a{ 82 color: #696969; 83} 84 85#content p{ 86 margin-bottom: 20px; 87} 88 89#content .line-divider{ 90 clear: both; 91 border-bottom: 1px solid #d7d7d7; 92 padding-bottom: 20px; 93 margin-bottom: 20px; 94} 95 96/* breadcrumbs --------------------------------------------------------*/ 97 98#header #breadcrumbs{ 99 display: none; 100 position: absolute; 101 bottom: 10px; 102 left: 10px; 103 font-style: italic; 104 color: #999; 105 font-size: 9px; 106} 107 108#header #breadcrumbs a{ 109 color: #bfbdbd; 110 text-decoration: none; 111 background: url(../img/breadcrumb-slash.png) no-repeat top right; 112 padding-right: 14px; 113} 114 115/* TITLE --------------------------------------------------------*/ 116 117#page-title{ 118 overflow: hidden; 119 height: 40px; 120 margin-bottom: 15px; 121 background: #f2f1f1 url(../img/twitter-border.png) repeat-x bottom left; 122} 123 124#page-title .title{ 125 display: block; 126 float: left; 127 font-family: 'Ubuntu', arial, serif; 128 font-size: 20px; 129 line-height: 30px; 130 margin-left: 10px; 131 margin-top: 5px; 132 margin-bottom: 5px; 133 text-shadow: 0 1px rgba(255, 255, 255, 1); 134} 135 136#page-title .subtitle{ 137 display: block; 138 float: left; 139 margin-left: 20px; 140 line-height: 30px; 141 color: #929191; 142 font-style: italic; 143} 144 145/* HOME --------------------------------------------------------*/ 146 147body.home #header{ 148 height: 430px; 149 position: relative; 150 z-index: 10; 151} 152 153body.home #header #headline{ 154 width: 906px; 155 margin: 110px auto 40px auto; 156 font-size: 26px; 157 line-height: 1.5em; 158 font-family: 'Ubuntu', arial, serif; 159 color: #ebe7e7; 160 text-align: center; 161} 162 163body.home #content{ 164 padding-top: 250px; 165} 166 167#headline a{ 168 text-decoration: none; 169 color: #696969; 170} 171 172/* HEADERS --------------------------------------------------------*/ 173 174h1,h2,h3,h4,h5,h6{ 175 line-height: 1.4em; 176 font-family: 'Ubuntu', arial, serif; 177 font-weight: lighter; 178 margin-bottom: 5px; 179} 180 181h1{ font-size: 22px; } 182 183h2{ font-size: 20px; } 184 185h3{ font-size: 18px; } 186 187h4{ font-size: 18px; } 188 189h5{ font-size: 16px; } 190 191h6{ font-size: 16px; } 192 193h7{ font-size: 14px; margin-bottom: 2px; } 194 195/* COLUMNS LAYOUT----------------------------------------------------------*/ 196 197.one-half, 198.one-third, 199.two-third, 200.three-fourth, 201.one-fourth { 202 float:left; 203 margin-right:30px; 204 position:relative; 205} 206 207.one-half{ width: 438px; } 208 209.one-third{ width: 282px; } 210 211.one-fourth{ width: 204px; } 212 213.two-third{ width: 594px; } 214 215.three-fourth{ width: 672px; } 216 217.last { 218 clear:right; 219 margin-right:0 !important; 220} 221 222 223/* SOCIAL --------------------------------------------------------*/ 224 225#social-holder{ 226 overflow: hidden; 227 width: 100%; 228 padding-top: 20px; 229} 230 231.social{ 232 display: block; 233 float: right; 234 overflow: hidden; 235 margin-right: 20px; 236} 237 238.social li{ 239 display: block; 240 width: 32px; 241 height: 32px; 242 float: left; 243 margin-right: 10px; 244 margin-bottom: 10px; 245} 246 247.social a{ 248 display: block; 249 width: 32px; 250 height: 32px; 251 text-indent: -9000px; 252} 253 254 255/* SEARCH --------------------------------------------------------*/ 256 257.top-search{ 258 position: absolute; 259 top: 98px; 260 right: 50px; 261} 262 263#searchform #s{ 264 color: #49494b; 265 font-size: 12px; 266 width: 160px; 267 height: 21px; 268 margin: 0px 0px 5px 0px; 269 padding: 2px 35px 2px 8px; 270 border: 0; 271 background: #f0efeb; 272 border-radius: 10px; 273 -moz-border-radius: 10px; 274 -webkit-border-radius: 10px; 275} 276 277#searchform #searchsubmit{ 278 position: absolute; 279 top: 0px; 280 right: 0px; 281 width: 25px; 282 height: 25px; 283 border: 0px; 284 background: url(../img/search-submit.png) no-repeat transparent -3px 2px; 285} 286 287/* NAVIGATION --------------------------------------------------------*/ 288 289 290#nav{ 291 display: none; 292 position: absolute; 293 top: 88px; 294 left: 30px; 295 height: 46px; 296 width: 906px; 297 background: #ffd800; 298 border-radius: 10px; 299 -moz-border-radius: 10px; 300 -webkit-border-radius: 10px; 301} 302 303#nav>li{ 304 display: block; 305 float: left; 306 margin-left: 5px; 307 margin-top: 12px; 308} 309 310#nav>li:first-child{ 311 margin-left: 10px; 312} 313 314#nav>li>a{ 315 display: block; 316 font-size: 12px; 317 color: #363636; 318 text-decoration: none; 319 padding: 7px 10px 6px 10px; 320 border-radius: 10px; 321 -moz-border-radius: 10px; 322 -webkit-border-radius: 10px; 323 text-shadow: 0 1px rgba(255, 255, 255, 0.5); 324} 325 326#nav>li>a:hover, 327#nav>li.current-menu-item>a{ 328 color: #fff; 329 background: #363636; 330 text-shadow: none; 331} 332 333/* sub navigation */ 334 335#nav>li ul{ 336 display: block; 337 margin-top: -1px; 338 background: #ffd800; 339 border-radius: 0px 0px 10px 10px; 340 -moz-border-radius: 0px 0px 10px 10px; 341 -webkit-border-radius: 0px 0px 10px 10px; 342} 343 344#nav>li>ul ul{ 345 margin-top: 0px; 346 border-radius: 0px 10px 10px 10px; 347 -moz-border-radius: 0px 10px 10px 10px; 348 -webkit-border-radius: 0px 10px 10px 10px; 349} 350 351#nav>li ul li a{ 352 display: block; 353 padding: 10px 15px; 354 display: block; 355 font-size: 12px; 356 color: #363636; 357 text-decoration: none; 358} 359 360#nav>li ul li a:hover{ 361 background: #363636; 362 color: #fff; 363} 364 365#nav>li ul li:last-child a:hover{ /* last item its rounded at bottom */ 366 border-radius: 0px 0px 10px 10px; 367 -moz-border-radius: 0px 0px 10px 10px; 368 -webkit-border-radius: 0px 0px 10px 10px; 369} 370 371/* FILTER --------------------------------------------------------*/ 372 373#content .filter{ 374 display: block; 375 overflow: hidden; 376 border-bottom: 1px solid #d7d7d7; 377 padding-bottom: 20px; 378 margin-bottom: 30px; 379 padding-left: 30px; 380 padding-right: 30px; 381} 382 383#content .filter li{ 384 display: block; 385 float: left; 386 font-size: 12px; 387 line-height: 14px; 388 margin-right: 5px; 389 margin-bottom: 10px; 390 padding: 3px 10px; 391 background: #363636; 392 border-radius: 10px; 393 -moz-border-radius: 10px; 394 -webkit-border-radius: 10px; 395} 396 397#content .filter li:first-child{ 398 background: none; 399} 400 401 402#content .filter li a{ 403 display: block; 404 color: #f1f1f1; 405 text-decoration: none; 406 width: 100%; 407 height: 100%; 408} 409 410#content .filter li:hover{ 411 background: #000; 412} 413 414#content .filter li:first-child:hover{ 415 background: none; 416} 417 418#content .filter li.active{ 419 background: #999; 420} 421 422 423 424/* TWITTER --------------------------------------------------------*/ 425 426#twitter{ 427 position: relative; 428 background: #f2f1f1; 429 height: 170px; 430 width: 100%; 431 background: #f2f1f1 url(../img/twitter-border.png) repeat-x; 432 border-radius: 0px 0px 10px 10px; 433 -moz-border-radius: 0px 0px 10px 10px; 434 -webkit-border-radius: 0px 0px 10px 10px; 435} 436 437#twitter #prev-tweet{ 438 display: block; 439 position: absolute; 440 top: 66px; 441 left: 30px; 442 width: 30px; 443 height: 35px; 444 background: transparent url(../img/prev-arrow.png) no-repeat top left; 445} 446 447#twitter #next-tweet{ 448 display: block; 449 position: absolute; 450 top: 66px; 451 right: 30px; 452 width: 30px; 453 height: 35px; 454 background: transparent url(../img/next-arrow.png) no-repeat top right; 455} 456 457#twitter #tweets .tweet_list{ 458 display: block; 459 position: absolute; 460 top: 0px; 461 left: 80px; 462 width: 810px; 463 height: 170px; 464} 465 466#twitter #tweets .tweet_list li{ 467 display: block; 468 width: 810px; 469 height: 120px; /* original height 170px */ 470 font-size: 20px; 471 line-height: 1.5em; 472 font-style: italic; 473 color: #838383; 474 text-align: center; 475 padding-top: 62px; 476} 477 478#twitter #tweets .tweet_list li .tweet_time a{ 479 text-decoration: none; 480 color: #ccc; 481} 482 483#twitter #tweets .tweet_list li a{ 484 text-decoration: none; 485 color: #37b2d1; 486} 487 488#twitter #tweets p.loading{ 489 text-align: center; 490 color: #ccc; 491 padding-top: 75px; 492 font-style: italic; 493} 494 495/* PAGES --------------------------------------------------------*/ 496 497#page-content{ 498 float: left; 499 width: 906px; 500 margin-left: 30px; 501} 502 503/* PORTFOLIO --------------------------------------------------------*/ 504 505#projects-list{ 506 overflow: hidden; 507} 508 509#projects-list .project{ 510 position: relative; 511 float: left; 512 overflow: hidden; 513 width: 438px; 514 height: 495px; 515 margin-left: 30px; 516 margin-bottom: 30px; 517} 518 519#projects-list .project h1 a{ 520 display: block; 521 text-decoration: none; 522 margin-bottom: 30px; 523 color: #696969; 524} 525 526.project-shadow{ 527 background: url(../img/shadow-project.png) no-repeat 0px 267px; 528} 529 530#projects-list .project .project-thumbnail{ 531 position: relative; 532 overflow: hidden; 533 width: 438px; 534 height: 267px; 535 margin-bottom: 30px; 536 background: #f1f1f1; 537 border-radius: 10px; 538 -moz-border-radius: 10px; 539 -webkit-border-radius: 10px; 540} 541 542#projects-list .project .project-thumbnail .cover{ 543 position: absolute; 544 top:0px; 545 left: 0px; 546} 547 548#projects-list .project .project-thumbnail .meta{ 549 display: block; 550 width: 252px; 551 height: 207px; 552 font-size: 12px; 553 line-height: 2em; 554 position: absolute; 555 top:30px; 556 left: 30px; 557} 558 559#projects-list .project .read-more{ 560 display: block; 561 position: absolute; 562 top: 325px; 563 left: 160px; 564 background: #363636; 565 line-height: 33px; 566 text-decoration: none; 567 color: #fff; 568 padding: 0px 30px 0px 30px; 569 opacity: 0; 570 571 border-radius: 10px; 572 -moz-border-radius: 10px; 573 -webkit-border-radius: 10px; 574 575 -webkit-box-shadow: 0px 2px 3px #000; 576 -moz-box-shadow: 0px 2px 3px #000; 577 box-shadow: 0px 2px 3px #000; 578} 579 580#projects-list .project .read-more:hover{ 581 color: #fff; 582 background: #000; 583} 584 585#projects-list .project:hover .read-more{ 586 opacity: 1; 587} 588 589 590/* PROJECT --------------------------------------------------------*/ 591 592.project-column{ 593 width: 438px; 594 float: left; 595 margin-left: 30px; 596} 597 598.project-column .project-thumbnail{ 599 overflow: hidden; 600 width: 438px; 601 height: 267px; 602 margin-bottom: 30px; 603 border-radius: 10px; 604 -moz-border-radius: 10px; 605 -webkit-border-radius: 10px; 606} 607 608 609#content .project-column .meta a{ 610 display: inline; 611 font-size: 12px; 612 color: #fff; 613 padding: 3px 10px; 614 text-decoration: none; 615 background: #363636; 616 border-radius: 10px; 617 -moz-border-radius: 10px; 618 -webkit-border-radius: 10px; 619} 620 621#content .project-column .meta a:hover{ background: #000;} 622 623.project-column .project-title{ 624 margin-bottom: 20px; 625} 626 627/* PROJECT-GALLERY -----------------------------------------------*/ 628 629.project-column .project-gallery{ 630 display: block; 631 overflow: hidden; 632 width: 468px; 633} 634 635.project-column .project-gallery li{ 636 display: block; 637 float: left; 638 overflow: hidden; 639 background: url(../img/plus-sign.png) center center no-repeat; 640 width: 204px; 641 height: 148px; 642 margin-right: 30px; 643 margin-top: 30px; 644 border-radius: 10px; 645 -moz-border-radius: 10px; 646 -webkit-border-radius: 10px; 647} 648 649/* PROJECT-RELATED -----------------------------------------------*/ 650 651.related-title{ 652 margin-left: 30px; 653} 654 655.related-projects{ 656 display: block; 657 overflow: hidden; 658} 659 660.related-projects li{ 661 display: block; 662 float: left; 663 overflow: hidden; 664 width: 204px; 665 height: 280px; 666 margin-left: 30px; 667 margin-top: 30px; 668} 669 670.related-projects li strong{ 671 display: block; 672} 673 674.related-projects li a.box{ 675 display: block; 676 overflow: hidden; 677 width: 204px; 678 height: 148px; 679 margin-bottom: 30px; 680 border-radius: 10px; 681 -moz-border-radius: 10px; 682 -webkit-border-radius: 10px; 683} 684 685.related-projects li a.box img{ 686 opacity: 0.7; 687} 688 689.related-projects li:hover a.box img{ 690 opacity: 1; 691} 692 693#content .related-projects li a{ 694 text-decoration: none; 695 color: #999; 696} 697 698/* GALLERY -----------------------------------------------*/ 699 700#content .gallery{ 701 display: block; 702 overflow: hidden; 703} 704 705#content .gallery li{ 706 display: block; 707 float: left; 708 overflow: hidden; 709 background: url(../img/plus-sign.png) center center no-repeat; 710 width: 204px; 711 height: 148px; 712 margin-left: 30px; 713 margin-bottom: 30px; 714 border-radius: 10px; 715 -moz-border-radius: 10px; 716 -webkit-border-radius: 10px; 717} 718 719#content .gallery.three-cols li{ 720 width: 282px; 721 height: 267px; 722} 723 724#content .gallery.two-cols li{ 725 width: 438px; 726 height: 267px; 727} 728 729#content .gallery li a{ 730 display: block; 731} 732 733 734/* BLOG --------------------------------------------------------*/ 735 736#posts{ 737 float: left; 738 width: 97%; 739} 740 741#posts .post{ 742 position: relative; 743 margin-left: 10px; 744 margin-bottom: 30px; 745} 746 747#comments-block{ 748 position: relative; 749 margin-left: 10px; 750 margin-top: 10px; 751 margin-bottom: 10px; 752 padding-top: 10px; 753} 754 755#posts.single .post{ 756 border-bottom: none; 757} 758 759#posts .post:last-child{ 760 border-bottom: none; 761} 762 763#posts h1 a{ 764 display: block; 765 margin-bottom: 30px; 766 width: 100%; 767 text-decoration: none; 768 color: #696969; 769} 770 771#posts .n-comments{ 772 display: block; 773 position: absolute; 774 top:0; 775 right:0px; 776 width: 57px; 777 height: 41px; 778 color: #fff; 779 text-align: center; 780 line-height: 32px; 781 background: url(../img/balloon.png) no-repeat; 782} 783 784 785#posts.single .post .n-comments{ 786 position: static; 787} 788 789.post .thumb-shadow{ 790 background: url(../img/shadow-blog.png) no-repeat 0px 270px; 791} 792 793#posts .post .post-thumbnail{ 794 position: relative; 795 overflow: hidden; 796 width: 596px; 797 height: 270px; 798 margin-bottom: 30px; 799 background: #f1f1f1; 800 border-radius: 10px; 801 -moz-border-radius: 10px; 802 -webkit-border-radius: 10px; 803} 804 805 806#posts .post .post-thumbnail .cover{ 807 position: absolute; 808 top:0px; 809 left: 0px; 810} 811 812#posts .post .the-excerpt{ 813 padding-bottom: 30px; 814 background: url(../img/post-divider.png) center bottom no-repeat; 815} 816 817#posts .post .post-thumbnail .meta{ 818 display: block; 819 width: 252px; 820 height: 207px; 821 font-size: 12px; 822 line-height: 2em; 823 position: absolute; 824 top:30px; 825 left: 30px; 826} 827 828#posts.single .post .meta{ 829 display: block; 830 background: #f1f1f1; 831 padding: 20px; 832 border-color: #e7e6e6 #ececec #ececec #ececec; 833 border-width: 3px 1px 1px 1px; 834 border-style: solid; 835 836 border-radius: 10px; 837 -moz-border-radius: 10px; 838 -webkit-border-radius: 10px; 839} 840 841#posts .post .read-more{ 842 display: block; 843 position: absolute; 844 top: 325px; 845 left: 257px; 846 background: #363636 ; 847 line-height: 33px; 848 padding: 0px 14px 0px 14px; 849 text-decoration: none; 850 color: #f1f1f1; 851 opacity: 0; 852 border-radius: 10px; 853 -moz-border-radius: 10px; 854 -webkit-border-radius: 10px; 855 856 -webkit-box-shadow: 0px 2px 3px #000; 857 -moz-box-shadow: 0px 2px 3px #000; 858 box-shadow: 0px 2px 3px #000; 859} 860 861#posts .post .read-more:hover{ 862 background: #000; 863} 864 865#posts .post:hover .read-more{ 866 opacity: 1; 867} 868 869#posts .post .meta a{ 870 text-decoration: none; 871} 872 873#posts .post .meta-tags{ 874 overflow: hidden; 875} 876 877#posts .post .meta-tags a{ 878 float: left; 879 font-size: 12px; 880 line-height: 14px; 881 color: #f1f1f1; 882 background: #696969; 883 padding: 3px 10px; 884 margin-right: 5px; 885 margin-bottom: 5px; 886 border-radius: 10px; 887 -moz-border-radius: 10px; 888 -webkit-border-radius: 10px; 889} 890 891#posts .post .meta-tags a:hover{ 892 background: #000; 893} 894 895/* COMMENTS-BLOCK ------------------------------------------------------------*/ 896 897 898 899#comments-block .n-comments{ 900 left:0px; 901} 902 903#comments-block .n-comments{ 904 left:0px; 905} 906 907#comments-block .n-comments-text{ 908 display: block; 909 position: absolute; 910 top: 4px; 911 left:68px; 912 font-family: 'Ubuntu', arial, serif; 913 font-size: 28px; 914} 915 916/* COMMENTSLIST ------------------------------------------------------------*/ 917 918.commentlist{ 919 display: block; 920} 921 922.commentlist li{ 923 display: block; 924 margin-bottom: 0px; 925 padding: 10px 10px 10px 0px; 926 line-height: 1.5em; 927} 928 929.commentlist ul{ 930 padding-left: 40px; 931 border-left: 1px dashed #ccc; 932} 933 934.commentlist li .comment-body{ 935 overflow: hidden; 936 position: relative; 937 padding: 0px 0px 20px 0px; 938} 939 940 941.commentlist li img{ 942 display: block; 943 float: left; 944 margin: 0px 12px 20px 0px; 945} 946 947.commentlist .meta-date{ 948 display: block; 949 float: right; 950} 951 952#content .commentlist .reply a{ 953 display: block; 954 text-decoration: none; 955 float: right; 956 padding: 2px 8px; 957 background: #ccc; 958 color: #f1f1f1; 959 font-size: 12px; 960 border-radius: 5px; 961 -moz-border-radius: 5px; 962 -webkit-border-radius: 5px; 963} 964 965/* COMMENTS PAGINATION ------------------------------------------------------------*/ 966 967#content .comments-pagination { 968 clear:both; 969 overflow: hidden; 970 padding:20px 0; 971 position:relative; 972 font-size:11px; 973 line-height:13px; 974 margin-bottom: 10px; 975} 976 977#content .comments-pagination span, 978#content .comments-pagination a { 979 display:block; 980 float:left; 981 margin: 2px 4px 2px 0; 982 padding:6px 9px 5px 9px; 983 text-decoration:none; 984 width:auto; 985 color:#fff; 986 background: #555; 987 border-radius: 10px; 988 -moz-border-radius: 10px; 989 -webkit-border-radius: 10px; 990} 991 992#content .comments-pagination a:hover{ 993 color:#fff; 994 background: #000000; 995} 996 997#content .comments-pagination .current{ 998 padding:6px 9px 5px 9px; 999 background: #000000; 1000 color:#fff; 1001} 1002 1003/* LEAVE COMMENT --------------------------------------------------------*/ 1004 1005.leave-comment{ 1006 margin-top: 20px; 1007 padding-top:30px; 1008 background: url(../img/post-divider-inverted.png) no-repeat; 1009} 1010 1011.leave-comment h2{ 1012 margin-bottom: 20px; 1013} 1014 1015/* CONTACT --------------------------------------------------------*/ 1016 1017.one-column{ 1018 width: 438px; 1019 float: left; 1020 margin-left: 30px; 1021} 1022 1023/* FORMS ------------------------------------------------------------*/ 1024 1025#BrowseForm input, #BrowseForm select, #BrowseForm textarea, 1026#LoginForm1 input, #LoginForm1 select, #LoginForm1 textarea, 1027#LoginForm2 input, #LoginForm2 select, #LoginForm2 textarea, 1028#LoginForm3 input, #LoginForm3 select, #LoginForm3 textarea{ 1029 background: #fff; 1030 border: 1px solid #ccc; 1031 border-radius: 5px; 1032 -moz-border-radius: 5px; 1033 -webkit-border-radius: 5px; 1034 color: #606060; 1035 font-size: 14px; 1036 padding: 2px; 1037 margin-bottom: 5px; 1038} 1039 1040#LoginForm1 input[type=text], #LoginForm1 input[type=password], #LoginForm1 select, 1041#LoginForm2 input[type=text], #LoginForm2 input[type=password], #LoginForm2 select{ 1042 width: 220px; 1043} 1044 1045#LoginForm3 input[type=text], #LoginForm3 input[type=password], #LoginForm3 select{ 1046 width: 120px; 1047} 1048 1049#LoginForm1 h7a, 1050#LoginForm2 h7a, 1051#LoginForm3 h7a{ 1052 font-size: 14px; 1053 position: absolute; 1054 left: 110px; 1055} 1056 1057#LoginForm1 h7b, 1058#LoginForm2 h7b, 1059#LoginForm3 h7b{ 1060 font-size: 14px; 1061 position: absolute; 1062 left: 240px; 1063} 1064 1065#LoginForm1 textarea, 1066#LoginForm2 textarea, 1067#LoginForm3 textarea{ 1068 width: 90%; 1069} 1070 1071#LoginForm1 #LoginButton1, 1072#LoginForm2 #LoginButton2, 1073#LoginForm3 #LoginButton3, 1074#LoginForm2 #smallbutton, 1075#LoginForm3 #smallbutton, 1076#BrowseForm #smallbutton{ 1077 background: #ffd800; 1078 color: #363636; 1079} 1080 1081#LoginForm2 #smallbutton, 1082#LoginForm3 #smallbutton, 1083#BrowseForm #smallbutton{ 1084 padding: 1px 3px; 1085} 1086 1087#LoginForm1 #LoginButton1, 1088#LoginForm2 #LoginButton2, 1089#LoginForm3 #LoginButton3{ 1090 margin-left: 10%; 1091 margin-right: 10%; 1092 margin-top: 20px; 1093 margin-bottom: 20px; 1094 padding: 10px 15px; 1095 width: 80%; 1096} 1097 1098#LoginForm1 #LoginButton1:hover, 1099#LoginForm2 #LoginButton2:hover, 1100#LoginForm3 #LoginButton3:hover, 1101#LoginForm2 #smallbutton:hover, 1102#LoginForm3 #smallbutton:hover, 1103#BrowseForm #smallbutton:hover{ 1104 background: #363636; 1105 color: #FFF; 1106} 1107 1108#LoginForm1 #LoginButton1:active, 1109#LoginForm2 #LoginButton2:active, 1110#LoginForm3 #LoginButton3:active, 1111#LoginForm2 #smallbutton:active, 1112#LoginForm3 #smallbutton:active, 1113#BrowseForm #smallbutton:active{ 1114 background: #000; 1115 color: #FFF; 1116} 1117 1118#LoginForm1 h7, 1119#LoginForm2 h7{ 1120 display: block; 1121} 1122 1123#LogoutButton{ 1124 background: #ffd800; 1125 color: #363636; 1126 margin: 2px 2px; 1127 padding: 5px 15px; 1128 width: 100px; 1129} 1130 1131table, tr, td{ 1132 padding: 5px; 1133 border: 0; 1134 outline: 0; 1135 font-size: 100%; 1136 vertical-align: baseline; 1137 background: transparent; 1138 overflow: hidden; 1139} 1140 1141/* PAGER ------------------------------------------------------------*/ 1142 1143.pager{ 1144 padding-top: 0px; 1145 overflow: hidden; 1146 display: block; 1147 height: 33px; 1148 margin-top: 20px; 1149 margin-left: 30px; 1150 margin-bottom: 20px; 1151} 1152 1153.pager li{ 1154 display: block; 1155 width: 33px; 1156 height: 33px; 1157 margin-right: 8px; 1158 float: left; 1159} 1160 1161#content .pager li a{ 1162 display: block; 1163 width: 100%; 1164 height: 100%; 1165 line-height: 33px; 1166 text-align: center; 1167 text-decoration: none; 1168 color: #ffd800; 1169 background: #363636; 1170 border-radius: 15px; 1171 -moz-border-radius: 15px; 1172 -webkit-border-radius: 15px; 1173} 1174 1175#content .pager li:hover a, 1176#content .pager li.active a{ 1177 color: #363636; 1178 background: #ffd800; 1179} 1180 1181/* SIDEBAR ------------------------------------------------------------*/ 1182 1183#sidebar{ 1184 float: left; 1185 width: 282px; 1186 margin-left: 30px; 1187} 1188 1189#sidebar>li{ 1190 margin-bottom: 20px; 1191} 1192 1193#sidebar>li h6{ 1194 padding-bottom: 20px; 1195} 1196 1197#sidebar ul>li{ 1198 line-height: 40px; 1199 text-decoration: none; 1200 border-bottom: 1px solid #d7d7d7; 1201} 1202 1203#sidebar ul>li:last-child{ border-bottom: none; } 1204 1205#sidebar ul>li a{ 1206 display: block; 1207 height: 100%; 1208 width: 100%; 1209 text-decoration: none; 1210 color: #696969; 1211} 1212 1213#sidebar ul>li:hover{ 1214 background: #f1f1f1; 1215} 1216 1217/* FOOTER - COLS ------------------------------------------------------------*/ 1218 1219#footer-cols{ 1220 display: block; 1221 overflow: hidden; 1222 color: #bbbaba; 1223 line-height: 1.5em; 1224 margin-top: 40px; 1225} 1226 1227#footer-cols li.col{ 1228 display: block; 1229 width: 282px; 1230 float: left; 1231 margin-left: 30px; 1232 margin-bottom: 30px; 1233} 1234 1235#footer-cols li.col>h6{ 1236 color: #d7d7d7; 1237 margin-bottom: 30px; 1238 text-shadow: -2px -1px rgba(0, 0, 0, .8); 1239} 1240 1241#footer-cols li.clear-col{ clear:left; } 1242 1243#footer-cols li.col ul{ 1244 display: block; 1245} 1246 1247#footer-cols li.col ul li{ 1248 display: block; 1249 line-height: 35px; 1250 border-top: 1px solid #4a4a4a; 1251 border-bottom: 1px solid #000; 1252} 1253 1254#footer-cols li.col ul li:first-child{ border-top: none; } 1255 1256#footer-cols li.col ul li:last-child{ border-bottom: none; } 1257 1258#footer-cols li.col ul li a{ 1259 text-decoration: none; 1260 color: #bbbaba; 1261} 1262 1263#footer-cols li.col ul li a:hover{ 1264 color: #fff; 1265} 1266 1267/* FOOTER BOTTOM --------------------------------------------------------*/ 1268 1269#footer #bottom{ 1270 position: relative; 1271 width: 100%; 1272 font-size: 12px; 1273 line-height: 1.5em; 1274 line-height: 80px; 1275 text-align: center; 1276 color: #868686; 1277 background: url(../img/bottom-shadow.png) repeat-x; 1278} 1279 1280#footer #bottom a{ 1281 color: #ffd800; 1282 text-decoration: none; 1283} 1284 1285#footer #bottom #to-top{ 1286 position: absolute; 1287 right: 30px; 1288 top: 26px; 1289 width: 33px; 1290 height: 33px; 1291 background: url(../img/to-top.png) no-repeat; 1292 cursor: pointer; 1293} 1294 1295/* NET2FTP CONSENT --------------------------------------------------------*/ 1296 1297#consent { 1298 border: 1px solid black; 1299 background-color: #DDDDDD; 1300 width: 90%; 1301 margin-left: auto; 1302 margin-right: auto; 1303 margin-top: 20px; 1304 padding: 10px; 1305} 1306 1307/* NET2FTP HEADER --------------------------------------------------------*/ 1308 1309.actionIcon{ 1310 border: 0px; 1311 margin: 1px; 1312 width: 24px; 1313 height: 24px; 1314 vertical-align: middle; 1315} 1316 1317.actionIconOver{ 1318 margin: 0px; 1319 width: 26px; 1320 height: 26px; 1321 vertical-align: middle; 1322} 1323 1324.actionIconOut{ 1325 margin: 1px; 1326 width: 24px; 1327 height: 24px; 1328 vertical-align: middle; 1329} 1330 1331/* NET2FTP BROWSE --------------------------------------------------------*/ 1332 1333.browse_rows_actions { 1334 background-color: #f2f1f1; 1335 color: #696969; 1336 font-size: 80%; 1337 font-weight: normal; 1338 text-align: left; 1339} 1340 1341.browse_rows_heading { 1342 background-color: #f2f1f1; 1343 color: #696969; 1344 font-size: 100%; 1345 font-weight: bold; 1346} 1347 1348.browse_rows_odd, .browse_rows_even { 1349 color: #696969; 1350 font-size: 100%; 1351 font-weight: normal; 1352 text-align: left; 1353} 1354 1355.browse_col_select {width: 20px;} 1356.browse_col_mime {display: none;} 1357.browse_col_dirfilename{width: 100px;} 1358.browse_col_type {display: none;} 1359.browse_col_size {width: 50px;} 1360.browse_col_owner {display: none;} 1361.browse_col_group {display: none;} 1362.browse_col_permissions{display: none;} 1363.browse_col_mtime {display: none;} 1364.browse_col_actions {width: 30px;} 1365 1366#BrowseForm{ 1367 margin-bottom: 15px; 1368} 1369