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

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


* {
  margin: 0;
  padding: 0;
  border:none;
}
  
html {
  background:#7b7342 url(images/bg1.jpg) center;
}

body {
  position:relative;
  width:97%;
  max-width:780px;
  min-width:10em;
  margin:1em auto;
  font-family:verdana,arial, sans-serif;
  color:#241d1c;
  font-size:12px;
  background:#e0d0a8 url(images/bg2.jpg) center;
}

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

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


h1, h2, h3, #navi_bar li{
  font-family:georgia, courier new, serif;
  margin:0.8em 0 0.5em 0;
  line-height:1.5em;
}

h1, h2, h3{  
     font-weight:bold;
     letter-spacing:0.1em;
     clear:both;
}
h1{ 
  text-align:center;
  text-transform:uppercase;
  letter-spacing:0;
  color:#E9E1BD;
  height:61px;
  font-weight:normal; 
  font-size:20px;
  padding-top:30px;
  background:url(images/vignette.gif) no-repeat center;
}
h3{  font-size:1.3em;}
h4{  font-size:0.8em;}

abbr{
  border-bottom:1px dotted;
  color:#876740;
}
em{
  white-space:nowrap;
}

#wrapper{
  border:1px solid #60542e; 
  overflow:hidden;
}

#navi_bar{
  width:100%; 
}


#navi_bar h1 {
  background:url(images/top_bg.gif) repeat-x left -2px;
  height:105px;  
  margin:0;
  padding-top:0;
  font-family:verdana, sans-serif; 
}

#navi_bar h1 span{
   background: url(images/headline3.gif) no-repeat center top;
   position:absolute;
   right:5%;
   top:39px; 
   width:90%;
   height:90px;
   }


/* 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;
}

body{
 -moz-box-shadow:10px 10px 10px #222;
  box-shadow:10px 10px 10px #222;
  -webkit-box-shadow:10px 10px 10px #222;
}

#logo{
  display:block;
  overflow:hidden;
  text-indent:-1000em;
  background: url(images/icon_home.gif) no-repeat left bottom;
  margin: 0px 10px;
  width:31px;
  height:35px;
  border:none;
  font-family:verdana sans-serif;
  padding:0;
  }

a#logo:hover{
   background-position:-31px bottom;
}


#start h1{
   background:url(images/headline.gif) no-repeat 20px 48px;
   min-height:120px;
   font-family:verdana, arial, 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;
   list-style:none;
   padding:25px 0 0 8%;
   border-top:none;
   border-bottom:none;
}
#main_navi li{
  display:inline;
  font-size:1.5em;
  padding:.7em .3em;
}
#main_navi a:link,#main_navi a:visited {
   color:#000000;
   float:left;
   text-decoration:none;
   padding-top:0.1em;
   line-height:1.5em; 
   white-space:nowrap;
   width:18%;
   min-width:5em;
   text-align:center;
}

#main_navi a:hover,#main_navi a:focus{
  color:#883333;
  border:none;
  letter-spacing:0.1em;
  background:url(images/navi_marker.gif) no-repeat center center;
}

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

#container{
  max-width:45em;
  margin:0 auto;
}
#container h2{
  text-align:center;
}
#container ul,#container dl{
  padding-left:1.5em;
  padding-bottom:1em;
  list-style:url(images/button_small.gif);
  max-width:45em;
  margin:0 auto;
}
#container ol{
  list-style:none;
}
#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:0 auto;
}

#subnavi, #localnavi{
  width:20em;
  margin:0 auto;
  text-align:center;
}

#subnavi ul, ol#localnavi{
  padding-left:0;
  list-style:none;
  border-left:3px double #C0A878;
  border-right:3px double #C0A878;
  padding-bottom:0;
}
ol#localnavi{
  border:none;
  width:95%;
}

#subnavi li, #localnavi li{
  background:url(images/lines_sepia.gif) repeat-x 1em;
}

#subnavi .temp{
  padding-left:15px;
  background:url(images/subnavi_marker.gif) no-repeat left;
  cursor:text;
  color:#000;
  border:none;
}

#navi_bar ul{
  line-height:1em;
}

#localnavi li{
  display:inline;
  line-height:2.5em;
}
#localnavi li a, a.top, a.next, a.pre, a.backlink, a.mail {
  padding:0 5px;
  margin:auto;
  white-space:nowrap;
  border-left:1px solid #C0A878;
  border-right:1px solid #C0A878;
}
#localnavi li a:hover{
  text-decoration:underline;
  border-bottom:none;
}

.starter {
   text-align:center;
   width:95%;
}

#container{
   clear:both;
   padding:0 7% 1em 7%;
   border-top:none;
}
#search{
  position:absolute;
  top:4px;
  right:2%;
  width:24em;
  max-width:90%;
}

#footer{
   text-align:center;
   color:#555555;
   background:#000000 url(images/top_bg.gif) repeat-x;
   line-height:2.8em;
   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;
   background-color:#000000;
   font-weight:normal;
}
#footer a:hover,#footer a:focus{
   background:#282828;
   color:#bbf;
   text-shadow:1px 1px 1px #000;
}

#container a.top, #container span.ruler,a.pre, a.next, a.backlink, a.mail{  
   background:url(images/lines_sepia.gif) repeat-x  0 center;
   padding:0 1em;
}
#container a.top{
  clear:both;
  display:block;
}
a.top{
  width:8em;
  text-align:center;
}

#container a.top:hover, a.pre:hover, a.next:hover, a.backlink:hover, a.mail:hover{
   color:#550000;
   border-bottom:none;
   text-decoration:underline;
}  

#container img, .pic img{
  font-style:italic;
  background:#ccc8ab;
  max-width:95%;
  min-width:auto;
  margin:1em 0;
  padding:4px;
  border:1px solid;
  border-color:#888888;
}
#container a:hover img{
  background-color:#881111;
}

dt a:hover, a.pic:hover{
  border:none;
}
.imgtitle{
  font-style:italic;
}

#container img.illu_small{
  float:right;
  width:200px;
  height:auto;
  margin:0 0 1em 2em;
} 

span.band, span.date{
  font-weight:bold;
  color: #423411;
}

span.location{
  letter-spacing:0.1em;
}


/*   S i t e - E x c e p t i o n s  */

