/*============================================================================*/
/* CSS file                                                                   */
/*                                                                            */
/* Important: Do NOT change the selector order! They are sorted;              */
/* a selector below may overwrite attributes of a selector above!             */
/*============================================================================*/

/*============================================================================*/
/* CSS custom properties (CSS variables)                                      */
/*============================================================================*/
:root { 
	--page-bgcolor: #FFFFFF;					/* Page background color (white) */
	--page-margin: 10px;						/* Lateral page margin (left and right) */

	--header-bgcolor: #1E73BE;					/* Header background color (blue) */
	--header-height: 60px;						/* Header height */

	--navigation-txtcolor: #FFFFFF;				/* Navigation text color (white) */
	--navigation-bgcolor-hover: #78ABD8;		/* Navigation background color (hovered) (lighter blue - 4 tints below <--header-bgcolor>) */
	--navigation-bgcolor-selected: #4A8FCB;		/* Navigation background color (selected) (light blue - 2 tints below <--header-bgcolor>) */

	--content-txtcolor: #292929;				/* Content text color (dark gray) */
	--content-h1-txtcolor: #1E73BE;				/* Content heading #1 text color (blue) */
	--content-h2-txtcolor: #1E73BE;				/* Content heading #2 text color (blue) */
	--content-h3-txtcolor: #292929;				/* Content heading #3 text color (dark gray) */
	--content-h4-txtcolor: #292929;				/* Content heading #4 text color (dark gray) */
	--content-a-txtcolor: #1E73BE;				/* Content anchor text color (blue) */
	--content-a-txtcolor-hover: #F29E4C;		/* Content anchor text color (hover) (orange) */
	--content-figcaption-txtcolor: #FFFFFF;		/* Content figure caption color (white) */

	--content-minwidth: 318px;					/* Minimum width for content (mobile 320p) */
	--content-maxwidth: 1280px;					/* Maximum width for content */

	--footer-bgcolor: #1E73BE;					/* Footer background color (blue) */
	--footer-height: 50px;						/* Footer height */

	--footer-navigation-txtcolor: #C0C0C0;				/* Footer text color (gray) */
	--footer-navigation-txtcolor-hover: #FFFFFF;		/* Footer text color (hovered) (white) */
	--footer-navigation-txtcolor-selected: #FFFFFF;		/* Footer text color (selected) (white) */
}

/*============================================================================*/
/* Universal Selector ("calibration")                                         */
/*============================================================================*/
* {
	padding: 0px; 
	margin: 0px;
	border-width: 0px;
}

/*============================================================================*/
/* HTML                                                                       */
/*============================================================================*/
html {
	height: 100%;								/* -> Sticky footer */
}

/*============================================================================*/
/* Body (contains #wrapper)                                                   */
/*============================================================================*/
body {
	height: 100%;								/* -> Sticky footer */
	overflow-y: scroll;							/* Always show vertical scrollbar */
	font-family: 'Helvetica', 'Roboto', sans-serif;
}

/*============================================================================*/
/* Wrapper (contains #header, #content and #footer)                           */
/*============================================================================*/
#wrapper {										/* -> Sticky footer */
	position: relative;
	min-height: 100%;
	background: var(--page-bgcolor);
	margin: 0px auto;							/* top right bottom left */
}

* html #wrapper {									/* -> Sticky footer (IE 6) */
	height: 100%;
} 

/*============================================================================*/
/* Header (contains #header-content)                                          */
/*============================================================================*/
#header {
	width: 100%;
	height: var(--header-height);
	background: var(--header-bgcolor);
}	

/*============================================================================*/
/* Header content (contains #logo and #navigation)                            */
/*============================================================================*/
#header-content {
	margin-right: auto;
	margin-left: auto;
	min-width: var(--content-minwidth);
	max-width: var(--content-maxwidth);
	background: var(--header-bgcolor);
}	

/*============================================================================*/
/* Logo                                                                       */
/*============================================================================*/

/* General */
#logo {
	float:left;									/* Put #logo and #navigation side by side */
}

/* Logo images (club logo and dancing couple) */
#logo img {
	padding: 5px 10px 0px var(--page-margin);	/* top right bottom left */
	vertical-align: top;
}

/* Last logo image (-> dancing couple) */
#logo img:last-child {
	padding: 5px 8px 0px 0px;					/* top right bottom left */
}

/*============================================================================*/
/* Navigation                                                                 */
/*============================================================================*/

/* Top level */
/*-----------*/

/* Unordered list */
#navigation > ul {
	list-style-type: none;
	font-size: 1.0em;
}

