/******************** Page debug ********************
from css Zen Garden submission 121 - "60's Lifestyle"
http://www.csszengarden.com/121/
by Emiliano Pennisi, http://www.peamarte.it/02/03.html

erweitert von Subhash http://www.subhash.at

Good rule to know the structure of the webpage
NOTE: Only compliant browser no IE*

div,
div[id],
div[class],
p,
p[id],
p[class] {
	border: 1px solid #9C6;
	background-color: #FFF;
	margin: 20px 5px;
}

div:before {
	content: "div";
	background-color: #CF9;
	color: #060;
	display: block;
}

div[id]:before {
	content: "div#" attr(id);
	background-color: #CF9;
	color: #060;
	display: block;
}

div[class]:before {
	content: "div." attr(class);
	background-color: #CF9;
	color: #060;
	display: block;
}

p:before {
	content: "p";
	background-color: #CF9;
	color: #060;
	display: block;
}

p[id]:before {
	content: "p#" attr(id);
	background-color: #CF9;
	color: #060;
	display: block;
}

p[class]:before {
	content: "p." attr(class);
	background-color: #CF9;
	color: #060;
	display: block;
}

/******************* End Page debug *******************/

html,
body {
	width: 100%;
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 76%; /* 76% ergibt 12px (eigentlich 12,16px) bei 16px Grundeinstellung. Die angegebenen Pixel-Werte unten beziehen sich auf diese Angabe. Sie werden auf volle Pixel gerundet. Dieser Prozentwert hier wirkt sich auf alle relativ angegebenen Schriftgroessen aus. Wenn diese generell veraendert werden sollen, dann durch das Aendern dieses einzigen Wertes. */
	color: #484848;
	background: #ccccd0 url(../img/hg_verlauf.jpg) repeat-x fixed;
	text-align: center;
}
/* ermoeglicht Zeilenumbruch auch fuer Mozilla, siehe
http://scholz-webdesign.de/css/demo/mozilla-zeilenumbruch/
verhindert aber Umbruch in Safari!: */
body:-moz-last-node .moz-br:before {
    content: "\200B"; /* Leerzeichen ohne Breite */
    letter-spacing: -1ex;
}
.sm,
.sr,
.linkP,
.versteckt {
	position: absolute; 
	left: -1000px; 
	top: -1000px; 
	width: 0px; 
	height: 0px; 
	overflow: hidden; 
	display: inline;
}
.l {
	text-align: left !important;
}
.c {
	text-align: center !important;
}
.r {
	text-align: right !important;
}
.top {
	vertical-align: top !important;
}
.bottom {
	vertical-align: bottom !important;
}
.noMargin {
	margin: 0 !important;
}
.ntm {
	margin-top: 0 !important;
}
.b0 {
	border: 0 !important;
}
.fl {
	float: left;
	display: inline; /* gg. double-margin-bug auf ie6 */
}
.fr {
	float: right;
	display: inline; /* gg. double-margin-bug auf ie6 */
}
.clear {
	clear: both;
}
.inline {
	display: inline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: Times, "Times New Roman", Georgia, serif;
	font-weight: normal;
	color: #222;
}
h1,
h2,
h3 {
	margin: 1.7em 0 1em;
}
h1 {
	margin: 1.2em 0 0.8em;
	font-size: 2em;
	text-shadow: #999 0.1em 0.1em 0.15em;
}
h2 {
	font-size: 1.75em;
}
h3 {
	font-size: 1.55em;
}
h4, h5, h6 {
	margin: 1.3em 0 0.7em;
}
h4 {
	font-size: 1.4em;
}
h5 {
	font-size: 1.25em;
}
h6 {
	font-size: 1.1em;
}
strong {
	color: #555;
}
.h_zusatz {
	display: block;
	font-size: 0.9em;
}
p,
td,
li {
	font-family: Verdana, Geneva, Arial, sans-serif;
	font-size: 0.99em; /* ergibt 12.0384 px bei 76% (Zeile 65, Deklaration für body) */
	line-height: 1.3;
	color: #484848;
	text-align: left;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto; 
}
p {
	margin: 0.5em 0;
}
ul, ol {
	margin: 0 0 0.5em 1.5em;
	padding: 0 0 0 1.5em;
}
ul li {
	padding: 0 0 0.2em;
	list-style: none url(../img/sternchen.gif);
}
#navig a:link,
a:visited,
a:active {
	text-decoration: none;
}
a:link {
	color: #473;
}
a:visited {
	color: #863;
	border-bottom: 1px dashed #863;
}
#navig a:visited,
#screenshots .col1 a:visited,
#screenshots .col2 a:visited,
#screenshots h3 a:link,
#screenshots h3 a:visited {
	border-bottom: 0;
}
a:hover,
a:active,
a.hl:hover {
	border-bottom: 0;
	text-decoration: underline;
	color: #22c;
}
.hl,
a.hl,
a.hl:visited {
	color: #a00;
}
acronym, abbr {
	border-bottom: 1px dotted;
	cursor: help;
	text-decoration: none;
	font-style: inherit;
	font-weight: inherit;
}
sup {
	font-size: 0.75em;
	vertical-align: text-top;
}
blockquote {
	margin: 1.8em 0 0.5em;
	border-top: 1px solid #ccc;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #ccc;
	background-color: #f8f8f8;
	padding: 0;
	background: #eee url(../img/quote.gif) no-repeat 3px 90%;
}
small,
.small {
	font-size: 0.9em;
}
img {
	margin: 1.5em 0;
	border: 0;
	padding: 0;
}
p.bu { /* Bildunterschrift */
	margin: 3px 0 2em;
	width: 100% !important;
	text-align: right !important;
	font-size: 0.85em;
}
hr {
	height: 1px;
	margin: 0 auto 0 auto;
	padding-top: 1.5em;
	border: none;
	border-bottom: 1px dotted #888;
}
hr.fn_strich {
	margin: 0 auto 1em 3rem;
	width: 7em;
	border-bottom: 1px solid #888
}
.einblenden {
	position: relative;
	display: none;
}
a:hover .einblenden {
	display: block;
	border: 1px solid #eee;
	padding: 1em;
	background-color: #fff;
}


