web/public_php/webtt/app/webroot/css/layout.css

   1 /*
 WebTT template based on 960 Grid System (http://960.gs/)
   2
   3 -----------------------------------------------
   4 Grey Box Method - Layout CSS
   5 ----------------------------------------------- */
   6
   7 body {
   8         background: #000
;
   9         background-image: url("http://www.ryzom.com/data/bg.jpg");
  10         background-attachment:fixed;
  11         background-repeat: repeat-x;
  12 //      border-top: 5px solid #000;
  13         margin-top: 5px;
  14 //      color: #333;
  15         color: #ddd;
  16         font-size: 11px;
  17         padding: 0 0 40px;
  18 }
  19
  20
  21 /* anchors
  22 ----------------------------------------------- */
  23 a {
  24 //      color: #000;
  25         color: inherit;
  26         font-weight:bold;
  27         text-decoration: none;
  28 }
  29 a:hover {
  30 //      color:#333;
  31 //      text-decoration: underline;
  32 //      text-shadow: #6374AB 0px 0px 2px;
  33         text-shadow: #84AFBD 0px 0px 2px;
  34 }
  35
  36
  37 /* 960 grid system container background
  38 ----------------------------------------------- */
  39 .container_12,
  40 .container_16 {
  41         background: rgb(71,71,71);
  42         background: rgba(0,0,0, 0.6);
  43         border: 1px solid rgb(110,110,110);
  44         border: 1px solid rgba(255,255,255, 0.5);
  45 }
  46
  47
  48 /* headings
  49 ----------------------------------------------- */
  50 h1, h2, h3, h4, h5, h6 {line-height:1.2em; margin-bottom:.3em;}
  51 h2 {margin-top:1em;}
  52 h5 {font-size:1.2em;}
  53 h6 {font-size:1em; text-transform:uppercase;}
  54
  55
  56 h1 a {
  57         font-weight:normal;
  58         color: #ddd;
  59 }
  60 h1 a:hover {
  61         font-weight:normal;
  62         color: #ddd;
  63 }
  64
  65
  66 /* branding
  67 ----------------------------------------------- */
  68 h1#branding {
  69         font-weight:normal;
  70         font-size:3em;
  71         text-align:left;
  72         background:#aaa;
  73         padding:.7em 1em;
  74         margin-bottom:0;
  75 }
  76
  77
  78 /* page heading
  79 ----------------------------------------------- */
  80 h2#page-heading {
  81         font-weight:normal;
  82         padding:.5em;
  83         margin:0 0 10px 0;
  84         border-bottom:1px solid #ccc;
  85 }
  86
  87
  88 /* boxes
  89 ----------------------------------------------- */
  90 .box {
  91 //      background:rgb(210,210,210);
  92 //      background:rgba(255,255,255,0.81);
  93         margin-bottom:20px;
  94         padding:10px 10px 1px 10px;
  95 //      color: #333;
  96         color: #ddd;
  97         border: 1px solid rgb(71,71,71);
  98         border: 1px solid rgba(255,255,255,0.4);
  99 }
 100 .box h2 {
 101         font-size:1em;
 102         font-weight:normal;
 103         text-transform:uppercase;
 104         color:#fff;
 105 //      background:#333;
 106         background:rgb(31,31,31);
 107         background:rgba(90,90,0,0.6);
 108         margin:-10px -10px 0 -10px;
 109         padding:6px 12px;
 110 }
 111 .box h2 a,
 112 .box h2 a.visible {
 113 //      color:#fff;
 114         color: #ddd;
 115 //      background:#333 url("../img/switch_minus.gif") 97% 50% no-repeat;
 116         background:url("../img/switch_minus.gif") 97% 50% no-repeat;
 117         background:url("../img/switch_minus.gif") 97% 50% no-repeat;
 118         display:block;
 119         padding:6px 12px;
 120         margin:-6px -12px;
 121         border:none;
 122 }
 123 .box h2 a.hidden,
 124 .box h2 a.hidden:hover {
 125         background-image: url("../img/switch_plus.gif");
 126 }
 127 .box h2 a:hover {
 128         background-color:#111;
 129 }
 130
 131 .menubox {
 132         padding:0px;
 133         color: #333;
 134 }
 135 .menubox .inbox {
 136         background:rgb(210,210,210);
 137         background:rgba(255,255,255,0.81);
 138         padding: 0px 10px 1px;
 139 }
 140 .inbox a {
 141         color: #000;
 142 }
 143 .menubox h2 {
 144         margin: 0px;
 145 }
 146 .menubox h2 a,
 147 .menubox h2 a.visible {
 148         background:rgb(31,31,31) url("../img/switch_minus.gif") 97% 50% no-repeat;
 149         background:rgba(90,90,0,0.6) url("../img/switch_minus.gif") 97% 50% no-repeat;
 150 }
 151 .menubox h2 a:hover {
 152         background-color:#111;
 153 }
 154
 155 .grid_4 .box h2 a {
 156         background-position: 97% 50%;
 157 }
 158 .grid_5 .box h2 a {
 159         background-position: 98% 50%;
 160 }
 161 .grid_12 .box h2 a {
 162         background-position: 99% 50%;
 163 }
 164
 165
 166 .block {
 167         padding-top:10px;
 168 }
 169 div.menu {
 170         padding:0;
 171 }
 172 div.menu h2 {
 173         margin:0;
 174 }
 175 div.menu .block {
 176         padding-top:0;
 177 }
 178
 179
 180 /* paragraphs, quotes and lists
 181 ----------------------------------------------- */
 182 p {
 183         margin-bottom:1em;
 184 }
 185 blockquote {
 186         font-family: Georgia, 'Times New Roman', serif;
 187         font-size:1.2em;
 188         padding-left:1em;
 189         border-left:4px solid #ccc;
 190 }
 191 blockquote cite {
 192         font-size:.9em;
 193 }
 194 ul, ol {
 195         padding-top:0;
 196 }
 197
 198 p.help {
 199         padding: 5px;
 200         background: rgba(255,255,255, 0.2);
 201         font-weight: bold;
 202 }
 203
 204 /* menus
 205 ----------------------------------------------- */
 206 ul.menu {
 207         list-style:none;
 208         border-top:1px solid #bbb;
 209 }
 210 ul.menu li {
 211         margin:0;
 212 }
 213 ul.menu li a {
 214         display:block;
 215         padding:4px 10px;
 216         border-bottom:1px solid #ccc;
 217 }
 218 ul.menu li a:hover {
 219         background:#eee;
 220 }
 221 ul.menu li a:active {
 222         background:#ccc;
 223 }
 224
 225 /* submenus
 226 ----------------------------------------------- */
 227 ul.menu ul {
 228         list-style:none;
 229         margin:0;
 230 }
 231 ul.menu ul li a {
 232         padding-left:30px;
 233 }
 234
 235 /* menu lists
 236 ----------------------------------------------- */
 237 