/*    S t a r t         */

#start{
  font-family:georgia, courier new, times, serif;
  width:95%;
  max-width:700px;
}

#start h1{
 width:100%;
 height:400px;
 background:#000 url(images/piano.jpg) no-repeat top center;
 border-radius-topleft:1em;
  -moz-border-radius-topleft:1em;
  -webkit-border-radius-topleft:1em;
  border-radius-topright:1em;
  -moz-border-radius-topright:1em;
  -webkit-border-radius-topright:1em;
}

#start #logo span{
  position:absolute;
  top:341px;
  left:10%;
  height:90px;
  width:525px;
  max-width:90%;
  background:  url(images/headline3.gif) no-repeat;
  z-index:100;
}
#start #logo .alt_bg{
  background:#E3D9B5 url(images/bg2.jpg) repeat-x top;  
}

#start #main_navi{
  padding-bottom:1em;
  height:40px;
}
#start img{
  display:none;
  position:absolute;
  top:40px;
  right:2em;
 }

#home #container{
  max-width:30em;
  margin:0 auto; 
}
#home h2{
  text-align:center;
}

/*  G a l l e r y  */

#container .gallery ul{
  list-style:none;
}
#container .gallery a img{
   height:120px;
   width:auto;
}
ol.gallery>li{
  list-style:none inside;
 }

#container ol.gallery{ padding:0}

.gallery ul li{
  float:left;
  min-width:40%;
  padding: 0 1em;
  text-align:center;
}
#container .gallery ul li a img{
  background:#59503F;
  padding:1px;
  border:solid #551111;
  border:solid #dc9;
  border-width:15px 17px 23px;
   box-shadow:3px 3px 10px #333;
  -moz-box-shadow:3px 3px 10px #333;
  -webkit-box-shadow:3px 3px 10px #333;
}
.gallery ul li a{
   display:inline;
   margin:0 auto;
   height:130px;
   width:auto;
}

