/* ****************************************** */
/* Orangefluid GbR		         			  */
/* www.orangefluid.com       				  */
/* ****************************************** */

/* Basic Setup */

* {
	margin: 0px;
	padding: 0px;
	}
	
html, body {
	width: 100%;
	height: 100%;
	}

body {
	background-color: #fefefe;
	background-image: url(media/background.jpg);
	background-repeat: repeat-x;
}

body, p {
	font-size: 12px;;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	}

p {
	margin-bottom: 1.5em;
	display: block;
	width: auto;
	}
	
p.right {
	position: relative;
	float: right;
	width: 306px;
	height: auto;
	display: block;
}

p.center {
	position: relative;
	text-align: center;
	float: right;
	width: 300px;
	height: auto;
	display: block;
}

div.listitem {
	position: relative;
	float: right;
	width: 300px;
	height: auto;
	margin: 0px;
	padding: 3px;
	margin-bottom: 10px;
	}
	
	div.listitem:hover {
		background: #e6f3ff;
		border: 1px #CCCCCC dashed;
		padding: 2px;
		cursor: pointer;
		}
		
div.headline {
	position: relative;
	float: right;
	width: 282px;
	height: auto;
	margin: 0px;
	padding: 3px;
	margin-bottom: 10px;
	margin-top: 20px;
	font-size: 14px;
	color: #4886c0;
	font-weight:bold; 
	text-align: center;
	}
div.repertoire {
	position: relative;
	width: 500px;
	height: auto;
	margin: 0px;
	padding: 3px;
	margin-bottom: 10px;
	margin-top: 20px;
	font-size: 14px;
	color: #4886c0;
	font-weight:bold; 
	text-align: center;
	float:left;
	}

p.artist {
	position: relative;
	float:left;
	width: 120px;
	height: auto;
	font-weight: bold;
	text-indent: 0px;
	margin: 0px;
	margin-right: 10px;
	padding: 0px;
	}
	
p.artist2 {
	position: relative;
	float:left;
	width: 150px;
	height: auto;
	font-weight: bold;
	text-indent: 0px;
	margin: 0px;
	margin-right: 10px;
	padding: 0px;
	}

p.song {
	position: relative;
	float: left;
	width: 170px;
	height: auto;
	margin: 0px;
	padding: 0px;
	}
	
p.song2 {
	position: relative;
	float: left;
	width: 375px;
	height: auto;
	margin: 0px;
	padding: 0px;
	}	
	
p.instrument {
	position: relative;
	float: left;
	width: 140px;
	height: auto;
	margin: 0px;
	padding: 0px;
	}
	
p.category {
	font-size: 14px;
	font-weight: bold;
	margin-left: 20px;
	}
	
p.smalllink a {
	margin-left: 20px;
	}
	
div.navitem {
	position: relative;
	float:left;
	clear: both;
	margin-bottom: 10px;
	}

a, a:link, a:visited, a:visited, a:active {
	color: #4886c0;
	text-decoration: none;
	}
	
a:hover {
	text-decoration: underline;
	}
	
/* Positioning */

#bgContainer {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 769px;
	height: auto;
	}

#bg2Container {
	position: relative;
	float: left;
	width: 769px;
	height: auto;
	background: url(media/full_back.jpg);
	background-repeat: repeat-y;
	background-position: center;
	}
	
#mainContainer {
	position: relative;
	float: left;
	width: 769px;
	min-height: 600px;
	height: 100%;
	background: url(media/main_back.jpg);
	background-repeat: no-repeat;
	background-position: top;
	}
	
