/* Styles for Slide Links Widget plugin */
.slide-links-trigger, .slide-links-panel {
    position: fixed;
}

/* Positioning classes for side and vertical offset */
.slide-links-trigger.left, .slide-links-panel.left {
    left: 0;
}
.slide-links-trigger.right, .slide-links-panel.right {
    right: 0;
}
.pos-0 { top: 0%; }
.pos-10 { top: 10%; }
.pos-20 { top: 20%; }
.pos-30 { top: 30%; }
.pos-40 { top: 40%; }
.pos-50 { top: 50%; }
.pos-60 { top: 60%; }
.pos-70 { top: 70%; }
.pos-80 { top: 80%; }
.pos-90 { top: 90%; }

/* Trigger button styling */
#slide-links-trigger { 
    background-color: #648c1a;
    color: #fff;
    padding: 8px;
    border: none;
    cursor: pointer;
    z-index: 1001;
}
.slide-links-trigger.left {
    border-radius: 0 4px 4px 0;  /* rounded right corners for left side trigger */
}
.slide-links-trigger.right {
    border-radius: 4px 0 0 4px;  /* rounded left corners for right side trigger */
}

/* Slide-out panel styling */
.slide-links-panel {
    background-color: #f9f9f9;
    color: #000;
    width: 500px;
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
    box-sizing: border-box;
    z-index: 1000;
}
.slide-links-panel.left {
    left: -500px;
    transition: left 0.3s ease;
}
.slide-links-panel.right {
    right: -500px;
    transition: right 0.3s ease;
}

/* Panel content links */
.slide-links-content p {
    margin: 0 0 8px;
}
.slide-links-content a {
    color: #007cba;
    text-decoration: none;
}
.slide-links-content a:hover {
    text-decoration: underline;
}

/* Links row styling */
.slw-links-row {
    text-align: center;
    margin: 0 0 10px;
}
.slw-links-row a {
    display: inline-block;
    margin: 0 8px;
    text-decoration: none;
    color: #007cba;
}
.slw-links-row a:hover {
    text-decoration: underline;
}

/* Info line (sponsor text) */
.slide-links-info {
    font-size: 90%;
    color: #555;
    margin: 0;
    text-align: center;
}

/* The sponsor link uses class "footer-link" (inherits styling from above) */
.footer-link {}

/* Responsive adjustments: make panel narrower on small screens */
@media (max-width: 480px) {
    .slide-links-panel {
        width: 200px;
    }
    .slide-links-panel.left {
        left: -200px;
    }
    .slide-links-panel.right {
        right: -200px;
    }
}