/**
 * t29v6 Design footer.css
 * $Id$
 * In dieser Datei:
 *
 *   footer = Container fuer alles im unteren Bereich (nav.guide, nav.rel, div.right)
 *   nav.guide = Beam-Navigation
 *   nav.rel = Relationale Navigation
 *   footer .right = Copyright-Bereich
 *
 **/

/* Footer innerhalb des Blattes, mit Navigationselementen */
footer.in-sheet {
	clear: both; padding-top: 1px; /* um margin innerer elemente an der oberkante beginnen zu lassen */
	height: 104px; width: 100%;
	/* temp. um Navi-Kram zu uebermalen: */
	position: relative; z-index: 20;
	
	/*border-top: 1px solid #5d5c58;*/
	background: transparent url("images/line.header-footer.png") top left repeat-x;
	/* bgcolor was #f1f1f1  - transparent gesetzt um nur an einer stelle die farbe austauschen zu muessen */
	
	/* "Hacky" bugfix, um "Menue einblenden"-Button zu uebertuenchen: Doch farbe setzen */
	background-color: #f7f7f7;
}

/* "Beam Navigation" nav.guide */
nav.guide {
	position: absolute;
	z-index: 5; /* ueber nav.rel */
	top: -5px; left: -5px; /* damit bullets rausschauen */
	width: 870px; margin: 0 40px; /* wie #content, in breite ein paar px mehr wegen ueberstehenden bullets */
	/* width:900px, aber 10px Toleranz damit der Beam nicht umbricht wenn
       eine ungerade Anzahl an Items vorhanden ist (1px Toleranz wuerde schon reichen) */
}
nav.guide ul, nav.guide li { display: inline; }
nav.guide a {
	float: left;
	position: relative;
}

nav.guide a:hover, nav.guide a:focus {
	background-color: inherit; /* Overwrite nav a:hover bg white */
}

nav.guide .text {
	display: block;
	/*font: 12px "Futura Std Book";*/
	font-size: 12px; font-weight: bold;
	text-transform: uppercase;
	color: #5d5c58;
	position: absolute;
	top: -19px; left: 0;
	white-space: nowrap;
}

nav.guide a.higher-text .text {
	/* Labeltexte, die die default dargestellten Texte (.visible)
	   beim Hovern ueberpinseln und daher hoeher dargestellt werden */
	top: -34px;
}

nav.guide .bullet {
	width: 0; height: 0;
	border: 2px solid #5d5c58;
	padding: 4px;
	margin: 1px;
	display: inline-block;
	border-radius: 6px;
	position: relative;
}

nav.guide .visible > a > .bullet {
	border-width: 6px;
	padding: 0;
}


nav.guide a { opacity: 0; }
nav.guide li.visible > a,
nav.guide a:hover, nav.guide a:focus { opacity: 1; }

/*
nav.guide .bullet, nav.guide .text { visibility: hidden; }
nav.guide li.visible > a > .bullet,
nav.guide .visible > a > .text,
nav.guide a:hover .bullet, nav.guide a:hover .text,
nav.guide a:focus .bullet, nav.guide a:focus .text {
	visibility:visible;
}
*/


/*
html.csstransitions nav.guide .bullet, html.csstransitions nav.guide .text {
	visibility: visible; opacity: 0;
	-webkit-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-moz-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-ms-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-o-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
}
html.csstransitions nav.guide li.visible > a > .bullet, html.csstransitions nav.guide .visible > a >  .text,
html.csstransitions nav.guide a:hover .bullet, html.csstransitions nav.guide a:hover  .text,
html.csstransitions nav.guide a:focus .bullet, html.csstransitions nav.guide a:focus .text {
	opacity: 1;
	-webkit-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-moz-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-ms-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-o-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
}
*/

nav.guide a:hover .bullet, nav.guide a:focus .bullet {

}

/* Guide-Nav Juni 2014 revisited: Mittlerweile hat sich so viel geaendert, dass 
 * ein paar Anpassungen/Ausblendungen noetig sind. Moeglicherweise ist das hier nicht
 * ganz sauber sondern sollte im CSS gemacht werden:
 */
nav.guide li.button-box {
	display: none;
}

