css/joomla.css

   1 /* joomla.css: Joomla-specific css directives for CiviCRM. */
   2
   3 /*
   4 ** HTML elements
   5 */
   6 div#toolbar-box .icon-48-generic {
   7   display: none;
   8 }
   9
  10 div#toolbar-box {
  11   height: 26px;
  12 }
  13
  14 fieldset {
  15   margin-bottom: 1em;
  16   padding: .5em;
  17 }
  18 form {
  19   margin: 0;
  20   padding: 0;
  21 }
  22 hr {
  23   height: 1px;
  24   border: 1px solid gray;
  25 }
  26 img {
  27   border: 0;
  28 }
  29 /* Added in CiviCRM 2.0 to alleviate tiny font issues. */
  30 #crm-container tr, #crm-container tr td {
  31   font-size: 1em;
  32 }
  33
  34 /* Added in CiviCRM 2.1 to overwrite tiny font in TinyMCE editor. */
  35 #crm-container #content table.mceLayout td {
  36   font-size: 0em;
  37 }
  38
  39 th {
  40   text-align: left;
  41   padding-right: 1em;
  42   border-bottom: 3px solid #ccc;
  43   white-space: nowrap;
  44 }
  45 th.active img {
  46   display: inline;
  47 }
  48 tr.dark, tr.light {
  49   background-color: #eee;
  50   border-bottom: 1px solid #ccc;
  51   padding: 0.1em 0.6em;
  52 }
  53
  54 td.active {
  55   background-color: #ddd;
  56 }
  57
  58 td.label {
  59   background: none;
  60 }
  61
  62 /*
  63 ** Menu styles
  64 */
  65 #crm-container .menu {
  66   padding: 0 0 0 0.5em;
  67   margin: 0 0 0 2em;
  68 }
  69 #crm-container .menu ul {
  70   list-style: none;
  71   border: none;
  72   text-align:left;
  73 }
  74 #crm-container .menu li a {
  75   width: 100%;
  76   text-decoration: none;
  77 }
  78 #crm-container li.expanded {
  79   list-style-type: circle;
  80   list-style-image: url(menu-expanded.png);
  81   padding: 0.2em 0.5em 0 0;
  82   margin: 0;
  83 }
  84 #crm-container li.collapsed {
  85   list-style-type: disc;
  86   list-style-image: url(menu-collapsed.png);
  87   padding: 0.2em 0.5em 0 0;
  88   margin: 0;
  89 }
  90 #crm-container li a.active {
  91   color: #000;
  92 }
  93 #crm-container td.menu-disabled {
  94   background: #ccc;
  95 }
  96
  97 /* Tab navigation */
  98 #crm-container .tabs {
  99   margin: 0 0 0.5em 0.5em;
 100 }
 101 #crm-container ul.primary {
 102   border-collapse: collapse;
 103   padding: 0 0 0 1em;
 104   white-space: nowrap;
 105   list-style: none;
 106   margin: 5px;
 107   height: auto;
 108   line-height: normal;
 109   border-bottom: 1px solid #bbb;
 110 }
 111 #crm-container ul.primary li {
 112   display: inline;
 113 }
 114 #crm-container ul.primary li a {
 115   background-color: #ddd;
 116   border-color: #bbb;
 117   border-width: 1px;
 118   border-style: solid solid none solid;
 119   height: auto;
 120   margin-right: 0.5em;
 121   padding: 0 1em;
 122   text-decoration: none;
 123 }
 124 #crm-container ul.primary li.active a {
 125   background-color: #fff;
 126   border: 1px solid #bbb;
 127   border-bottom: #fff 1px solid;
 128 }
 129 #crm-container ul.primary li a:hover {
 130   background-color: #eee;
 131   border-color: #ccc;
 132   border-bottom-color: #eee;
 133 }
 134 #crm-container ul.secondary {
 135   border-bottom: 1px solid #bbb;
 136   padding: 0.5em 1em 0.5em 1em;
 137   margin: 5px;
 138 }
 139 #crm-container ul.secondary li {
 140   display: inline;
 141   padding: 0 1em;
 142   border-right: 1px solid #ccc;
 143 }
 144 #crm-container ul.secondary a {
 145   padding: 0;
 146   text-decoration: none;
 147 }
 148 #crm-container ul.secondary a.active {
 149   border-bottom: 4px solid #999;
 150 }
 151
 152 /*
 153 ** Other common styles
 154 */
 155 .breadcrumb {
 156   padding-bottom: .5em
 157 }
 158 .block ul {
 159   margin: 0;
 160   padding: 0 0 0.25em 1em;
 161 }
 162 br.clear {
 163   clear: both;
 164   height: 0px;
 165 }
 166 .container-inline div {
 167   display: inline;
 168 }
 169 .container-inline .crm-form-submit {
 170   margin: 0;
 171 }
 172 .item-list .icon {
 173   color: #555;
 174   float: right;
 175   padding-left: 0.25em;
 176   clear: right;
 177 }
 178 .item-list .icon a {
 179   color: #000;
 180   text-decoration: none;
 181 }
 182 .item-list .icon a:hover {
 183   color: #000;
 184   text-decoration: none;
 185 }
 186 .item-list .title {
 187   font-weight: bold;
 188 }
 189 .item-list ul {
 190   margin: 0 0 0.75em 0;
 191   padding: 0;
 192 }
 193 .item-list ul li {
 194   margin: 0 0 0.25em 1.5em;
 195   padding: 0;
 196   list-style: disc;
 197 }
 198 .form-item {
 199   margin-top: 1em;
 200   margin-bottom: 1em;
 201 }
 202 tr.light .form-item, tr.dark .form-item {
 203   margin-top: 0;
 204   margin-bottom: 0;
 205   white-space: nowrap;
 206 }
 207 .form-item input.error, .form-item textarea.error {
 208   border: 2px solid red;
 209 }
 210 /* Override .9em field help size from civicrm.css - CiviCRM 2.0 */
 211 #crm-container div.description, #crm-container span.description, #crm-container dd.description {
 212   font-size: 1em;
 213 }
 214 #crm-container div.description, #crm-container span.description {
 215    margin: 2px 0 15px 0;
 216    display: block;
 217 }
 218 .form-item label {
 219   font-weight: bold;
 220 }
 221 .form-item label.option {
 222   font-weight: normal;
 223 }
 224 .crm-form-submit {
 225   margin: 0.5em 0;
 226 }
 227 .marker, .form-required {
 228   color: #f00;
 229 }
 230 .more-link {
 231   text-align: right;
 232 }
 233 #pager {
 234   clear: both;
 235   text-align: center;
 236 }
 237 #pager div {
 238   padding: 0.5em;
 239 }
 240 .tips {
 241   margin-top: 0;
 242   margin-bottom: 0;
 243   padding-top: 0;
 244   padding-bottom: 0;
 245   font-size: 0.9em;
 246 }
 247 .more-help-link {
 248   font-size: 0.85em;
 249   text-align: right;
 250 }
 251
 252 /*
 253 ** Page layout blocks / IDs
 254 */
 255 #header, #content {
 256   width: 100%;
 257 }
 258 #header {
 259   background-color: #69c;
 260 }
 261 #logo {
 262   vertical-align: middle;
 263   border: 0;
 264 }
 265 #logo img {
 266   float: left;
 267   padding: 0em 1.0em 0em 1em;
 268   border: 0;
 269 }
 270 #menu {
 271   padding: 0 0 0 0;
 272   vertical-align: middle;
 273 }
 274 #primary {
 275   font-size: 1.0em;
 276   padding: 0em 0.8em 0.5em 0;
 277   color: #9cf;
 278 }
 279 #primary a {
 280   font-weight: bold;
 281   color: #fff;
 282 }
 283 #secondary {
 284   padding: 0 1em 0.5em 0;
 285   font-size: 0.8em;
 286   color: #9cf;
 287 }
 288 #secondary a {
 289   font-weight: bold;
 290   color: #9cf;
 291 }
 292 #search .form-text, #search .crm-form-submit {
 293   border: 1px solid #369;
 294   font-size: 1.1em;
 295 }
 296 #search .form-text {
 297   width: 8em;
 298   height: 1.4em;
 299   padding: 0 0.5em 0 0.5em;
 300   margin: 0 0 0.5em 0;
 301 }
 302 #search .crm-form-submit {
 303   height: 1.5em;
 304 }
 305 #main {
 306   /* padding in px not ex because IE messes up 100% width tables otherwise */
 307   padding: 10px;
 308 }
 309 #help {
 310   font-size: 1em;
 311   margin-bottom: 1em;
 312 }
 313 .breadcrumb {
 314   margin-bottom: .5em;
 315 }
 316 .messages {
 317   background-color: #eee;
 318   border: 1px solid #ccc;
 319   padding: 0.3em;
 320   margin-bottom: 1em;
 321 }
 322 .error {
 323   border-color: red;
 324   color: red;
 325 }
 326 #sidebar-left, #sidebar-right {
 327   background-color: #ddd;
 328   width: 16em;
 329   /* padding in px not ex because IE messes up 100% width tables otherwise */
 330   padding: 10px;
 331   vertical-align: top;
 332 }
 333
 334 #content-right {
 335   background-color: #FFFFFF;
 336 }
 337
 338 #footer {
 339   padding: 1em;
 340   font-size: 0.8em;
 341 }
 342
 343 /*
 344 ** Common declarations for child classes of node, comment, block, box, etc.
 345 ** If you want any of them styled differently for a specific parent, add
 346 ** additional rules /with only the differing properties!/ to .parent .class.
 347 ** See .comment .title for an example.
 348 */
 349 .title, .title a {
 350   font-weight: normal;
 351   font-size: 1.6em;
 352   color: #666;
 353   margin: 0 auto 0 auto;  /* decrease default margins for h<x>.title */
 354 }
 355 .block-civicrm #recently-viewed .crm-icon, .crm-icon {
 356   margin-top: 0 !important;
 357 }
 358 .submitted {
 359   color: #999;
 360   font-size: 0.8em;
 361 }
 362 .links {
 363   color: #999;
 364 }
 365 .links a {
 366   font-weight: bold;
 367 }
 368 .block, .box {
 369   padding: 0 0 1.5em 0;
 370 }
 371 .block {
 372   min-height: 25px;
 373   border-bottom: 1px solid #bbb;
 374   padding-bottom: 0.75em;
 375   margin-bottom: 1.5em;
 376 }
 377 .block .title {
 378   margin-bottom: .25em;
 379 }
 380 .box .title {
 381   font-size: 1.1em;
 382 }
 383
 384 #module-status, .version {
 385   font-size:11px;
 386 }
 387 #module-status a {
 388   font-weight: normal;
 389 }
 390 .main {
 391   text-align:left;
 392 }
 393
 394 /* Joomla Admin Menu alterations */
 395 /* Moved from civicrm.css in v3.2 */
 396
 397 ul#civicrm-menu {
 398     z-index: 1;
 399     position:relative;
 400     border: none;
 401     left:0px;
 402     height:0px;
 403     padding: 2px 0px 25px 2px !important;
 404     padding-bottom:25px !important; /*moz bottom */
 405     padding-bottom:2px; /*ie bottom */
 406 }
 407
 408 div#toolbar-box div.m {
 409     padding: 0px !important;
 410   min-height: 0;
 411   border: 0;
 412   margin-top: 8px;
 413 }
 414
 415 div#toolbar-box, div#toolbar-box div.m{
 416     height: auto;
 417 }
 418
 419 ul#civicrm-menu li#crm-qsearch {
 420     height:0px;
 421 }
 422 .crm-tab-button,
 423 .ui-tabs .ui-tabs-nav li {
 424   border: 1px;
 425   font-size: 110%;
 426 }
 427 .ui-tabs .ui-tabs-nav {
 428   padding: 0.2em 3px 1px;
 429 }
 430 #mainTabContainer li.crm-tab-button {
 431   margin:0 3px 3px 0;
 432   border: 1px solid #F5F6F1 !important;
 433 }
 434 #mainTabContainer li.crm-tab-button.ui-tabs-selected {
 435   padding-bottom: 0;
 436   border: 1px solid #999 !important;
 437 }
 438 #crm-container {
 439   font-size: 11px;
 440 }
 441 #crm-container .col1 {
 442   margin: 0;
 443 }
 444 #crm-container .footer {
 445   font-size: 1em;
 446 }
 447 .ac_results .ac_odd {
 448   background-color: #444;
 449 }
 450
 451 #crm-notification-container {
 452   top: 100px;
 453 }
 454
 455 #crm-container textarea,
 456 #crm-container input,
 457 #crm-container select {
 458   font-size: 12px;
 459   margin-bottom: auto;
 460   margin-right: 4px;
 461   width: auto;
 462   padding: 2px 4px;
 463 }
 464 #crm-container textarea,
 465 #crm-container input {
 466   height: auto;
 467 }
 468 #crm-container input[type=submit] {
 469   height: auto;
 470 }