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 }
 495
 496 .editbutton {
 497         color:#00f;
 498         background-color:transparent;
 499         border-style:none;
 500         text-decoration:none;
 501         padding: 0;
 502         margin: 0;
 503         cursor: pointer;
 504 }
 505
 506 .navibutton[disabled] {
 507         color:#ccc;
 508         text-decoration:none;
 509         cursor: auto;
 510 }
 511
 512 button.navibutton {
 513         font-family:Arial, Helvetica, sans-serif;
 514         font-size: 11px;
 515         font-weight: bold;
 516         color:#fff;
 517         padding: 0 3px;
 518         background-color: transparent;
 519         border-style:none;
 520         cursor: pointer;
 521 }
 522
 523 .navibutton span {
 524         text-decoration:underline;
 525 }
 526
 527 .navibar {
 528         padding: 0 3px;
 529     color: #fff;
 530     border: 1px solid #8899aa;
 531     border-collapse: collapse;
 532         background-color: #1275ae;
 533 }
 534
 535 .listsubmit {
 536     display: none;
 537 }
 538
 539 .inactive {
 540         color: gray;
 541 }
 542
 543 button {
 544         font-size: 11px;
 545         border: 1px #0066cc solid;
 546         padding: 1px 0px;
 547 }
 548
 549 button img, span {
 550         padding: 0px 2px ;
 551         vertical-align: middle;
 552 }
 553
 554 ul.ajaxtabs{
 555         padding: 3px 0 0 0;
 556         margin: 3px 3px 0 3px;
 557         font: 12px Tahoma,Verdana;
 558         font-weight: bold;
 559 }
 560
 561 ul.ajaxtabs li{
 562         list-style: none;
 563         margin: 0;
 564         display: inline;
 565 }
 566
 567 ul.ajaxtabs li button{
 568     background-color: #dee7ec;
 569         padding: 3px 8px;
 570         margin: 0px;
 571         border-top: 1px solid #8899aa;
 572         border-right: 1px solid #8899aa;
 573         border-bottom: none;
 574         border-left: none;
 575         font-weight: bold;
 576 }
 577
 578 ul.ajaxtabs li button:hover{
 579         border-top: 1px solid #8899aa;
 580         color:#fff;
 581 }
 582 div.spaceBox{
 583         background-color: #8899aa;
 584         height:8px;
 585         border-bottom: 1px solid #8899aa;
 586         border-left: 1px solid #8899aa;
 587         border-right:1px solid #8899aa;
 588         margin: 0 3px 0px 3px
 589 }
 590
 591 div.contentBox{
 592         border: 1px solid #8899aa;
 593         margin: 0 3px 3px 3px
 594 }
 595
 596 ul.ajaxtabs li button.current, ul.ajaxtabs li button.current:hover{
 597         border-left: 1px solid #8899aa;
 598         background-color: #8899aa;
 599         color:#fff;
 600 }
 601 #hints {
 602   font-size: 12px;
 603   padding: 5px;
 604   border-bottom: 1px solid #8899aa;
 605   margin: -4px -2px -2px;
 606   border: 1px solid #8899aa;
 607   background-color: #ffffea;
 608   white-space: nowrap;
 609 }
 610
 611 img { border: 0; }
 612
 613 /*
 614         Calendar style
 615 */
 616 #CCIframe {
 617         display: none;
 618         left: 0px;
 619         position: absolute;
 620         top: 0px;
 621         height: 250px;
 622         width: 270px;
 623         z-index: 99;
 624 }
 625 #CC {
 626         position:absolute;
 627         background-color:#FFF;
 628         margin:0; padding:0;
 629         display:none;
 630         z-index: 100;
 631 }
 632 #CC table {
 633         font-family: arial, verdana, helvetica, sans-serif;
 634         font-size: 8pt;
 635         border-left: 1px solid #336;
 636         border-right: 1px solid #336;
 637 }
 638 #CC th {
 639         font-weight: normal;
 640         text-align: center;
 641 }
 642 #CC th a {
 643         font-weight: normal;
 644         text-decoration: none;
 645         color: #FFF;
 646         padding: 1px;
 647 }
 648 #CC td {
 649         text-align: center;
 650 }
 651 #CC .header {
 652         background-color: #22303b;
 653 }
 654 #CC .weekday {
 655         background-color: #eee;
 656         color: #000;
 657 }
 658 #CC .weekend {
 659         background-color: #FFC;
 660         color: #000;
 661 }
 662 #CC .weekno {
 663         background-color: #cde;
 664         color: #555;
 665 }
 666 #CC .current {
 667         border: 1px solid #339;
 668         background-color: #22303b;
 669         color: #FFF;
 670 }
 671 #CC .weekday, #CC .weekend, #CC .current {
 672         display: block;
 673         text-decoration: none;
 674         border: 1px solid #FFF;
 675         width: 2em;
 676 }
 677 #CC .weekday:hover, #CC .weekend:hover, #CC .current:hover {
 678         color: #FFF;
 679         background-color: #22303b;
 680         border: 1px solid #999;
 681 }
 682 #CC .previous {
 683         text-align: left;
 684 }
 685 #CC .next {
 686         text-align: right;
 687 }
 688 #CC .previous, #CC .next {
 689         padding: 1px 3px 1px 3px;
 690         font-size: 1.4em;
 691 }
 692 #CC .previous a, #CC .next a {
 693         color: #FFF;
 694         text-decoration: none;
 695         font-weight: bold;
 696 }
 697 #CC .title {
 698         text-align: center;
 699         font-weight: bold;
 700         color: #FFF;
 701 }
 702 #CC .empty {
 703         background-color: #ddd;
 704         border: 1px solid #FFF;
 705 }
 706
 707 div.err_msg {
 708         margin: 10px;
 709         padding: 3px;
 710         border: 1px solid #cc3300;
 711         background-color: #ffcccc;
 712         color: #dd2200;
 713         text-align: center;
 714 }
 715
 716 div.warn_msg {
 717         margin: 10px;
 718         padding: 3px;
 719         border: 1px solid #ff9900;
 720         background-color: #ffff00;
 721         color: #ff5500;
 722         text-align: center;
 723 }
 724
 725 div.note_msg {
 726         margin: 10px;
 727         padding: 3px;
 728         border: 1px solid #33cc00;
 729         background-color: #ccffcc;
 730         color: #007700;
 731         text-align: center;
 732 }
 733
 734 #title {
 735         margin-bottom: 10px;
 736         width: 100%;
 737 }
 738
 739 @media screen and (min-width: 1024px) {
 740         body,td,th,input,select,#header ul,.inputsubmit,.ajaxsubmit,.amount,button.navibutton,button { font-size: 12px; }
 741         textarea,.fa-menu ul li a,#fa-submenu a,.fa-footer .date,.menu_group,.menu_group_items,.headingtext,
 742         .headingtext2,.errortext,#hints { font-size: 13px; }
 743         #fa-submenu { height: 25px; }
 744         .fa-footer,.fa-footer .power a,.headingtext3 { font-size: 11px; }
 745         h1 { font-size: 15px; }
 746         h2,.titletext { font-size: 14px; }
 747         #CC table { font-size: 8pt; }
 748         #CC .previous, #CC .next { font-size: 1.4em; }
 749 }
 750 @media screen and (min-width: 1200px) {
 751         body,td,th,input,select,#header ul,.inputsubmit,.ajaxsubmit,.amount,button.navibutton,button { font-size: 13px; }
 752         textarea,.fa-menu ul li a,#fa-submenu a,.fa-footer .date,.menu_group,.menu_group_items,.headingtext,
 753         .headingtext2,.errortext,#hints { font-size: 14px; }
 754         #fa-submenu { height: 26px; }
 755         .fa-footer,.fa-footer .power a,.headingtext3 { font-size: 12px; }
 756         h1 { font-size: 16px; }
 757         h2, .titletext { font-size: 15px; }
 758         #CC table { font-size: 8pt; }
 759         #CC .previous, #CC .next { font-size: 1.4em; }
 760 }
 761