/*********************************************

    Start with website specific defaults

*********************************************/

@import "settings_v2.css";

body {

	background: var(--website-background-color);

	color: var(--text-color);

	font-family: "Arial";

	font-size: 1.2em;

	margin: 0;

	padding: 0;

	text-align: center;

}



/* default text color for all links */

a:link, a:visited, a:hover, a:active {

	color: var(--link-color);

	text-decoration: none;

}



img {

    display: block;

}







/*********************************************

	General defaults 

*********************************************/



/* background color */

.color_background {

	background: var(--website-background-color);

	color: var(--text-color);

}



/* background color for a clip container */

.color_background_clip {

	background: var(--clip-background-color);

	color: var(--text-color);

}



/* color for code generated buttons */

.color_button {

	background: var(--button-color);

}

.color_button2 {

	background: var(--button-color2);

}



/* hover color for code generated buttons */

.color_button:hover {

	background: var(--button-hover-color);

}

.color_button2:hover {

	background: var(--button-hover-color2);

}











/*********************************************

    Buttons

*********************************************/



/* buttons on top button bar public area */

.buttonPublic {

	border-radius: var(--border_radius);

	border:none;

	float: left;

	width: 20.0%;

	padding-top: 10px;

	padding-bottom: 10px;

	text-align:center;

}



/* generic button */

.buttonGeneric {

	float: center;

	border-radius: var(--border_radius);

	border:none;

    padding-left:100px;

    padding-right:100px;

    padding-top:10px;

    padding-bottom:10px;

	margin:0px;

    text-decoration:none;

}



/* generic full width button */

.button100 {

	float: left;

	border-radius: var(--border_radius);

	border:none;

    padding-top:10px;

    padding-bottom:10px;

	width:100.0%;

    text-decoration:none;

}



/* generic half width button */

.button50 {

	float: left;

	border-radius: var(--border_radius);

	border:none;

    padding-top:10px;

    padding-bottom:10px;

	width:50.0%;

    text-decoration:none;

}



/* generic 1/3rd width button */

.button33 {

	float: left;

	border-radius: var(--border_radius);

	border:none;

    padding-top:10px;

    padding-bottom:10px;

	width:33.3%;

    text-decoration:none;

}



/* generic fitted button */

.buttonFitted {

	float: left;

	border-radius: var(--border_radius);

	border:none;

	margin-left:5px;

	margin-right:5px;

    padding-top:10px;

    padding-bottom:10px;

    padding-left:20px;

    padding-right:20px;

	width:fit-content;

    text-decoration:none;

}





/* 

	Responsive wrapper for clips

*/

.ClipGrid {

    clear: both;

	display: grid;

	/* grid-auto-rows: 1fr; */

	grid-template-columns: repeat( auto-fit, minmax( 400px, 1fr ) );

}





/* 

	Main container, header, footer 

*/

#content {

    clear: both;

	margin-left: auto;

	margin-right: auto;

	width:1000px;

/*	

	width:100%;

	min-width: 1000px;

	justify-content: center;

*/

}



#header {

    clear: both;

	display: flex;

	justify-content: center;

}



#buttonBar {

	justify-content: center;

  	align-items: center;

	clear: both;

	margin: auto;

	justify-content: center;

  	align-items: center;

	display: flex;

	align-items: center;

	margin-bottom: 10px;

}



#searchBar {

	clear: both;

	width: 100%;

	display: flex;

	align-items: center;

	margin-bottom: 10px;

}



#footer {

    clear: both;

	display: flex;

	justify-content: center;

}



#footerlink {

    float: left;

	display: flex;

	justify-content: center;

	padding: 20px;

}



#headermessage {

	clear: both;

	border-radius: var(--border_radius);

	padding: 0px;

}



#topmessage {

	clear: both;

	border-radius: var(--border_radius);

	padding: 20px;

}







/* 

	Page list container 

*/

.pagecontainer {

	clear: both;

	width: 100%;

	justify-content: center;

}

.pageArrow {

    float: left;

	border-radius: var(--border_radius);

	width: 5%;

	margin-bottom: 15px;

}



#pageList {

    float: left;

	width: 90%;

	margin-bottom: 15px;

}



.pageNumber {

	float: left;

	border-radius: var(--border_radius);

	padding: 18px;

    text-decoration:none;

}







/* 

	Banners 

*/

#bannerBar {

	clear: both;

	justify-content: center;

	align-items: center;

	margin: 0 auto;

	width: 1000px;

	margin-bottom: 15px;

}

.bannerButton {

	float: left;

    width: auto;

    text-decoration:none;

}







/* 

	Picture gallery 

*/

#gallerycontainer {

    clear: both;

	margin-left: auto;

	margin-right: auto;

	width:100%;

}



#galleryname {

    clear: both;

	border-radius: var(--border_radius);

	border:none;

	width: 95%;

	margin-top: 20px;

	margin-bottom: 20px;

	padding-top: 20px;

	padding-bottom: 20px;

	font-size: 1.5rem;

}



.gallerybuttoncontainer {

	clear: both;

	width: 95%;

	display: flex;

	align-items: center;

	margin-bottom: 10px;

}



.gallerypic {

	width:95%;

	margin-bottom: 20px;

}







/* 

	Used on intro page, join page, legal page, etc... 

*/

#listcontainer {

	float: left;

    clear: both;

	border-radius: var(--border_radius);

	border:none;

	margin-bottom: 30px;

	width: 100%;

}



