/* ============================================================================== 
   File: scr_collexp.css
	- Stylesheet for TipTool Collapse-Expand items
		for ANY viewports
	- Author: Daniel Hugentobler (DH)
	- created: 02.JAN.2019, taken from scr_nrrw.css
	- amended: 13.MAR.2019, same colors as regular PBs
	- amended: 17.JAN.2021, DH: new media-width-breakpoints for: narrow/medium/wide
   ============================================================================== */
 
/* ----------------------------------------- */
/*				RESPONSIVENESS				 */
/*		for MEDIUM / NARROW viewports		 */
/* ----------------------------------------- */
@media (max-width: 60rem) {
	/* toc: render collapse-expand-arrows as fingertip-friendly buttons */
	.collapse_expand,
	.collapse_expand_faq {
		padding: 0.6rem;
		border: 0.1rem outset gray;
		border-radius: 50%;
		/* provide same color & shadow as regular buttons have */
		-webkit-background-image: linear-gradient(white, #C7C7C7);
		-moz-background-image: linear-gradient(white, #C7C7C7);
		-ms-background-image: linear-gradient(white, #C7C7C7);
		-o-background-image: linear-gradient(white, #C7C7C7);
		background-image: linear-gradient(white, #C7C7C7);
		-webkit-box-shadow: 0.2rem 0.2rem 0.4rem gray;
		-moz-box-shadow: 0.2rem 0.2rem 0.4rem gray;
		box-shadow: 0.4rem 0.4rem 0.6rem gray;			/* a bit larger for MS IEx */

		/* move the button down a bit */
		-webkit-transform: translateY(0.6rem);
		-moz-transform: translateY(0.6rem);
		-ms-transform: translateY(0.6rem);
		-o-transform: translateY(0.6rem);
		transform: translateY(0.6rem);
	}
	.collapse_expand:active,
	.collapse_expand:focus,
	.collapse_expand:hover,
	.collapse_expand_faq:active,
	.collapse_expand_faq:focus,
	.collapse_expand_faq:hover {
		/* provide same color & shadow as regular buttons have */
		-webkit-background-image: linear-gradient(olivedrab, darkolivegreen, black);
		-moz-background-image: linear-gradient(olivedrab, darkolivegreen, black);
		-ms-background-image: linear-gradient(olivedrab, darkolivegreen, black);
		-o-background-image: linear-gradient(olivedrab, darkolivegreen, black);
		background-image: linear-gradient(olivedrab, darkolivegreen, black);
	}

	/* toc: render collapse-expand-arrows as fingertip-friendly buttons */
	.byNight .collapse_expand,
	.byNight .collapse_expand_faq {
		/* provide same color & shadow as regular buttons have */
		-webkit-background-image: linear-gradient(gray, black);
		-moz-background-image: linear-gradient(gray, black);
		-ms-background-image: linear-gradient(gray, black);
		-o-background-image: linear-gradient(gray, black);
		background-image: linear-gradient(gray, black);
		-webkit-box-shadow: 0 0 1.7rem darkgray;	/* glow */
		-moz-box-shadow: 0 0 1.7rem darkgray;
		box-shadow: 0 0 1.7rem darkgray;
	}
	.byNight .collapse_expand:active,
	.byNight .collapse_expand:focus,
	.byNight .collapse_expand:hover,
	.byNight .collapse_expand_faq:active,
	.byNight .collapse_expand_faq:focus,
	.byNight .collapse_expand_faq:hover {
		/* provide same color & shadow as regular buttons have */
		-webkit-background-image: linear-gradient(forestgreen, black);
		-moz-background-image: linear-gradient(forestgreen, black);
		-ms-background-image: linear-gradient(forestgreen, black);
		-o-background-image: linear-gradient(forestgreen, black);
		background-image: linear-gradient(forestgreen, black);
		-webkit-box-shadow: 0 0 2rem lime;		/* lime glow */
		-moz-box-shadow: 0 0 2rem lime;
		box-shadow: 0 0 2rem lime;
	}

	/* PRESSED BUTTON: handle its border same as for input[type=button] etc.! */
	.collapse_expand:active,
	.collapse_expand_faq:active {
		border: 0.2rem outset gray;
	}
	.byNight .collapse_expand:active,
	.byNight .collapse_expand_faq:active {
		border: 0.2rem solid lime;	/* lime to enhance glow */
	}

	/* toc: more distance for fingertip-friendlyness */
	.collexp li a {
		font-size: 120%;
		line-height: 2rem;
	}

	/* ARROWS */
	.collapse_expand,
	.collapse_expand_faq {
		height: 2rem;
		width: 2rem;
		max-height: 2rem;
		max-width: 2rem;
	}
}