/* ************************* customization starts here; last changes: 201509212211 inp  */ 

.nav.ipetersen , .nav.subkontur , .nav.seitenpfad   { max-width:350px; } /* Mehr tut nun wirklich nicht not ;-) */
/*==============================================================================================================*/
/* Navigation in schicke farbige runde Balken verpacken und Farben anpassen; Übersicht:
	.nav.{modclass} li a	
	.nav.{modclass} > li > a:hover, .nav.modclass > li > a:focus
	.nav.{modclass} li a:hover, .nav.modclass li a:focus
	.nav.{modclass} .current > a
	.nav.{modclass} li li a
	.nav.{modclass} li li li a */

.nav.ipetersen li a { 
    display:block; 
	margin-bottom:2px;
	padding:.5em; 
	line-height: 100%; 
	font-size: 110%; 
	color: #000080; 
	background-color: #bdf; 
	font-weight: bold; 
	border-radius: 8px;} 
	
.nav.ipetersen.green li a {
	color: #004d33; 
	background-color: #9eb;
}

.nav.ipetersen.red li a {
	color: #800000; 
	background-color: #fdd;
}
	
.nav.subkontur li a { 
    display:block; 
	margin-bottom:2px;
	padding:.5em; 
	line-height: 100%; 
	font-size: 110%; 
	color: #800000; 
	background-color: #fbb; 
	font-weight: bold; 
	border-radius: 8px;} 
	
.nav.seitenpfad li a { 
    display:block; 
	margin-bottom:2px;
	padding:.5em; 
	line-height: 100%; 
	font-size: 110%; 
	color: #004d33; 
	background-color: #9db; 
	font-weight: bold; 
	border-radius: 8px;} 

.nav.ipetersen > li > a:hover,
.nav.ipetersen > li > a:focus {
	text-decoration: none;
	color:white;
	background-color: #000080; 
} 

.nav.ipetersen.green > li > a:hover,
.nav.ipetersen.green > li > a:focus {
	text-decoration: none;
	color:white;
	background-color: #004d33; 
} 

.nav.ipetersen.red > li > a:hover,
.nav.ipetersen.red > li > a:focus {
	text-decoration: none;
	color:white;
	background-color: #800000; 
} 

.nav.subkontur > li > a:hover,
.nav.subkontur > li > a:focus {
	text-decoration: none;
	color:white;
	background-color: #800000; 
} 

.nav.seitenpfad > li > a:hover,
.nav.seitenpfad > li > a:focus {
	text-decoration: none;
	color:white;
	background-color: #004d33; 
} 

.nav.ipetersen li a:hover,
.nav.ipetersen li a:focus { 
	text-decoration: none;
	color:white;
	background-color: #000080; margin-bottom:2px; 
} 
.nav.ipetersen.green li a:hover,
.nav.ipetersen.green li a:focus { 
	text-decoration: none;
	color:white;
	background-color: #004d33; margin-bottom:2px; 
} 
.nav.ipetersen.red li a:hover,
.nav.ipetersen.red li a:focus { 
	text-decoration: none;
	color:white;
	background-color: #800000; margin-bottom:2px; 
} 

.nav.subkontur li a:hover,
.nav.subkontur li a:focus { 
	text-decoration: none;
	color:white;
	background-color: #800000; margin-bottom:2px; 
} 

.nav.seitenpfad li a:hover,
.nav.seitenpfad li a:focus { 
	text-decoration: none;
	color:white;
	background-color: #004d33; margin-bottom:2px; 
} 

/* der ausgewählte Menüpunkt wird dunkler eingefärbt: */
.nav.ipetersen .current > a { 
    background-color: #06f;
	color:white;
}

.nav.ipetersen.green .current > a { 
    background-color: #0a4;
	color:white;
}

.nav.ipetersen.red .current > a { 
    background-color: #e73333;
	color:white;
}

.nav.subkontur .current > a { 
    background-color: #f00;
	color:white;
}

.nav.seitenpfad .current > a { 
    background-color: #096;
	color:white;
}

/* Untermenüpunkte und Unteruntermenüpunkte sollen etwas kleiner, 
heller hinterlegt und eingerückt sein */

.nav.ipetersen  li  li  a { 
    margin-left:1em; 
	background-color: #e7efff; 
	font-size:120% } 
	
.nav.ipetersen  li  li  li  a { 
    margin-left:2em; 
	background-color: #e7f7ff; 
	font-size:120% } 
	
