/* Style Sheet - Index - Uebersicht */
/* http://www.thorsten-reinicke.eu/ */
/* © 2007-2009 Thorsten Reinicke */


span {
	padding: 2px ; }

.margin {
	margin-bottom: 8px ; }


/* FLEX */

main.flex {
	padding-top: 10px ;
	
	display: -webkit-flex ; 
	display: -moz-flex ; 
	display: flex ; 
	
	-webkit-flex-wrap: wrap ; 
	flex-wrap: wrap ; 

	-webkit-flex-direction: row ; 
	flex-direction: row ; 
	
	-webkit-align-items: flex-start ; 
	align-items: flex-start ; 
	-webkit-justify-content: center ; 
	justify-content: center ; }

main.flex article {
	-webkit-flex-grow: 1 ; 
	flex-grow: 1 ; 
	-webkit-flex-shrink: 1 ; 
	flex-shrink: 1 ; 
	text-align: left ;
	width: 384px ; 
	height: auto ; 
	padding: 9px ; 
	border: 0px solid #FFF ; 
	margin: 0 8px 16px 8px ;  
	border: 1px solid transparent ; 
	opacity: 1 ; 
	-webkit-transition: border 0.5s ease-in-out ; 
	transition: border 0.5s ease-in-out ; 
	background: #ECE9EC ; }

details {
	background: #ECE9EC ; }



/* DETAILS */


details summary {
	outline: 0 none ; 
	line-height: 1.5 ; 
	background: #ECE9EC ; }

details p, details h3, details h4 {
	margin: 12px 16px 0 16px ; 
	border: 0px solid red ; }



details p:last-child {
	padding-bottom: 12px ; }


details figure  {
	margin: 12px 16px 0px 16px ; }

details figure img {
	width: 100% ; }

details figure figcaption {
	font-size: 14px ; 
	color: #443344 ; }



details p.foto {
	margin: -6px 12px 0 12px ; }

details p.klein {
	font-size: 14px ; 
	margin-top: 0 ; 
	margin-bottom:  ; }

details p.foto img {
	width: calc(100% - 8px) ; 
	height: auto ; 
	margin: 4px ; }



details summary span:nth-child(2) {
	display: none ; }


details[open] {
	border: 0px solid #BBAABB ; 
	margin: -1px 0 24px -1px ; }

details[open] summary {
	margin-bottom: 12px ; }

details[open] summary span:nth-child(2) {
	display: inline ; }

details[open] summary span {
	text-decoration: none ; }

details[open] summary span:nth-child(1) {
	display: none ; }


details summary span, details:hover summary span
{	transition: all 0.4s linear ; }

details summary:active
{	transition: all 0s linear ; }

details summary:hover {
	cursor: pointer ; }

details summary:hover span { 
	text-decoration: none ; }

detail img, details p img {
	vertical-align: bottom ; 
	padding: 0 ; 
	margin: 0 6px 6px 0 ; }



details summary span, details[open] summary span
{	color: #665566 ; 	
	text-decoration: underline ; }


details summary:hover span /* , details[open] summary span */
{	color: #FFFFFF ; 
	background: #665566 ; 
	text-decoration: none ; }

details summary:active span /* , details[open] summary:active span */
{	color: #FFFFFF ; 
	background: #BC4118 ; 
	text-decoration: none ; }

summary::-webkit-details-marker, summary:before {
	color: #AA99AA ; }


/* Pfeil */

summary {
  list-style: none; }

summary::-webkit-details-marker {
  display: none; }

summary::before {
	content: "\2192" ;  
	color: #332233 ; }

details[open] summary::before {
	content: "\2190" ; }