/*nav.guide .current > a > .text { color: #40a8e2; }*/

/* Relationale Navigation */
nav.rel {
	position: relative;
	margin: 26px 70px 0;
	width: 800px;
}

nav.rel.empty {
	/* Do not take space - bigfooter will take it  */
	display: none;
}

nav.rel li {
	position: absolute;
	top: 0;
}

nav.rel li.prev { left: 0; }
nav.rel li.next { right: 0; }

nav.rel a {
	/*font: 12px "Futura Std Medium";*/
	text-transform: uppercase;
	display: inline-block;
	padding: 10px;
	line-height: 17px;
	font-size: 14px;
	color: rgba(65,111,124,.85); /*#416f7c;*/
	/*background-color: #dfe9f0;*/
	
	font-weight: bold;
	
	position: relative;
	/*height: 40px; *//* wegen arrow: height+2*padding=arrowheight */
	
	/* Zweizeilig bei langen Linktexten, etwa programmierbare */
	max-width: 27em;
}

nav.rel strong {
	display: block;
	font-weight: normal;
	/*opacity: .7;*/
}

nav.rel li.prev a { text-align: right; padding-right: 16px; }
nav.rel li.next a { text-align: left;  padding-left: 16px; }

nav.rel a:after {
	content: ""; width: 0;
	display: block;
	position: absolute;
	top: 0;
	border-top: 27px solid transparent;
	border-bottom: 27px solid transparent;
	border-left: 24px solid #307588;
	border-right: 24px solid #307588;
	opacity: .4;
}

nav.rel a:focus:after, nav.rel a:active:after {
/*	border-left-color: #40a8e2;
	border-right-color: #40a8e2;*/
}

nav.rel .next a:after {
	right: -24px;
	border-right: none;
}

nav.rel .prev a:after {
	left: -24px;
	border-left: none;
}
/*
nav.rel a:hover {
	background-color: #dfe9f0;
}

nav.rel a:active, nav.rel a:focus {
	background-color: #40a8e2;
	color: white;
}
*/

nav.rel a:hover {
	background-color: transparent;
}

nav.rel a:hover:after {
	opacity: 1;
	border-left-color: #A12A40;
	border-right-color: #A12A40;
}



/* Footer Icon-Sammlung und so */
/*
footer .right {
	position: absolute;
	top: 2px;
	right: 0;
	width: 230px;
	padding: 15px;
	text-align: right;
}

footer .right img.logo {
	float: right;
	width:30px;
	padding-left: 10px;
	padding-right: 11px;
}

footer .right div.icons {
	clear: left;
	padding-top: 8px;
}

footer .right .icons a { opacity: .5; }
footer .right .icons a:hover, footer .right .icons a:focus { opacity: 1; }
*/

/* Post-Footer */
footer.attached {
	margin-top: -122px;
	padding: 130px 0 30px;
	
	color: white;
	font-size: 14px;
}

body.design-v2 {
	/* old */
	/* @embed */ background: #307588 url("images/bg-v2.body-footer.png") top left repeat-x;
}

/*body.design-2017-06-26 */ footer.attached {
	/* @embed */ background: #7c949c url("images/bg2017-06-26.body-footer.svg") top left repeat-x;
	color: white;
}

footer.attached div.legacy {
	/* Text von alter Homepage (eine Zeile), Ã¼bergangsweise */
	text-align: center;
	font-size: 15px;
}

footer.attached div.bigfooter {
	max-width: 1200px;
	margin: 0 auto;
}

footer.attached div.bigfooter ul {
	padding-left: 40px;
}

footer.in-sheet div.bigfooter {
	padding-left: 30px;
	padding-top: 15px; /* sheet: 40px padding */
}

div.bigfooter {
	/* body ist 13, #content 15 */
	font-size: 14px;
}

/* Bigfooter, der wahlweise nach footer.attached oder footer.in-sheet kommt */

footer div.bigfooter ul {
	/*width: 1170px;*/
	/*margin: 10px auto 20px;*/
	/* padding: 0 20px; *//* ueberfluessig, Breite allein reguliert schon */
}

footer div.bigfooter li {
	width: 390px;
	margin-right: 10px;
	float: left;
}