/* List item */
#navigation > ul > li {
	position: relative;							/* Create position reference for related dropdown menu */
	float: left;								/* Arrange items horizontally and left-aligned */
	margin-top: 18px;							/* Put items to header baseline */
}

/* Anchor within list item */
#navigation > ul > li > a {
	display: block;
	padding: 5px 10px;							/* top/bottom left/right */
	color: var(--navigation-txtcolor);
	text-decoration: none;
	white-space: nowrap;						/* Prevent text wrapping */
	height: 32px;								/* 32px height + 5px top padding + 5px bottom padding + 18px li margin-top = var(--header-height) */
}

/* Anchor within list item (when list item hovered) */
#navigation > ul > li:hover > a {
	background: var(--navigation-bgcolor-hover);
}

/* Anchor within list item (when list item selected) */
#navigation > ul > li.selected > a {
	background: var(--navigation-bgcolor-selected);
}

/* Anchor icon within list item */
#navigation > ul > li > a > img {
	padding-right: 5px;							/* Put a gap between image and menu text */
	vertical-align: middle;						/* Vertically align image and menu text */
}

/* Dropdown */
/*----------*/

/* Unordered list */
#navigation > ul > li > ul {
	list-style-type: none;
	position: absolute;							/* Required for sub menus overlapping (instead of shifting) the content */
	right: 0px;									/* Right-align to the parent <li> */
	z-index: 1;									/* Put list in foreground */
	background: var(--header-bgcolor);
	color: var(--navigation-txtcolor);
	display: none;								/* Hide list until required */
}

/* List item */
#navigation > ul > li > ul > li {
}

/* Anchor within list item */
#navigation > ul > li > ul > li > a {
	color: var(--navigation-txtcolor);
	display: block;
	text-decoration: none;
	padding: 10px 20px;							/* top/bottom left/right */
	text-align: left;
	white-space: nowrap;						/* Prevent text wrapping */
}

/* Anchor within list item (when list item hovered) */
#navigation > ul > li > ul > li:hover > a {
	background: var(--navigation-bgcolor-hover);
}

/* Anchor within list item (when list item selected) */
#navigation ul > li > ul > li.selected > a {
	background: var(--navigation-bgcolor-selected);
}

/* Style for dropdown links */
#navigation li:hover ul li a {
}

/* Display the dropdown when the preceding anchor is hovered OR when the dropdown itself is hovered */
#navigation > ul > li > a:hover + ul, #navigation > ul > li > ul:hover {
	display: block;
	opacity: 0.92;
}

/*============================================================================*/
/* Content                                                                    */
/*============================================================================*/

/* General */
#content {
	margin-right: auto;
	margin-left: auto;
	
	padding-bottom: var(--footer-height);		/* -> Sticky footer */
	
	min-width: var(--content-minwidth);
	max-width: var(--content-maxwidth);
	background: var(--page-bgcolor);
}

/* Heading #1 */
#content h1 {
	margin: 20px;
	font-size: 1.5em;
	font-weight: bold;
	color: var(--content-h1-txtcolor);
	text-align: center;
}

/* Heading #2 */
#content h2 {
	margin: 20px 10px 10px var(--page-margin);	/* top right bottom left */
	font-size: 1.3em;
	font-weight: bold;
	color: var(--content-h2-txtcolor);
}

/* Heading #3 */
#content h3 {
	margin: 15px 10px 5px var(--page-margin);	/* top right bottom left */
	font-size: 1.1em;
	font-weight: bold;
	color: var(--content-h3-txtcolor);
}

/* Heading #4 */
#content h4 {
	margin: 10px 10px 0px var(--page-margin);	/* top right bottom left */
	font-size: 1.0em;
	font-weight: bold;
	font-style: italic;
	color: var(--content-h4-txtcolor);
}

/* Paragraph */
#content p {
	margin: 0.25em var(--page-margin) 0.75em var(--page-margin);	/* top right bottom left */
	font-size: 1.0em;
	text-align: justify;
	color: var(--content-txtcolor);
	line-height: 1.3em;
}

/* Unordered list */
#content ul {
	margin: 0.25em var(--page-margin) 1.25em 30px;		/* top right bottom left */
	font-size: 1.0em;
	text-align: justify;
	color: var(--content-txtcolor);
	line-height: 1.3em;
	list-style-type: square;
}	

/* List item */
#content li {
	margin-top: 0.3em;
}

/* Anchors */
#content a {
	text-decoration: none;
	color: var(--content-a-txtcolor);
	font-weight: bold;
}

