examples/shared/extjs/css/extjs.css

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