/* ************************************************** */
/*              Copyright by Pretti & So              */
/*                 8020 Graz Austria                  */
/* ************************************************** */
/*            Design by Gunter Jammernegg             */
/*       gunter(DOT)jammernegg(AT)utanet(DOT)at       */
/* ************************************************** */

/* Stile für moderne Browser */
/* Klavier:            #000000 R0   G0   B0   (schwarz) */
/* Klaviertasten:      #FFFBF0 R255 G251 B240 (elfenbein) */

/* Schrift Content:    #FFCC33 R255 G204 B51  (goldgelb) */
/* Hintergund Content: #000000 R0   G0   B0   (schwarz) */

/* generelle Formate für HTML-Tags */
html, body, div, p, td, th, li { font-size: 12px; }

/* Container mit Hintergrundbild Klavier seitenzentriert */
#canvas {
	height: 468px;
	width: 646px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -234px 0 0 -323px;
    padding: 0;
	background-image: url(pix/_piano.gif);
	background-repeat: no-repeat;
	overflow: hidden;
}

/* Container mit Navigation */
#navigation {
	height: 403px;
	width: 99px;
	position: absolute;
	top: 22px;
	left: 547px;
}
#navigation ul { margin: 17px 0 0 4px; padding: 0; list-style-type: none; }
#navigation li.navtop { height: 55px; }
#navigation li.nav3 { height: 55px; }
#navigation li.nav2 { height: 40px; }
#navigation a { display: block; width: 65px; padding-left: 18px; }
#navigation a:hover { background-image: url(pix/_navhover.gif); background-repeat: no-repeat; background-position: left; }
#navigation a:active { background-image: url(pix/_navhover.gif); background-repeat: no-repeat; background-position: left; }
#navigation a.navactive:link { color: #C93; background-image: url(pix/_navactive.gif); background-repeat: no-repeat; background-position: left; }
#navigation a.navactive:visited { color: #C93; background-image: url(pix/_navactive.gif); background-repeat: no-repeat; background-position: left; }
#navigation a.navactive:hover { color: #C93; background-image: url(pix/_navactive.gif); background-repeat: no-repeat; background-position: left; }
#navigation a.navactive:active { color: #C93; background-image: url(pix/_navactive.gif); background-repeat: no-repeat; background-position: left; }

/* Container mit Inhalt */
#content {
	height: 250px;
	width: 446px;
	position: absolute;
	top: 175px;
	left: 81px;
	padding: 0 10px;
	overflow: auto;
	color:#FC3;
	background: #000;
}
#content h1 { font-size: 16px; font-weight: bold; margin-top: 0; margin-bottom: 12px; }
#content h1 strong { font-size: 24px; }
#content h2 { font-size: 14px; font-weight: bold; margin-top: 0; margin-bottom: 6px; }
#content h3 { font-size: 12px; margin-top: 0; margin-bottom: 6px; }
#content table { margin-bottom: 6px; }
#content td { padding: 1px; text-align: left; vertical-align: top; color:#FC3; } /* Vererbung der Schriftfarbe funktioniert falsch bei IE vor 6.0 */
#content p { margin-top: 0; margin-bottom: 6px; }
#content p.separate { font-size: 25px; margin-bottom: 12px; border: none; background-image: url(pix/_separate.gif); background-repeat: no-repeat; }
#content a:link { color: #FFEFBF; }
#content a:visited { color: #FFEFBF; }
#content a:hover { color: #FFF; }
#content a:active { color: #FFF; }

/* Container mit Illustration */
#pix {
	height: 153px;
	width: 116px;
	position: absolute;
	top: 22px;
	left: 431px;
	overflow: hidden;
	text-align: center;
}

/* Container mit seasonal pix, bei Bedarf aktivieren */
/*
#season {
	height: 153px;
	width: 350px;
	position: absolute;
	top: 22px;
	left: 81px;
	background-image: url(pix/_season.gif);
	background-repeat: no-repeat;
	background-position: left;
}
*/

/* Container mit message pix, bei Bedarf in index.php aktivieren */
#message {
	height: 153px;
	width: 350px;
	position: absolute;
	top: 22px;
	left: 81px;
	background-image: url(pix/_message.gif);
	background-repeat: no-repeat;
	background-position: left;
}
#message h1 { font-size: 16px; font-weight: bold; margin-top: 25px; margin-left: 10px; margin-bottom: 12px; }
#message h1 strong { font-size: 24px; }
#message h2 { font-size: 14px; font-weight: bold; margin-top: 0; margin-left: 10px; margin-bottom: 6px; }
#message p { margin-top: 0; margin-left: 10px; margin-bottom: 6px; }
#message a { font-weight: bold; }
#message a:link { color: #000; }
#message a:visited { color: #000; }
#message a:hover { color: #666; }
#message a:active { color: #666; }

/* Container mit Copyright-Text */
#footer {
	width: 646px;
	position: absolute;
	top: 452px;
	left: 0;
}

/* Container für Popups */
#popup { color: #FC3; background: #000; position: absolute; top: 50%; left: 50%; }
#popuphead {
	margin: 6px 6px 0;
    border: 1px solid #FC3;
    padding-top: 4px;
    padding-bottom: 4px;
    text-indent: 6px;
    font-size: 12px;
	font-weight: bold;
	background-image: url(pix/_popuphead.gif);
	background-position: right;
	background-repeat: no-repeat;
}
#popupimage {
    margin: 0 6px 6px;
    padding: 6px;
    border-top: 0;
    border-left: 1px solid #FC3;
    border-bottom: 1px solid #FC3;
    border-right: 1px solid #FC3;
}
#popupclose { position: absolute; left: 6px; top: 6px; }