/* Anchors starting with http (-> append symbol for external link) */
#content a[href^="http"] {
	padding-right: 1.2em;
	background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpolygon%20fill%3D%22%231E73BE%22%20points%3D%222%2C2%205%2C2%205%2C3%203%2C3%203%2C9%209%2C9%209%2C7%2010%2C7%2010%2C10%202%2C10%22/%3E%3Cpolygon%20fill%3D%22%231E73BE%22%20points%3D%226.2%2C2%2010%2C2%2010%2C5.8%208.6%2C4.4%206.5%2C6.5%205.5%2C5.5%207.6%2C3.4%22/%3E%3C/svg%3E") no-repeat right;
	/* <svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><polygon fill="#1E73BE" points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/><polygon fill="#1E73BE" points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/></svg> */
}

/* Anchors (when hovered) */
#content a:hover {
	color: var(--content-a-txtcolor-hover);
	cursor: pointer;							/* Required only for label */
}

/* Anchors starting with http (when hovered) (-> append symbol for external link) */
#content a[href^="http"]:hover {
	padding-right: 1.2em;
	background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpolygon%20fill%3D%22%23F29E4C%22%20points%3D%222%2C2%205%2C2%205%2C3%203%2C3%203%2C9%209%2C9%209%2C7%2010%2C7%2010%2C10%202%2C10%22/%3E%3Cpolygon%20fill%3D%22%23F29E4C%22%20points%3D%226.2%2C2%2010%2C2%2010%2C5.8%208.6%2C4.4%206.5%2C6.5%205.5%2C5.5%207.6%2C3.4%22/%3E%3C/svg%3E") no-repeat right;
	/* <svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><polygon fill="#F29E4C" points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/><polygon fill="#F29E4C" points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/></svg> */
}

/* Symbol for external link */
#content span.extlink {
	padding-right: 1.3em;
	background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpolygon%20fill%3D%22%23292929%22%20points%3D%222%2C2%205%2C2%205%2C3%203%2C3%203%2C9%209%2C9%209%2C7%2010%2C7%2010%2C10%202%2C10%22/%3E%3Cpolygon%20fill%3D%22%23292929%22%20points%3D%226.2%2C2%2010%2C2%2010%2C5.8%208.6%2C4.4%206.5%2C6.5%205.5%2C5.5%207.6%2C3.4%22/%3E%3C/svg%3E") no-repeat right;
	/* <svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><polygon fill="#292929" points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/><polygon fill="#292929" points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/></svg> */
}

/* Wide image (slide replacement - same look and feel) */
#content div.wideimage {
	width: auto;								/* Full width (considering margin) */
	height: 360px;
	margin: 20px var(--page-margin);			/* top/bottom left/right */
	background-size: cover;						/* Fit smaller side */
	background-position: center top;			/* X: center, Y: top */
}

/* Wide image, but centered in X and Y */
#content div.wideimage.center {
	width: auto;								/* Full width (considering margin) */
	height: 360px;
	margin: 20px var(--page-margin);			/* top/bottom left/right */
	background-size: cover;						/* Fit smaller side */
	background-position: center center;			/* X: center, Y: center */
}

/* Left aligned images */
#content img.left {
	float: left;
	margin: 15px 30px 10px var(--page-margin);	/* top right bottom left */
	width: 280px;
}

/* Centered content */
#content div.center {
	text-align: center;
	margin: var(--page-margin);
}

/* Slide */
/*-------*/

/* Slide */
#content div.slide {
	width: auto;								/* Full width (considering margin) */
	height: 360px;
	margin: 20px var(--page-margin);			/* top/bottom left/right */
	overflow: hidden;
	position: relative;
	background-color: var(--page-bgcolor);
}

/* Slide images (width: <--content-maxwidth>, height: <div.slide height> or more) */
#content div.slide > div {
	width: 100%;
	height: 100%;
	background-size: cover;						/* Fit smaller side */
	background-position: center top;			/* X: center, Y: top */
	position: absolute;
	animation: slide 35s infinite;				/* Play animation "slide" with a duration of 35s in an endless loop */ 
	opacity: 0;
}
#content div.slide > div:nth-child(2) {
	animation-delay: 7s;
}
#content div.slide > div:nth-child(3) {
	animation-delay: 14s;
}
#content div.slide > div:nth-child(4) {
	animation-delay: 21s;
}
#content div.slide > div:nth-child(5) {
	animation-delay: 28s;
}

/* Key frames for animation "slide" */
@keyframes slide {
	10% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	30% {
		opacity: 0;
	}
	40% {
		transform: scale(1.1);
	}
}

