﻿@charset "utf-8";
/*   ====================================================================
CSS Document for screendesign by marcel Stampfli
Last Update: 30. 04 .2009
Author: Marcel Stampfli

CSS Definitionen für www.chris-herzog.ch


Structure: 	  1a. Kalibrierung
              1b. Allgemeine Definitionen
		      2. Screendesign
		      3. Navigation
			  4. Webgalerie Simple viewer	
 ======================================================================== */

/* ==========================================
   1a. Kalibrierung
   ========================================== */

*{
	margin:0;
	padding:0;
	border:0;
}
html{		/* wegen Firefox scrollliste rechts*/
	height:100%;
	margin-bottom:1px;
}
body{
	height:100%;
	width:100%;
}
/* Abstand nach unten */
h1,h2,h3,p,ol,ul{
}
/* verschachtelte Listen */
ul ul, ol ol{
	margin-bottom:0;
}
/* li{	margin-left:1em;} inaktiv wegen Navigation */



/* ===========================================
   1.b Allgemeine Definitionen
   =========================================== */


body{
	background-color: #f6f6f6;
}
*{
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
}
h1{
	font-size:16px
}
h2{}
p{
	font-size:14px
}
a{
	color:#e27201;
}
table
  {
   margin-left:auto; 
   margin-right:auto;
      /* Fuer gute Browser */
     }	
address{
	position:absolute;
	left:10px;
	top:7px;
	font-size:12px;
	font-style:normal;
	color:#CCCCCC;
}
address a{
	color:#e27201;
}
	
/*============================================================
     2. Screendesign
==============================================================*/
#wrapper{

	width:800px;
	min-width:400px;
	height: 685px;
	position: relative;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
} 	
#banner{
	background-image:url(../images/banner.jpg);	
	position:absolute;
	height:75px;
	width:800px
}
#content{
	position:absolute;
	top:110px;
	width:800px;
	height: 500px;
	left: 0px;
}
#contentgalerie{
	position:absolute;
	top:130px;
	width:800px;
	height: 487px;
	left: 0px;
}
#footer {
	position:absolute;
	bottom:1px;
	left:0px;
	width:100%;
	height:60px;
	background-image: url(../images/fussliste.jpg);
	
}
#splitlinks {
	position:absolute;
	left:0px;
	width:380px;
	height:487px;
	margin:0;
	padding:0;
}
#splitrechts {
	position:absolute;
	left:400px;
	width:380px;
	height:487px;
	margin:0;
	padding:0;
}
/* ==================================================================
     3. Navigation
=====================================================================*/


#navigation{
	background-repeat:no-repeat;
	position:absolute;
	top:78px;
	left:0px;
	width:800px;
	height:0px;
	margin:0;
	padding:0;
	}
#navigationgalerie{
	background-repeat:no-repeat;
	position:absolute;
	top:105px;
	left:87px;
	width:1px;
	height:0px;
	margin:0;
	padding:0;
}
#nav{
	list-style:none;
	float:left;
	width:800px;
	background-repeat:no-repeat;
	height:25px;
}
#navgalerie{
	list-style:none;
	float:left;
	width:710px;
	background-repeat:no-repeat;
	height:25px;
	padding-right:5px;
}

.link1{
	background-image:url(../navigation/portrait-passiv.gif);
	width:69px;
	height:25px;
	margin-right:20px;
	background-repeat:no-repeat;
}
.link2{
	background-image:url(../navigation/fotogalerie-passiv.gif);
	width:99px;
	height:25px;
	margin-right:20px;
	background-repeat:no-repeat;
}
.link3{
	background-image:url(../navigation/kontakt-passiv.gif);
	width:76px;
	height:25px;
	margin-right:20px;
	background-repeat:no-repeat;
}
.link4{
	background-image:url(../navigation/equipment-passiv.gif);
	width:99px;
	height:25px;
	margin-right:20px;
	background-repeat:no-repeat;
}
.link5{
	background-image:url(../navigation/links-passiv.gif);
	width:58px;
	height:25px;
	margin-right:20px;
	background-repeat:no-repeat;
}
.link6{
	background-image:url(../navigation/gaestebuch-passiv.gif);
	width:99px;
	height:25px;
	margin-right:20px;
	background-repeat:no-repeat;
}
.link1g{
	background-image:url(../navigation/menschen-passiv.gif);	
	width:81px;
	height:20px;
	background-repeat:no-repeat;
}
.link2g{
	background-image:url(../navigation/hochzeit-passiv.gif);
	width:68px;
	height:20px;
	background-repeat:no-repeat;
}
.link3g{
	background-image:url(../navigation/sport-passiv.gif);
	width:46px;
	height:20px;
	background-repeat:no-repeat;
	}