.gallery a:hover{
  border-bottom:none;
}

#container .gallery a:hover img{
  background-color:#aaa59a;
  border-color:#feb;
  box-shadow:6px 6px 10px #333;
  -moz-box-shadow:6px 6px 10px #333;
  -webkit-box-shadow:6px 6px 10px #333;
}

.pic{
  margin:1em;
  padding:0.5em;
}

/* K o n t a k t */

/*#contact #container, #contact #container p,#contact #subnavi, #contact #container li{
  text-align:center;
  width:80%;
  padding:0 10%;
  list-style:none;
}*/

#lightbox #wrapper{
  text-align:center;
  -moz-box-shadow:inset -8px -8px 7px #444,inset 8px 8px 7px #444;
}

#lightbox #navi ul{
   padding-top:1em;
}
#lightbox #navi ul li{
  display:inline;
}

iframe{
  min-height:42em;
  border:1px solid #ccc;
  margin-top:30px;
}

/*  S i t e m a p   */

#sitemap #container{
  max-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;
}



/* abweichende rules fır smartphones ***************************/


@media screen and (max-width:480px) {

html {
  background-image:none;
}

body {
  width:100%;
  margin:0em;
  background-image:none;
}

hr{
  margin:0 auto;
  border:none;
}

a:link{
   border:1px solid;
   display:block;
   padding:0.2em;
   background:#eee;
   text-align:center;
}

a:visited {  color:#883333;}
a:link:hover, a:link:focus {
	background-color:#aaa;
	border-bottom:1px solid;
	}

h1{ 
  color:#241d1c;
  margin:0;
  padding:0;
  height:33px;
  background-image:none;
}
h3{  font-size:1.1em;}
h4{  font-size:1em;}


em{
  white-space:wrap;
}

#wrapper{
  border:none; 
}

#navi_bar h1 {
  height:73px;   
}

#navi_bar h1 span{
   background: url(images/headline_small.gif) no-repeat left top;
   left:3px;
   top:37px; 
   width:100%;
   height:60px;
   }


/* Diverse Browserabhaengige Feinheiten... */

a:link{
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
}

#navi-bar, #navi_bar h1,#footer,#wrapper,body{
  -moz-border-radius:0;
  border-radius:0;
}

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

#start h1{
   background:url(images/headline_small.gif) no-repeat center;
   min-height:120px;
   font-family:verdana, arial, sans-serif;
   font-size:0.6em;
   color:#969171;
   line-height:2.2em;
   padding:0;
   border-bottom:none;
   margin:0;
}

#main_navi, #gallery #navi_bar ul{
   display:block;
   list-style:none;
   padding:25px 0 0 8%;
   border-top:none;
   border-bottom:none;
}
#main_navi li{
  padding:.5em .2em;
}
#main_navi a:link,#main_navi a:visited {
   width:40%;
   margin:2px;
}

#main_navi a:hover,#main_navi a:focus{
  border:1px solid;
  background-image:none;
}

#home a.home,#music a.music,#about a.about,#links a.links, #contact a.contact{
  display:none;
}

#container ul,#container dl{
  padding-left:0;
  list-style:none
}
#home #container ul{
	margin-left:1em;
	list-style:url(images/button_small.gif);
	}

#subnavi, #localnavi{
  width:80%;
}

#subnavi ul, ol#localnavi{
  padding-left:0;
  list-style:none;
  border:none;
  padding-bottom:0;
}
ol#localnavi{
  border:none;
  width:90%;
}

#subnavi li, #localnavi li{
  background-image:none;
}

#subnavi .temp{
 display:none;
}

#navi_bar ul{
  line-height:1.2em;
}

#localnavi li{
  display:block;
  line-height:1.5em;
  width:90%;
  margin:2px auto;
}

.starter {
   text-align:center;
   width:95%;
}

#container{
   padding:0 1em;
}
#search{
  width:16em;
  max-width:80%;
}

#footer{
   padding:0 1em;
   background-image:none;
   margin: 0 auto;
}
#footer a{
   display:block;
   float:left;
   width:46%;
   margin:2px;
   padding:0.1em;
   white-space:wrap;
}

