You are here

rotating_banner.css in Rotating Banner 7.2

Same filename and directory in other branches
  1. 7 rotating_banner.css
.rotating-banner {
  height: auto;
  margin: 0 auto;
  width: 100%;
}

.rb-link {
  display: block;
}

.rotating-banner .rb-link:hover,
.rotating-banner .rb-link:visited,
.rotating-banner .rb-link:link,
.rotating-banner .rb-link:active {
  font-size: inherit;
  text-decoration: none;
  color: inherit;
}

.rotating-banner .rb-slides {
  /* border: 1px dashed #aaa; */
  height: auto;
  overflow: hidden;
  position: relative;
  width: auto;
}

.rb-textbox-wrapper {
  white-space: nowrap;
}

.jCycleActivated-processed .rb-slide.tallest {
  display: block !important;
  position: relative !important;
}

.rb-slide {
  display: none;
  line-height: 0;
  opacity: 0;
}
/* Hide all slides except the first one to avoid seeing both together before cycle inits */
.rb-slide.rb-first-slide {
  display: block;
  opacity: 1;
}

.fluid img {
  height: auto;
  width: 100%;
}

.rb-textbox-type-header {
  font-size: 16px;
  font-weight: bold;
}

.layout-wrapper {
  line-height: 1.5em;
  position: absolute;
}

.layout-wrapper:hover {
  cursor: pointer;
}

.layout-wrapper.top-left {
  left: 0;
  margin: 1em 0 0 1em;
  top: 0;
}

.layout-wrapper.top-right {
  right: 0;
  margin: 1em 1em 0 0;
  text-align: right;
  top: 0;
}

.layout-wrapper.bottom-left {
  bottom: 0;
  margin: 0 0 1em 1em;
  left: 0;
}

.layout-wrapper.bottom-right {
  bottom: 0;
  margin: 0 1em 1em 0;
  text-align: right;
  right: 0;
}

.layout-wrapper.custom {
  left: 0;
  height: 100%;
  top: 0;
  width: 100%;
}

.custom .rb-textbox-wrapper {
  position: absolute;
}

.controls {
  text-align: center;
}

.controls.none {
  display: none;
}

.controls a {
  display: inline-block;
  font-weight: bold;
  margin: 2px;
  padding: 5px;
  line-height: 10px;
}

.controls.buttons a {
  background: #CCC;
  color: transparent;
  font-size: 0;
  height: 0;
  text-indent: -2000px;
  width: 0;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.controls.buttons a.activeSlide {
  background: #000;
}

.controls.numbers a {
  color: #CCC;
}

.controls.numbers a.activeSlide {
  color: #000;
}

.static-wrapper {
  overflow: hidden;
}

File

rotating_banner.css
View source
  1. .rotating-banner {
  2. height: auto;
  3. margin: 0 auto;
  4. width: 100%;
  5. }
  6. .rb-link {
  7. display: block;
  8. }
  9. .rotating-banner .rb-link:hover,
  10. .rotating-banner .rb-link:visited,
  11. .rotating-banner .rb-link:link,
  12. .rotating-banner .rb-link:active {
  13. font-size: inherit;
  14. text-decoration: none;
  15. color: inherit;
  16. }
  17. .rotating-banner .rb-slides {
  18. /* border: 1px dashed #aaa; */
  19. height: auto;
  20. overflow: hidden;
  21. position: relative;
  22. width: auto;
  23. }
  24. .rb-textbox-wrapper {
  25. white-space: nowrap;
  26. }
  27. .jCycleActivated-processed .rb-slide.tallest {
  28. display: block !important;
  29. position: relative !important;
  30. }
  31. .rb-slide {
  32. display: none;
  33. line-height: 0;
  34. opacity: 0;
  35. }
  36. /* Hide all slides except the first one to avoid seeing both together before cycle inits */
  37. .rb-slide.rb-first-slide {
  38. display: block;
  39. opacity: 1;
  40. }
  41. .fluid img {
  42. height: auto;
  43. width: 100%;
  44. }
  45. .rb-textbox-type-header {
  46. font-size: 16px;
  47. font-weight: bold;
  48. }
  49. .layout-wrapper {
  50. line-height: 1.5em;
  51. position: absolute;
  52. }
  53. .layout-wrapper:hover {
  54. cursor: pointer;
  55. }
  56. .layout-wrapper.top-left {
  57. left: 0;
  58. margin: 1em 0 0 1em;
  59. top: 0;
  60. }
  61. .layout-wrapper.top-right {
  62. right: 0;
  63. margin: 1em 1em 0 0;
  64. text-align: right;
  65. top: 0;
  66. }
  67. .layout-wrapper.bottom-left {
  68. bottom: 0;
  69. margin: 0 0 1em 1em;
  70. left: 0;
  71. }
  72. .layout-wrapper.bottom-right {
  73. bottom: 0;
  74. margin: 0 1em 1em 0;
  75. text-align: right;
  76. right: 0;
  77. }
  78. .layout-wrapper.custom {
  79. left: 0;
  80. height: 100%;
  81. top: 0;
  82. width: 100%;
  83. }
  84. .custom .rb-textbox-wrapper {
  85. position: absolute;
  86. }
  87. .controls {
  88. text-align: center;
  89. }
  90. .controls.none {
  91. display: none;
  92. }
  93. .controls a {
  94. display: inline-block;
  95. font-weight: bold;
  96. margin: 2px;
  97. padding: 5px;
  98. line-height: 10px;
  99. }
  100. .controls.buttons a {
  101. background: #CCC;
  102. color: transparent;
  103. font-size: 0;
  104. height: 0;
  105. text-indent: -2000px;
  106. width: 0;
  107. border-radius: 5px;
  108. -moz-border-radius: 5px;
  109. -webkit-border-radius: 5px;
  110. }
  111. .controls.buttons a.activeSlide {
  112. background: #000;
  113. }
  114. .controls.numbers a {
  115. color: #CCC;
  116. }
  117. .controls.numbers a.activeSlide {
  118. color: #000;
  119. }
  120. .static-wrapper {
  121. overflow: hidden;
  122. }