jquery.tabs.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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. }
  19. .tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
  20. display: block;
  21. clear: both;
  22. content: " ";
  23. }
  24. .tabs-nav li {
  25. float: left;
  26. margin: 0 0 0 1px;
  27. min-width: 84px; /* be nice to Opera */
  28. }
  29. .tabs-nav a, .tabs-nav a span {
  30. display: block;
  31. padding: 0 10px;
  32. /*background: url(images/tab.png) no-repeat;*/
  33. }
  34. .tabs-nav a {
  35. position: relative;
  36. top: 1px;
  37. z-index: 2;
  38. padding-left: 0;
  39. /*color: #fff;*/
  40. font-size: 12px;
  41. font-weight: bold;
  42. line-height: 2;
  43. text-align: center;
  44. text-decoration: none;
  45. white-space: nowrap; /* required in IE 6 */
  46. }
  47. .tabs-nav .tabs-selected a {
  48. /*color: #fff;*/
  49. }
  50. .tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
  51. background-position: 100% -150px;
  52. outline: 0; /* prevent dotted border in Firefox */
  53. }
  54. .tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
  55. background-position: 100% -100px;
  56. }
  57. .tabs-nav a span {
  58. width: 64px; /* IE 6 treats width as min-width */
  59. min-width: 64px;
  60. height: 18px; /* IE 6 treats height as min-height */
  61. min-height: 18px;
  62. padding-top: 6px;
  63. padding-right: 0;
  64. }
  65. *>.tabs-nav a span { /* hide from IE 6 */
  66. width: auto;
  67. height: auto;
  68. }
  69. .tabs-nav .tabs-selected a span {
  70. padding-top: 7px;
  71. }
  72. .tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {
  73. background-position: 0 -50px;
  74. }
  75. .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 {
  76. background-position: 0 0;
  77. }
  78. .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... */
  79. cursor: text;
  80. }
  81. .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
  82. cursor: pointer;
  83. }
  84. .tabs-nav .tabs-disabled {
  85. opacity: .4;
  86. }
  87. .tabs-container {
  88. /*border-top: 1px solid #97a5b0;*/
  89. padding: 1em 8px;
  90. /*background: #fff; declare background color for container to avoid distorted fonts in IE while fading */
  91. }
  92. .tabs-loading em {
  93. padding: 0 0 0 20px;
  94. /*background: url(images/loading.gif) no-repeat 0 50%;*/
  95. }