1/* $Id: system.css,v 1.48 2008/01/09 09:56:39 goba Exp $ */ 2 3/* 4** HTML elements 5*/ 6body.drag { 7 cursor: move; 8} 9th.active img { 10 display: inline; 11} 12tr.even, tr.odd { 13 background-color: #eee; 14 border-bottom: 1px solid #ccc; 15 padding: 0.1em 0.6em; 16} 17tr.drag { 18 background-color: #fffff0; 19} 20tr.drag-previous { 21 background-color: #ffd; 22} 23td.active { 24 background-color: #ddd; 25} 26td.checkbox, th.checkbox { 27 text-align: center; 28} 29tbody { 30 border-top: 1px solid #ccc; 31} 32tbody th { 33 border-bottom: 1px solid #ccc; 34} 35thead th { 36 text-align: left; /* LTR */ 37 padding-right: 1em; /* LTR */ 38 border-bottom: 3px solid #ccc; 39} 40 41/* 42** Other common styles 43*/ 44.breadcrumb { 45 padding-bottom: .5em 46} 47div.indentation { 48 width: 20px; 49 height: 1.7em; 50 margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */ 51 padding: 0.42em 0 0.42em 0.6em; /* LTR */ 52 float: left; /* LTR */ 53} 54div.tree-child { 55 background: url(../../misc/tree.png) no-repeat 11px center; /* LTR */ 56} 57div.tree-child-last { 58 background: url(../../misc/tree-bottom.png) no-repeat 11px center; /* LTR */ 59} 60div.tree-child-horizontal { 61 background: url(../../misc/tree.png) no-repeat -11px center; 62} 63.error { 64 color: #e55; 65} 66div.error { 67 border: 1px solid #d77; 68} 69div.error, tr.error { 70 background: #fcc; 71 color: #200; 72 padding: 2px; 73} 74.warning { 75 color: #e09010; 76} 77div.warning { 78 border: 1px solid #f0c020; 79} 80div.warning, tr.warning { 81 background: #ffd; 82 color: #220; 83 padding: 2px; 84} 85.ok { 86 color: #008000; 87} 88div.ok { 89 border: 1px solid #00aa00; 90} 91div.ok, tr.ok { 92 background: #dfd; 93 color: #020; 94 padding: 2px; 95} 96.item-list .icon { 97 color: #555; 98 float: right; /* LTR */ 99 padding-left: 0.25em; /* LTR */ 100 clear: right; /* LTR */ 101} 102.item-list .title { 103 font-weight: bold; 104} 105.item-list ul { 106 margin: 0 0 0.75em 0; 107 padding: 0; 108} 109.item-list ul li { 110 margin: 0 0 0.25em 1.5em; /* LTR */ 111 padding: 0; 112 list-style: disc; 113} 114ol.task-list li.active { 115 font-weight: bold; 116} 117.form-item { 118 margin-top: 1em; 119 margin-bottom: 1em; 120} 121tr.odd .form-item, tr.even .form-item { 122 margin-top: 0; 123 margin-bottom: 0; 124 white-space: nowrap; 125} 126tr.merge-down, tr.merge-down td, tr.merge-down th { 127 border-bottom-width: 0 !important; 128} 129tr.merge-up, tr.merge-up td, tr.merge-up th { 130 border-top-width: 0 !important; 131} 132.form-item input.error, .form-item textarea.error, .form-item select.error { 133 border: 2px solid red; 134} 135.form-item .description { 136 font-size: 0.85em; 137} 138.form-item label { 139 display: block; 140 font-weight: bold; 141} 142.form-item label.option { 143 display: inline; 144 font-weight: normal; 145} 146.form-checkboxes, .form-radios { 147 margin: 1em 0; 148} 149.form-checkboxes .form-item, .form-radios .form-item { 150 margin-top: 0.4em; 151 margin-bottom: 0.4em; 152} 153.marker, .form-required { 154 color: #f00; 155} 156.more-link { 157 text-align: right; /* LTR */ 158} 159.more-help-link { 160 font-size: 0.85em; 161 text-align: right; /* LTR */ 162} 163.nowrap { 164 white-space: nowrap; 165} 166.item-list .pager { 167 clear: both; 168 text-align: center; 169} 170.item-list .pager li { 171 background-image:none; 172 display:inline; 173 list-style-type:none; 174 padding: 0.5em; 175} 176.pager-current { 177 font-weight:bold; 178} 179.tips { 180 margin-top: 0; 181 margin-bottom: 0; 182 padding-top: 0; 183 padding-bottom: 0; 184 font-size: 0.9em; 185} 186dl.multiselect dd.b, dl.multiselect dd.b .form-item, dl.multiselect dd.b select { 187 font-family: inherit; 188 font-size: inherit; 189 width: 14em; 190} 191dl.multiselect dd.a, dl.multiselect dd.a .form-item { 192 width: 8em; 193} 194dl.multiselect dt, dl.multiselect dd { 195 float: left; /* LTR */ 196 line-height: 1.75em; 197 padding: 0; 198 margin: 0 1em 0 0; /* LTR */ 199} 200dl.multiselect .form-item { 201 height: 1.75em; 202 margin: 0; 203} 204 205/* 206** Inline items (need to override above) 207*/ 208.container-inline div, .container-inline label { 209 display: inline; 210} 211 212/* 213** Tab navigation 214*/ 215ul.primary { 216 border-collapse: collapse; 217 padding: 0 0 0 1em; /* LTR */ 218 white-space: nowrap; 219 list-style: none; 220 margin: 5px; 221 height: auto; 222 line-height: normal; 223 border-bottom: 1px solid #bbb; 224} 225ul.primary li { 226 display: inline; 227} 228ul.primary li a { 229 background-color: #ddd; 230 border-color: #bbb; 231 border-width: 1px; 232 border-style: solid solid none solid; 233 height: auto; 234 margin-right: 0.5em; /* LTR */ 235 padding: 0 1em; 236 text-decoration: none; 237} 238ul.primary li.active a { 239 background-color: #fff; 240 border: 1px solid #bbb; 241 border-bottom: #fff 1px solid; 242} 243ul.primary li a:hover { 244 background-color: #eee; 245 border-color: #ccc; 246 border-bottom-color: #eee; 247} 248ul.secondary { 249 border-bottom: 1px solid #bbb; 250 padding: 0.5em 1em; 251 margin: 5px; 252} 253ul.secondary li { 254 display: inline; 255 padding: 0 1em; 256 border-right: 1px solid #ccc; /* LTR */ 257} 258ul.secondary a { 259 padding: 0; 260 text-decoration: none; 261} 262ul.secondary a.active { 263 border-bottom: 4px solid #999; 264} 265 266/* 267** Autocomplete styles 268*/ 269/* Suggestion list */ 270#autocomplete { 271 position: absolute; 272 border: 1px solid; 273 overflow: hidden; 274 z-index: 100; 275} 276#autocomplete ul { 277 margin: 0; 278 padding: 0; 279 list-style: none; 280} 281#autocomplete li { 282 background: #fff; 283 color: #000; 284 white-space: pre; 285 cursor: default; 286} 287#autocomplete li.selected { 288 background: #0072b9; 289 color: #fff; 290} 291/* Animated throbber */ 292html.js input.form-autocomplete { 293 background-image: url(../../misc/throbber.gif); 294 background-repeat: no-repeat; 295 background-position: 100% 2px; /* LTR */ 296} 297html.js input.throbbing { 298 background-position: 100% -18px; /* LTR */ 299} 300 301/* 302** Collapsing fieldsets 303*/ 304html.js fieldset.collapsed { 305 border-bottom-width: 0; 306 border-left-width: 0; 307 border-right-width: 0; 308 margin-bottom: 0; 309 height: 1em; 310} 311html.js fieldset.collapsed * { 312 display: none; 313} 314html.js fieldset.collapsed legend { 315 display: block; 316} 317html.js fieldset.collapsible legend a { 318 padding-left: 15px; /* LTR */ 319 background: url(../../misc/menu-expanded.png) 5px 75% no-repeat; /* LTR */ 320} 321html.js fieldset.collapsed legend a { 322 background-image: url(../../misc/menu-collapsed.png); /* LTR */ 323 background-position: 5px 50%; /* LTR */ 324} 325/* Note: IE-only fix due to '* html' (breaks Konqueror otherwise). */ 326* html.js fieldset.collapsed legend, 327* html.js fieldset.collapsed legend *, 328* html.js fieldset.collapsed table * { 329 display: inline; 330} 331/* For Safari 2 to prevent collapsible fieldsets containing tables from dissapearing due to tableheader.js. */ 332html.js fieldset.collapsible { 333 position: relative; 334} 335html.js fieldset.collapsible legend a { 336 display: block; 337} 338/* Avoid jumping around due to margins collapsing into collapsible fieldset border */ 339html.js fieldset.collapsible .fieldset-wrapper { 340 overflow: auto; 341} 342 343/* 344** Resizable text areas 345*/ 346.resizable-textarea { 347 width: 95%; 348} 349.resizable-textarea .grippie { 350 height: 9px; 351 overflow: hidden; 352 background: #eee url(../../misc/grippie.png) no-repeat center 2px; 353 border: 1px solid #ddd; 354 border-top-width: 0; 355 cursor: s-resize; 356} 357html.js .resizable-textarea textarea { 358 margin-bottom: 0; 359 width: 100%; 360 display: block; 361} 362 363/* 364** Table drag and drop. 365*/ 366.draggable a.tabledrag-handle { 367 cursor: move; 368 float: left; /* LTR */ 369 height: 1.7em; 370 margin: -0.4em 0 -0.4em -0.5em; /* LTR */ 371 padding: 0.42em 1.5em 0.42em 0.5em; /* LTR */ 372 text-decoration: none; 373} 374a.tabledrag-handle:hover { 375 text-decoration: none; 376} 377a.tabledrag-handle .handle { 378 margin-top: 4px; 379 height: 13px; 380 width: 13px; 381 background: url(../../misc/draggable.png) no-repeat 0 0; 382} 383a.tabledrag-handle-hover .handle { 384 background-position: 0 -20px; 385} 386 387/* 388** Teaser splitter 389*/ 390.joined + .grippie { 391 height: 5px; 392 background-position: center 1px; 393 margin-bottom: -2px; 394} 395/* Keeps inner content contained in Opera 9. */ 396.teaser-checkbox { 397 padding-top: 1px; 398} 399div.teaser-button-wrapper { 400 float: right; /* LTR */ 401 padding-right: 5%; /* LTR */ 402 margin: 0; 403} 404.teaser-checkbox div.form-item { 405 float: right; /* LTR */ 406 margin: 0 5% 0 0; /* LTR */ 407 padding: 0; 408} 409textarea.teaser { 410 display: none; 411} 412html.js .no-js { 413 display: none; 414} 415 416/* 417** Progressbar styles 418*/ 419.progress { 420 font-weight: bold; 421} 422.progress .bar { 423 background: #fff url(../../misc/progress.gif); 424 border: 1px solid #00375a; 425 height: 1.5em; 426 margin: 0 0.2em; 427} 428.progress .filled { 429 background: #0072b9; 430 height: 1em; 431 border-bottom: 0.5em solid #004a73; 432 width: 0%; 433} 434.progress .percentage { 435 float: right; /* LTR */ 436} 437.progress-disabled { 438 float: left; /* LTR */ 439} 440.ahah-progress { 441 float: left; /* LTR */ 442} 443.ahah-progress .throbber { 444 width: 15px; 445 height: 15px; 446 margin: 2px; 447 background: transparent url(../../misc/throbber.gif) no-repeat 0px -18px; 448 float: left; /* LTR */ 449} 450tr .ahah-progress .throbber { 451 margin: 0 2px; 452} 453.ahah-progress-bar { 454 width: 16em; 455} 456 457/* 458** Formatting for welcome page 459*/ 460#first-time strong { 461 display: block; 462 padding: 1.5em 0 .5em; 463} 464 465/* 466** To be used with tableselect.js 467*/ 468tr.selected td { 469 background: #ffc; 470} 471 472/* 473** Floating header for tableheader.js 474*/ 475table.sticky-header { 476 margin-top: 0; 477 background: #fff; 478} 479 480/* 481** Installation clean URLs 482*/ 483#clean-url.install { 484 display: none; 485} 486 487/* 488** For anything you want to hide on page load when JS is enabled, so 489** that you can use the JS to control visibility and avoid flicker. 490*/ 491html.js .js-hide { 492 display: none; 493} 494 495/* 496** Styles for the system modules page (admin/build/modules) 497*/ 498#system-modules div.incompatible { 499 font-weight: bold; 500} 501 502/* 503** Styles for the system themes page (admin/build/themes) 504*/ 505#system-themes-form div.incompatible { 506 font-weight: bold; 507} 508 509/* 510** Password strength indicator 511*/ 512span.password-strength { 513 visibility: hidden; 514} 515input.password-field { 516 margin-right: 10px; /* LTR */ 517} 518div.password-description { 519 padding: 0 2px; 520 margin: 4px 0 0 0; 521 font-size: 0.85em; 522 max-width: 500px; 523} 524div.password-description ul { 525 margin-bottom: 0; 526} 527.password-parent { 528 margin: 0 0 0 0; 529} 530/* 531** Password confirmation checker 532*/ 533input.password-confirm { 534 margin-right: 10px; /* LTR */ 535} 536.confirm-parent { 537 margin: 5px 0 0 0; 538} 539span.password-confirm { 540 visibility: hidden; 541} 542span.password-confirm span { 543 font-weight: normal; 544} 545