.nav.subkontur  li  li  a { 
    margin-left:1em; 
	background-color: #ffe8e8;
    font-size:120%	} 
	
.nav.subkontur  li  li  li  a { 
    margin-left:2em; 
	background-color: #ffe8e8;
	font-size:120% } 

.nav.ipetersen.red  li  li  a{ 
    margin-left:1em; 
	background-color: #fff5f5;
    font-size:120%	} 
	
.nav.ipetersen.red  li  li  li  a { 
    margin-left:2em; 
	background-color: #fff5f5;
	font-size:120% } 
	

.nav.seitenpfad  li  li  a, .nav.ipetersen.green  li  li  a { 
    margin-left:1em; 
	background-color: #d4ece0; 
	font-size:120%} 
	
.nav.seitenpfad  li  li  li  a, .nav.ipetersen.green  li  li  li  a { 
    margin-left:2em; 
	background-color: #d4ece0; 
	font-size:120%} 
/*==============================================================================================================*/
/* Rahmen: well ist an sich schick. Das ist dieser Rahmen um die Module. Mit größerem Radius ist's noch schicker: */	
.ipetersen.well {
    border-radius: 8px;
}
	
.subkontur.well {
    border-radius: 8px;
}
	
.seitenpfad.well {
    border-radius: 8px;
}
	
.page-header {
	margin: 2px 0px 10px 0px;
	padding-bottom: 5px;
}

.header-inner.clearfix {
/* ist INLINE formatiert, denn dort kann die im 
Backend ausgewählte Farbe herangezogen werden. 
Das betrifft die farbigen Striche ober- und unterhalb des Logos. */
}

/* Mit größerem Radius ist's noch schicker: */
.breadcrumb.ipetersen {
   border-radius: 8px; border:#06f solid 1px;
}

.breadcrumb.seitenpfad{
   border-radius: 8px; border:#096 solid 1px;
}

.breadcrumb.subkontur{
   border-radius: 8px; border:#f00 solid 1px;
}

/*==============================================================================================================*/
/* Hier geht's um die Darstellung der Kontaktdaten. Je nach Viewport muss hier deutlich nachgesteuert werden, sonst sieht's unschön aus. */
	
.dl-horizontal dt { width: 5%; }
.dl-horizontal dd { margin-left: 10%; }	

@media (max-width: 767px) {
/* Schrift bei kleinen Displays kleiner als bei drn großen: */
	.nav.ipetersen li a , .nav.subkontur li a, .nav.seitenpfad li a  { font-size:100%; padding:.2em; }
	/* hm. hab' vergessen was ich damit wollte... */
	.dl-horizontal dt { clear:left; float:left; width:10%; }	
}

/* völlig unnötig, dass das Logo bei bestimmten Viewportbreiten plötzlich zentriert wird... */
.header .brand { text-align: left }

/* Im Kategorienblog und der Kategorienliste ist das fantasielose "Unterkategorien" eher störend. Weg damit: */
.category-list .cat-children > h3, .blog .cat-children > h3{
    display: none;
}

/* Leute, wenn der Bildschirm schmaler als 1000px ist, sieht der Contentbereich zweispaltig wirklich gar nicht schön aus. Dann lieber ehrlich einspaltig...:*/
@media (max-width: 1000px) {
    .row-fluid .span6[class*="column"], .row-fluid[class*="col"] .span6  {
	   width:100%;
	   float:none;
	   display:block;
	   margin-left:0px;
} 
}

/*==============================================================================================================*/
/* Bilder im Blog-Layout und der Kategoriebeschreibung ************************************* */

.items-leading .item-image, .items-row  .item-image,
.item-page .item-image , .category-desc img, .item-page p  img, img.right, .items-row  p img {
	    width: 100%;
	}
	
.category-desc img, .item-page p  img, .items-row  p img  {
	float: left;
	margin:3px 20px 18px 0;
	max-width:300px;
} 
	
@media (min-width: 340px) {
	.items-leading .item-image, .items-row  .item-image,
    .item-page .item-image, .category-desc img, .item-page p  img, img.right, .items-row  p img	{
	    width: 50%;
		margin-top:3px;
		max-width:300px;
	}
}
	
@media (min-width: 1001px) {
	.items-row  .item-image, .category-desc img, .items-row  p img  {
	    width: 100%;
		margin-top:0;
	}
}

