/*
 * Stylesheet für King Grace
 * Datum: 6.12.2007
 */
 
/*
 * -------------------------------------------------
 *               Globale Einstellungen
 * -------------------------------------------------
 */
 
/*
 * Globale Definitionen für Schrift und Scrollbars
 */
body {
	margin: 0px auto;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color:#000000;
	color: #333333;
	
	scrollbar-face-color: #EAEAEA;
	scrollbar-highlight-color: #EAEAEA;
	scrollbar-3dlight-color: #FFFFFF;
	scrollbar-darkshadow-color: #FFFFFF;
	scrollbar-shadow-color: #EAEAEA;
	scrollbar-arrow-color: #000000;
	scrollbar-track-color: #FFFFFF;
}

/*
 * Globale Formatierungen für Links
 */
a:link, 
a:visited {
	text-decoration:underline;
	color: #999999;
}

/*
 * Globale Formatierungen für Links
 */
a:hover,
a:active {
	text-decoration:none;
}

/*
 * -------------------------------------------------
 *                  ID - Selektoren
 * -------------------------------------------------
 */

/*
 * Hauptcontainer
 * Beinhaltet alle anderen Elemente, außer den Footer
 * Wird zur Zentrierung des Inhalts verwendet
 */
#wrap {
	width: 940px;
	height: 590px;
	position: absolute;
	top: 50%;
	margin-top: -345px;
	left: 50%;
	margin-left: -470px;
	padding-right: 15px; 
}

/*
 * Der Header beinhaltet das Logo und das Menü
 */
#header {
	width: 940px;
	height: 85px;
}

/*
 * King-Grace-Logo
 * Links oben im Header
 */
#logo {
	float: left;
}

/*
 * Hauptmenü
 * Rechts oben im Header
 */
#mainMenu {
	float: right;
	height: 35px;
	margin-top: 17px;
}

* html #mainMenu {
	margin-right:60px;
}


/*
 * Container unter dem Header
 * Fasst die Hauptinhalte zusammen
 */
#mainWrap {
	width: 940px;
	height: 405px;	
}

/*
 * Hauptinhalt der Seite 
 * (z.B. Hintergrundbild oder Produktbeschreibung)
 */
#main {
	padding-top: 1px;
	width: 940px;
	height: 405px;
	overflow:hidden;
}

/*
 * Boxen unter dem Hauptinhalt
 *   + Latest News
 *   + Song
 *   + Sponsor
 */
#gadgets {
	height: 85px;
	width: 940px;
	margin-top: 15px;
}

/*
 * Formatierungen für die News-Box
 */
#newsGadget {
	float: left;
	height: 65px;
	width: 260px;
	margin-right: 5px;
	background:url(../images/rahmen-rund-gross.gif) no-repeat;
	padding: 10px 15px;
	overflow: hidden;
}
#newsGadget li,
#newsGadget li a {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#999;
}

/*
 * Formatierungen für die Box mit dem MP3-Player
 */
#songGadget {
	float: left;
	height: 74px;
	width: 214px;
	background:url(../images/rahmen-song.gif) no-repeat;
	padding: 12px 8px 0 0;
	overflow: hidden;
}

/*
 * Formatierungen für h3-Tags in den ersten beiden Gadgets
 */
#newsGadget h3,
#songGadget h3 {
	padding: 0px;
	margin: 0px 0px 10px 0px;
	font-size: 12px;
}

/*
 * Formatierungen für die Sponsor-Box
 */
#sponsorGadget {
	float: right;
	height: 85px;
	width: 160px;
	background:url(../images/rahmen-rund-klein.gif) no-repeat;
	overflow: hidden;
	display:none;
}

#sponsorGadget img {
	display:block;
	margin:0 0 0 1px;
}
#sponsorGadget h3 img {
	margin:0 0 0 0;
}


/*
 * h3-Tag in der Sponsor-Box
 */
#sponsorGadget h3 {
	padding: 0px;
	margin: 10px 15px;
	font-size: 12px;
}

/*
 * Footer unterhalb des Hauptinhaltes
 * befindet sicher immer am unteren Bildschirmrand
 * und nimmt die volle Breite des Bildschirms ein
 */
#footer {
	width: 100%;
	height: 29px;
	border-top: 1px solid #333333;
	position: absolute;
	top: 100%;
	margin-top: -50px;
	padding-top: 20px;
}