#listpoints {

	float: left;

	width: 50%;

}



.listtop {

	float: none;

	padding: 20px;

	text-align: left;

}



.listpoint {

	float: none;

	padding: 20px;

	text-align: left;

}



#listpic {

	overflow: hidden;

	border-radius: var(--border_radius);

	float: right;

}

#morepoints {

	float: left;

	width: 75%;

}







/* 

	Partner page 

*/

#partnerbannercontainer {

	clear:both;

}



.partnerbanner {

	float: left;

	padding: 10px;

}



#partnergallerylink {

	clear:both;

    margin-top: 30px;

    margin-bottom: 30px;

	text-align: center;

}







/* 

	Custom dropdown box 

*/

.dropdown {

	float: left;

	padding-top:10px;

	padding-bottom:10px;

	width: var(--dropdown-width);

	overflow: hidden;

	display:flex;

	justify-content: center;



}



.dropdown .dropbtn {

	border-radius: var(--border_radius);

	border:none;

	cursor: pointer;

	font-size: inherit;  

	color: var(--text-color);

	padding-top: 10px;

	padding-bottom: 10px;

	background-color: var(--button-color);

	font-family: inherit;

	width: var(--dropdown-button-width);

}



.dropdown:hover .dropbtn, .dropbtn:focus {

	background-color: var(--button-hover-color);

}



.dropdown-content {

	display: none;

	position: absolute;

	background-color: var(--clip-background-color);

	min-width: auto;

	z-index: 1;

	height: 500px;

	overflow: auto;  

	transition: 0.5s;

	transform: translate(0, 15%);

}



.dropdown-content a {

	float: none;

	color: var(--text-color);

	padding: 2px;

	text-decoration: none;

	display: block;

}



.dropdown-content a:hover {

	background-color: var(--button-hover-color);

}









/* 

	Column select buttons

*/

#buttonColumnSelect {

	float: left;

    padding-top:10px;

    padding-bottom:10px;

	width: var(--columnselect-width);

    text-decoration:none;

}

.columnbutton {

	background-color: var(--button-color);

	color: var(--text-color);

	border-radius: var(--border_radius);

	border:none;

	padding-top: 10px;

	padding-bottom: 10px;

	min-width: 100px;

	font-size: inherit;  

} 

.columnbutton:hover {

	background-color: var(--button-hover-color);

	cursor: pointer;

}

.columnbutton:active {

	background-color: var(--clip-background-color);

}







/* 

	Clip data tiled

*/

#clipmedia {

	clear: both;

	margin:0;

	padding:0;

	width:100%;

}



.ClipInsideContainer {

	border-radius: var(--border_radius);

	float: left;

	width: 98%;

	height: auto;

	margin: 1%;

}



.ClipImage {

	clear:both;

	border-top-left-radius: var(--border_radius);

	border-top-right-radius: var(--border_radius);

	background-size:     contain; 

	background-repeat:   no-repeat;

    background-position: center; 

	aspect-ratio: 16 / 9;	

}



.ClipNumber {

	font-family: Impact, Arial, sans-serif;

	float: left;

	padding-top: 5px;

	padding-bottom: 5px;

	margin-left:4%;

	text-align: left;

}



.ClipDate {

	font-family: Impact, Arial, sans-serif;

	float: right;

	padding-top: 5px;

	padding-bottom: 5px;

	margin-right:4%;

	text-align: right;

}



.ClipText {

	font-family: Arial, sans-serif;

	clear:both;

	margin: 1%; 

	padding: 1%;

	text-align: left;

	/*overflow:hidden;*/

	/*white-space: nowrap;*/

}


/*********************************************
    Modern Responsive Enhancements (2026)
*********************************************/

/* Smooth transitions for interactive elements */
a, button, .buttonGeneric, .buttonFitted, .button50, .button33, .button100, .pageNumber, .columnbutton, .dropbtn {
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.buttonGeneric:hover, .buttonFitted:hover, .button50:hover, .button33:hover, .button100:hover,
.pageNumber:hover, .columnbutton:hover, .dropbtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Better focus styles for accessibility */
a:focus, button:focus, .pageNumber:focus {
    outline: 2px solid var(--button-hover-color);
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    #content {
        width: 95%;
        max-width: 1000px;
    }
    
    #bannerBar {
        width: 95%;
        max-width: 1000px;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 1.1em;
    }
    
    #content {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    
    .buttonPublic,
    .buttonGeneric,
    .button100,
    .button50,
    .button33,
    .buttonFitted {
        float: none;
        width: 100% !important;
        margin-bottom: 8px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    #buttonBar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .ClipGrid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .ClipInsideContainer {
        width: 100%;
        margin: 5px 0;
    }
    
    .dropdown {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .dropdown-content {
        height: 300px;
        transform: none;
    }
    
    #pageList {
        width: 100%;
        float: none;
    }
    
    .pageArrow {
        width: 100%;
        float: none;
        text-align: center;
    }
    
    .pageNumber {
        float: none;
        display: inline-block;
        margin: 2px;
        padding: 10px 15px;
    }
    
    #galleryname,
    #listcontainer,
    #listpoints,
    #morepoints {
        width: 100%;
        float: none;
    }
    
    #listpic {
        float: none;
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }
    
    .gallerypic {
        width: 100%;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 1em;
    }
    
    .ClipText {
        font-size: 0.95em;
    }
    
    .ClipNumber, .ClipDate {
        font-size: 0.9em;
    }
}