/* CSS f. volker-graf.de copyright 2011 V.Graf */

/* H T M L - T a g s */

* {
  margin: 0;
  padding: 0;
  border:none;
}

html {
  xbackground:#7b7342;
  background:#000000;
}

body {
  position:relative;
  width:100%;
  xmax-width:40.5em;
  xmin-width:10em;
  margin:auto;
  font-family:verdana, sans-serif;
  xcolor:#241d1c;
  color:#e0d0a8;
  font-size:18px;
  xbackground:#e0d0a8 url(images/bg2.jpg) center;
}

.ability, #navi_bar hr, span.ruler{
  display:none;
}
hr{
  clear:both;
  border:none;
  width:230px;
  height:16px;
  background:url(images/xruler_sepia_trsp.gif) no-repeat center;
  margin:auto;
}
a{
   text-decoration:none;
   color:#0a3d52;
}

a:visited{  color:#883333;}
a:hover{   border-bottom:1px dotted;}

h1, h2, h3, #navi_bar li{
  font-family:courier, serif;
  line-height:1.3em;
  text-shadow:3px 2px 5px #555;
}

h1, h2{  
     font-weight:bold;
     letter-spacing:0.1em;
}
h3{  font-size:1.3em;}
h4{  font-size:0.8em;}

abbr{
  border-bottom:1px dotted;
}

#wrapper{
  xborder:1px solid #60542e; 
}

#navi_bar{
  background: transparent url(images/headline.gif) no-repeat 29px 51px;  
}


#navi_bar h1 {
  border:2px solid #222222;
  border-bottom:none;
  background:#000 url(images/top_bg.gif) repeat-x left -2px;
  height:122px;  
  font-family:verdana, sans-serif;
  
}

/* Diverse Browserabhaengige Feinheiten... */

#navi-bar, #navi_bar h1, #wrapper, body{
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#footer, #wrapper, body, #search{
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

#logo{
  display:block;
  border:none;
  font-family:verdana sans-serif;
  }
#logo span{
   background:#e8d8b0 url(images/headline.gif) no-repeat;
   position:absolute;
   left:30px;
   top:52px; 
   width:90%;
   height:73px;
   }
a#logo span:hover{
  background-color:#e8c890;
}
a#logo:hover{
   color:#e8c890;
}

#navi_bar h1 a, #start h1{
   xbackground: url(images/headline.gif) no-repeat 40px 48px;
   min-height:120px;
   font-family:verdana sans-serif;
   font-size:0.6em;
   color:#969171;
   line-height:2.2em;
   padding:0 1em;
   border-bottom:none;
   margin:0;
}

#main_navi, #gallery #navi_bar ul{
   display:block;
   padding:0.5em;
   line-height:1.5em;
   list-style:none;
   border-top:none;
   border-bottom:4px double;
}
#main_navi{
  background:#e7ddb9;

}
#main_navi li{
  display:inline;
  font-size:1.5em;
  margin:0;
}
#main_navi a:link,#main_navi a:visited {
   color:#000000;
   text-decoration:none;
   padding:0.5em; 
   white-space:nowrap;
}
#main_navi a:hover{
  border:none;
  color:#883333;
  background:url(images/xnavi_marker.gif) no-repeat center;
}

#home a.home,#music a.music,#about a.about,#links a.links, #contact a.contact{
  font-weight:bold;
  color:#000000;
  cursor:text;
  background:none;
}

#container{
  max-width:45em;
  margin:0 auto;

}
#container ul,#container ol,#container dl{
  padding-left:1.5em;
  padding-bottom:1em;
  list-style:url(images/button_small.gif);
  max-width:45em;
  margin:0 auto;

}
#container dd{
   padding-left:16px;
   background:url(images/button_small.gif) no-repeat left;
   font-weight:bold;
}
#container li,dt,ol{
  margin-bottom:0.6em;
}
#container dt{
  padding-left:16px;
}
#container p{
  max-width:45em;
  margin-bottom:0.8em;
  padding-left:1.5em;
}

#subnavi{
  width:90;
  padding:5%;
}

#subnavi ul{
  margin-left:0em;
  padding-left:0;
  list-style:none;
}
#subnavi li{
   padding:0;
}

#subnavi hr{
  border:none;
}
#container{
   clear:both;
   padding:0 2% 1em 2%;
   border-top:none;
}
#search{
  position:absolute;
  top:9px;
  left:0;
  width:20em;
  height:2em;
  background:#000000 url(images/top_bg.gif)repeat-x;
}


#footer{
   text-align:center;
   color:#555555;
   background:#000000 url(images/top_bg.gif) repeat-x;
   line-height:2.5em;
   border:1px solid #222222;
   border-right:none;
   border-bottom:none;
   clear:both;
}
#footer a{
   color:#226699;
   background-color:#000000;
   padding:0.2em 0.5em;
   border:2px solid #282828;
   -moz-border-radius:0.9em;
   border-radius:0.9em;
   text-shadow:3px 2px 2px #444;
   white-space:nowrap;
}
#footer a:visited{
   color:#226699;
}
#footer a:hover{
   background:#811;
   color:#111;
   text-shadow:1px 1px 1px #00f;
}

