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

Aufbau: 1. Kalibrierung und allgemeine Styles
        2. Styles für Layoutbereiche
		3. Layoutbereich für Subnavigation Kalender
		4. Layout für Fotokalender
================================================================ */

/* ==================================================================
           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: #222222;
	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: 5px;
}
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: transparent;
}
#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; }
/* =========================================================
      Beginn Register
========================================================*/ 

#register {
   text-align: left;
   margin-top: 30px;
   padding: 5px 0 5px 0;
}
#register ul {margin-bottom: 0;}
#register li {
   text-decoration: none;
   display: inline;
   margin-left: 0;
}
#register a { 
   color: #7f7f7f;
   padding: 4px 8px 5px 8px;
   border: 1px solid #cccccc;
   background-image: url(hg_button.gif);
}
#register a:hover,
#register a:focus,
#fotokalenderlena #beispiel1 a,
#fotokalendervalerie #beispiel2 a,
#fotokalenderines #beispiel3 a {
   border: 1px solid #cccccc;
   border-bottom: 1px solid #222222;
   background-image: none;
   color: #be3030;
}
/*=================================================
         Ende Register
==================================================*/  
#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: black;
   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; }

.jump {
   border-bottom: 2px dotted #be3030; 
}
/* ============================================================
     4. Layout Fotokalender
============================================================*/
/* Der Container für die Galerien */
#container {
    width: 600px;
    padding: 0;
    border-top: 1px solid #cccccc;
	margin: 0px 0px 20px 0px; 
    background-color: transparent;
}
/* Aufzählungszeichen entfernen */
#container ul li{
    list-style-type: none; 
}
/* Fotos verschwinden lassen */
#container a.gallery span {
    position: absolute; 
    width:1px; 
    height:1px; 
    top:5px; 
    left:15px; 
    overflow: hidden; 
    background: #fff;
	color: #222;
}
/* Thumbnails hinzufügen */
#container a.gallery,
#container a.gallery:visited {
    display: block; 
    color:#ffffff; 
    text-decoration:none; 
    border:1px solid #be3030; 
    margin:1px 1px 1px 1px; 
    text-align:left; 
    cursor: auto;
}
#container a.slidea {
    background: url(Valerie/klein/v01.jpg); 
    height: 82px; 
    width: 56px;
	background-repeat: no-repeat;
}
#container a.slideb {
    background: url(Valerie/klein/v02.jpg); 
    height: 82px; 
    width: 56px;
	background-repeat: no-repeat;
    }
#container a.slidec {
    background: url(Valerie/klein/v03.jpg); 
    height: 82px; 
    width: 56px;
	background-repeat: no-repeat;
}
#container a.slided {
    background: url(Valerie/klein/v04.jpg); 
    height: 82px; 
    width: 56px;
	background-repeat: no-repeat;
}
#container a.slidee {
    background: url(Valerie/klein/v05.jpg); 
    height: 82px; 
    width: 56px;
	background-repeat: no-repeat;
}
#container a.slidef {
    background:url(Valerie/klein/v06.jpg); 
    height: 82px; 
    width: 56px;
	background-repeat: no-repeat;
}
#container a.slideg {
    background: url(Valerie/klein/v07.jpg); 
    height: 82px; 
    width: 56px;
	background-repeat: no-repeat;
}
#container a.slideh {
    background: url(Valerie/klein/v08.jpg); 
    height: 82px; 
    width: 56px;
	background-repeat: no-repeat;
}
#container a.slidei {
    background: url(Valerie/klein/v09.jpg); 
    height: 82px; 
    width: 56px;
	background-repeat: no-repeat;
}
#container a.slidej {
    background: url(Valerie/klein/v10.jpg); 
    height: 82px; 
    width: 56px;
	background-repeat: no-repeat;
}
#container a.slidek {
    background: url(Valerie/klein/v11.jpg); 
    height: 82px; 
    width: 56px;
	background-repeat: no-repeat;
}
#container a.slidel {
    background: url(Valerie/klein/v12.jpg); 
    height: 82px; 
    width: 56px;
	background-repeat: no-repeat;
}
/* Die Thumbnails positioniern*/
#container ul {
    position: absolute;
    top: 390px;
	left: 287px;
	width: 280px;
}
#container li {
    float: left;
}
/* Rahmenfarbe ändern bei hover */
#container a.gallery:hover {
    border: 1px solid #000; 
}
/* styling the :hover span */
#container a.gallery:hover span {
    position: absolute; 
    width: 263px; 
    height: auto; 
    top: -5px; 
    left: 330px; 
	border: 10px solid #ddd;
}