horizontal-tabs.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. .horizontal-tabs {
  2. margin: 0 0 1em 0; /* LTR */
  3. padding: 0;
  4. border: 1px solid #ccc;
  5. position: relative; /* IE6/7 */
  6. }
  7. [dir="rtl"] .horizontal-tabs {
  8. margin: 0 0 1em 0;
  9. }
  10. .horizontal-tabs .horizontal-tabs-list {
  11. display: inline-block;
  12. margin: 0;
  13. border: 0;
  14. padding: 0px;
  15. list-style: none;
  16. background-color: #dedede;
  17. border-right: 1px solid #dedede; /* LTR */
  18. width: 100%;
  19. height: auto;
  20. clear: both;
  21. }
  22. [dir="rtl"] .horizontal-tabs .horizontal-tabs-list {
  23. border-right: 0;
  24. border-left: 1px solid #dedede;
  25. }
  26. .horizontal-tabs-pane {
  27. padding: 0 1em;
  28. border: 0;
  29. }
  30. .horizontal-tabs-pane > summary {
  31. display: none;
  32. }
  33. /* Layout of each tab */
  34. .horizontal-tabs .horizontal-tab-button {
  35. background: #eee;
  36. border-right: 1px solid #ccc; /* LTR */
  37. padding: 1px;
  38. padding-top: 0;
  39. margin: 0;
  40. min-width: 5em; /* IE7 */
  41. float: left; /* LTR */
  42. }
  43. [dir="rtl"] .horizontal-tabs .horizontal-tab-button {
  44. border-right: 0;
  45. border-left: 1px solid #ccc;
  46. float: right;
  47. }
  48. .horizontal-tabs .horizontal-tab-button a {
  49. display: block;
  50. text-decoration: none;
  51. padding: 0.5em 0.6em;
  52. }
  53. .horizontal-tabs .horizontal-tab-button a:hover {
  54. outline: none;
  55. background-color: #ededdd;
  56. }
  57. .horizontal-tabs .horizontal-tab-button li:hover,
  58. .horizontal-tabs .horizontal-tab-button li:focus {
  59. background-color: #ddd;
  60. }
  61. .horizontal-tabs ul.horizontal-tabs-list :focus {
  62. outline: none;
  63. }
  64. .horizontal-tab-button a:focus strong,
  65. .horizontal-tab-button a:active strong,
  66. .horizontal-tab-button a:hover strong {
  67. text-decoration: none;
  68. outline: none;
  69. }
  70. .horizontal-tab-button.selected {
  71. background-color: #fff;
  72. padding: 0 0 1px 0;
  73. }
  74. [dir="rtl"] .horizontal-tab-button.selected {
  75. border-left-width: 0;
  76. border-right-width: 1px;
  77. }
  78. .horizontal-tabs ul.horizontal-tabs-list li a,
  79. .horizontal-tabs ul.horizontal-tabs-list li.selected a {
  80. display: block;
  81. text-decoration: none;
  82. padding: 0.5em 0.6em 0.3em 0.6em;
  83. position:relative;
  84. top: 0px;
  85. }
  86. .horizontal-tab-button .selected strong {
  87. color: #000;
  88. }
  89. .horizontal-tab-button .summary {
  90. display: block;
  91. }
  92. .horizontal-tab-button .summary {
  93. line-height: normal;
  94. margin-bottom: 0;
  95. }
  96. /**
  97. * tab content
  98. */
  99. div.field-group-htabs-wrapper .field-group-format-wrapper {
  100. clear: both;
  101. padding: 0 0 0.6em;
  102. }
  103. /*hide*/
  104. .horizontal-tabs .horizontal-tab-hidden {
  105. display: block;
  106. position: absolute;
  107. top: -100000px;
  108. width: 100%;
  109. }