div.rotatingBanner {
padding: 0rem 0rem .1rem 0rem;
background-repeat: no-repeat;
background-position: top left; 
border-radius: 8px;
position: relative;
margin:.2rem 1rem;

}
#bannerFrame {
    width: 100%;
    height: auto;  /* Adjust as needed */
  border: none;
}

#iframe {
    width: 100%;
    height: 100%;
    border: none;
	font-style: Ubuntu; 
}
#bannerControls {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.bubble {
    width: 20px;
    height: 20px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}
.bubble:hover {
    background-color: #aaa;
}
.bannerPanel { 
        display: inline-block;
#        width: 45%; /* Adjust as needed */
        margin-right: 5px; /* Adjust as needed */
        vertical-align: top; /* Aligns them at the top */
} 
#banner-container {
#  border:solid 2px #117766; 
  width: 100%;
  height: 280px; /* Adjust the height as needed */
	padding:.5em;
border-radius:8px; 
  overflow: hidden;
	margin-bottom:.1em;
}

#pause-button {
  background-color: #518BA1;
  margin-bottom: .1em;
  color: #fff;
  font-size: 12px;
  margin-left:3em;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#pause-button:hover {
  background-color: #407A90;
}

.banner-section {
  width: 90%;
  margin: 0 auto;
}

.banner-section h2 {
  font-size: 1.2em;
  margin-bottom: 10px;
  color: #518BA1;
}

.banner-items {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.banner-item {
  background: #222;
  border-radius: 8px;
  overflow: hidden;
  width: 180px;
  text-align: center;
  box-shadow: 0 0 5px #000;
}

.banner-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.banner-item .info {
  padding: 5px 10px;
  font-size: 0.9em;
}

.banner-item .title {
  font-weight: bold;
}

.banner-item .user {
  color: #bbb;
  font-size: 0.85em;
}

.bannertitle, .banneruser { 
	color:#ddd; 
}