themes/canvas/default.css

   1 /*--------------------------------------------------\
   2 | canvas         |              | default.css       |
   3 |---------------------------------------------------|
   4 | For use with:                                     |
   5 | FrontAccounting                                   |
   6 | http://FrontAccounting.com/                       |
   7 | by Joe Hunt Consulting                            |
   8 |---------------------------------------------------|
   9 | Developer:                                        |
  10 | Joe Hunt                                          |
  11 |                                                   |
  12 |---------------------------------------------------|
  13 | Note:                                             |
  14 | Changes can be made to this CSS that will be      |
  15 | reflected throughout FrontAccounting.             |
  16 |                                                   |
  17 \--------------------------------------------------*/
  18
  19 body {
  20   background-color: #eee;
  21
  22   background: -moz-linear-gradient(bottom, #e3eaea 0%, #e3eaea 50%, #e3eaea 51%, #d7dddd 78%, #d7dddd 100%);
  23   background: -webkit-linear-gradient(bottom, #e3eaea 0%, #e3eaea 50%, #e3eaea 51%, #d7dddd 78%, #d7dddd 100%);
  24   background: -o-linear-gradient(bottom, #e3eaea 0%, #e3eaea 50%, #e3eaea 51%, #d7dddd 78%, #d7dddd 100%);
  25   background: -ms-linear-gradient(bottom, #e3eaea 0%, #e3eaea 50%, #e3eaea 51%, #d7dddd 78%, #d7dddd 100%);
  26   background: linear-gradient(to top, #e3eaea 0%, #e3eaea 50%, #e3eaea 51%, #d7dddd 78%, #d7dddd 100%);
  27
  28   margin: 0;
  29   padding: 0;
  30   text-align: center;
  31 }
  32
  33 body,td,th {
  34   font-family:Arial, Helvetica, sans-serif;
  35   font-size: 11px;
  36   color: #000;
  37 }
  38
  39 /* Main */
  40 .fa-main {
  41   width: 98%;
  42   margin: 0 auto;
  43   text-align: left;
  44 }
  45
  46 tr, td, th {
  47   line-height: 17px;
  48   color: #000;
  49 }
  50 table {
  51   text-align: left;
  52 }
  53
  54 textarea {
  55     font-size: 12px;
  56 }
  57
  58 input, select
  59 {
  60     font-size: 11px;
  61         padding: 1px;
  62 }
  63
  64 //select {
  65 //    max-width: 200px;
  66 //}
  67
  68 input.big {
  69         width: 100px;
  70 }
  71
  72 input.small {
  73         width: 50px;
  74 }
  75
  76 a, a:active {
  77         color: #045c97;
  78         text-decoration: none;
  79 }
  80 a:hover, a:focus {
  81         color: #4f9adb;
  82         text-decoration: underline;
  83 }
  84 a:visited {
  85         color: #045c97;
  86         text-decoration: none;
  87 }
  88 .clear {
  89         clear: both;
  90 }
  91 .nodisp {
  92         display: none;
  93 }
  94 .italic {
  95         font-style: italic;
  96 }
  97 .flleft {
  98         float: left;
  99 }
 100 .flright {
 101         float: right;
 102 }
 103
 104 .fa-menu,
 105 .fa-menu ul,
 106 .fa-menu ul li,
 107 .fa-menu ul li a {
 108   margin: 0;
 109   padding: 0;
 110   border: 0;
 111   list-style: none;
 112   line-height: 1;
 113   display: block;
 114   position: relative;
 115   -webkit-box-sizing: border-box;
 116   -moz-box-sizing: border-box;
 117   box-sizing: border-box;
 118 }
 119 .fa-menu {
 120   width: auto;
 121   font-family: Helvetica, Arial, sans-serif;
 122   color: #ffffff;
 123 }
 124 .fa-menu ul {
 125   background: #222222;
 126   /* Old browsers */
 127
 128   background: -moz-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);
 129   background: -webkit-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);
 130   background: -o-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);
 131   background: -ms-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);
 132   background: linear-gradient(to top, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);
 133 }
 134 .fa-menu:after,
 135 .fa-menu ul:after {
 136   content: ".";
 137   display: block;
 138   clear: both;
 139   visibility: hidden;
 140   line-height: 0;
 141   height: 0;
 142 }
 143 .fa-menu ul li {
 144   float: left;
 145   display: block;
 146   border-right: 1px solid #ccc;
 147   z-index: 1;
 148 }
 149 .fa-menu ul li::after {
 150   content: "";
 151   width: 100%;
 152   height: 8px;
 153   position: absolute;
 154   border-top-left-radius: 50% 4px;
 155   border-top-right-radius: 50% 4px;
 156   background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
 157   background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
 158   background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
 159   background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
 160   background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
 161   z-index: 2;
 162   bottom: 10px;
 163 }
 164 .fa-menu ul li a {
 165   display: block;
 166   padding: 10px 12px;
 167   text-decoration: none;
 168   font-size: 12px;
 169   font-weight: bold;
 170   color: #ffffff;
 171   border-right: 1px solid rgba(255, 255, 255, 0.15);
 172   z-index: 3;
 173 }
 174 .fa-menu ul li a:hover,
 175 .fa-menu ul li.active a {
 176   color: #ffffff;
 177 }
 178 .fa-menu ul li:hover,
 179 .fa-menu ul li.active {
 180   background: #1275ae;
 181   /* Old browsers */
 182
 183   background: -moz-linear-gradient(bottom, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%);
 184   background: -webkit-linear-gradient(bottom, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%);
 185   background: -o-linear-gradient(bottom, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%);
 186   background: -ms-linear-gradient(bottom, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%);
 187   background: linear-gradient(to top, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%);
 188 }
 189 .fa-menu ul li:hover::after,
 190 .fa-menu ul li.active::after {
 191   background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);
 192   background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);
 193   background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);
 194   background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);
 195   background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
 196 }
 197
 198 /* Body */
 199 .fa-body {
 200   width: 100%;
 201   background-color: #f9f9f9;
 202   float: left;
 203   margin: 0;
 204   padding: 3px 0 0 0;
 205 }
 206
 207 #fa-submenu{
 208 padding: 0;
 209 margin-top: 0px;
 210 width: 100%;
 211 height: 24px;
 212 background-color: #1275ae;
 213 }
 214
 215 #fa-submenu ul{
 216 margin:0;
 217 padding: 0;
 218 list-style: none;
 219 }
 220
 221 #fa-submenu li{
 222 display: inline;
 223 margin: 0 2px 0 0;
 224 padding: 0;
 225 }
 226
 227 #fa-submenu a{
 228 float: left;
 229 display: block;
 230 font-size: 12px;
 231 color: white;
 232 text-decoration: none;
 233 margin: 0 1px 0 0; /*Margin between each menu item*/
 234 border-right: 1px solid #ececec;
 235 padding: 5px 10px;
 236 background-color: #1275ae;
 237 }
 238
 239 #fa-submenu a:hover{
 240 background-color: black; /*Brown color theme*/
 241 color: white;
 242 }
 243
 244
 245 /* Content */
 246 .fa-content {
 247   width: 99%;
 248   margin: 0;
 249   padding: 7px 10px 5px 0;
 250   float: right;
 251   vertical-align: top;
 252 }
 253
 254 /* Footer */
 255 .fa-footer {
 256   clear: both;
 257   background-image: url(images/footer_bg.png);
 258   background-repeat: repeat-x;
 259   height: 10px;
 260   margin: 0;
 261   padding: 10px;
 262   text-align: center;
 263   font-size: 10px;
 264   color: #036;
 265 }
 266
 267
 268 h1 {
 269         font-size: 14px;
 270         margin-right: 20px;
 271         color: #466f01;
 272 }
 273 h2, .titletext {
 274         font-weight: bold;
 275         font-size: 13px;
 276         color: #555;
 277         padding: 5px;
 278 }
 279 .titletext {
 280         border-bottom: 1px solid #8899aa;
 281 }
 282
 283 h3 {
 284         font-size: 100%;
 285         padding-top: 1ex;
 286         padding-bottom: 1ex;
 287 }
 288 #header { margin: 0; }
 289 #header ul {clear: right; float: right; font-size: 11px; margin: 8px 10px 0 0; }
 290 #header li{ list-style: none; display: inline; margin: 0; }
 291 #header li a{ color: #045c97; text-decoration: none; padding: 0 0 0 16px; }
 292 #header h1 {
 293         padding: 4px 0 4px 10px;
 294         margin: 0;
 295 }
 296 #header h2 {
 297         font-style: italic;
 298 }
 299
 300 .fa-footer .power a { font-size: 10px; padding: 0 12px 0 12px; text-align: center; background: transparent url(images/news.gif) no-repeat center left; color: #045c97; }
 301 .fa-footer .date { font-size: 10px; padding: 0 12px 0 12px; text-align: center; color: #045c97; }
 302
 303 hr {
 304         background: #ccc;
 305         border: 0;
 306         color: #ccc;
 307         height: 1px;
 308 }
 309
 310 .menu_group {
 311         font-size: 12px;
 312         padding: 0;
 313         color: #555;
 314         background-color: #fff;
 315         padding-left: 3px;
 316         font-weight: bold;
 317 }
 318
 319 .menu_group_items {
 320         font-size: 12px;
 321         background-color: #f9f9f9;
 322         font-weight: normal;
 323         line-height: 19px;
 324         padding: 9px;
 325         border: 1px solid #8899aa;
 326 }
 327
 328 .menu_group_items a {
 329         text-decoration: none;
 330 }
 331
 332 .tableheader {
 333         font-weight: bold;
 334         background-color: #1275ae;
 335         color: #fff;
 336         text-align: center;
 337 }
 338
 339 .tableheader2 {
 340         font-weight: bold;
 341         background-color: #1275ae;
 342         color: #fff;
 343         text-align: left;
 344 }
 345
 346 .tableseparator {
 347         border-left: 1px solid #ccc;
 348 }
 349
 350 .headingtext {
 351         font-weight: bold;
 352         font-size: 12px;
 353         color: #555;
 354 }
 355
 356 .headingtext2 {
 357         font-size: 12px;
 358         color: black;
 359 }
 360
 361 .headingtext3 {
 362         font-weight: bold;
 363         font-size: 10px;
 364         color: black;
 365 }
 366
 367 .errortext {
 368         font-size: 12px;
 369         color: #f00;
 370         font-weight: bold;
 371 }
 372
 373 .inputsubmit {
 374         font-size: 11px;
 375         border: 1px #ccc solid;
 376         background-image: url(images/footer_bg.png);
 377         background-repeat: repeat-x;
 378         padding: 1px 4px;
 379 }
 380
 381 .ajaxsubmit {
 382         font-size: 11px;
 383         border: 1px #ccc solid;
 384         background-image: url(images/footer_bg.png);
 385         background-repeat: repeat-x;
 386         padding: 1px 4px;
 387 }
 388
 389 .oddrow {
 390         background-color: #fafafa;
 391 }
 392
 393 .evenrow {
 394         background-color: #f3f3f3;
 395 }
 396
 397 .overduebg {
 398         background-color: pink;
 399 }
 400
 401 .overduefg {
 402         color: pink;
 403 }
 404
 405 .currentfg {
 406         color: #f66;
 407 }
 408
 409 .redfg, a.redfg {
 410         color: red;
 411         font-weight: bold;
 412 }
 413
 414 .settledbg {
 415         background-color: #0b0;
 416 }
 417
 418 .settledfg {
 419         color: #0b0;
 420 }
 421
 422 .inquirybg {
 423         background-color: #fdfeef;
 424 }
 425
 426 .currencybg {
 427         background-color: #e88;
 428 }
 429
 430 .stockmankobg {
 431         background-color: pink;
 432 }
 433
 434 .stockmankofg {
 435         color: red;
 436 }
 437
 438 table.tablestyle {
 439         border-collapse: collapse;
 440         border: 1px solid #8899aa;
 441 }
 442 table.tablestyle td {
 443         border-collapse: collapse;
 444         border: 1px solid #8899aa;
 445 }
 446 table.tablestyle2 {
 447         border-collapse: collapse;
 448         border: 1px solid #cccccc;
 449 }
 450 table.tablestyle2 td {
 451         border-collapse: collapse;
 452         border: 1px solid #cccccc;
 453 }
 454 table.tablestyle_inner {
 455         border-collapse: collapse;
 456         border: 1px solid #f9f9f9;
 457 }
 458 table.tablestyle_inner td {
 459         border-collapse: collapse;
 460         border: 1px solid #f9f9f9;
 461 }
 462 .tablestyle_noborder {
 463         padding: 3px;
 464 }
 465
 466 .label {
 467         background-color: #d7dbdd;
 468         color: black;
 469 }
 470
 471 #loginscreen {
 472         background: #f5f5f5;
 473 }
 474
 475 .login {
 476         width: 350px;
 477         border-left: 12px solid #367cb5;
 478         border-collapse: collapse;
 479         background-color: #eeeeee;
 480 }
 481 .login td {
 482         border-collapse: collapse;
 483         border: 1px solid #cccccc;
 484 }
 485
 486 .amount {
 487         font-family: Verdana, Arial, Helvetica;
 488         font-size: 11px;
 489         text-align: right;
 490 }
 491
 492 input.amount {
 493         padding-right: 0px;
 494         border-right: none;
 495 }
 496
 497 .editbutton {
 498         color:#00f;
 499         background-color:transparent;
 500         border-style:none;
 501         text-decoration:none;
 502         padding: 0;
 503         margin: 0;
 504         cursor: pointer;
 505 }
 506
 507 .navibutton[disabled] {
 508         color:#ccc;
 509         text-decoration:none;
 510         cursor: auto;
 511 }
 512
 513 button.navibutton {
 514         font-family:Arial, Helvetica, sans-serif;
 515         font-size: 11px;
 516         font-weight: bold;
 517         color:#fff;
 518         padding: 0 3px;
 519         background-color: transparent;
 520         border-style:none;
 521         cursor: pointer;
 522 }
 523
 524 .navibutton span {
 525         text-decoration:underline;
 526 }
 527
 528 .navibar {
 529         padding: 0 3px;
 530     color: #fff;
 531     border: 1px solid #8899aa;
 532     border-collapse: collapse;
 533         background-color: #1275ae;
 534 }
 535
 536 .listsubmit {
 537     display: none;
 538 }
 539
 540 .inactive {
 541         color: gray;
 542 }
 543
 544 button {
 545         font-size: 11px;
 546         border: 1px #0066cc solid;
 547         padding: 1px 0px;
 548 }
 549
 550 button img, span {
 551         padding: 0px 2px ;
 552         vertical-align: middle;
 553 }
 554
 555 ul.ajaxtabs{
 556         padding: 3px 0 0 0;
 557         margin: 3px 3px 0 3px;
 558         font: 12px Tahoma,Verdana;
 559         font-weight: bold;
 560 }
 561
 562 ul.ajaxtabs li{
 563         list-style: none;
 564         margin: 0;
 565         display: inline;
 566 }
 567
 568 ul.ajaxtabs li button{
 569     background-color: #dee7ec;
 570         padding: 3px 8px;
 571         margin: 0px;
 572         border-top: 1px solid #8899aa;
 573         border-right: 1px solid #8899aa;
 574         border-bottom: none;
 575         border-left: none;
 576         font-weight: bold;
 577 }
 578
 579 ul.ajaxtabs li button:hover{
 580         border-top: 1px solid #8899aa;
 581         color:#fff;
 582 }
 583 div.spaceBox{
 584         background-color: #8899aa;
 585         height:8px;
 586         border-bottom: 1px solid #8899aa;
 587         border-left: 1px solid #8899aa;
 588         border-right:1px solid #8899aa;
 589         margin: 0 3px 0px 3px
 590 }
 591
 592 div.contentBox{
 593         border: 1px solid #8899aa;
 594         margin: 0 3px 3px 3px
 595 }
 596
 597 ul.ajaxtabs li button.current, ul.ajaxtabs li button.current:hover{
 598         border-left: 1px solid #8899aa;
 599         background-color: #8899aa;
 600         color:#fff;
 601 }
 602 #hints {
 603   font-size: 12px;
 604   padding: 5px;
 605   border-bottom: 1px solid #8899aa;
 606   margin: -4px -2px -2px;
 607   border: 1px solid #8899aa;
 608   background-color: #ffffea;
 609   white-space: nowrap;
 610 }
 611
 612 img { border: 0; }
 613
 614 /*
 615         Calendar style
 616 */
 617 #CCIframe {
 618         display: none;
 619         left: 0px;
 620         position: absolute;
 621         top: 0px;
 622         height: 250px;
 623         width: 270px;
 624         z-index: 99;
 625 }
 626 #CC {
 627         position:absolute;
 628         background-color:#FFF;
 629         margin:0; padding:0;
 630         display:none;
 631         z-index: 100;
 632 }
 633 #CC table {
 634         font-family: arial, verdana, helvetica, sans-serif;
 635         font-size: 8pt;
 636         border-left: 1px solid #336;
 637         border-right: 1px solid #336;
 638 }
 639 #CC th {
 640         font-weight: normal;
 641         text-align: center;
 642 }
 643 #CC th a {
 644         font-weight: normal;
 645         text-decoration: none;
 646         color: #FFF;
 647         padding: 1px;
 648 }
 649 #CC td {
 650         text-align: center;
 651 }
 652 #CC .header {
 653         background-color: #22303b;
 654 }
 655 #CC .weekday {
 656         background-color: #eee;
 657         color: #000;
 658 }
 659 #CC .weekend {
 660         background-color: #FFC;
 661         color: #000;
 662 }
 663 #CC .weekno {
 664         background-color: #cde;
 665         color: #555;
 666 }
 667 #CC .current {
 668         border: 1px solid #339;
 669         background-color: #22303b;
 670         color: #FFF;
 671 }
 672 #CC .weekday, #CC .weekend, #CC .current {
 673         display: block;
 674         text-decoration: none;
 675         border: 1px solid #FFF;
 676         width: 2em;
 677 }
 678 #CC .weekday:hover, #CC .weekend:hover, #CC .current:hover {
 679         color: #FFF;
 680         background-color: #22303b;
 681         border: 1px solid #999;
 682 }
 683 #CC .previous {
 684         text-align: left;
 685 }
 686 #CC .next {
 687         text-align: right;
 688 }
 689 #CC .previous, #CC .next {
 690         padding: 1px 3px 1px 3px;
 691         font-size: 1.4em;
 692 }
 693 #CC .previous a, #CC .next a {
 694         color: #FFF;
 695         text-decoration: none;
 696         font-weight: bold;
 697 }
 698 #CC .title {
 699         text-align: center;
 700         font-weight: bold;
 701         color: #FFF;
 702 }
 703 #CC .empty {
 704         background-color: #ddd;
 705         border: 1px solid #FFF;
 706 }
 707
 708 div.err_msg {
 709         margin: 10px;
 710         padding: 3px;
 711         border: 1px solid #cc3300;
 712         background-color: #ffcccc;
 713         color: #dd2200;
 714         text-align: center;
 715 }
 716
 717 div.warn_msg {
 718         margin: 10px;
 719         padding: 3px;
 720         border: 1px solid #ff9900;
 721         background-color: #ffff00;
 722         color: #ff5500;
 723         text-align: center;
 724 }
 725
 726 div.note_msg {
 727         margin: 10px;
 728         padding: 3px;
 729         border: 1px solid #33cc00;
 730         background-color: #ccffcc;
 731         color: #007700;
 732         text-align: center;
 733 }
 734
 735 #title {
 736         margin-bottom: 10px;
 737         width: 100%;
 738 }