@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);

/* ================================================================
		TYPO
================================================================ */

.sofi			{	font-family: 'Open Sans Condensed', courier,sans-serif; font-size: 110%; /*color: #ff00ff !important;*/  }
	
	.sofi-1		{	font-family: 'Open Sans', sans-serif; } 
	.sofi-2		{	font-family: 'Open Sans Condensed', sans-serif; } 
	.sofi-3		{	font-family: 'Playfair Display', serif; } 
		
	.sofa-1		{	background-color: rgba(105,025,059,1.0) /* #69193b RAL 4004 Bordeauxviolett */ }
	.sofa-2		{	background-color: rgba(025,048,088,1.0) /* #193058 RAL 5003 Saphirblau      */ }
	.sofa-3		{	background-color: rgba(037,036,039,1.0) /* #252427 RAL 9004 Signalschwarz   */ }				
				

/* ================================================================
		Layout
================================================================ */

div#changer			{	z-index: 999; position: fixed; bottom: 10%; right: -182px; width: 160px; padding: 0 10px; font-family: arial; font-size: 11px; background-color: rgba(255,255,255,0.8); 
						border-radius: 4px 0 0 4px; box-shadow: 0 0 0 2px #bababa; }
div#changer	a				{	display: block; border-bottom-width: 1px; padding: 12px 0; color: #666 !important; }
div#changer	a span			{	display: block; float: left; width: 24px; height: 24px; margin: -6px 6px 0 0; border-radius: 100%; }
div#changer	a:hover			{	color: #000; }
div#changer	a:last-child	{	border: 0; }

div#changer	div.tab			{	position: absolute; width: 33px; height: 33px; top: 50%; left: -36px; margin-top: -14px; border-radius: 6px 0 0 6px; overflow: hidden; }
div#changer	div.tab	a		{	position: absolute; display: block; width: 100%; height: 100%; padding: 0; border: 0; background-repeat: no-repeat; background-position: center; background-size: 29px;}
div#changer	div.tab	a.close	{	background-image: url('../img/icon/_minus_gray.svg'); }
div#changer	div.tab	a.on	{	background-image: url('../img/icon/_plus_gray.svg');  }

	#body:target #changer	{	right: -2px;  }
	#body:target .on 		{	display: none; }

#changer	{	-moz-transition: 	all 600ms ease-in-out; 
				-o-transition: 		all 600ms ease-in-out; 
				-webkit-transition: all 600ms ease-in-out; 
				transition: 		all 600ms ease-in-out; }
							

/* ================================================================
		END
================================================================