/*
 * Der Text "King Grace" in der Fußzeile (links)
 */
#kingGraceText {
	color: #999999;
	float: left;
	margin-left: 40px;
	margin-right: 100px;
	display:inline; /*IE6 Double Margin Bug*/
}

/*
 * Impressum in der Fußzeile (links)
 */
#impressum {
	color: #999999;
	float: left;
}
#impressum p {
	margin:0;
	padding:0;
}

/*
 * Link zu Viamedia in der Fußzeile (rechts)
 */
#viamedia {
	float: right;
	margin-right: 40px;
	display:inline; /*IE6 Double Margin Bug*/
}

/*
 * Formatierungen für den Viamedia-Link
 */
#viamedia a {
	color: #999999;
	text-decoration: none;
}

/*
 * Formatierungen für Listen in den Boxen zwischen
 * Hauptinhalt und Footer
 */
#gadgets ul {
	list-style-image: url(../images/pfeil-liste.gif);
	margin: 5px 0px 5px 0px;
	padding: 0px 0px 0px 15px;
}

/*
 * Formatierungen für Listen in den Boxen zwischen
 * Hauptinhalt und Footer
 */
#gadgets ul li {
	margin-top: 3px;
}

/*
 * Linkformatierungen für die Boxen
 */
#gadgets a {
	text-decoration: none;
}

/*
 * Beinhaltet die Box mit dem Text der Seite
 * Dient dazu, im IE6 u. IE7 eine leere Scrollleiste
 * in den Hintergrund zu legen, wenn keine vorhanden ist
 */
#contentWrap {
	width: 401px;
	height: 330px;
	position: absolute;
	margin-top: 40px;
	margin-left: 536px;
	overflow: auto;
	background-color: #FFFFFF;	
}

/*
 * Scrollbar-Bild für IE6
 */
* html #contentWrap {
	/* background: #FFFFFF url(../images/scroller-klein.gif) no-repeat right; */
}
/*
 * Scrollbar-Bild für IE7
 */
*+html #contentWrap {
	/* background: #FFFFFF url(../images/scroller-klein.gif) no-repeat right; */
}

/* 
 * Content-Bereich für die Inhaltselemente
 */
#content {
	width: 344px;
	padding: 20px;
	color: #000000;
	min-height: 290px;
	background-color: #FFFFFF;
}

/*
 * Abgrenzungslinie zur Scrollbar für IE6
 */
* html #content {
	height: 290px;
	width: 344px;
	/* border-right: 1px solid #EAEAEA; */
}

/*
 * Abgrenzungslinie zur Scrollbar für IE7
 */
*+html #content {
	width: 344px;
	/* border-right: 1px solid #EAEAEA; */
}

/*
 * Überschrift im Contentbereich
 */
#content h1 {
	padding: 0px;
	margin: 0px 0px 20px 0px;
	font-size: 15px;
}

/*
 * Beinhaltet das Submenü und die
 * beiden runden Rahmen (oben und unten)
 */
#subMenuWrap {
	width: 268px;
	position: absolute;
	margin-top: 135px;
}

/*
 * Container für das Submenü selbst
 */
#subMenu {
	min-height: 123px;
	width: 268px;
	background-color: #FFFFFF;
	padding: 15px 20px;
}

/*
 * Mindesthöhe für IE6
 */
* html #subMenu{
	height: 93px;
}

/*
 * Listenformatierung für das Submenü
 */
#subMenu, 
#subMenu ul,
#subMenu ul li {
	padding: 0px;
	list-style-type: none;
	margin: 0px;
	list-style:none;
}
#subMenu ul ul {
	padding:2px 0 4px 10px;
}
#subMenu ul {
	padding: 15px 20px;
}
/*
 * Listenformatierung für das Submenü
 */
 #subMenu ul li {
 	padding-bottom:2px;
 }
#subMenu ul li a,
#subMenu ul li a:link,
#subMenu ul li a:visited,
#subMenu ul li a:active {
	text-decoration:none;
	margin: 0px;
	color: #333333;
}
#subMenu ul li a:hover,
#subMenu ul li.active li a:hover  {
	color:#999;
}

/*
 * Listenformatierung für das Submenü
 */
#subMenu ul li.active a,
#subMenu ul li.active li.active a {
	color: #ACA27E;
	text-decoration: none;
	font-weight: bold;
}
#subMenu ul li.active li a {
	font-weight:normal;
	color: #333333;
}

