/* Collapsible element */
.collapsible {
	display: block;
	position: relative;
	background-color: #2e2d2c;
	color: #fff;
	margin: 3em 0;
	padding: 0 0.7em 0.7em 0.7em;
	
	.collapsible { background-color: #5e5d5c; }

	/* Title */
	h1, h2, h3, h4 { color: #fff; }

	/* Legend */
	&>:first-child, &>:first-child a, &>:first-child a:visited {
		color: #000;
		border-bottom: none;
		display: block;
	}

	&>legend:first-child { margin-bottom: 0; }

	&>:first-child {
		position: relative;
		color: #000;
		width: 100%;
		padding: 0.5em 0;
		margin: 0 0 0.7em 0;
		font-size: 100%;
		font-weight: normal;
		background-color: #ee787c;

		/* Left padding */
		&:before {
			content: " ";
			display: block;
			width: 0.7em;
			position: absolute;
			height: 100%;
			top: 0;
			left: -0.7em;
			background-color: #ee787c;
		}

		/* Right padding */
		&>:after {
			content: " ";
			display: block;
			width: 0.7em;
			position: absolute;
			height: 100%;
			top: 0;
			right: -0.7em;
			background-color: #ee787c;
		}

		/* Right button */
		a:after {
			height: 100%;
			width: 1.15em;
			right: 0.8em;
			position: absolute;
			top: 0;
			margin-right: -1.15em;
			font-size: 200%;
			content: "\e011";
			font-family: MarsIcons;
			font-weight: normal;
			text-align: center;
			line-height: 130%;
			background-color: #2e2d2c;
			color: #ee787c;
			z-index: 1;
		}
	}

	table { color: #000; }

	&.collapsed {
		padding: 0 0.7em;

		&>:first-child a:after { content: "\e012"; }
		&>* { display: none; }
		&>:first-child { display: inherit; }
	}
}