#container a.top{
  background: #ccbb99 url(images/arrow_top.gif) no-repeat 0.4em 0.15em;
  color:#704810;
  text-decoration:underline;  
  line-height:2.7em;
  padding: 0.25em 0.5em 0.3em 16px;
  margin-top:1.8em;
  border:1px solid;
  border-color:#ffeecc #aa9977 #aa9977 #ffeecc;
  -moz-box-shadow:2px 1px 5px #444;
  -webkit-box-shadow:2px 1px 5px #444;
  -moz-border-radius-bottomleft:1.5em;
  -moz-border-radius-topright:1.5em;
  border-bottom-left-radius:1.5em;
  border-top-right-radius:1.5em;
}
a.pre,a.next,a.backlink{
  background:#ccbb99 url(images/prev.gif) no-repeat center top;
  padding:8px 0.5em 0;
  display:inline;
  border:1px solid;
  border-color:#ffeecc #aa9977 #aa9977 #ffeecc;
  -moz-box-shadow:2px 1px 5px #444;
  -webkit-box-shadow:2px 1px 5px #444;
  white-space:nowrap;
  }
a.pre{
  -moz-border-radius-topleft:1em;
  -moz-border-radius-bottomleft:1em;
  border-bottom-left-radius:1em;
  border-top-left-radius:1em;
}
a.next{
  background-image:url(images/next.gif);
  -moz-border-radius-topright:1em;
  -moz-border-radius-bottomright:1em;
  border-top-right-radius:1em;
  border-bottom-right-radius:1em;
}

a.backlink{
  background-image:url(images/up.gif);
  -moz-border-radius-topright:1.2em;
  border-top-right-radius:1.2em;
  -moz-border-radius-topleft:1.2em;
  border-top-left-radius:1.2em;
}


#container a.top:hover, a.pre:hover, a.next:hover, a.backlink:hover{
  background-color:#ba8;
  -moz-box-shadow:1px 1px 2px #444;
  -webkit-box-shadow:1px 1px 2px #444;
}

#container img, .pic img{
  font-style:italic;
  background:#ccc8ab;
  margin:1em 0;
  padding:3px;
  border:1px solid;
  border-color:#888888;
}
.imgtitle{
  font-style:italic;
}

/* Exceptions */

#start{
  font-family:courier, times, serif;
  width:760px;
}

#start h1{
 width:100%;
 height:480px;
 margin:0;
 padding:0;
 text-indent:2em;
 line-height:2.5em; 
 background:#000000 url(images/headline_small.gif) no-repeat 5em 0;  
}

#start #logo span{
  position:absolute;
  top:348px;
  left:30px;
}

#start #main_navi{
  background: url(images/piano.jpg) no-repeat 28px 0px;
  padding-bottom:0px;
  height:auto;
}
#start img{
  position:absolute;
  top:95px;
  left:100px;
}

#home #container{
  max-width:30em;
  margin:0 auto; 
}

#gallery #navi_bar ul{
  line-height:1em;
}
#gallery #subnavi li{
  list-style:none;
  font-family:courier,times,serif;
}
#container .gallery ul{
  list-style:none;
}
#gallery .gallery li{
  float:left;
  text-align:center;
  margin:0 1em 1em 0;
}

.gallery li{
  border:3px double;
  background:#fffacf;
  padding:2% 5% 3%;
  -moz-box-shadow:5px 5px 10px #333;
  -webkit-box-shadow:5px 5px 10px #333;
}
.gallery a:hover{
  border:none;
}
#gallery #container{
   background: url(images/headline.gif) no-repeat 28px -73px;
}
#gallery h2{
  clear:both;
  margin:1em 1.2em;
}
 #gallery hr{
  border:none;
  text-align:left;
}

#gallery h1, #gallery h2{
  text-align:center;
  line-height:2em;
}
.pic{
  margin:1em;
  padding:0.5em;
}
#lightbox{
  text-align:center;
  margin:1em auto 0 auto;
  min-width:55em;
  border: 1px solid;
  border-color:#ccc8ab #fffacd #fffacd #ccc8ab;
}

#lightbox ul{
  padding-top:1.8em;
}
#lightbox #navi li{
  display:inline;
  margin:0 0.2em;
}
#lightbox .pic img{
  height:36em;
  width:auto;
}
#contact #container, #contact #container p,#contact #subnavi, #contact #container li{
  text-align:center;
  width:80%;
  padding:0 10%;
  list-style:none;
}

#sitemap #container{
  width:30em;

}

#sitemap #container LI {
   padding: 0 0 0 24px;
   margin: 0;
   list-style-type: none;
   background: url(images/extm.gif)
               no-repeat
               0% 0%;
   }
#sitemap #container LI.last {
   background: url(images/exlm.gif)
               no-repeat
               0% 0%;
   }
#sitemap #container ul{
   list-style: none;
}
#sitemap #container li>UL {
   padding: 0 0 0 24px;
   margin: 0 0 0 -24px;
   background: url(images/exim.gif)
               repeat-y
               0% 0%;
   }
#sitemap UL.last {
   background-image: none;
   }
.file{
  line-height:1.5em;
  font-weight:bold;
}
.hlink{
   font-weight:normal;
}