/* 
 * Layer, der die Kante, hinter der der gescrollte
 * Text verschwindet, ein Stück nach innen verschiebt
 * verwendet bei: Content-Bereich oben
 */
#coverDiv1 {
	height: 20px;
	width: 380px;
	position: absolute;
	margin-top: 40px;
	margin-left: 538px;
	background-color: #FFFFFF;
	z-index: 1000;
}

/* 
 * Layer, der die Kante, hinter der der gescrollte
 * Text verschwindet, ein Stück nach innen verschiebt
 * verwendet bei: Content-Bereich unten
 */
#coverDiv2 {
	height: 20px;
	width: 385px;
	position: absolute;
	margin-top: 350px;
	margin-left: 538px;
	background-color: #FFFFFF;
	z-index: 1000;
}

/*
 * Einstellungen für  IE6
 * Erhält einen Rand auf der rechten Seite, damit
 * die Linie neben der Scrollbar nicht abgeschnitten wird
 */
* html #coverDiv1,
* html #coverDiv2 {
	width: 380px;
	/* border-right: 1px solid #EAEAEA; */
}
/*
 * Einstellungen für  IE7
 * Erhält einen Rand auf der rechten Seite, damit
 * die Linie neben der Scrollbar nicht abgeschnitten wird
 */
*+html #coverDiv1,
*+html #coverDiv2 {
	width: 380px;
	/* border-right: 1px solid #EAEAEA; */
}

/*
 * Layer, in den ein Link (z.b. Biografie.pdf) gelegt 
 * werden kann. Befindet sich rechts neben der Überschrift
 * im Content-Bereich
 */
#pdfLink {
	position: absolute;
	margin-top: 20px;
	margin-left: 260px;
	height: 20px;
	width: 125px;
	overflow: hidden;
	z-index: 500;
}

/*
 * Formatierungen für Link
 */
#pdfLink a {
	color: #333333;
	text-decoration: none;
}

/*
 * Formatierungen für Bilder im Link
 */
#pdfLink a img {
	border: 0px;
}

/*
 * Contentbereich bei einer Produktbestellung
 */
#contentBestellung {
	width: 940px;
	height: 395px;
	overflow:show;
	background-color: #FFFFFF;
}

/*
 * Container, der den Container mit der Produktbeschreibung
 * beinhaltet. Dient dazu, bei IE6 u. IE7 eine Scrollbar
 * in den Hintergrund legen zu können (wenn keine vorhanden ist)
 */
#beschreibungWrap {
	height: 395px;
	overflow: auto;
	float: left;
	width: 537px;
	border-right: 1px solid #EAEAEA;
}

/*
 * Scrollbar-Bild für IE6
 */
* html #beschreibungWrap {
	background: #FFFFFF url(../images/scroller-gross.gif) no-repeat right;
}

/*
 * Scrollbar-Bild für IE7
 */
*+html #beschreibungWrap {
	background: #FFFFFF url(../images/scroller-gross.gif) no-repeat right;
}

/*
 * Container für die Inhalte der Produktbeschreibungen
 */
#produktBeschreibung {
	min-height: 365px;
	padding: 15px 20px;
	width: 479px;
	background-color: #FFFFFF;
}

/*
 * Clearfix
 */
#produktBeschreibung:after {    
	content: ".";    
	display: block;    
	clear: both;    
	visibility: hidden;    
	line-height: 0;    
	height: 0;
} 

/*
 * Clearfix
 */
#produktBeschreibung {    
	display: inline-block;
} 

/*
 * Clearfix
 */
html[xmlns] #produktBeschreibung {    
	display: block;
} 

/*
 * Clearfix
 */
* html #produktBeschreibung {    
	height: 1%;
}

/*
 * IE6-Fix für die Mindesthöhe
 * IEs bekommen noch einen Rand rechts, als 
 * Abgrenzung zur Scrollbar
 */
* html #produktBeschreibung {
	height: 365px;
	width: 478px;
	border-right: 1px solid #EAEAEA;
}

/*
 * IEs bekommen noch einen Rand rechts, als 
 * Abgrenzung zur Scrollbar
 */
*+html #produktBeschreibung {
	width: 478px;
	border-right: 1px solid #EAEAEA;
}

/*
 * Container, der den Container mit dem Bestellformular
 * beinhaltet. Dient dazu, bei IE6 u. IE7 eine Scrollbar
 * in den Hintergrund legen zu können (wenn keine vorhanden ist)
 */