#navig { /* beinhaltet Logo und Navigation */
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 91px;
	text-align: center;
	background-color: transparent;
}
#navig #oben {
	position: relative;
	margin: 0 auto 0 auto;
	padding: 0;
	width: 720px; /* wird in foto/portfolios.php überschrieben! */
	height: 43px;
	border: 0;
	text-align: left;
	background: #ccc url(../img/hg_verlauf.jpg) repeat-x fixed;
}
#navig #logo { /* Logo mit Link zur Startseite */
	float: left;
	margin: 12px 0 0 2em;
	border: 0;
	padding: 0 0 3px;
	width: 190px;
	height: 28px;
}

#navig #spiegel {
	clear: both;
	margin: 0 auto 0 auto; /* margin-top für ie < 7 -> IEFixposPNG */
	padding: 0;
	text-align: left;
	border-top: 1px solid #888;
	border-right: 1px solid #222;
	border-bottom: 0;
	border-left: 1px solid #888;
	height: 48px;
	width: 718px; /* wird in foto/portfolios.php überschrieben! */
	background: transparent url(../img/ausblenden.png) repeat-x;
}
#navig #spiegel #ogol { /* Logo gespiegelt */
	margin: 3px 0 0 2em;
	border: 0;
	padding: 0;
	width: 190px;
	height: 28px;
	background: transparent url(../img/logo_unten.png) no-repeat;
}
#wrapper {
	margin: 43px auto 0.4em auto;
	padding: 0;
	width: 720px;
}
.col1, .col2 {
	margin: 0;
	border: 0;
	padding: 0;
	width: 48%;
}
.col1 {
	float: left;
}
.col2 {
	float: right;
}
#wrapper2,
#screenshots {
	margin: 0;
	padding: 45px 22px 2em;
	text-align: left;
	border-top: 0;
	border-right: 1px solid #222;
	border-bottom: 1px solid #222;
	border-left: 1px solid #888;
	line-height: 1.3; /* gg. Bug in IE 6 */
	background-color: #f8f8f8;
}
#einspaltig #wrapper2,
#fotostart #wrapper2 {
	text-align: center;
}
#einspaltig #wrapper2 h1, #fotostart #wrapper2 h1 {
	text-align: left;
}
#einspaltig #wrapper2 p,
#fotostart #wrapper2 p,
#einspaltig #wrapper2 ul,
#fotostart #wrapper2 ul {
	margin-right: auto;
	margin-left: auto;
	width: 40em;
	text-align: left;
}
#einspaltig #wrapper2 ul,
#fotostart #wrapper2 ul {
	width: 33em;
}
#einspaltig #wrapper2 blockquote {
	margin-right: auto;
	margin-left: auto;
	width: 36em;
}
#einspaltig #wrapper2 blockquote p {
	margin: 0 auto 0 auto;
	padding: 0.5em 42px;
	width: auto;
}
#wrapper2 h1,
#screenshots h1 {
	margin: 0 0 0.6em;
}
#fotostart .beispielbilder {
	border: 0;
}
#fotostart .beispielbilder img {
	border: 1px solid #555;
	margin: 1em 2px 0;
}
#fotostart h3,
h3.li {
	margin: 1em 5em 0.1em;
	text-align: left;
}

