jquery.tabs.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. /* Caution! Ensure accessibility in print and other media types... */
  2. @media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
  3. .tabs-hide {
  4. display: none;
  5. }
  6. }
  7. /* Hide useless elements in print layouts... */
  8. @media print {
  9. .tabs-nav {
  10. display: none;
  11. }
  12. }
  13. /* Skin */
  14. .tabs-nav {
  15. list-style: none;
  16. margin: 0;
  17. padding: 0 0 0 4px;
  18. background:#ffffff;
  19. border-bottom:1px dotted #ffffff;
  20. border-top:1px dotted #ffffff;
  21. }
  22. .tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
  23. display: block;
  24. clear: both;
  25. content: " ";
  26. }
  27. .tabs-nav li {
  28. float: left;
  29. margin: 0 0 0 1px;
  30. min-width: 84px; /* be nice to Opera */
  31. }
  32. .tabs-nav a, .tabs-nav a span {
  33. display: block;
  34. padding: 0 10px;
  35. background: url(images/tab.png) no-repeat;
  36. }
  37. .tabs-nav a {
  38. position: relative;
  39. top: 1px;
  40. z-index: 2;
  41. padding-left: 0;
  42. color: #fff;
  43. font-size: 12px;
  44. font-weight: bold;
  45. line-height: 2;
  46. text-align: center;
  47. text-decoration: none;
  48. white-space: nowrap; /* required in IE 6 */
  49. }
  50. .tabs-nav .tabs-selected a {
  51. color: #fff;
  52. }
  53. .tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
  54. background-position: 100% -150px;
  55. outline: 0; /* prevent dotted border in Firefox */
  56. }
  57. .tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
  58. background-position: 100% -100px;
  59. }
  60. .tabs-nav a span {
  61. width: 64px; /* IE 6 treats width as min-width */
  62. min-width: 64px;
  63. height: 18px; /* IE 6 treats height as min-height */
  64. min-height: 18px;
  65. padding-top: 6px;
  66. padding-right: 0;
  67. }
  68. *>.tabs-nav a span { /* hide from IE 6 */
  69. width: auto;
  70. height: auto;
  71. }
  72. .tabs-nav .tabs-selected a span {
  73. padding-top: 7px;
  74. }
  75. .tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {
  76. background-position: 0 -50px;
  77. }
  78. .tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {
  79. background-position: 0 0;
  80. }
  81. .tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
  82. cursor: text;
  83. }
  84. .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
  85. cursor: pointer;
  86. }
  87. .tabs-nav .tabs-disabled {
  88. opacity: .4;
  89. }
  90. .tabs-container {
  91. border-top: 1px solid #97a5b0;
  92. padding: 1em 8px;
  93. background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
  94. }
  95. .tabs-loading em {
  96. padding: 0 0 0 20px;
  97. background: url(images/loading.gif) no-repeat 0 50%;
  98. }