/* Default Design */
/* Design by Stefan Stampfli, STAMPFLI SBS, Burgdorf */ 
/* Bild Farben:
PAGE BG		=	#720000
P-BG SHADOW	=	#510000
CONTENT BG	=	#63341A
FONT		=	#F3EFED
Header gold	=	#BC7E36
*/


/* ----- HTML Definitionen ----- */
body, html {
 height: 100%;
 width: 100%;
 font-family: Verdana, Arial, "Times New Roman", Times, serif;
 font-size: 12px;
 font-style: normal;
 margin: 0px;
 padding: 0px;
 background-image: url("pictures/page_bg.jpg");
 color: #F3EFED;
 scrollbar-base-color: #720000;			/* Basisfarbe der Scroll-Leiste */
 scrollbar-3dlight-color: #510000;		/* Farbe für 3D-Effekte */
 scrollbar-arrow-color: #F3EFED;		/* Farbe für Verschiebepfeile */
 scrollbar-darkshadow-color: #510000;	/* Farbe für Schatten */
 scrollbar-face-color: #63341A;			/* Farbe für Oberfläche */
 scrollbar-highlight-color: #510000;	/* Farbe für oberen und linken Rand */
 scrollbar-shadow-color: #510000;		/* Farbe für unteren und rechten Rand */
 scrollbar-track-color: #720000;		/* Hintergrundfarbe der Scroll-Leiste */
 }	 

h3 { font-size: 12px; font-weight: bold; }
img { border: 0px; margin: 0px; padding: 0px; }

a:link { color: #FFC; text-decoration: none; }
a:visited { color: #FFC; text-decoration: none; }
a:hover { color: #720000; text-decoration: none; }
a:active { color: #720000; text-decoration: none; }

#footer a:link { color: #720000; text-decoration: none; }
#footer a:visited { color: #720000; text-decoration: none; }
#footer a:hover { color: #720000; text-decoration: underline; }
#footer a:active { color: #720000; text-decoration: none; }



/* ----- Layer Definitionen ----- */
#mainbox {
 position: absolute;
 height: 700px;
 width: 500px;
 top: 0px;
 left: 50%;
 margin-left: -300px;
 background-image: url("pictures/cnt_rep_bg.jpg");
 z-index: 3;
 }
 
#headbox {
 position: absolute;
 height:  85px;
 width: 500px;
 top: 0px;
 left: 0px;
 background-image: url("pictures/head.jpg");
 z-index: 5;
 }
 
#navibox {
 position: absolute;
 height:  30px;
 width: 500px;
 top: 85px;
 left: 0px;
 background-image: url("pictures/navi_bg.jpg");
 z-index: 6;
 }

#navigation {
 position: absolute;
 height: 30px;
 top: 0px;
 left: 35px;
 z-index: 8;
 }

#content {
 position: absolute;
 height:  530px;
 width: 460px;
 top: 130px;
 left: 20px;
 overflow: auto;
 text-align: justify;
 scrollbar-base-color: #63341A;			/* Basisfarbe der Scroll-Leiste */
 scrollbar-3dlight-color: #63341A;		/* Farbe für 3D-Effekte */
 scrollbar-arrow-color: #F3EFED;		/* Farbe für Verschiebepfeile */
 scrollbar-darkshadow-color: #720000;	/* Farbe für Schatten */
 scrollbar-face-color: #63341A;			/* Farbe für Oberfläche */
 scrollbar-highlight-color: #720000;	/* Farbe für oberen und linken Rand */
 scrollbar-shadow-color: #63341A;		/* Farbe für unteren und rechten Rand */
 scrollbar-track-color: #63341A;		/* Hintergrundfarbe der Scroll-Leiste */
 z-index: 10;
 }

#footbox {
 position: absolute;
 height:  265px;
 width: 500px;
 bottom: 0px;
 left: 0px;
 background-image: url("pictures/cnt_foot_bg.jpg");
 z-index: 4;
 }

#footer {
 position: absolute;
 height: 14px;
 width: 460px;
 left: 20px;
 bottom: 12px;
 font-size: 10px;
 color: #720000;
 text-align: right;
 z-index: 7;
 }

#gallery {
 margin: 10px;
 cursor: pointer;
 text-align: left;
 }


/* ----- Navigation Definitionen ----- */
#navigation #btn_home 			{ background-image: url("pictures/btn1_home.jpg"); display: block; float: left; width: 54px; height: 30px; }
#navigation #btn_home:hover  	{ background-image: url("pictures/btn2_home.jpg"); }

#navigation #btn_about 			{ background-image: url("pictures/btn1_about.jpg"); display: block; float: left; width: 68px; height: 30px; }
#navigation #btn_about:hover 	{ background-image: url("pictures/btn2_about.jpg"); }

#navigation #btn_songs 			{ background-image: url("pictures/btn1_songs.jpg"); display: block; float: left; width: 62px; height: 30px; }
#navigation #btn_songs:hover 	{ background-image: url("pictures/btn2_songs.jpg"); }

#navigation #btn_pictures 		{ background-image: url("pictures/btn1_pictures.jpg"); display: block; float: left; width: 84px; height: 30px; }
#navigation #btn_pictures:hover	{ background-image: url("pictures/btn2_pictures.jpg"); }

#navigation #btn_concerts 		{ background-image: url("pictures/btn1_concerts.jpg"); display: block; float: left; width: 82px; height: 30px; }
#navigation #btn_concerts:hover 	{ background-image: url("pictures/btn2_concerts.jpg"); }

#navigation #btn_contact 		{ background-image: url("pictures/btn1_contact.jpg"); display: block; float: left; width: 82px; height: 30px; }
#navigation #btn_contact:hover 	{ background-image: url("pictures/btn2_contact.jpg"); }



/* ----- Formular Definitionen ----- */
form {
 font-weight: normal;
 }

label {
 display: block;
 margin-bottom: 1px;
 }
	
input, textarea, select {
 display: block;
 margin-bottom: 5px;
 border: 1px solid #000;
 background-color: transparent;
 } 

input {
 width: 250px;
 }

textarea {
 width: 250px;
 }

form .button {
 font-weight: bold;
 background: #CCC;
 }