#formularWrap {
	height: 395px;
	overflow: auto;
	float: left;
	width: 402px;
}

/*
 * Scrollbar-Bild für IE6
 */
* html #formularWrap {
	background: #FFFFFF url(../images/scroller-gross.gif) no-repeat right;
}

/*
 * Scrollbar-Bild für IE7
 */
*+html #formularWrap {
	background: #FFFFFF url(../images/scroller-gross.gif) no-repeat right;
}

/*
 * Beinhaltet das Bestellformular für Produkte
 */
#produktFormular {
	min-height: 365px;
	padding: 15px 20px;
	width: 345px;
	background-color: #FFFFFF;
}

/*
 * IE6-Fix für die Mindesthöhe
 * IEs bekommen noch einen Rand rechts, als 
 * Abgrenzung zur Scrollbar
 */
* html #produktFormular {
	height: 365px;
	width: 344px;
	border-right: 1px solid #EAEAEA;
}

/*
 * IEs bekommen noch einen Rand rechts, als 
 * Abgrenzung zur Scrollbar
 */
*+html #produktFormular {
	width: 344px;
	border-right: 1px solid #EAEAEA;
}

/*
 * Überschriften bei den Produktbeschreibungen
 * und beim Bestellformular
 */
#produktBeschreibung h1,
#produktFormular h1  {
	padding: 0px;
	margin: 0px 0px 20px 0px;
	font-size: 15px;
}

/* 
 * Layer, der die Kante, hinter der der gescrollte
 * Text verschwindet, ein Stück nach innen verschiebt
 * verwendet bei: Produkt-Beschreibung oben
 */
#coverDiv3 {
	display:block;
	position:absolute;
	visibility:visible;
	height:15px;
	width:519px;
	margin:0 0 0 0;
	z-index:10;
	background-color: #FFFFFF;
}

/*
 * IEs benötigen kürzeres Div, weil eine Linie
 * im Hintergrund sichtbar bleiben soll
 */
* html #coverDiv3 {
	width: 518px;
}
/*
 * IEs benötigen kürzeres Div, weil eine Linie
 * im Hintergrund sichtbar bleiben soll
 */
*+html #coverDiv3 {
	width: 518px;
}

/* 
 * Layer, der die Kante, hinter der der gescrollte
 * Text verschwindet, ein Stück nach innen verschiebt
 * verwendet bei: Bestellformular unten
 */
#coverDiv4 {
	display:block;
	position:absolute;
	visibility:visible;
	height:15px;
	width:385px;
	margin-left: 538px;
	z-index:10;
	background-color: #FFFFFF;
}
/*
 * IEs benötigen kürzeres Div, weil eine Linie
 * im Hintergrund sichtbar bleiben soll
 */
* html #coverDiv4 {
	width: 384px;
}
/*
 * IEs benötigen kürzeres Div, weil eine Linie
 * im Hintergrund sichtbar bleiben soll
 */
*+html #coverDiv4 {
	width: 384px;
}

/* 
 * Layer, der die Kante, hinter der der gescrollte
 * Text verschwindet, ein Stück nach innen verschiebt
 * verwendet bei: Produkt-Beschreibung unten
 */
#coverDiv5 {
	display:block;
	position:absolute;
	visibility:visible;
	height:15px;
	width:519px;
	margin:0 0 0 0;
	z-index:10;
	margin-top: 380px;
	background-color: #FFFFFF;
}
/*
 * IEs benötigen kürzeres Div, weil eine Linie
 * im Hintergrund sichtbar bleiben soll
 */
* html #coverDiv5 {
	width: 518px;
}
/*
 * IEs benötigen kürzeres Div, weil eine Linie
 * im Hintergrund sichtbar bleiben soll
 */
*+html #coverDiv5 {
	width: 518px;
}

/* 
 * Layer, der die Kante, hinter der der gescrollte
 * Text verschwindet, ein Stück nach innen verschiebt
 * verwendet bei: Bestellformular unten
 */
#coverDiv6 {
	display:block;
	position:absolute;
	visibility:visible;
	height:15px;
	width:385px;
	margin:0 0 0 0;
	z-index:10;
	margin-top: 380px;
	margin-left: 538px;
	background-color: #FFFFFF;
}
/*
 * IEs benötigen kürzeres Div, weil eine Linie
 * im Hintergrund sichtbar bleiben soll
 */
