examples/shared/extjs/css/extjs.css

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