/*

ALL PANEL CLASSES:
    .panel
    .text-only
    .loose
    
    TITLES:
        .no-title
        .title
        .center
        .left
        .right
        .small
    
    TEXT:
        .no-text
        .text
        .center
        .left
        .right
    
    IMGS:
        .no-img
        .img
        .left
        .center
        .right



ALL LIST CLASSES:
    .list
    .panel.list
    
    TITLES:
        .no-title
        .title.
        .center
        .left
        .right
        .small
    
    LIST ITEMS:
        .center
        .left
        .right
*/


/* ################ POSSIBLY ADD    section .panel    TO START OF ALL CLASSES?
                    Might make all classes more specific to prevent tampering with other website elements */

.content section a {
    transition: 0.08s;
}

.panel .no-img {
    display: none;
}

.panel {  /*generic panel style*/
    margin: 2vw auto;
    padding: 0;
    width: 98%;
    height: auto;
    border-radius: max(1.2vh, 1.2vw);
    overflow: hidden;
}
.panel:not(.text-only):not(.loose) {
    background-color: var(--header);
    box-shadow: 0 0 4px 0 var(--theme-hard);
}
.panel.notice:not(.text-only):not(.loose) {
    background-color: var(--a-hover);
    box-shadow: 0 0 4px 0 var(--a-hover);
    color: var(--background-color);
}
.panel.notice * {
    color: var(--header);
}
.panel.notice hr {
    background-color: var(--header);
}


.panel:not(.loose) img.center.small {
    width: 60% !important;
    box-shadow: 0 0 4px 0 var(--theme-hard);
}
.panel:not(.text-only) img.center.border {
    width: calc(100% - 16px);
    box-shadow: 0 0 4px 0 var(--theme-hard);
}

.panel:not(.loose) img.center {
    width: 100%;
    box-shadow: 0 -4px 6px 4px var(--theme-hard);
}
.panel:not(.loose) img.left {
    width: 40%;
    float: left;
    margin-right: 12px;
    box-shadow: 0 0 6px 0px var(--theme-hard);
}
.panel:not(.loose) img.right {
    width: 40%;
    float: right;
    box-shadow: 0 0 6px 0px var(--theme-hard);
}
.panel:not(.text-only):not(.loose) img:not(.border) {
    margin: 0;
    border-radius: 0;
}
.panel:not(.text-only):not(.loose) img:not(.border).small {
    border-bottom-left-radius: max(1vw, 1vh);
    border-bottom-right-radius: max(1vw, 1vh);
}
.panel:not(.text-only):not(.loose) img.left {
    margin-right: 17px;
}
.panel:not(.text-only):not(.loose) img.right {
    margin-left: 17px;
}


.panel.text-only > img {
    width: min(60vw, 60vh);
    box-shadow: 0 0 4px 0 var(--color);
}
.panel.text-only img.left {
    width: 40%;
    float: left;
}
.panel.text-only img.right {
    width: 40%;
    float: right;
}



.panel.loose {
    background-color: var(--header);
    overflow: visible;
    border-radius: max(1.8vh, 1.8vw);
    box-shadow: 0 0 12px 12px var(--header);
}
.panel.loose.notice {
    background-color: var(--a-hover);
    box-shadow: 0 0 12px 12px var(--a-hover);
}
.panel.loose { width: 80%; margin: 2vw 0 4vw; padding: 0; }
.panel.loose.left { margin-left: 5%; margin-right: 15%; }
.panel.loose.right { margin-right: 5%; margin-left: 15%; }

.panel.loose .panel-content { width: 100%; position: relative; }
.panel.loose.left .panel-content { left: 12%; }
.panel.loose.right .panel-content { right: 12%; }
.panel.loose.top .panel-content { transform: translateY(6vw); }
.panel.loose.bottom .panel-content { transform: translateY(-6vw); }

.panel.loose img { width: 80%; position: relative; }
.panel.loose.top img { transform: translateY(4vw); }
.panel.loose.bottom img { transform: translateY(-8vw); }

.panel.loose img.border { box-shadow: 0 0 6px 0px var(--theme-hard); }
.panel.loose img.left { margin-right: 20%; }
.panel.loose img.right { margin-left: 20%; }

.panel .panel-content {
    padding: 10px 14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-all;
}

.list .panel-content .center,
.list .panel-content .right {
    list-style-type: none;
}
.list .panel-content .right li:after { content: "\00A0\25CF"; }
.list .panel-content .right li {
    text-align: right;
    text-align-last: right;
}



.panel-content .title.left { text-align: left; }
.panel-content .title.right { text-align: right; }
.panel-content .no-title { display: none; }
.panel-content .title.small { font-size: calc(var(--font-sizing) + max(3vw, 3vh)); }

.panel-content .no-text { display: none; }
.panel-content .text.left { text-align: left; text-align-last: left; }
.panel-content .text.right { text-align: right; text-align-last: right; }
.panel-content .text.center { text-align: center; text-align-last: center; }
.panel-content .text.justify { text-align: justify; text-align-last: center; }
.panel-content .text.smaller { font-size: calc(var(--font-sizing) + max(1.5vw, 1.5vh)); }
@media (min-resolution: 0.001dpcm) and (max-width: 600px) {
    .panel-content .text.smaller { font-size: calc(var(--font-sizing) + max(2.2vw, 2.2vh)); }
}

.panel-content h1,
.panel-content h2,
.panel-content h3,
.panel-content h4,
.panel-content h5,
.panel-content h6 {
    text-align: center;
}

.news-date {
    opacity: 0.6;
    font-size: calc(var(--font-sizing) + max(1.4vw, 1.4vh));
}

/*.panel:not(.loose) > img.no-img ~ .panel-content, .news-panel:not(.with-img) .panel-content { width: 100%; }*/