@media (min-width: 1350px) {
	.items-row  .item-image, .category-desc img, .items-row  p img  {
	    width: 50%;
		margin-top:3px;
	}
}

img.right {
    float: right !important;
	margin:3px 0 18px 20px !important;
}

/*==============================================================================================================*/
/* HEADER, Hintergründe und fixe Sidebars */

/* im mehrspaltigen Layout sieht ein vertikaler Streifen in Navibreite echt schick aus...:*/
@media (min-width: 768px) {
	body {
		background-position: 40px 0px;
		background-size: calc(23.404255317% - 20px) auto;
		background-repeat: repeat-y;
	}
	body.ingbertpetersen {
		background-image: url(/images/jinpbg.png);
	}
	body.subkontur {
		background-image: url(/cms32/images/jskbg.png);
	}
	body.seitenpfad {
		background-image: url(/cms32/images/jspbg.png);
	}
		
}

@media (min-width: 850px) {
	.ingbertpetersen .header-inner {
		background-image: url(/images/jzweiSteinmaennchenFadeOut.jpg);
		background-position: center right;
		background-size: calc(100% - 550px) auto;
		background-repeat:no-repeat no-repeat;
	}
	
	.seitenpfad .header-inner {
		background-image: url(/cms32/images/jspHImg.jpg);
		background-position: center right;
		background-size: calc(100% - 550px) auto;
		background-repeat:no-repeat no-repeat;
	}
	
	.subkontur .header-inner {
		background-image: url(/cms32/images/jskHImg.jpg);
		background-position: center right;
		background-size: calc(100% - 550px) auto;
		background-repeat:no-repeat no-repeat;
	}
}

@media (min-width: 768px) {

	#sidebar {
		position:fixed; }
	
	#content {
	   margin-left: calc(23.404255317% + 2.12766%);
	}

	.nav.ipetersen, .nav.subkontur, .nav.seitenpfad { width: calc(100.45% - 20px ); }

	.footer p {
		text-align:center;
	}
	
.nav.ipetersen li a, .nav.seitenpfad li a , .nav.subkontur li a  {
		box-shadow: 1px 2px 6px #292929;
}

#aside>div {
		box-shadow: 2px 2px 10px -3px #292929; }

.sidesdynfixed {
		position:fixed !important;
		top:20px !important;
		z-index:10;
	}
#aside.sidesdynfixed {
		right: 40px;
		width: calc(23.4043% - 20px);
		}
	
.contshift {
	   margin-left: calc(23.404255317% + 2.12766%) !important;
	}
	
.contunshift {
	margin-left: 2.12766% !important;
}

.sidesdynstatic {
	    position:static !important; 
		
		 }
		 
.sidesdynstatic .nav.ipetersen , .sidesdynstatic .nav.subkontur, .sidesdynstatic .nav.seitenpfad{ width:100%; } 
		 
}
/*==============================================================================================================*/
/* kleinen Hinweis bei deaktiviertem JS ausgeben. Hinfällig bei Displays bis 767px Breite. */

.warning { color:red; font-style:italic; font-size:90%; padding-top:.5em;padding-bottom:0px; }

body.subkontur .warning { color:blue; }

@media (max-width:767px) { 
	.warning { display:none; }
}

/*==============================================================================================================*/
/* Blog-Layout: Kein Fließen von nachfolgenden Beiträgen um die Bilder des vorherigen Beitrages, wenn in Main nur eine Spalte existiert: */
@media (max-width: 1000px) {
	.row-fluid .span6[class*="column"], .row-fluid[class*="col"] .span6 {
		clear:left;
	}
}

/* Zitate gern etwas kleiner als der restliche Text, mit kleinen Abständen zwischen den Absätzen: */

blockquote p { 
	margin-bottom:5px;
	font-size:80%;
}
/*==============================================================================================================*/
/* Galerie Version 2 ***************************************************************************/

.bigPic {
	z-index:100;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%; 
	background-color:black;
	background-repeat:no-repeat;
	/*-webkit-backface-visibility: hidden;  
    backface-visibility: hidden;*/
}

.bigpicvisible {
	display:block;
}

.tbspace.bigPic , .tbspace.bigPic.fadein { 
	background-size:90% auto;
	background-position: center 5%;
}

.tbmakespace.bigPic, .tbmakespace.bigPic.fadein {
	background-size:85% auto;
	background-position: center 5%;
}

.lrspace.bigPic, .lrspace.bigPic.fadein { 
	background-size:auto 90%;
	background-position: 5% center;
}

