/**
 * CSS-Spoiler with transition.
 */

/* Main Container */
.spoiler {
	position: relative;
	padding:  0;
	background-color: #ededed;
	border:   1px solid #999999;
	border-radius: 4px;
}

/* Checkbox for drop-down function */
.spoiler > input[type=checkbox]:first-child {
	position: absolute;
	margin:   0;
	width:    100%;
	cursor:   pointer;
	opacity:  0.0;
	/* Fix: IE9/10 */
	background-color: #ededed;
}

/* Headline - Checkbox */
.spoiler > input[type=checkbox]:first-child,
.spoiler > input[type=checkbox]:first-child + span {
	padding:      0px;
	/* Headline height */
	min-height:  28px;
	line-height: 28px;
}

/* Headline content */
.spoiler > input[type=checkbox]:first-child + span {
	display:          block;
	padding-left:     25px;
	background:       transparent no-repeat scroll 4px center;
	background-image: url('../images/ico_plus_16.png');
}
.spoiler > input[type=checkbox]:first-child:checked + span {
	background-image: url('../images/ico_minus_16.png');
}

/* Drop- down/up with transition */
.spoiler > input[type=checkbox]:first-child ~ div {
	overflow:   hidden;
/*	background-color: #ffffff; */
	border-top: 0px solid #999999;
/*	border-radius: 4px; */
	max-height: 0px;
	padding:    0;

	transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s,
				padding    0.0s linear 0.5s,
				border-top 0.0s linear 0.7s;
}
.spoiler > input[type=checkbox]:first-child:checked ~ div {
	overflow: auto;
	padding: 4px 12px 4px 4px;
/*	background-color: #ffffff; */
	border-top-width: 1px;
/*	border-radius: 4px; */
	max-height: 360px;

	transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s,
				padding    0.0s linear 0.0s,
				border-top 0.0s linear 0.0s;
}

span.spoilerTitle {
  color: #004d91;
  font-size: 1.2em;
  font-weight: bold;
}