footer div.bigfooter .block,
footer div.bigfooter .block:link,
footer div.bigfooter .block:visited {
	display: block;
	padding: 10px;
	
	/* optionaler Effekt: Beim Hovern nicht ueber "ganze Breite" gehen */
	display: inline-block;

	text-decoration: none;
	color: inherit;
}

/* Versuch, zu schauen ob die Teile sich mit Hintergrundfarbe abheben lassen.
   Sieht kastig aus.  */
/*
body.design-2017-06-26 footer div.bigfooter .block,
body.design-2017-06-26 footer div.bigfooter .block:link,
body.design-2017-06-26 footer div.bigfooter .block:visited {
	background-color: #53676f;
}
*/

footer.attached div.bigfooter .block:hover {
	background-color: rgba(255,255,255,.1);
	/* ganz subtiler Schatten */
	box-shadow: 0 3px 10px rgba(255, 255, 255, 0.05);
}

footer.in-sheet div.bigfooter .block,
footer.in-sheet div.bigfooter .block:link,
footer.in-sheet div.bigfooter .block:visited {
	opacity: .6;
}

footer.in-sheet div.bigfooter .block:hover {
	opacity: .9;
	background-color: white;
}

footer.attached div.bigfooter a u,
footer.attached div.bigfooter a.u:link,
footer.attached div.bigfooter a.u:visited,
footer.attached div.bigfooter a.block:link u,
footer.attached div.bigfooter a.block:visited u {
	color: #BAF1FF;
}

footer.in-sheet div.bigfooter a u,
footer.in-sheet div.bigfooter a.u:link,
footer.in-sheet div.bigfooter a.u:visited,
footer.in-sheet div.bigfooter a.block:link u,
footer.in-sheet div.bigfooter a.block:visited u {
	color: #205B6B;
}

footer.attached div.bigfooter a.u:hover,
footer.attached div.bigfooter a.u:hover,
footer.attached div.bigfooter a.block:hover u,
footer.attached div.bigfooter a.block:focus u {
	color: #3DD8FF;
}

footer.in-sheet div.bigfooter a.u:hover,
footer.in-sheet div.bigfooter a.u:focus,
footer.in-sheet div.bigfooter a.block:hover u,
footer.in-sheet div.bigfooter a.block:focus u {
	color: #882224;
}

/* By means of javascript, the in-sheet footer is cloned to the original position
   for the mobile viewports. Disable the this clone view generally
   (this is reversed again in mobile.css). */
footer.attached.for-mobile {
	display: none;
}

footer div.bigfooter i {
	display: block;
	float: left;
	text-indent: -9999px;
}

footer div.bigfooter img {
	/* Nur uebergangsweise fuer das "Haus", der Faulheit wegen */
	float: left;
}

footer div.bigfooter span.p {
	display: block;
	margin-left: 80px;
	margin-top: 0px;
	line-height: 115%;
}

footer div.bigfooter li {
	width: 240px;
	margin-bottom: 10px; /* Fuer den In-Sheet-Abstand nach unten */
}

footer div.bigfooter li.haus {
	width: 510px;
}

footer div.bigfooter li.haus span.p {
	margin-left: 225px;
}

footer.in-sheet div.bigfooter li.haus img {
	opacity: .3;
}


footer div.bigfooter li.logo i {
	/* @embed */ background-image: url("images/logo.footer.png");
	width: 36px; height: 46px;
}
footer.in-sheet div.bigfooter li.logo i {
	/* @embed */ background-image: url("images/logo-dark.footer.png");
}

footer div.bigfooter li.logo span.p {
	margin-left: 47px;
	margin-top: 7px;
}

footer div.bigfooter li.copy {
	width: 370px;
}

footer div.bigfooter li.copy i {
	/* @embed */ background-image: url("images/cc-icon2.png");
	width: 100px; height: 42px;
	opacity: .4; /* Todo: Unauffaelligeres Logo finden */
}
footer div.bigfooter li.copy span.p {
	margin-left: 110px;
	margin-top: 5px;
}

/* Creative Commons icon with pure CSS, on dark background */
footer i.cc {
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 100% 100% 100% 100%;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 18px;
    padding: 2px;
    text-align: center;
    width: 18px;
}

