examples/shared/extjs/css/extjs.css

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