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