#einspaltig #wrapper2 ul#bildkategorien {
	margin: 1.5em auto 1.3em auto;
	padding: 0;
	width: 605px;
	padding-bottom: 1.7em;
}
#bildkategorien li {
	float: left;
	padding-right: 3.1em;
	list-style: none url(../img/sternchen.gif);
}
/* Foto mit automatischem Schlagschatten: */
.fotocont { /* Container für Foto und Schatten */
	clear: both;
	text-align: center;
	margin: 0 auto 1em auto;
	border: 0;
	padding: 0;
}
.schatten_o,
.schatten_r,
.schatten_l,
.schatten_u {
	margin: 0 !important;
	border: 0 none !important;
	padding: 0 !important;
}
.schatten_o,
.schatten_u {
	display: block;
	height: 6px;
}
.schatten_u {
	margin-top: -3px !important; /* ??? ... und ie braucht -2px! */
}
.schatten_r, .schatten_l {
	width: 6px;
}
.fotobeschreibung {
	margin: 0 auto 0 auto;
	width: 70%;
	text-align: center;
}
.fotobeschreibung h2 {
	margin: 0.8em 0 0;
}
.fotobeschreibung p {
	text-align: left;
}

#screenshots a img,
#screenshots img {
	display: block;
	width: 150px;
	margin: 3em 0 0;
	border-top: 1px solid #ccc;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
	border-left: 1px solid #ccc;
}
#screenshots h2 {
	margin: 0.7em 0 0.3em;
	font-size: 1.3em;
}
#screenshots h2 a:link,
#screenshots h2 a:visited {
	color: #222;
	text-decoration: none;
}
#screenshots h2 a:hover,
#screenshots h2 a:active {
	color: #22c;
}
#screenshots h2 a:hover {
	text-decoration: underline;
}
#screenshots h3 {
	clear: both;
	margin: 0;
	padding: 1em 1em;
	text-align: right;
}
#screenshots h3 a:link,
#screenshots h3 a:visited {
	text-decoration: none;
}
#screenshots h3 a:hover {
	text-decoration: underline;
}

#fuss {
	margin: 0 auto 0.9em auto;
	padding: 0;
	width: 722px;
	text-align: center;
	font-size: 0.9em;
	color: #828282;
}
#fuss img { /* evt. CC-Bildchen */
	vertical-align: bottom;
}
#fuss span.bg {
	display: inline-block;
	width: 100%;
	max-width: 1000px;
	margin-top: 0.65em;
	margin-bottom: 0.8em;
	padding: 0.4em 0;
	color: #f0f0f0;
	background: #b4b4b4;
}
/* === KONTAKTFORMULAR: === */

form#kontakt {
	margin: 1em auto 2em auto;
	padding: 0;
	width: 538px;
	font-size: 0.9em;
}
form#kontakt fieldset {
	margin: 0;
	border-top: 1px solid #ccc;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #ccc;
	padding: 10px;
	font-size: 1em;
}
form#kontakt label,
form#kontakt input,
form#kontakt select,
form#kontakt textarea {
  float: left;
  display: inline; /* gg. double-margin-bug auf ie6 */
	margin: 5px 0;
	padding: 0;
}
form#kontakt label {
  width: 120px;
	padding-right: 7px; 
  line-height: 17px;
	text-align: right;
}
form#kontakt label[for="nospam"] {
	text-align: left;
	width: auto;
}
form#kontakt .label_einzug,
form#kontakt .label_gr_einzug,
form#kontakt p {
	margin-left: 55px !important;
}
form#kontakt .label_gr_einzug {
  width: 262px;
  width: 367px;
}
form#kontakt input,
form#kontakt select,
form#kontakt textarea {
	border-top: 1px solid #ccc;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #ccc;
  width: 321px;
}
form#kontakt input#nospam {
	width: 90px;
}
form#kontakt .radiobutton {
	margin-top: 9px;
	width: 15px;
}
form#kontakt textarea {
	height: 10em;
	font: 1.1em courier, "courier new", monospace;
}
form#kontakt br { 
  clear: left; /* das floating der labels und inputs aufheben */
}
form#kontakt input#submit {
	float: right;
	margin: 0;
	border-top: 1px solid #fff;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #fff;
	padding: 2px 2px 1px;
 	width: auto;
}
form#kontakt #checkbox {
	clear: both;
	margin: 0 0 1.5em 0;
	padding-top: 0.5em;
}
form#kontakt #checkbox input {
	float: none;
	margin: 0 1em 0 0;
	border: 0;
	padding: 0;
	width: auto;
}
form#kontakt input[type="hidden"] {
	border: 0;
	width: 0;
	height: 0;
}

