/****************************************************
*****************************************************
Datei: layout.css
Rainer Fabrizi, www.transporter.at, 2008
Uses some code fragments from Pat Heard's Lazy Days template. Thanks!

grün .............. #75AF25
schrift-grau ...... #564A42
hell grau ......... #E7E2DE
bg-grau ........... #D0CBC8

/***************************************************/
/***************************************************/
/******************************************** body */

html { height: 100%; }
	/* IE6- flicker bug */
	html { filter: expression(document.execCommand("BackgroundImageCache", false, true)); }

body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	font-size: small;
	line-height: 1.5;
	text-align: center;
	color: #564A42;
	background: #D0CBC8 url(images/design/bg.jpg) no-repeat 0 0;
	}
	* html body {
	font-size: x-small; /* ie5 win */
	/* f\ont-size: small; */ /* ie win */
	}
	html>body {
	font-size: small; /* sei nett zu opera */
	}

/***************************************************/
/***************************************************/
/******************************************* menue */

#menue { 
	margin: 0 15px 0 165px;
	clear: both;
	height: 65px;
	}
/* liste */
#menue ul {
	margin: 0;
	padding: 0;
	}
#menue li {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
	}
/* links */
#menue a:link,
#menue a:visited {
	float: left;
	margin: 0 0 0 1px;
	padding: 15px 10px 5px 10px;
	text-decoration: none;
	font: normal 1.2em Helvetica, Arial, sans-serif;
	color: #564A42;
	border-bottom: 2px solid #D0CBC8;
	background: #E7E2DE url(images/design/pfeilmenue.gif) no-repeat 50% 2px;
	}
#menue a:hover,
#menue a:active,
#menue a.aktuell:link, #menue a.aktuell:visited, #menue a.aktuell:hover, #menue a.aktuell:active {
	color: #FFF;
	border-bottom: 2px solid #564A42;
	background: #75AF25 url(images/design/pfeilmenue.gif) no-repeat 50% -198px;
	}
/* die opacity in der box verursacht hier eine fehlerhafte darstellung der schriftfette – bug */

/***************************************************/
/***************************************************/
/****************************************** inhalt */

/*
grün .............. #75AF25
schrift-grau ...... #564A42
hell-grau ......... #E7E2DE
bg-grau ........... #D0CBC8
*/

#inhalt {
	height: 70%;
	min-height: 50%;
	max-width: 1500px;
	min-width: 600px;
	margin: 0 15px;
	text-align: left;
	}

#seite {
	float: left;
	width: 100%;
	clear: both;
	padding: 15px 0 15px 0;
	margin-bottom: 30px;
	}

/* linkeSpalte, rechteSpalte */
.breiteLinkeSpalte {
	width: 150px;
	float: left;
	overflow: hidden;
	line-height: 1.3;
	}
.breiteRechteSpalte {
	overflow: auto;
	margin-left: 5px;
	}
	* html .breiteRechteSpalte { float: left; } /* ie win */

/* linkeSpalte muss der linkesten spalte zugewiesen werden,
damit die ausrichtung mit dem kopf übereinstimmt (ausser bei box) */
.linkeSpalte h1,
.linkeSpalte h2, 
.linkeSpalte h3,
.linkeSpalte h4,
.linkeSpalte h5,
.linkeSpalte h6,
.linkeSpalte p,
.linkeSpalte dl { padding-left: 0; }

/* breiten ergeben in summe immer 100% */
.breite100 { width: 100%; }
.breite75 { width: 74%; }
.breite50 { width: 49.7%; }
.breite33 {  width: 32.7%; }
.breite25 { width: 24.7%; }

/* claim */
.claim { margin: 0 0 15px 140px; }
	.claim p {
	display: inline;
	margin: 0;
	color: #D0CBC8;
	}
/* logo */
#logo {
	display: block;
	text-indent: -99999px;
	width: 150px;
	height: 241px;
	margin: 0;
	padding: 0;
	}
	#logo a {
	display: block;
	width: 150px;
	height: 241px;
	text-decoration: none;
	border: none;
	background: transparent url(images/design/logo.gif) no-repeat 0 0;
	}
/* nach oben */
.nachoben {
	padding-left: 15px;
	background: transparent url(images/design/nachoben.gif) no-repeat 0 0;
	}