.lrmakespace.bigPic, .lrmakespace.bigPic.fadein {
	background-size: auto 85%;
	background-position: 5% center;
}

.bigPic.fadein {
	transition: all .5s ease-out 0s;
}

.bigPic.fadeout {
	transition: all .5s ease-in 0s;
}

.bigPic.lrspace.fadeout, .bigPic.lrmakespace.fadeout {
	background-position: -2000px center;
}

.bigPic.tbspace.fadeout, .bigPic.tbmakespace.fadeout {
	background-position: center -2000px;
}

.ingbertpetersen .arrleft {
	background-image:url(/images/pfeillinks.png);
}

.ingbertpetersen .slsh {
	background-image:url(/images/slsh.png);
}

.ingbertpetersen .arrright {
	background-image:url(/images/pfeilrechts.png);
}

.ingbertpetersen .infobtn {
	background-image:url(/images/infosymbol.png);
}

.ingbertpetersen .closebigpic {
	background-image:url(/images/picx.png);
}

.seitenpfad .arrleft, .subkontur .arrleft {
	background-image:url(/cms32/images/pfeillinks.png);
}

.seitenpfad .slsh, .subkontur .slsh {
	background-image:url(/cms32/images/slsh.png);
}

.seitenpfad .arrright, .subkontur .arrright {
	background-image:url(/cms32/images/pfeilrechts.png);
}

.seitenpfad .infobtn, .subkontur .infobtn {
	background-image:url(/cms32/images/infosymbol.png);
}

.seitenpfad .closebigpic, .subkontur .closebigpic {
	background-image:url(/cms32/images/picx.png);
}

.infobtn, .closebigpic, .arrleft, .arrright, .slsh {
	position:fixed;
	display:block;
	z-index:999;
	transition: all 2s ease 0s;
	background-position:center center;
	background-size:100% 100%;
	-webkit-transform:translateZ(0);
	/*-webkit-backface-visibility: hidden;  
    backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);*/
}

.ilandscape .infobtn, 
.ilandscape .arrleft,
.ilandscape .arrright,
.ilandscape .closebigpic,
.ilandscape .slsh {
	width: 40px;    	/* Fallback */
	height: 40px;		/* Fallback */
	max-width: 40px;	/* Fallback */
	max-height: 40px;	/* Fallback */
	width: 15vh;
	height: 15vh;
	max-width: 15vw;
	max-height: 15vw;
}

.tbspace .infobtn, .tbmakespace .infobtn, 
.tbspace .arrleft, .tbmakespace .arrleft, 
.tbspace .arrright, .tbmakespace .arrright,
.tbspace .closebigpic, .tbmakespace .closebigpic,
.tbspace .slsh, .tbmakespace .slsh {
	bottom: 0;
	transition: all 2s ease 0s;
	transform: rotate(-360deg);
}

.iportrait .infobtn, 
.iportrait .arrleft,
.iportrait .arrright,
.iportrait .closebigpic,
.iportrait .slsh {
	width: 40px;    	/* Fallback */
	height: 40px;		/* Fallback */
	max-width: 40px;	/* Fallback */
	max-height: 40px;	/* Fallback */
	width: 15vw;
	height: 15vw;
	max-width: 15vh;
	max-height: 15vh;
}

.explSlSh {
	position:fixed;
	width:240px;
	height:auto;
	top:50%;
	left:50%;
	margin-top:-120px;
	margin-left:-120px;
	padding:5px;
	color:white;
	border:1px solid white;
	background-color:grey;
	display:none;
	transition:all 2s ease 0s;
}


.lrspace .infobtn, .lrmakespace .infobtn, 
.lrspace .arrleft, .lrmakespace .arrleft, 
.lrspace .arrright, .lrmakespace .arrright,
.lrspace .closebigpic, .lrmakespace .closebigpic,
.lrspace .slsh, .lrmakespace .slsh {
	right: 0;
	transition: all 2s ease 0s;
	transform: rotate(360deg);
}

.tbspace .arrright, .tbmakespace .arrright {
	right: 0; /* Fallback */
	right: 5vw;
	transition: all 2s ease 1s;
}

.tbspace .arrleft, .tbmakespace .arrleft {
	right: 45px; /* Fallback */
	right: 20vw;
	transition: all 2s ease 0.75s;
}