#Content {
	position: relative;
	float: left;
	width: 753px;
	height: auto;
	margin-left: 8px;
	margin-right: 8px;
	background-image: url(media/left_footer.jpg);
	background-position: left bottom;
	background-repeat: no-repeat;
}

	#mainHead {
		position: relative;
		float: left;
		width: 753px;
		height: 281px;
	}
	
	#pageHeadline {
		position: relative;
		float: left;
		width: 753px;
		height: 30px;
	}

		#pageHeadline img {
			float: right;
				}

	#navigation {
		position: relative;
		float: left;
		width: 170px;
		height: 526px;
	}
		
	#mainImage {
		position: relative;
		float: left;
		width: 231px;

		height: auto;
		background-position: bottom;
		background-repeat: no-repeat;
		margin-left: -19px;
		margin-top: -20px;
		padding-right: 20px;
		padding-bottom: 15px;
		display: inline;
	}
	
	#flashcontent2 {
		position: relative;
		float: left;
		width: 231px;
	}
		
	
	#MAINCONTENT {
		position: relative;
		float: left;
		width: 542px;
		height: auto;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	
/* Footer container, sticky at bottom */
#footercontainer {
	position: relative;
	width: 769px;
	height: 30px;
	margin: -30px auto 0 auto;	
	text-align: center;
	background: url(media/footer.gif);
	background-repeat: no-repeat;
	clear:both;
}

	#footercontainer #copyright {
		position: relative;
		float: right;
		margin-right: 20px;
		font-size: 11px;
		color: #4886c0;
		line-height: 24px;
		}

	#footercontainer #moreinfo {
		position: relative;
		float: left;
		margin-left: 20px;
		font-size: 11px;
		color: #4886c0;
		line-height: 24px;
		}

		#footercontainer #moreinfo a {
			font-size: 11px;
			}
			
	#footercontainer #email {
		position: relative;
		float: left;
		margin-left: 20px;
		font-size: 11px;
		color: #4886c0;
		line-height: 24px;
		}
			
	* html #foontercontainer #copyright {
		margin-right: 10px;
		}
	* html #foontercontainer #moreinfo {
		margin-left: 10px;
		}
		
/* Formular Formatting */

form p {
	height: auto;
	height: 18px;
}

label {
	position: relative;
	float: left;
	width: 200px;
	display: block;
	padding: 2px;
	}

input, textarea {
	position: relative;
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	border: 1px solid #000000;
	padding: 2px;
	width: 250px;
}

select {
	position: relative;
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	border: 1px solid #000000;
	padding: 2px;
	margin-right: 5px;
}


input:hover, textarea:hover;  {
	background-color: #daedff;
	}

input:focus, textarea:focus; {
	background-color: #daedff;
	border: 1px dashed #000000;
}

	.textarea {
		height: 120px;
		}
		
/* Infotext */

.infotext {
	display: visible;
	padding: 10px;
	color: #666666;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	text-align: left;
}

.infotext p {
	font-size: 11px;
	color: #666666;
}
	
.infotext a:link, .infotext a:visited {
	color: #666666;
	text-decoration: underline;
}

.infotext a:hover, .infotext a:active {	
	color: #666666;
	text-decoration: none;
}	

.infolink {
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	font-size : 11px;
	color: #aaaaaa;
	font-weight : normal;
	text-decoration: none;
	line-height: 22px;
	vertical-align: middle;
 }
 
	.infotext h1 {
		font-size: 12px;
		font-weight: bold;
		color: #4886C0;
	}
	
 	#footercontainer p {
		text-indent: 10px;
	}
	
.switchcontent{display:none;}

/* referenzen */
.ref		{ 
			float: left;
			padding-top: 5px;
			padding-bottom: 5px;
			width: 500px;
			padding-left: 20px;
			background: url(media/dot.gif) no-repeat;
			}

div.repertoire {
	position: relative;
	width: 500px;
	height: auto;
	margin: 0px;
	padding: 3px;
	margin-bottom: 10px;
	margin-top: 20px;
	font-size: 14px;
	color: #4886c0;
	font-weight:bold; 
	text-align: center;
	float:left;
	}
	
div.listitem2 {
	position: relative;
	float: left;
	width: 525px;
	height: auto;
	margin: 0px;
	padding: 3px;
	margin-bottom: 10px;
	}