/* =============== Guestbox: =============== */
#kommentare .eintrag {
	text-align: left;
}
#kommentare fieldset {
	border: 0;
	margin: 0 auto;
	width: 34em;
	text-align: left;
}
#gb_inhalt {
	margin: 0 auto 0 auto;
	width: 70%;
	font-size: 0.9em;
}
.hinweis {
	margin: 1.5em 0 2em;
}
#gb_inhalt .eintrag {
	margin: 2em 0 !important;
}
#kommentare #gb_inhalt .comment {
	margin: 1em 1em !important;
	padding: 0.5em 0.7em;
	background-color: #eee !important;
}
.login_credit {
	text-align: right;
	padding-right: 2em;
}
.login_credit,
.login_credit a:link,
.login_credit a:visited {
	color: #aaa;
	border-bottom: 0;
}
.hinweis a#login {
	margin-right: 4em;
	color: #f8f8f8 !important; /* also unsichtbar */
}
div.titel {
	margin: 0 0 0.5em;
}
div.titel img {
	margin: 0;
}
div.titel a {
	border-bottom: 0 !important;
}

#fotobuch {
	width: 190px;
	height: 140px;
}
#fotobuch #durchblaettern {
	position: absolute;
	top: -1000px;
	left: 35px;
	width: 400px;
	height: 146px;
	border: 1px solid #444;
}
#fotobuch:hover #durchblaettern,
#fotobuch #durchblaettern:hover {
	position: relative;
	top: -153px;
	z-index: 10;
}

/* =============== für Lightbox-Effekt =============== */
div.pp_pic_holder,
div.pp_pic_holder div {
	position: relative;
	z-index: 10;
	margin: 0;
	border: 0;
	padding: 0;
	left: 0;
	width: auto;
	height: auto;
}
div.pp_pic_holder {
	top: 20px !important;
}
div.pp_pic_holder iframe {
	background-color: #fff;
}
.kontakt div.pp_pic_holder {
	position: absolute;
}

/* =============== Downloads =============== */

#downloads .r em {
	color: #999;
}
#downloads #RSSfeed {
	margin: 0.5em 0 0.3em 1.5rem !important;
	border: 1px dotted #484848;
	padding: 0.7em 1em 0.2em;
	background-color: #fff;
}
#downloads #RSSfeed h3 {
	margin: 0 0 0.2em;
	font-size: 0.95rem;
}
#downloads #RSSfeed .description a {
	display: block;
	text-align: right;
}

/* =============== für das Newsletter-Management (phpList): =============== */

.newsletter #page {
	margin-left: auto;
	margin-right: auto;
	width: 44em;
	text-align: left;
}
.newsletter #page p {
	margin: 0 0 2em;
	width: 100% !important;
}
.newsletter #page b {
	display: block;
	margin: 0.7em 0;
}
.newsletter #page form b {
	display: inline;
}
.newsletter #page p#einleitung {
	margin-bottom: 0.7em;
}
#einspaltig.newsletter #page p.poweredphplist {
	margin-top: 3em;
	margin-bottom: 0;
	width: 55em;
	font-size: 0.8em;
	text-align: center;
}
.newsletter #page form .required {
	color: #c00;
}
.newsletter #page form input[type="submit"] {
	float: right;
	display: inline;
	margin: 1em 70px 0;
}
.newsletter #page form textarea[name="unsubscribereason"] {
	clear: both;
	margin: 1em auto 2em auto;
	width: 99%;
	height: 200px;
}
.newsletter #page form br {
	display: none;
}

/* ============= Media Queries ============== */

@media (max-width: 1024px) {
	body {
		font-size: 125%; /* 125% ergibt 20px bei 16px Grundeinstellung. */
	}
	p,
	td,
	li {
		font-size: 150%; /* 200% ergibt 30px bei 125% für body. */
	}
	ul li {
		list-style-type: none !important;
	}
	hr.fn_strich {
		margin: 0 auto 1em 0;
	}
	#navig {
		width: 100%;
	}
	#navig #oben,
	#navig #spiegel {
		width: 97%;
	}
	#wrapper {
		position: relative;
		width: 97% !important;
	}
	#wrapper2 {
		width: 98% !important;
		padding-right: 1% !important;
		padding-left: 1% !important;
	}
	#einspaltig #wrapper2 p,
	#fotostart #wrapper2 p,
	#einspaltig #wrapper2 ul,
	#fotostart #wrapper2 ul {
		width: 98%;
	}
	#einspaltig #wrapper2 h1,
	#einspaltig #wrapper2 h2 {
		margin-right: auto !important;
		margin-left: auto !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
		width: 24em;
		text-align: center !important;
	}
}