.tbspace .slsh, .tbmakespace .slsh {
	right: 90px; /* Fallback */
	right: 35vw;
	transition: all 2s ease 0.5s;
}

.tbspace .infobtn, .tbmakespace .infobtn {
	right: 145px; /* Fallback */
	right: 55vw;
	transition: all 2s ease 0.25s;
}

.tbspace .closebigpic, .tbmakespace .closebigpic {
	right: 200px; /* Fallback */
	right: 75vw;
	transition: all 2s ease 0s;
}

/* */

.lrspace .arrright, .lrmakespace .arrright {
	bottom: 0; /* Fallback */
	bottom: 5vh;
	transition: all 2s ease 1s;
}

.lrspace .arrleft, .lrmakespace .arrleft {
	bottom: 45px; /* Fallback */
	bottom: 20vh;
	transition: all 2s ease 0.75s;
}

.lrspace .slsh, .lrmakespace .slsh {
	bottom: 90px; /* Fallback */
	bottom: 35vh;
	transition: all 2s ease 0.5s;
}

.lrspace .infobtn, .lrmakespace .infobtn {
	bottom: 145px; /* Fallback */
	bottom: 55vh;
	transition: all 2s ease 0.25s;
}

.lrspace .closebigpic, .lrmakespace .closebigpic {
	bottom: 200px; /* Fallback */
	bottom:75vh;
	transition: all 2s ease 0s;
}

.slsh {
	border-radius: 5% 50% 40% 50%;
}

.slsh.slshon {
	background-color:#003355;
}


.greyout {
	display:none;
}

.PicInfo {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:0;
	background-position: left bottom;
	background-repeat: repeat-x;
	display:none;
	padding-bottom: 60px;
	padding-top: 20px; /* Fallback */
	padding-top: 5vw;
}

.ingbertpetersen .PicInfo {
	background-image:url(/images/infoBg.png);
}

.seitenpfad .PicInfo, .subkontur .PicInfo {
	background-image:url(/cms32/images/infoBg.png);
}

.picinfovisible {
	display:block;
	height:auto;
	transition: all 2s ease 0s;
}

.picinfohidden {
	display:none;
}

.inpxthumbs {
	display:block;
}

.inpxthumbs:before, .inpxthumbs:after {
	content: "";
	display: table;
}

.inpxthumbs:after {
	clear: both;
}

.inpxthumbs {
	zoom: 1; /* ie 6/7 */
}

.inpxthumbs p {
	float:left;
	position:relative;
	width:90px; /* Fallback */
	width:15vw;
	min-width:90px;
	max-width:150px;
	min-height:90px;
	max-height:150px;
	height:90px; /* Fallback */
	height:15vw; 
	margin:10px 10px 0 0;
	border: solid 1px #777777;
	background-color: #eeeeee;
  	justify-content: center;
	align-items: center;
	display: flex;
}


.inpxthumbs p img { /* landscape images (default) */
	left:0;
	right:0;
	width:100%;
	margin:0;
	height:auto;
}

.inpxthumbs p img.portrait { /* portrait images */
	height:100%;
	margin:0;
	width:auto;
}

.inpxFn, .inpxAlt, .inpxplic, .inpxpsize, .inpxauthor {
	font-size:110%;
	color: white;
	display: block;
	margin: .5em 25px .5em 25px; /* Fallback */
	margin: .5em 7vw .5em 7vw;
}

.inpxFn a, .inpxAlt a, .inpxplic a, .inpxsize a, .inpxauthor a,
.inpxFn a:visited, .inpxAlt a:visited, .inpxplic a:visited, .inpxsize a:visited, .inpxauthor a:visited,
.inpxFn a:active, .inpxAlt a:active, .inpxplic a:active, .inpxsize a:active, .inpxauthor a:active {
	color:yellow;
}

.inpxFn a:hover, .inpxAlt a:hover, .inpxplic a:hover, .inpxsize a:hover, .inpxauthor a:hover,
.inpxFn a:focus, .inpxAlt a:focus, .inpxplic a:focus, .inpxsize a:focus, .inpxauthor a:focus {
	color:orange;
}

.inpxFn {
	font-style:italic;
}

.inpxAlt {

}

.inpxplic {
	margin-top:1em;
}

.inpxauthor {
	margin-top:1em;
}

.inpxpsize {
	color:lightgrey;
	font-size:90%;
	margin-top:-.2em;
}

img.cclic {
	border:0;
	margin:0 0 .2em 0;
	display:block;
}