#container a.top, #container span.ruler,a.pre, a.next, a.backlink, a.mail{  
   background:url(images/lines_sepia.gif) repeat-x  0 center;
   padding:0 1em;
   margin:1px auto;
}
#container a.top{
  clear:both;
  display:block;
}
a.top{
  width:8em;
  text-align:center;
}

#container a.top:hover, a.pre:hover, a.next:hover, a.backlink:hover, a.mail:hover,#container a.top:focus, a.pre:focus, a.next:focus, a.backlink:focus, a.mail:focus{
   color:#550000;
   background-color:#fff;
   border:1px solid;
   text-decoration:none;
}  

#container img, .pic img{
  margin:2px auto;
}
#container a:hover img,#container a:focus img{
  background-color:#881111;
}

dt a:hover, a.pic:hover,dt a:focus, a.pic:focus{
  border:none;
}
.imgtitle{
  font-style:italic;
}

#container img.illu_small{
  float:right;
  width:200px;
  height:auto;
  margin:0 0 1em 2em;
} 

#home span.location{
  letter-spacing:0.1em;
}
#home span.date {display:block;}


/*   S i t e - E x c e p t i o n s  */

/*    S t a r t         */

#start{
  width:100%;
  height:350px;
   background-color:#111;
}

#start h1{
 width:100%;
 height:20px;
 background:#111;
  border-radius:0;
  -moz-border-radius:0;
  -webkit-border-radius:0;
}

#start #logo span{
  position:absolute;
  top:0;
  left:0;
  height:54px;
  width:100%;
  max-width:100%;
  background:#000 url(images/headline_small.gif) no-repeat;
  z-index:1;
}
#start #logo .alt_bg{
  background:#E3D9B5 url(images/bg2.jpg) repeat-x top;  
}

#start #main_navi{
  position:absolute;
  left:0;
  top:50px;
  padding:1em 150px 1em 1em;
  height:200px;
  width:60%;
  z-index:100;
  
}
#start img{
  display:block;
  float:right;
  margin-top:30px;
 }

#home #container{
  max-width:30em;
  margin:0 auto; 
}
#home h2{
  text-align:center;
}

/*  G a l l e r y  */

#container .gallery ul{
  list-style:none;
}
#container .gallery a img{
   height:120px;
   width:auto;
}
ol.gallery>li{
  list-style:none inside;
 }

#container ol.gallery{ padding:0}

.gallery ul li{
  float:left;
  min-width:40%;
  padding: 0 1em;
  text-align:center;
}
#container .gallery ul li a img{
  background:#59503F;
  padding:1px;
  border:solid #551111;
  border:solid #dc9;
  border-width:15px 17px 23px;
   box-shadow:3px 3px 10px #333;
  -moz-box-shadow:3px 3px 10px #333;
  -webkit-box-shadow:3px 3px 10px #333;
}
.gallery ul li a{
   display:inline;
   margin:0 auto;
   height:130px;
   width:auto;
}

.gallery a:hover{
  border-bottom:none;
}

#container .gallery a:hover img{
  background-color:#aaa59a;
  border-color:#feb;
  box-shadow:6px 6px 10px #333;
  -moz-box-shadow:6px 6px 10px #333;
  -webkit-box-shadow:6px 6px 10px #333;
}

.pic{
  margin:1em;
  padding:0.5em;
}

/* K o n t a k t */

#contact #container, #contact #container p,#contact #subnavi, #contact #container li{
  text-align:center;
  width:80%;
  padding:0 10%;
  list-style:none;
}

#lightbox #wrapper{
  text-align:center;
  -moz-box-shadow:inset -8px -8px 7px #444,inset 8px 8px 7px #444;
}

#lightbox #navi ul{
   padding-top:1em;
}
#lightbox #navi ul li{
  display:inline;
}

iframe{
  min-height:42em;
  border:1px solid #ccc;
  margin-top:30px;
}

/*  S i t e m a p   */

#sitemap #container{
  max-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;
}




}