/* =================================================================
Stylesheet für Axel Reiss.com, Juli 2008
Stand: 
Datei: bildschirm.css
Datum: 21.07.08
Autor: Axel Reiss

Aufbau: 1. Kalibrierung und allgemeine Styles
        2. Styles für Layoutbereiche
		3. Layoutbereich für Subnavigation Kalender
		4. Layoutbereich für die Galerien
		5. Hoverbox
================================================================ */

/* ==================================================================
           1. Kalibrierung und allgemeine Styles
====================================================================*/

* {padding: 0; margin: 0; }
h2, h3, p, ul, ol { margin-bottom: 1em; } /*Aussenabstand von 1em für Überschrift der Ebene h2 und h3, absätz p, ungeordnete Liste, und geordnete Listen*/
ul ul { margin-bottom: 0;}
li { margin-left: 1em;}
html { height: 101%; } /* erzwingt scrollbar im firefox */
ul li { list-style-type: square; color: #be3030; } /* Quadratische aufzählungszeichen */
body {
	font-family: Arial, Helvetica, sans-serif;
	color: black;
	font-size: 13px;
	background-color: #222;
	background-image: url(hg_bodycontent.jpg);
	background-repeat: repeat-y;
	
}
h1 { font-size: 150% }
h2 { font-size: 130%; }
h3 { font-size: 110%; }
address {
   text-align: center;
   font-size: 80%;
   font-style: normal;
   letter-spacing: 3px;
   line-height: 1.5em;
   padding-bottom: 20px;
}
a { 
   text-decoration: none; 
   outline: none;
   padding: 0px;
}
a:link, 
a:visited { 
   color: black; 
}
a:hover, a:focus {
   color: black;  
}
a:active {
   color: black;
}
/* =============================================================
            2. Styles für Layoutbereiche
===============================================================*/
#wrapper {
   width: 600px;
   margin-top: 20px;
   margin-right: auto;
   margin-bottom: 10px;
   margin-left: 300px;
}
#kopfbereich {
   position: relative;
   background-color: transparent;
}
#logo {
   margin-bottom: 5px;
   border-top: 2px solid #be3030;
}
#navigation  {
   text-align: left;
   width: auto;
   padding: 5px 0 7px 0;
   background-color: #222222;
}
#navigation ul { margin: 0; }
#navigation li {
   text-decoration: none;
   display: inline;
   margin-left: 0;
}
#navigation a { 
   color: #7f7f7f;
   padding: 4px 3px 5px 3px;
   border: 1px solid #cccccc;
   background-image: url(hg_button.gif);
}
#navigation a:hover,
#navigation a:focus,
#zeichnungen #navi02 a,
#fotos #navi03 a,
#kalender #navi04 a,
#collagen #navi01 a,
#uebermich #navi05 a,
#auftrag #navi06 a,
#kontakt #navi07 a {
   color: #be3030;
   background-image: none;
   padding: 4px 3px 5px 3px;
   border-bottom: none;
}
/*=========================================================
       3. Subnavigation für Kalender
=========================================================*/
#subnavigationkalender {
   width: 135px;
   margin-left: 130px;
   padding: 3px;
   border-left: 1px solid #cccccc;
   background-image: url(hg_menue.jpg);
   background-position: bottom;
   background-repeat: repeat-x;
}
#subnavigationkalender ul { margin: 0; }
#subnavigationkalender li {
   text-decoration: none;
   margin-top: 3px;
   padding: 3px;
}
#subnavigationkalender a { color: #7f7f7f; }
#subnavigationkalender a:hover,
#subnavigationkalender a:focus,
#fotokalender #subnavi01kalender a,
#objektkalender #subnavi02kalender a {
   color: #be3030;
   background-image: none;
}
#subnavi02kalender { margin-bottom: 10px; }
/* =========================================================
      Ende Subnavigation
========================================================*/  
#kopfbereich span {
   position: absolute;
   color: #be3030;
   top: 15px;
   right: 10px;
   font-size: 170%; 
   font-weight: bold;
   font-family: Arial, Helvetica, sans-serif;
}
#textbereich {
   width: auto;
   color: #cccccc;
   font-size: 12px;
   padding: 10px;
}
#textbereich p span {
   font-size: 14px;
   font-weight: bold;
   color: #be3030;
}
.bildlinks {
   float: left;
   padding: 10px;
}
.bildrechts {
   float: right;
   padding: 10px;
}
.clearing { clear: both; }
/*============================================================
     4. Layout für die Galerien/Zeichnungen
===========================================================*/

.galeriepersonen {
   width: 600px;
   padding: 3px;
   border: 1px solid #ffffff;
   border-right: 0;
   margin: 8px 0px 20px 0px; 
   background-color: transparent;
}
.exgaleriepersonen {
   width: 900px;
   height: 180px;
}
.galeriepersonenabsolut {
   width: 500px;
   position: absolute;
   top: 1318px;
   left: 665px;
   border: 1px dashed #000000;
   border-left: 0;
   border-bottom: 0;
   padding: 10px;
}
/* ============================================================0
     5. Hoverbox Objektkalender
==================================================================*/

.hoverbox {
   	cursor: default;
	list-style: none;
	width: 900px;
}
.hoverbox a {
	cursor: default;
}
.hoverbox a .preview {
	display: none;
}
.hoverbox a:hover .preview {
	display: inline;
	position: absolute;
	top: -440px;
	left: -45px;
	z-index: 1;
}

.hoverbox img {
	background: #fff;
	border-color: #be3030;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 80px;
	height: 102px;
}
.hoverbox li {
	background: #eee;
	border-color: #B8BCC0;
	border-style: dashed;
	border-width: 1px;
	color: black;
	display: inline;
	float: left;
	margin: 5px;
	margin-left: 0;
	margin-right: 10px;
	padding: 15px;
	position: relative;
}
.hoverbox .preview {
	border-color: #be3030;
	width: 500px;
	height: 600px;
	position: inherit;
	margin-left: 20px;
}
/* ===================================================
          Ende Hoverbox
===================================================*/