p.artist {
	position: relative;
	float:left;
	width: 120px;
	height: auto;
	font-weight: bold;
	text-indent: 0px;
	margin: 0px;
	margin-right: 10px;
	padding: 0px;
	}
	
p.artist2 {
	position: relative;
	float:left;
	width: 150px;
	height: auto;
	font-weight: bold;
	text-indent: 0px;
	margin: 0px;
	margin-right: 10px;
	padding: 0px;
	}

p.song {
	position: relative;
	float: left;
	width: 170px;
	height: auto;
	margin: 0px;
	padding: 0px;
	}
	
p.song2 {
	position: relative;
	float: left;
	width: 375px;
	height: auto;
	margin: 0px;
	padding: 0px;
	}	

/* DAS NEUE MENU */
.menu, .menu ul {list-style-type:none; padding:0; margin:0;}
.menu li {display: block; position:relative; width:170px; height: 20px; overflow: hidden;}
.menu li a  {display: block; width: 170px;} 
.seo  { margin-left: -400px;}

.menu li a#home {width:170px; background:url(_navi/home_off.gif) no-repeat;}
.menu li a:hover#home {width:170px; background:url(_navi/home_on.gif) no-repeat;}
.menu li a#homeactive {width:170px; background:url(_navi/home_on.gif) no-repeat;}

.menu li a#about {width:170px; background:url(_navi/about_off.gif) no-repeat;}
.menu li a:hover#about {width:170px; background:url(_navi/about_on.gif) no-repeat;}
.menu li a#aboutactive {width:170px; background:url(_navi/about_on.gif) no-repeat;}

.menu li a#repertoire {width:170px; background:url(_navi/repertoire_off.gif) no-repeat;}
.menu li a:hover#repertoire {width:170px; background:url(_navi/repertoire_on.gif) no-repeat;}
.menu li a#repertoireactive {width:170px; background:url(_navi/repertoire_on.gif) no-repeat;}

.menu li a#anlaesse {width:170px; background:url(_navi/anlaesse_off.gif) no-repeat;}
.menu li a:hover#anlaesse {width:170px; background:url(_navi/anlaesse_on.gif) no-repeat;}
.menu li a#anlaesseactive {width:170px; background:url(_navi/anlaesse_on.gif) no-repeat;}

.menu li a#referenzen {width:170px; background:url(_navi/referenzen_off.gif) no-repeat;}
.menu li a:hover#referenzen {width:170px; background:url(_navi/referenzen_on.gif) no-repeat;}
.menu li a#referenzenactive {width:170px; background:url(_navi/referenzen_on.gif) no-repeat;}

.menu li a#gallerie {width:170px; background:url(_navi/galerie_off.gif) no-repeat;}
.menu li a:hover#gallerie {width:170px; background:url(_navi/galerie_on.gif) no-repeat;}
.menu li a#gallerieactive {width:170px; background:url(_navi/galerie_on.gif) no-repeat;}

.menu li a#kontakt {width:170px; background:url(_navi/kontakt_off.gif) no-repeat;}
.menu li a:hover#kontakt {width:170px; background:url(_navi/kontakt_on.gif) no-repeat;}
.menu li a#kontaktactive {width:170px; background:url(_navi/kontakt_on.gif) no-repeat;}

.menu li a#impressum {width:170px; background:url(_navi/impressum_off.gif) no-repeat;}
.menu li a:hover#impressum {width:170px; background:url(_navi/impressum_on.gif) no-repeat;}
.menu li a#impressumactive {width:170px; background:url(_navi/impressum_on.gif) no-repeat;}

.menu li a#hoerproben {width:170px; background:url(_navi/demo_off.gif) no-repeat;}
.menu li a:hover#hoerproben {width:170px; background:url(_navi/demo_on.gif) no-repeat;}
.menu li a#hoerprobenactive {width:170px; background:url(_navi/demo_on.gif) no-repeat;}