/* -------------------------------------- basics */
.tabs-h2-1 {
    display: flex;
    gap: 7px;
    align-items: center;
    border: 1px solid;
    padding: 4px;
    border-radius: 3px  15px 15px 3px;
    background: linear-gradient(to bottom, #f8f9f5 0%, #e9eeda 50%, #e0e8ca 51%, #f5f8ec 100%);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.tabs-h2-2 {
    display: flex;
    gap: 7px;
    align-items: center;
    border: 1px solid;
    padding: 4px;
    border-radius: 3px  15px 15px 3px;
    background: linear-gradient(to bottom, #fcfafa 0%, #f9e7e5 50%, #f5dedc 51%, #fdf4f3 100%);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.tabs-h2-3 {
    display: flex;
    gap: 7px;
    border: 1px solid;
    padding: 4px;
    border-radius: 3px  15px 15px 3px;
    background: linear-gradient(to bottom, #fcfbf8 0%, #faf0e0 50%, #f1e2ca 51%, #fef8ee 100%);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    align-items: center;
}

.tabs-h2-4 {
    display: flex;
    gap: 7px;
    border: 1px solid;
    padding: 4px;
    border-radius: 3px  15px 15px 3px;
    background: linear-gradient(to bottom,  #f5f7f9 0%,#d7e5ef 50%,#c7dbe9 51%,#ebf3f9 100%);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    align-items: center;
}

.tabs-h2-1::before {
    content: url(/graphics/icons/FL-daisy2.gif);
    animation: tilt4 0.5s infinite;
}
.tabs-h2-2::before {
    content: url(/graphics/icons/FL-daisy2.gif);
    animation: tilt4 0.5s infinite;
}
.tabs-h2-3::before {
    content: url(/graphics/icons/FL-daisy2.gif);
    animation: tilt4 0.5s infinite;
}
.tabs-h2-4::before {
    content: url(/graphics/icons/FL-daisy2.gif);
    animation: tilt4 0.5s infinite;
}

.tabs-div-1 {
    background: url(/graphics/dividers/SH-div1.gif);
    height: 12px;
}

/* -------------------------------------- index */
#index {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.index-flex-1 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.index-text {
    text-align: justify;
    letter-spacing: 0.5px;
    font-size: 13px;
}

.index-ul {
    display: flex;
    margin: 0;
    padding-left: 15px;
    flex-direction: column;
    gap: 3px;
}

.index-li {
    font-size: 12px;
    letter-spacing: 1.5px;
    padding-left: 5px;
}

.index-li::marker {
    content: url(/graphics/icons/FL-clover13.gif);
}

.index-flex-2 {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

/* -------------------------------------- webrings */
.index-webrings {
    display: flex;
    min-width: 230px;
    max-width: 230px;
    height: 244px;
    overflow: auto;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
}

.index-webrings a {
    text-decoration: none;
    letter-spacing: 1.5px;
}

.index-webrings a:hover {
    font-style: italic;
}

/* -------------------------------------- featured */
.index-featured {
    border: 1px solid;
    width: -webkit-fill-available;
    background: url(/graphics/backgrounds/FP-bg3.gif);
    border-radius: 10px;
    border-image-source: url(/graphics/borders/SP-2.png);
    border-image-slice: 9;
    border-image-width: 10px;
    border-image-repeat: round;
    border-style: solid;
    padding: 7px;
}

.featured-h2 {
    display: flex;
    width: -webkit-fill-available;
    font-size: 13px;
    text-transform: uppercase;
    border-bottom: 1px dashed;
    padding-bottom: 5px;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.featured-h2::before, .featured-h2::after {
    content: url(/graphics/icons/IDK-music1.gif);
}

.featured-flex {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    padding: 3px 0px;
    padding-bottom: 0;
    height: 205px;
}

.featured-box {
    border: 1px solid;
    padding: 5px;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    border-radius: 3px;
    background: white;
}

.featured-img {
    width: 139px;
    border: 1px solid;
    border-radius: 3px;
}

.featured-text {
    display: flex;
    font-size: 12px;
    align-items: center;
    justify-content: center;
    margin: 5px 0px;
}

.featured-h3 {
    padding: 5px;
    letter-spacing: 2px;
    font-size: 11px;
    text-align: center;
    border: 1px solid;
    margin-bottom: 5px;
    border-radius: 3px;
    background: #fff4f4;
}

.index-featured .poll {
    display: flex;
    padding: 0px 3px;
    flex-direction: column;
    gap: 4px;
    accent-color: #748795;
}

.index-featured .poll-input label {
    font-size: 13px;
    letter-spacing: 2px;
}

.index-featured .poll-input input {
    margin: 0;
    margin-right: 5px;
    width: 10px;
}

.index-featured .poll strong {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    font-style: italic;
}

.index-featured .poll-buttons {
    display: flex;
    justify-content: center;
}

.index-featured .poll-buttons input {
    background: linear-gradient(to bottom,  #fbf8f7 0%,#f4e2e0 50%,#f0d6d4 51%,#fbf1ef 100%);
    border: 1px solid;
    border-radius: 3px;
    padding: 2px 6px;
    box-shadow: 2px 2px 2px inset white, -1px -1px 1px inset #bc7d7d6e;
    cursor: pointer;
}

.index-featured .poll-buttons input:hover {
    box-shadow: -2px -2px 2px inset white, 1px 1px 1px inset #bc7d7d6e;
}

.index-featured .poll-links {
    display: flex;
    justify-content: space-around;
}

.index-featured .poll-links a {
    font-size: 10px;
}