ul.list {
 238         margin-bottom: 0px;
 239         border-top: 0px none;
 240 }
 241 ul.list li.current {
 242         padding: 4px 14px;
 243 }
 244
 245 /* section menus
 246 ----------------------------------------------- */
 247 ul.section {
 248         border-top:0;
 249         margin-bottom:0;
 250 }
 251 ul.section li {
 252         text-transform:uppercase;
 253 }
 254 ul.section li a {
 255         background:#bbb;
 256 }
 257 ul.section li a:hover {
 258         background:#aaa;
 259 }
 260 ul.section li a:active {
 261         color:#fff;
 262         background:#666;
 263 }
 264 ul.section li li a {
 265         background:#ddd;
 266         border-bottom:1px solid #eee;
 267 }
 268 ul.section li li a:hover {
 269         background:#ccc;
 270 }
 271 ul.section li li a:active {
 272         color:#000;
 273         background:#fff;
 274 }
 275 ul.section ul li {
 276         text-transform:none;
 277 }
 278 ul.section ul.current li a {
 279         background:#eee;
 280         border-bottom:1px solid #fff;
 281 }
 282 ul.section ul.current li a:hover {
 283         background:#ddd;
 284 }
 285 ul.section ul.current li a:active {
 286         background:#fff;
 287 }
 288 ul.section li a.current {
 289         color:#fff;
 290         background:#666;
 291 }
 292 ul.section li a.current:hover {
 293         background:#555;
 294 }
 295 ul.section li a.current:active {
 296         background:#444;
 297 }
 298 ul.section li a.active {
 299         background:#fff;
 300         cursor:default;
 301 }
 302 ul.section li.current > a.active,
 303 ul.section li.current > a.active:hover {
 304         color:#fff;
 305         background:#666;
 306         cursor:default;
 307 }
 308
 309
 310 /* table
 311 ----------------------------------------------- */
 312 table {
 313         width:100%;
 314 //      border:1px solid #bbb;
 315         border:1px solid #aaa;
 316 //      border: 1px solid rgba(0,0,0,0.55);
 317         margin-bottom:10px;
 318 }
 319 col.colC {
 320         width:8em;
 321 }
 322 th, td {
 323         padding:.2em 1em;
 324         text-align:left;
 325         color: #333;
 326 }
 327 thead th {
 328         border-bottom:2px solid #888;
 329         background: #eee;
 330         background:rgba(212,222,255,0.65);
 331         padding:.4em 1em .2em;
 332 }
 333 thead th.table-head {
 334         font-size:1em;
 335         font-weight:normal;
 336         text-transform:uppercase;
 337         color:#fff;
 338         background:#555;
 339         border:1px solid #555;
 340 }
 341 tbody th,
 342 tbody td {
 343         border-top:1px solid #bbb;
 344         border-bottom:1px solid #bbb;
 345         background:#eee;
 346         background:rgba(255,255,255,0.85);
 347 }
 348 tbody tr.odd th,
 349 tbody tr.odd td {
 350         background:#fff;
 351 }
 352 tfoot th,
 353 tfoot td {
 354         border-top:2px solid #666;
 355         background:#eee;
 356         background:rgba(212,222,255,0.65);
 357 }
 358 tfoot tr.total th,
 359 tfoot tr.total td {
 360         border-top:6px double #666;
 361 }
 362 tfoot tr.total th {
 363         text-transform:uppercase;
 364 }
 365 th.currency,
 366 td.currency {
 367         text-align:right;
 368 }
 369 tfoot.dark th, tfoot.dark td {
 370 //      background: #bbbbbb;
 371 }
 372
 373
 374 /* forms
 375 ----------------------------------------------- */
 376 form {
 377         overflow:hidden;
 378 }
 379 fieldset {
 380         border:1px solid #bbb;
 381         padding:10px;
 382         position:relative;
 383         background:#e9e9e9;
 384         background:rgba(255,255,255,0.81);
 385         margin-bottom:10px;
 386         color: #333;
 387 }
 388 legend {
 389         font-size:1.1em;
 390         padding:.4em .8em;
 391         background:#f5f5f5;
 392         border:1px solid #bbb;
 393 }
 394 fieldset.login p {
 395         margin-bottom:1em;
 396         margin-top:0pt;
 397 }
 398 fieldset p label {
 399         width:98%;
 400 }
 401 fieldset p input {
 402         width:98%;
 403 }
 404 fieldset p select {
 405         width:99%;
 406 }
 407 fieldset.login p label {
 408         float:left;
 409         line-height:2em;
 410         margin-right:3%;
 411         text-align:right;
 412         width:32%;
 413 }
 414 fieldset.login p input {
 415         width:60%;
 416 }
 417 fieldset.login input.button {
 418         margin-left:35%;
 419 }
 420 form p.notice {
 421         font-weight:bold;
 422 }
 423 input.search.text {
 424         width:66%;
 425 }
 426 input.search.button {
 427         width:28%;
 428         margin-left:2%;
 429 }
 430
 431
 432 /* articles
 433 ----------------------------------------------- */
 434 .articles {
 435         padding:0;
 436 }
 437 .articles h2 {
 438         margin:0;
 439 }
 440 #articles {
 441         padding-top:0;
 442 }
 443 .article {
 444         border-top:1px solid #666;
 445         padding-top:.5em;
 446 }
 447 .box .article {
 448         border-top:3px solid #fff;
 449         padding:13px 10px 0 10px;
 450 }
 451 .article h2 {
 452         font-size:2em;
 453         font-weight:normal;
 454         text-transform:none;
 455         color:#333;
 456         background:transparent;
 457         padding:0;
 458         margin:0;
 459         border:none;
 460 }
 461 .article h3 {
 462         margin-bottom:.2em;
 463         font-size:1.6em;
 464 }
 465 .box .first {
 466         border-top:none;
 467 }
 468 .article h4 {
 469         font-size:1.2em;
 470         text-transform:uppercase;
 471         margin-bottom:.5em;
 472 }
 473 .article a.image {
 474         float:left;
 475         margin:3px 10px 3px 0;
 476         padding:4px;
 477         border:1px solid #bbb;
 478         background:#fff;
 479 }
 480 .article a.image:hover {
 481         border:1px solid #666;
 482 }
 483 .article a.image img {
 484         float:left;
 485 }
 486 .article p.meta {
 487         color:#666;
 488         border-top:1px dotted #999;
 489         border-bottom:1px dotted #999;
 490         padding:.3em 0;
 491         margin-bottom:.8em;
 492 }
 493
 494
 495 /* site information
 496 ----------------------------------------------- */
 497 #site_info .box {
 498         color:#ccc;
 499         background:#666;
 500         margin-bottom:10px;
 501 }
 502 #site_info a {
 503         color:#fff;
 504 }
 505 #site_info a:hover {
 506         color:#000;
 507 }
 508
 509
 510 /* AJAX sliding shelf
 511 ----------------------------------------------- */
 512 #loading {float:right; margin-right:14px; margin-top:-2px;}
 513 .block {padding-bottom:1px;}
 514
 515
 516 /* Accordian
 517 ----------------------------------------------- */
 518 .toggler {
 519         color: #222;
 520         margin: 0;
 521         padding: 2px 5px;
 522         background: #eee;
 523         border-bottom: 1px solid #ddd;
 524         border-right: 1px solid #ddd;
 525         border-top: 1px solid #f5f5f5;
 526         border-left: 1px solid #f5f5f5;
 527         font-size:1.1em;
 528         font-weight: normal;
 529 }
 530 .element h4 {
 531         margin: 0;
 532         padding:4px;
 533         line-height:1.2em;
 534 }
 535 .element p {
 536         margin: 0;
 537         padding: 4px;
 538 }
 539 .float-right {
 540         padding:10px 20px;
 541         float:right;
 542 }
 543
 544 #accordian-block {
 545         padding-bottom:10px;
 546 }
 547
 548
 549 /* Mootools Kwicks
 550 ----------------------------------------------- */
 551 #kwick-box {
 552         padding:0;
 553         overflow:hidden;
 554 }
 555 #kwick-box h2 {
 556         margin:0;
 557 }
 558 #kwick {
 559         position: relative;
 560 }
 561 #kwick .kwicks {
 562         display: block;
 563         background: #999;
 564         height: 120px;
 565         list-style:none;
 566         margin:0;
 567         overflow:hidden;
 568 }
 569 #kwick li {
 570         float: left;
 571         margin:0;
 572         padding:0;
 573 }
 574 #kwick .kwick {
 575         display: block;
 576         cursor: pointer;
 577         overflow: hidden;
 578         height: 100px;
 579         width: 215px;
 580         padding: 10px;
 581         background: #fff;
 582 }
 583 #kwick .kwick span {
 584         color:#fff;
 585 }
 586 #kwick .one {
 587         background: #666;
 588 }
 589 #kwick .two {
 590         background: #777;
 591 }
 592 #kwick .three {
 593         background: #888;
 594 }
 595 #kwick .four {
 596         background: #999;
 597 }
 598 /* Main Nav Current States */
 599 ul.nav li a.current {
 600         background: #888;
 601 }
 602
 603 /* CakePHP Specific */
 604 div#flashMessage {
 605         padding: 10px;
 606         margin: 0px 13px 10px 11px;
 607         border: 1px dashed #888;
 608         background: #ffcccc;
 609         font-size: 14px;
 610 }
 611 div.flash-error {
 612         color: #bf0000;
 613         background: #ffbfbf !important;
 614         border-color: #bf0000 !important;
 615 }
 616 div.flash-warning {
 617         color: #725600;
 618         background: #ffffbf !important;
 619         border-color: #bfbf00 !important;
 620 }
 621 div.flash-success {
 622         color: #00bf00;
 623         background: #dfffbf !important;
 624         border-color: #00bf00 !important;
 625 }
 626 div.error-message {
 627         color: #bf0000;
 628         font-weight: bold;
 629 }
 630 div.form div.box {
 631         padding: 10px;
 632         background:#e9e9e9;
 633         background: none repeat scroll 0 0 rgba(255, 255, 255, 0.81);
 634 }
 635 .input {
 636         margin: 0px 0px 5px 0px;
 637 }
 638 .text input {
 639         width: 250px;
 640 }
 641 .input label {
 642         width: 100px;
 643         text-align: right;
 644         display: block;
 645         float: left;
 646         margin: 0px 5px 0px 0px;
 647         padding: 2px 0px 0px 0px;
 648 }
 649 .text label {
 650         padding: 6px 0px 0px 0px;
 651 }
 652 .form-submit-group {
 653         float: right;
 654         margin: 0px 0px 5px 0px;
 655 }
 656 .form-submit-group .submit {
 657         float: left;
 658 }
 659 .form-cancel {
 660         float: left;
 661         padding-top: 5px;
 662         margin-right: 5px;
 663 }
 664 /** Scaffold View **/
 665 dl {
 666         line-height: 2em;
 667         margin: 0em 0em;
 668         width: 60%;
 669 }
 670 div.dl {
 671         border: 1px solid #aaa;
 672         color: #333;
 673         margin-bottom: 10px;
 674 }
 675 div.dh {
 676         background: none repeat scroll 0 0 rgba(212, 222, 255, 0.65);
 677         padding: 0.4em 1em 0.2em;
 678         font-weight: bold;
 679         border-bottom: 1px solid #888888;
 680         border-top: 0px none;
 681 }
 682 .dt, .dd {
 683         padding: 0.4em 1em 0.2em;
 684         border-top: 1px solid #888888;
 685 }
 686 div.dt {
 687         float: left;
 688         width: 10em;
 689         background: transparent;
 690         font-weight: bold;
 691 }
 692 .dd {
 693         background: none repeat scroll 0 0 rgba(255, 255, 255, 0.85);
 694 }
 695 .dd:after {
 696         clear: both;
 697 }
 698 dl .altrow, div .altrow {
 699         background: #f4f4f4;
 700 }
 701 dt {
 702         font-weight: bold;
 703         padding-left: 4px;
 704         vertical-align: top;
 705 }
 706 dd {
 707         margin-left: 10em;
 708         margin-top: -2em;
 709         vertical-align: top;
 710 }
 711 /** CakePHP Notices and Errors **/
 712 div.message {
 713         clear: both;
 714         color: #333;
 715         font-size: 140%;
 716         font-weight: bold;
 717         margin: 0 0 1em 0;
 718         background: #c73e14;
 719         padding: 5px;
 720 }
 721 div.error-message {
 722         clear: both;
 723         color: #bf0000;
 724         background: #ffbfbf;
 725         border-color: #bf0000;
 726         font-weight: bold;
 727 }
 728 p.error {
 729         color: #bf0000;
 730         background: #ffbfbf;
 731         border-color: #bf0000;
 732         font-family: Courier, monospace;
 733         font-size: 120%;
 734         line-height: 140%;
 735         padding: 0.8em;
 736         margin: 1em 0;
 737 }
 738 p.error em {
 739         color: #000;
 740         font-weight: normal;
 741         line-height: 140%;
 742 }
 743 .notice {
 744         color: #725600;
 745         background: #ffffbf;
 746         border-color: #bfbf00;
 747         display: block;
 748         font-family: Courier, monospace;
 749         font-size: 120%;
 750         line-height: 140%;
 751         padding: 0.8em;
 752         margin: 1em 0;
 753 }
 754 .success {
 755         color: #00bf00;
 756         background: #dfffbf;
 757         border-color: #00bf00;
 758 }
 759
 760 /* jQuery UI Stuff */
 761 #ui-datepicker-div {
 762         background: #fff;
 763         padding: 5px;
 764         border: 1px solid #eee;
 765 }
 766 a.ui-datepicker-prev {
 767         width: 35px;
 768         float: left;
 769         text-align: left;
 770 }
 771 a.ui-datepicker-next {
 772         width: 35px;
 773         float: right;
 774         text-align: right;
 775 }
 776 div.ui-datepicker-title {
 777         text-align: center;
 778 }
 779 table.ui-datepicker-calendar {
 780         padding-bottom: 0px;
 781         margin-bottom: 0px;
 782 }