/* Gallery */
/*---------*/

/* Gallery */
#content div.gallery {							/* Wrapper around all preview images of one event */
	margin: var(--page-margin);
	width: auto;								/* Full width (considering margin) */
	display: grid;								/* Use as grid container */
	gap: 5px;									/* Gap between grid elements */
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));	/* Minimum grid element width 200px */
}

/* Gallery anchor */
#content div.gallery a{
	font-weight: normal;						/* Revert font-weight for anchors (see above) */
}

/* Gallery figure (i.e. image and caption) */
#content div.gallery figure{
	position: relative;
}

/* Gallery figure image */
#content div.gallery figure img{
	width: 100%;
	display: block;
}

/* Gallery figure caption */
#content div.gallery figure figcaption{
	position: absolute;							/* Absolute placed to gallery figure */
	padding: 2px 3px;							/* top/bottom left/right */
	bottom: 0px;								/* Sticked to image bottom */
	right: 0px;
	left: 0px;
	width: auto;								/* Full image width (from <left> to <right>) -> considering <padding> */
	line-height: 1.2em;
	font-size: 0.75em;
	color: var(--content-figcaption-txtcolor);
	background: rgba(0, 0, 0, 0.65);				/* Black background with opacity */
	text-align: center;
}

/* Lightbox */
/*----------*/

/* Lightbox */
#content div.lightbox {							/* Lightbox for one image */
	background: rgba(0, 0, 0, 0.8);				/* Black background with opacity */
	display: none;								/* Hide until required */
	position: fixed;
	z-index: 1000;
}

/* Lightbox (when targeted) */
#content div.lightbox:target {
	display: flex;								/* Display lightbox */
	
	align-items: center;						/* Center elements */
	justify-content: center;
	
	bottom: -100px;								/* Overlap viewport by 100px to prevent "gaps" when turning a mobile device */
	left: -100px;
	right: -100px;
	top: -100px;
}

/* "Close" button of lightbox */
#content div.lightbox a.close{
	color: var(--content-figcaption-txtcolor);
	font-size: 4em;
	font-weight: bold;
	position: fixed;
	right: 20px;
	top: 10px;
	z-index: 1001;
}

/* "Previous" button of lightbox */
#content div.lightbox a.prev{
	color: var(--content-figcaption-txtcolor);
	font-size: 4em;
	font-weight: bold;
	position: fixed;
	left: 20px;
	top: 45vh;
	z-index: 1001;
}

/* "Next" button of lightbox */
#content div.lightbox a.next{
	color: var(--content-figcaption-txtcolor);
	font-size: 4em;
	font-weight: bold;
	position: fixed;
	right: 20px;
	top: 45vh;
	z-index: 1001;
}

/* Lightbox anchor */
#content div.lightbox a{
	font-weight: normal;						/* Revert font-weight for anchors (see above) */
}

/* Lightbox figure (i.e. image/video and caption) */
#content div.lightbox figure{
	position: relative;
}

/* Lightbox image */
#content div.lightbox figure img{
	display: block;
	margin: auto;
	max-height: calc(100vh - 60px);				/* 30px margin to viewport */
	max-width: calc(100vw - 60px);
	min-width: calc(var(--content-minwidth) - 60px);
}

/* Lightbox video */
#content div.lightbox figure video{
	display: block;
	margin: auto;
	max-height: calc(100vh - 60px);				/* 30px margin to viewport */
	max-width: calc(100vw - 60px);
	min-width: calc(var(--content-minwidth) - 60px);
}

/* Lightbox image caption */
#content div.lightbox figure img + figcaption{
	position: absolute;							/* Absolute placed to lightbox figure */
	padding: 2px 3px;							/* top/bottom left/right */
	bottom: 0px;								/* Sticked to image bottom */
	right: 0px;
	left: 0px;
	width: auto;								/* Full image width (from <left> to <right>) -> considering <padding> */
	line-height: 1.2em;
	font-size: 0.75em;
	color: var(--content-figcaption-txtcolor);
	background: rgba(0, 0, 0, 0.65);				/* black background with opacity */
	text-align: center;
}

/* Lightbox video caption */
#content div.lightbox figure video + figcaption{
	position: absolute;							/* Absolute placed to lightbox figure */
	padding: 2px 3px;							/* top/bottom left/right */
	top: 0px;								/* Sticked to image top */
	right: 0px;
	left: 0px;
	width: auto;								/* Full image width (from <left> to <right>) -> considering <padding> */
	line-height: 1.2em;
	font-size: 0.75em;
	color: var(--content-figcaption-txtcolor);
	background: rgba(0, 0, 0, 0.65);				/* black background with opacity */
	text-align: center;
}

