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