/* box, boxx */
.box {
	overflow: auto;
	width: 100%;
	margin: 0 0 1px 0;
	padding: 10px 0;
	background: #E7E2DE url(images/design/box.jpg) repeat-x bottom left;
	}
.boxx {
	overflow: auto;
	width: 100%;
	margin: 0 0 1px 0;
	padding: 10px 0;
	background: #FFF url(images/design/boxx.jpg) repeat-x top left;
	}

/***************************************************/
/***************************************************/
/******************************************** fuss */
	
#fuss {
	clear: both;
	overflow: auto;
	min-width: 600px;
	max-width: 1500px;
	margin: 0 15px;
	padding: 15px 0;
	text-align: left;
	color: #FFF;
	background: #A3CC6A url(images/design/fuss.jpg) repeat-x 0 0;
	}
	.kiz_fuss { margin: 0 0 0 15px; }

#fuss a:link, #fuss a:visited { color: #FFF; border-bottom: 1px solid #FFF; }
#fuss a:hover, #fuss a:active { color: #564A42; }

/***************************************************/
/***************************************************/
/******************************************** tags */
	
/* überschriften */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em 0;
	padding: 0 15px 0 15px;
	line-height: 1.2em;
	font-weight: normal;
	}
	h1 {
	margin: 0 0 0.2em 0;
	font-size: 2em;
	/* text-shadow: #75AF25 0 0 5px; */
	}
	h2 { font-size: 1.5em; color: #75AF25; }
	h3 { font-size: 1.5em; }
	h4 { font-size: 1.2em; color: #75AF25; font-weight: bold; }
	h5 { font-size: 1.2em; font-weight: bold; }
	h6 { font-size: 1em; font-weight: bold; }
	
/* absatz */
p { margin: 0 0 1em 0; padding: 0 15px 0 15px; }

/* links */
a:link, a:visited {
	text-decoration: none;
	border-bottom: 1px solid #75AF25;
	color: #75AF25;
	}
/* a:visited { text-decoration: line-through; } */
a:hover, a:active { color: #000; }

/* bild */
img { margin: 0 15px 0.2em 15px; }
/* fliesst links oder rechts */
img.rechts { margin: 0 15px 0.2em 15px; }
* html img.rechts { margin: 0 0 0.2em 15px; }
img.links { margin: 0 15px 0.2em 15px; }
	/* verlinktes bild */
	a img { border: 2px solid #75AF25; }
	a:hover img {  
	border: 2px solid #564A42;
	}
/* bild auf maximalbreite skalieren */
img.skalieren {
	clear: both;
	position: relative; /* ie win */
	margin: 0 0 0.5em 0;
	width: 100%;
	}

/* listen */
ol, ul {
	margin: 0 15px 0.5em 16px;
	padding: 0 0 0 30px;
	}
	ul { list-style-image: url(images/design/pfeil.gif); }
	
/* gallery */
ul.gallery {
	position: relative; /* ie win */
	float: left;
	margin: 0;
	padding: 15px;
	list-style: none; 
	}
	ul.gallery li {
	float: left;
	margin: 0 1px 1px 0;
	}
	ul.gallery li img {
	margin: 0;
	padding: 0;
	}
	
/* definition list */
dl {
	margin: 0;
	padding: 0 15px 0.5em 15px;
	}
	dt {
	font-weight: bold;
	color: #75AF25;
	}
	dd {
	margin-left: 0;
	padding-left: 45px; 
	}
	label { display: block; }

/*
grün .............. #75AF25
schrift-grau ...... #564A42
hell-grau ......... #E7E2DE
bg-grau ........... #D0CBC8
*/

/* formular */
input,
textarea,
select {
	padding: 2px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 90%;
	color: #564A42;
	background: #E7E2DE;
	border: 1px solid #D0CBC8;
	}
	/* mouse over */
	input:focus, input:hover,
	textarea:focus, textarea:hover,
	select:focus, select:hover {
	color: #75AF25;
	background: #E7E2DE;
	border: 1px solid #75AF25;
	}
	/* button */
	input.button {
	padding: 2px 5px;
	font-size: 100%;
	color: #564A42;
	background: #E7E2DE;
	border-width: 1px;
	border-style: solid;
	border-color: #D0CBC8 #75AF25 #75AF25 #D0CBC8;
	}
	input.button:hover { color: #75AF25; background: #FFF; }
/* acronym */
acronym {
	cursor: help;
	border-bottom: 1px dotted #777;
	}
/* entfernter5 Text */
del { color: #7E7E6F; }
/* zitat */
blockquote {
	margin: 0 0 0.5em 0;
	padding: 5px 5px 5px 50px;
	min-height: 40px;
	color: #FFF;
	background: #75AF25 url(images/design/zitat.gif) no-repeat 15px 50%;  
	}
	blockquote.achtung { background: #75AF25 url(images/design/achtung.gif) no-repeat 15px 50%; }
	blockquote.oknein { background: #DD0000 url(images/design/oknein.gif) no-repeat 15px 50%; }
	blockquote.okja { background: #75AF25 url(images/design/okja.gif) no-repeat 15px 50%; }
	blockquote a:link,
	blockquote a:visited {
	color: #FFF;
	text-decoration: none;
	border-bottom: 1px solid #FFF;
	}
	blockquote a:hover,
	blockquote a:active {
	color: #564A42;
	}

/***************************************************/
/***************************************************/
/***************************************** klassen */

/*
grün .............. #75AF25
schrift-grau ...... #564A42
hell-grau ......... #E7E2DE
bg-grau ........... #D0CBC8
*/

.links { float: left; }
.rechts { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }
.clear { clear: both; }
.clearLeft { clear: left; }
.clearRight { clear: right; }
.block { display: block; }
.small { font-size: 0.9em; }
* html .small { font-size: 0.8em; }
.bildcaption { margin: -1em 0 0 0; font-size: 0.9em; text-align: right;}
.sehrwichtig { color: #75AF25; font-weight: bold; }
.wichtig { color: #75AF25; }
.unwichtig { color: #D0CBC8; }
.padding0 { padding: 0; }
.margin0 { margin: 0; }

.null { margin-bottom: 0; }
.eins { margin-bottom: 1px; }
.zwei { margin-bottom: 2px; }
.drei { margin-bottom: 3px; }
.vier { margin-bottom: 4px; }
.fuenf { margin-bottom: 5px; }
.sechs { margin-bottom: 6px; }
.sieben { margin-bottom: 7px; }
.acht { margin-bottom: 8px; }
.neun { margin-bottom: 9px; }
.zehn { margin-bottom: 10px; }
.zwoelf { margin-bottom: 12px; }
.fuenfzehn { margin-bottom: 15px; }
.zwanzig { margin-bottom: 20px; }
.fuenfundzwanzig { margin-bottom: 25px; }
.dreissig { margin-bottom: 30px; }
.fuenfunddreissig { margin-bottom: 35px; }
.vierzig { margin-bottom: 40px; }
.fuenfundvierzig { margin-bottom: 45px; }
.fuenfzig { margin-bottom: 50px; }

.onull { margin-top: 0; }
.oeins { margin-top: 1px; }
.ozwei { margin-top: 2px; }
.odrei { margin-top: 3px; }
.ovier { margin-top: 4px; }
.ofuenf { margin-top: 5px; }
.osechs { margin-top: 6px; }
.osieben { margin-top: 7px; }
.oacht { margin-top: 8px; }
.oneun { margin-top: 9px; }
.ozehn { margin-top: 10px; }
.ozwoelf { margin-top: 12px; }
.ofuenfzehn { margin-top: 15px; }
.ozwanzig { margin-top: 20px; }
.ofuenfundzwanzig { margin-top: 25px; }
.odreissig { margin-top: 30px; }
.ofuenfunddreissig { margin-top: 35px; }
.ovierzig { margin-top: 40px; }
.ofuenfundvierzig { margin-top: 45px; }
.ofuenfzig { margin-top: 50px; }

.lightgallery a:link, .lightgallery a:visited { border: none; margin: 0 1px 1px 0;}
.lightgallery a img, .lightgallery a:hover img { border: none; }


/***************************************************/
/***************************************************/
/**************************************** lightbox */

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a, #lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 5px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(images/lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/lightbox/prev.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/lightbox/next.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}