/*============================================================================*/
/* Footer (contains #footer-content)                                          */
/*============================================================================*/
#footer {
	position: absolute;							/* -> Sticky footer */
	bottom: 0px;								/* -> Sticky footer */
	width: 100%;
	height: var(--footer-height);
	background: var(--footer-bgcolor);
}	

/*============================================================================*/
/* Footer content (contains #footer-navigation)                               */
/*============================================================================*/
#footer-content {
	margin-right: auto;
	margin-left: auto;
	min-width: var(--content-minwidth);
	max-width: var(--content-maxwidth);
	background: var(--footer-bgcolor);
}	

/*============================================================================*/
/* Footer navigation                                                          */
/*============================================================================*/

/* Unordered list */
#footer-navigation ul {
	font-size: 0.95em;
	list-style-type: none;
}	

/* List item */
#footer-navigation li {
	float: left;
	padding: 5px 5px 5px var(--page-margin);	/* top right bottom left */
}

/* List item (last child) */
#footer-navigation li:last-child {
	float: right;								/* Not left, but right aligned */
	padding-right: var(--page-margin);			/* Not 5px, but var(--page-margin) */
}

/* List item anchor */
#footer-navigation li a {
	color: var(--footer-navigation-txtcolor);
	text-decoration: none;
}

/* List item anchor (when hovered) */
#footer-navigation li:hover a {
	color: var(--footer-navigation-txtcolor-hover);
}

/* List item anchor (when selected) */
#footer-navigation li.selected a {
	color: var(--footer-navigation-txtcolor-selected);
	font-weight: bold;
}

/*============================================================================*/
/* Clear floating                                                             */
/*============================================================================*/

/* Clear floats inside the structure */
.clearfloat {
	overflow: auto;
}

/*============================================================================*/
/* Responsive Styles                                                          */
/*============================================================================*/

/* Screen width <= 560 px */
@media screen and (max-width : 560px){

	/*------------------------------------------------------------------------*/
	/* Navigation                                                             */
	/*------------------------------------------------------------------------*/

	/* Top level */
	/*-----------*/

	/* List item */
	#navigation > ul > li {
		margin-top: 0px;						/* Put items to header topline */
	}

	/* Anchor within list item */
	#navigation > ul > li > a {
		font-size: 0.7em;						/* Reduce font size (1.0em -> 0.7em) */
		text-align: center;						/* Center image and menu text */
		height: 50px;							/* 50px height + 5px top padding + 5px bottom padding + 0px li margin-top = var(--header-height) */
	}
	
	/* Anchor icon within list item */
	#navigation > ul > li > a > img {
		padding-right: 0px;						/* Remove right gap */
		padding-bottom: 5px;					/* Put a vertically gap between image and menu text */
	}
	/* Text within list item */
	#navigation > ul > li > a > span::before {
		content: '\A';							/* Insert a line break before the text */
		white-space: pre;    
	}
	
	/*------------------------------------------------------------------------*/
	/* Content                                                                */
	/*------------------------------------------------------------------------*/

	/* Slide */
	#content div.slide {
		height: 200px;							/* Reduce height (360px -> 200px) */
	}

	/* Wide image (slide replacement - same look and feel) */
	#content div.wideimage {
		height: 200px;							/* Reduce height (360px -> 200px) */
	}
	
	/* Left aligned images */
	#content img.left {
		float: none;							/* Remove floating */
	}

	/* Gallery */
	#content div.gallery {
		grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));	/* Reduce minimum width (200px -> 175px) */
	}
	
	/* Gallery figure caption */
	#content div.gallery figure figcaption{
		line-height: 1.0em;						/* Reduce line height (1.2em -> 1.0em) */
		font-size: 0.7em;						/* Reduce font size (0.75em -> 0.7em) */
	}

	/* Lightbox image and video caption */
	#content figure.lightbox figcaption{
		line-height: 1.0em;						/* Reduce line height (1.2em -> 1.0em) */
		font-size: 0.7em;						/* Reduce font size (0.75em -> 0.7em) */
	}

	/*------------------------------------------------------------------------*/
	/* Footer navigation                                                      */
	/*------------------------------------------------------------------------*/

	/* Unordered list */
	#footer-navigation ul {
		font-size: 0.8em;						/* Reduce font size (0.95em -> 0.8em) */
	}
}