* html #coverDiv6 {
	width: 384px;
}
/*
 * IEs benötigen kürzeres Div, weil eine Linie
 * im Hintergrund sichtbar bleiben soll
 */
*+html #coverDiv6 {
	width: 384px;
}

/*
 * "Zurück" Link bei Produktbestellungen
 */
#backLink {
	padding: 3px 0px 0px 40px;
}

/*
 * Formatierungen für den "Zurück"-Link
 */
#backLink a {
	text-decoration: none;
	margin-left: 3px;
}

/*
 * Formatierungen für den "Zurück"-Link
 */
#backLink a img {
	border: 0px;
}

/*
 * Spalte für Bilder im Bereich der Produktbestellung
 */
#imageColumn {
	width: 235px;
	float: left;
	float: left;
}

/*
 * Spalte für Text im Bereich der Produktbestellung
 */
#textColumn {
	width: 230px;
	float: left;
	float: left;
	padding-left: 10px;
}

/*
 * iFrame, in dem #header und #mainWrap der Seiten geladen werden
 * Der Footer und die Gadgets befinden sich unterhalb des iFrames, 
 * damit der MP3-Player nicht unterbrochen wird, wenn eine neue Seite 
 * geladen wird.
 */
#iFrame  {
	width: 940px;
	height: 495px;
}
 /*
 * -------------------------------------------------
 *                     Klassen
 * -------------------------------------------------
 */

/*
 * Klassen für normale und aktive Menüitems
 */
.menuItem,
.menuItem_Active {
	float: left;
	height: 20px;
	padding-top: 15px;
	margin-left: 15px;
}

* html .menuItem,
* html .menuItem_Active {
	display: inline;
	width: 50px;
}

/*
 * Linkformatierungen für Menüitems im 
 * normalen Zustand
 */
.menuItem a {
	color: #FFFFFF;
	text-decoration:none;
}

/*
 * Hintergrundbild (Krone) bei aktiven Menüitems
 */
.menuItem_Active {
	background: url(../images/krone-menu.gif) top no-repeat;
}

/*
 * Linkformatierungen für Menüitems im 
 * aktiven Zustand
 */
.menuItem_Active a {
	color: #A39472;
	text-decoration:none;
}

/*
 * Klasse für rund Rahmen (kurze Version)
 */
.borderSmall {
	height: 5px;
	width: 268px;
}

/*
 * Formatierungen für eine Box mit einem 
 * Thumbnail im Normalzustand
 */
.fotoPreview {
	height: 133px;
	width: 133px;
	background-color: #141414;
	float: left;
	margin-bottom: 1px;
	margin-right: 1px;
	overflow: hidden;
}

/*
 * Formatierungen für eine Box mit einem 
 * Thumbnail im aktiven Zustand (mouseover)
 */
.fotoPreview_Active {
	height: 135px;
	width: 135px;
	background-color: #141414;
	float: left;
	margin-left: -1px;
	margin-top: -1px;
	overflow: hidden;
}

/*
 * Klasse für rund Rahmen (lange Version)
 */

.borderBig {
	height: 5px;
	width: 940px;
}

.fotoboek .fotoboek-switcher .page {
	position:absolute;
	color:#fff;
	line-height:17px;
	width:34px;
	height:17px;
	text-align:center;
	margin:-17px 0 0 29px;
}
*+html .fotoboek .fotoboek-switcher .page {
	margin:0 28px 0 0;
}
* html .fotoboek .fotoboek-switcher .page {
	margin:0 28px 0 0;
}

.fotoboek-switcher {
	position:absolute;
	width:100px;
	height:20px;
	margin:325px 0 0 830px;
	z-index:4;
	line-height:20px;
}



#content .second-row {
	display:block;
	padding:3px 0 0 0;
}

#pdfLink p,
#pdfLink a {
	margin:0 0 0 0;
	padding:0 0 0 0;
}

.gallery_thumbnail_off {
	filter:Alpha(Opacity=60);
	opacity:0.6;
	-moz-opacity:0.6;
	-khtml-opacity:0.6;
}
.gallery_thumbnail_on {
	filter:Alpha(Opacity=100);
	opacity:1;
	-moz-opacity:1;
	-khtml-opacity:1;
}


DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image .csc-textpic-caption {
	line-height:18px;
}

.bericht-text {
	padding-top:3px;
	padding-bottom:20px;
}