examples/shared/extjs/css/extjs.css

   1 /*!
   2  * Ext JS Library 3.2.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote{margin:0;padding:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}
   8
   9 body {
  10     /*font-family: helvetica,arial,tahoma,sans-serif;*/
  11     font-family:verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
  12     font-size:13px;
  13     color:#555;
  14     line-height:20px;
  15     background-color:#fff;
  16     text-align:center;
  17     margin:0;padding:0;border:0;
  18 }
  19
  20 td {
  21     font-size:13px;
  22 }
  23
  24 a:link, a:visited, a:active {
  25     color: #0464BB;
  26     text-decoration:none;
  27 }
  28 a:hover {
  29     color: #1C417C;
  30     text-decoration: underline;
  31 }
  32
  33 /* main document center */
  34 #viewport {
  35     margin:auto;
  36     text-align:left;
  37     width:960px;
  38 }
  39
  40 /* header styles */
  41 #hd {
  42     background:transparent url(../images/topbar.png) no-repeat 10px bottom;
  43        height: 108px;
  44        position:relative;
  45 }
  46
  47 #hd table.nav {
  48     position:absolute;
  49     margin-left:0;
  50 }
  51 #hd table.nav tr {
  52 }
  53 #hd table.nav tr td {
  54     padding-top:1px;
  55     padding-left:0;
  56     padding-right:0;
  57 }
  58 #hd table.nav a, #hd table.main-nav a:hover, #hd table.main-nav a:visited {
  59     color: #fff;
  60 }
  61
  62 #hd table.nav a, #hd table.main-nav a span {
  63     color: #fff;
  64     display:block;
  65 }
  66 #hd table.nav a {
  67     line-height:14px;
  68 }
  69 #hd table.nav a span {
  70     padding:6px 15px 7px 15px;
  71 }
  72 #hd table.nav a span {
  73     font-family:tahoma,helvetica,arial,sans-serif;
  74     font-size:12px;
  75 }
  76
  77 /* Main nav */
  78
  79
  80 #hd table.main-nav {
  81     left:15px;
  82     top:53px;
  83 }
  84 #hd table.main-nav tr {
  85     height:28px;
  86 }
  87
  88 #hd table.main-nav a:hover {
  89     text-decoration:underline;
  90 }
  91
  92 #hd table.main-nav a:hover span {
  93     text-decoration:underline;
  94 }
  95
  96 #hd table.main-nav td.active a {
  97     background:transparent url(../images/nav-left.png) repeat-x;
  98     text-decoration:none;
  99 }
 100
 101 #hd table.main-nav td.active a span {
 102     background:transparent url(../images/nav-right.png) no-repeat right 0;
 103     font-weight:bold;
 104     padding:7px 15px 6px 15px;
 105     text-decoration:none;
 106 }
 107
 108 /* Sub nav */
 109
 110 #hd .sub-nav {
 111     position:absolute;
 112     left:25px;
 113     top:85px;
 114     height:21px;
 115 }
 116 #hd .sub-nav td {
 117     font-size:11px;
 118     color:#777;
 119     font-family:tahoma,helvetica,arial,sans-serif;
 120 }
 121 #hd .sub-nav td span {
 122     color:#777;
 123 }
 124 #hd .sub-nav td a {
 125     color:#046BCA;
 126     font-family:tahoma,helvetica,arial,sans-serif;
 127 }
 128 #hd .sub-nav td.spacer {
 129     padding:0 5px;
 130 }
 131 /* Main header image */
 132
 133 #hd h1 a {
 134     background:transparent url(../images/extjs2.png) no-repeat;
 135     position:relative;
 136     float:left;
 137     top: 12px;
 138     left: 20px;
 139     height:18px;
 140     width:227px;
 141 }
 142 #hd h1 a span {
 143     display:none;
 144 }
 145
 146
 147 #hd a#logo img {
 148     border: none !important;
 149     height:52px;
 150     position:relative;
 151     top:-3px;
 152     left:7px;
 153     width:134px;
 154 }
 155
 156 /* body styles */
 157
 158 #bd {
 159     margin:5px 15px 0;
 160     zoom:1;
 161 }
 162
 163 #bd p {
 164     margin-top:8px;
 165     margin-bottom:8px;
 166 }
 167
 168 #bd br {
 169     font-size:10px;
 170     line-height:10px;
 171 }
 172
 173 #bd .left-column {
 174     width:700px;
 175     float:left;
 176 }
 177 #bd .right-column {
 178     width:200px;
 179     float:left;
 180     margin-left:20px;
 181 }
 182 #bd .right-column p {
 183     margin:5px;
 184     font-size:12px;
 185 }
 186
 187 #bd h3 {
 188     font-family: "Trebuchet MS", Tahoma,arial,sans-serif;
 189     font-size:18px;
 190     font-weight:normal;
 191     color: #385F95;
 192     margin:7px 0;
 193 }
 194 #bd h4 {
 195     font-family: "Trebuchet MS", Tahoma,arial,sans-serif;
 196     font-size:14px;
 197     font-weight:bold;
 198     color: #555;
 199     margin:5px 0;
 200 }
 201 #bd h5 {
 202     font-family: "Trebuchet MS", Tahoma,arial,sans-serif;
 203     background-color:#F1F1F1;
 204     padding:3px;
 205     color:#789030;
 206     font-size:11px;
 207     font-weight:bold;
 208     text-transform:uppercase;
 209 }
 210
 211 #bd .big-box h5.alt {
 212     text-align:center;
 213     font-size:13px;
 214     border-bottom:1px solid #eee;
 215     color:#385F95;
 216 }
 217
 218 #bd .box {
 219     padding: 3px 5px 15px;
 220 }
 221
 222 /* footer */
 223 #ft {
 224     margin-top:25px;
 225     text-align:center;
 226     background: transparent url(../images/ft-bg.png) no-repeat center 0;
 227     padding-top:5px;
 228 }
 229 #ft table.nav {
 230     margin: 0 auto;
 231 }
 232
 233 #ft table.nav a, #ft table.nav a:hover, #ft table.nav a:visited {
 234     color:#789030;
 235     font-size:12px;
 236     display:block;
 237     padding:5px 15px 0;
 238 }
 239
 240 #ft div.copy {
 241     margin: 0 auto;
 242     padding:10px 0 25px;
 243     color:gray;
 244 }
 245
 246 /* feature list */
 247 ul.features, .content-box ul, .side-box ul {
 248     margin-left:15px;
 249     list-style-image: url(../images/c-sep-l.gif);
 250 }
 251 ul.features li,  .content-box ul li, .side-box ul li {
 252     margin-top:5px;
 253     margin-bottom:5px;
 254 }
 255 /* flyout menus */
 256 .flyout-menu {
 257     position:absolute;
 258     left:-200px;
 259     top:-200px;
 260     background:#fff;
 261     padding:10px 15px;
 262     text-align:left;
 263     border:1px solid #aaa;
 264     font-family: helvetica,arial,tahoma,sans-serif;
 265 }
 266 .flyout-menu a {
 267     color:#046BCA;
 268 }
 269 .flyout-menu p {
 270     margin:4px 0;
 271     font-size:11px;
 272     color:#555;
 273     line-height:16px;
 274 }
 275 .flyout-menu br {
 276     line-height:10px;
 277 }
 278 .flyout-menu h3 {
 279     font-size:12px;
 280     font-weight:bold;
 281     line-height:16px;
 282 }
 283 .flyout-menu ul {
 284     font-size:11px;
 285     list-style-type: square;
 286     margin-left:15px;
 287 }
 288 .flyout-menu li {
 289     color:#ccc;
 290     line-height:16px;
 291 }
 292
 293 /* rss feeds */
 294
 295 .rss {
 296     float:right;
 297     margin: 3px 3px 0 0;
 298 }
 299 .rss a {
 300     display:block;
 301     width:14px;
 302     height:14px;
 303     background: transparent url(../images/home/rss.gif) no-repeat 0 -14px;
 304 }
 305 .rss a:hover {
 306     background-position: 0 0;
 307 }
 308
 309 /* side boxes */
 310
 311 div.side-box {
 312     background: transparent url(../images/side-box.png) no-repeat;
 313     padding-top:9px;
 314     width:200px;
 315     margin-bottom:20px;
 316     zoom:1;
 317 }
 318 div.side-box-inner {
 319     background: transparent url(../images/side-box.png) no-repeat 0 bottom;
 320     padding:0 15px 5px;
 321     font-size:12px;
 322     zoom:1;
 323 }
 324 #bd div.side-box-inner h5 {
 325     background:transparent !important;
 326     padding-top:0;
 327 }
 328
 329
 330 div.big-box {
 331     background: transparent url(../images/big-box.png) no-repeat;
 332     padding-top:12px;
 333     width:700px;
 334     margin-bottom:20px;
 335 }
 336 div.big-box-inner {
 337     background: transparent url(../images/big-box.png) no-repeat 0 bottom;
 338     padding:0 15px 12px;
 339     font-size:12px;
 340 }
 341 #bd div.big-box-inner h5 {
 342     background:transparent !important;
 343     padding-top:0;
 344 }
 345
 346 div.full-box {
 347     background: transparent url(../images/full-box.png) no-repeat;
 348     padding-top:12px;
 349     width:920px;
 350 }
 351 div.full-box-inner {
 352     background: transparent url(../images/full-box.png) no-repeat 0 bottom;
 353     padding:0 15px 10px;
 354     font-size:12px;
 355 }
 356
 357
 358 div.content-box {
 359     width:700px;
 360 }
 361 div.content-box p {
 362     margin-left:5px;
 363     margin-right:5px;
 364 }
 365 #bd div.content-box ul.features {
 366     margin-left:20px;
 367 }
 368 #bd .content-box h5 {
 369     background-image: url(../images/med-shd.png);
 370     padding-left:10px;
 371 }
 372
 373 /* Store */
 374
 375 #commercial strong {
 376     font-size: 12px;
 377     margin: 0 0 0 0;
 378     font-family:tahoma,verdana,helvetica,sans-serif;
 379     color: #083772;
 380     font-weight:bold;
 381 }
 382 table.license {
 383    margin-left:5px;
 384 }
 385 table.license, table.license td {
 386    border-collapse: separate;
 387    border: 0 none !important;
 388    font-size:12px;
 389 }
 390 table.license td {
 391    padding:0 5px 5px;
 392 }
 393
 394 .order-type {
 395    float:left;
 396    width:300px;
 397    margin:10px;
 398    font-size:11px;
 399 }
 400
 401 #bd .order-complete {
 402
 403 }
 404 #bd .order-complete p {
 405    margin-left:0;
 406 }
 407
 408 #commercial table.order-review {
 409    border-collapse: separate;
 410    margin-left:10px;
 411    font-size:12px;
 412 }
 413 #commercial table.order-review td {
 414    padding:5px 20px 5px 5px;
 415    vertical-align:top;
 416 }
 417 #commercial table.order-review tr.tsep td {
 418    border-top:1px dotted #ddd;
 419 }
 420 #commercial h3 {
 421     margin:0 0 5px;
 422     font-size:16px;
 423 }
 424 #store .big-box h4 {
 425     font-size:12px;
 426     font-weight:bold;
 427     color: #222;
 428     padding:4px;
 429     background:#efefef url(../images/inner-hd.png) repeat-x;
 430     border: 1px solid #efefef;
 431 }
 432
 433
 434 a.buynow {
 435     text-decoration:none;
 436     padding:4px 7px;
 437     border:1px solid;
 438     border-color:#ddd #bbb #bbb #ddd;
 439     background:#eee;
 440     font:bold 11px tahoma, arial, helvetica, sans-serif;
 441     color:#333 !important;
 442     cursor:pointer;
 443     margin:0 2px;
 444     display:block;
 445     float:right;
 446 }
 447
 448 a.buynow:hover, a.buynow:hover {
 449     text-decoration:none;
 450     border-color:#ccc #bbb #bbb #ccc;
 451     background-position:0 2px;
 452     background-color:#fafafa;
 453 }
 454
 455 .saleprice, b.sale, .sale-msg strong{
 456     color: #c33;
 457 }
 458
 459 /* comparison table */
 460
 461 .compare {
 462
 463 }
 464 .compare th {
 465     padding:5px 12px;
 466     font-weight:bold;
 467     text-align:center;
 468     border:1px solid #dddddd;
 469     color:#fff;
 470     background:#083772;
 471     font-size:12px;
 472 }
 473 .compare td {
 474     padding:5px;
 475     text-align:center;
 476     border:1px solid #dddddd;
 477     font-size:12px;
 478 }
 479 .compare th.cfirst {
 480     padding-left:8px;
 481 }
 482 .compare td.cfirst, .compare th.cfirst {
 483     text-align:left;
 484 }
 485 .compare td.cfirst {
 486     padding-left:20px;
 487 }
 488 .compare td.ctitle {
 489     text-align:left;
 490     font-weight:bold;
 491     background:#ececec;
 492     padding-left:12px;
 493     font-size:12px;
 494 }
 495
 496 .compare tr.cprice td,.compare tr.cfoot td {
 497     padding:5px 12px;
 498     font-weight:bold;
 499     border:1px solid #dddddd;
 500     border-collapse:collapse;
 501     color:#083772;
 502     background:#c3daf9 url(/themes/ext/resources/images/grid-hrow.gif) repeat-x;
 503     vertical-align:top;
 504 }
 505 .compare tr.cfoot td {
 506     background:#fff;
 507     padding-left:2px;
 508     padding-right:2px;
 509     border-color:#fff;
 510 }
 511 .compare tr.cfoot td a {
 512     margin-top:0;
 513     margin-right:25px;
 514 }
 515 .compare tr.corder-note td {
 516     background: #eee;
 517 }
 518
 519 .compare sup {
 520     margin-left:3px;
 521     font-size:10px;
 522 }
 523 .compare-info {
 524     font-size:11px;
 525     padding:10px;
 526 }
 527
 528 /* downloads */
 529
 530 table.dl {
 531     width:650px;
 532 }
 533
 534 table.dl td {
 535     padding:5px;
 536     vertical-align:top;
 537 }
 538
 539 .expandable {
 540     background:#F7F7F7;
 541     padding:4px;
 542     border:1px solid #DEDEDE;
 543 }
 544
 545 .expandable-body{
 546     background:#fff;
 547     padding:5px;
 548     zoom:1;
 549 }
 550 .expandable-body-inner{
 551     zoom:1;
 552 }
 553
 554 .expandable-body dd {
 555     float:left;
 556     width:300px;
 557     padding:5px;
 558 }
 559
 560 .training-info {
 561     font-size:11px;
 562 }
 563
 564 a.link {
 565     font-family:tahoma,helvetica,arial,sans-serif;
 566     font-size:12px;
 567     font-weight:bold;
 568     line-height:19px;
 569 }
 570
 571 #msg-ct {
 572     position:absolute;
 573     left:680px;
 574     top:17px;
 575     width:217px;
 576     height:22px;
 577 }
 578
 579 #msg {
 580     width:217px;
 581     height:22px;
 582     background-image:url(../images/msg-bg.png);
 583     color:#777;
 584     font-family:tahoma,helvetica,arial,sans-serif;
 585     font-size:11px;
 586     cursor:pointer;
 587     visibility:hidden;
 588 }
 589 #msg-inner {
 590     padding:5px 10px 0;
 591     zoom:1;
 592     line-height:12px;
 593     text-align:center;
 594 }
 595 .msg-over {
 596     color:#789030 !important;
 597 }
 598
 599 #msg img {
 600     width:19px;
 601     height:19px;
 602 }
 603
 604 /**
 605  * Ext.App#setAlert message-box styles.
 606  */
 607 .app-msg .x-box-mc {
 608     text-align: left;
 609 }
 610 .x-icon-text { background-repeat: no-repeat; padding-left: 20px; }
 611 .icon-status-ok { background-image: url(../../icons/fam/accept.png) !important; }
 612 .icon-status-error { background-image: url(../../icons/fam/error.png) !important; }
 613 .icon-status-notice { background-image: url(../../icons/fam/information.png) !important; }
 614