.link4g{
	background-image:url(../navigation/street-life-passiv.gif);
	width:68px;
	height:20px;
	background-repeat:no-repeat;
	}
.link5g{
	background-image:url(../navigation/natur-passiv.gif);
	width:46px;
	height:20px;
	background-repeat:no-repeat;
 }
.link6g{
	background-image:url(../navigation/diverses-passiv.gif);
	width:68px;
	height:20px;
	background-repeat:no-repeat;
}
.link7g{
	background-image:url(../navigation/weitere-galerien-passiv.gif);
	width:111px;
	height:20px;
	background-repeat:no-repeat;
}
/*Wegen IE 6.0 und IE 7.0 keine Hintergrundfarbe setzen!**/
#nav li, #navgalerie li{
	padding-right:5px;
	display:inline;
	float:left;
	text-indent: 0px;
	margin-top:-1px; /*Da sich der IE verrechnet*/
}

/*Hier muss a ein Blockelement mit 100% Höhe und Breite sein,
damit die ganze Fläche weiss wird und die ganze Fläche auf die
Maus reagiert und nicht nur der Test!
Wegen IE auf keinen Fall Pseudoselektor link definieren!!!*/
#nav a, #navgalerie a{
	display:block;
	height:100%;
	width:100%;
	}
#link1 a:hover{
	background-image:url(../navigation/portrait-rollover.gif);
}
#link2 a:hover{
	background-image:url(../navigation/fotogalerie-rollover.gif);
}
#link3 a:hover{
	background-image:url(../navigation/kontakt-rollover.gif);
}
#link4 a:hover{
	background-image:url(../navigation/equipment-rollover.gif);
}
#link5 a:hover{
	background-image:url(../navigation/links-rollover.gif);
}
#link6 a:hover{
	background-image:url(../navigation/gaestebuch-rollover.gif);
}
#link1g a:hover{
	background-image:url(../navigation/menschen-rollover.gif)
}
#link2g a:hover{
	background-image:url(../navigation/hochzeit-rollover.gif)
}
#link3g a:hover{
	background-image:url(../navigation/sport-rollover.gif)
}
#link4g a:hover{
	background-image:url(../navigation/street-life-rollover.gif)
}
#link5g a:hover{
	background-image:url(../navigation/natur-rollover.gif)		
}
#link6g a:hover{
	background-image:url(../navigation/diverses-rollover.gif)
}
#link7g a:hover{
	background-image:url(../navigation/weitere-galerien-rollover.gif)
}
#pagelink1 #link1 a{
	background-image:url(../navigation/portrait-aktiv.gif)
		}
#pagelink2 #link2 a,
#pagelink11 #link2 a,
#pagelink12 #link2 a,
#pagelink13 #link2 a,
#pagelink14 #link2 a,
#pagelink15 #link2 a,
#pagelink16 #link2 a,
#pagelink17 #link2 a{
	background-image:url(../navigation/fotogalerie-aktiv.gif)
	}
#pagelink3 #link3 a{
	background-image:url(../navigation/kontakt-aktiv.gif)
	}
#pagelink4 #link4 a{
	background-image:url(../navigation/equipment-aktiv.gif)
	}
#pagelink5 #link5 a{
	background-image:url(../navigation/links-aktiv.gif)		
	}
#pagelink6 #link6 a{
	background-image:url(../navigation/gaestebuch-aktiv.gif)		
	}
#pagelink11 #link1g a{
	background-image:url(../navigation/menschen-aktiv.gif)
		}
#pagelink12 #link2g a{
	background-image:url(../navigation/hochzeit-aktiv.gif)
	}
#pagelink13 #link3g a{
	background-image:url(../navigation/sport-aktiv.gif)
	}
#pagelink14 #link4g a{
	background-image:url(../navigation/street-life-aktiv.gif)
	}
#pagelink15 #link5g a{
	background-image:url(../navigation/natur-aktiv.gif)		
	}
#pagelink16 #link6g a{
	background-image:url(../navigation/diverses-aktiv.gif)		
	}
#pagelink17 #link7g a{
	background-image:url(../navigation/weitere-galerien-aktiv.gif)
		}

/* ==================================================================
     4. Simpleviewers
=====================================================================*/
#flashcontent {
		height: 100%;
	}
	/* end hide */

	content {
		height: 100%;
		margin: 0;
		padding: 0;
		background-color: #f6f6f6;
		color:#ffffff;
	}
input,
textarea{
	border:1px;
	background-color:#ccc;
	}
