examples/shared/extjs/css/extjs.css

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