/* CSS Document */
body{
margin:0;
padding:0;
font-size: 100%;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	
font-weight:bold;
color:#FFF;
text-align:center;	

background: #333333;
background-image: url(i/layout/bg.jpg);
background-repeat: repeat-x;
}




h1,h2,h3,h4,legend {
color:#99ff66;
font-family:"Myriad pro", Arial, Helvetica, sans-serif;
font-weight:bold;
margin:0;
}

h1 {font-size:2.4em; margin-bottom:0.2em;}


h1 a:link, h1 a:visited, h1 a:active {color:#d0c8c6; text-decoration:none;}


h2 {
font-size:1.4em;
color:#99ff66;
text-align: right;
border-bottom:2px solid #ffff66;
font-weight: 100;
margin-top:10px;
letter-spacing:0;
line-height:1em;
}

h3 {
font-size:1.4em;
color:#99ccff;
border-bottom:2px solid #ffcccc;
font-weight: 100;
margin-top:10px;
letter-spacing:0;
line-height:1em;
}

h4 {
font-size:1.6em;
color:#FFF;
font-weight: 100;
margin-top:10px;
letter-spacing:0;
line-height:1em;
}



/* divs
--------------------------------------------------------------------------------------------- 
*/

div#container{width:1000px;margin:0px auto 0px auto;text-align:left;background: url(i/layout/bgcontent.jpg) top left repeat-y; border:0px solid #000;}


.header{
float: right;
width: 1000px;
height:314px;	
background: url(i/layout/top.jpg) top left no-repeat;
border:0px solid #fff;}

a.logo {
text-indent: -9999px;
float: right;
background: url(i/layout/logo.jpg) top left no-repeat;
width:232px;
height:31px;
margin: 82px 0px 0px 0px;
overflow:hidden; 
border:0px solid #fff;}


.wrapper{width:1000px;}


.inhalt {
width:445px;
float:left;
margin: 20px 0px 0px 57px;
border: 0px #bababa solid;
}


.sidebar {
width:220px !important;
float:left;
margin: 20px 0px 0px 20px;
border: 0px #000 solid;
}


.footer{
width:220px;
height:13px;
float: right;
margin: 0px 0px 0px 20px;
background:url(i/layout/footer.jpg) top left no-repeat;
clear:both;
}


	

/* navigation ------------------------------------------------------------ */

.navigationoben{
margin: 0px 0px 0px 100px;
width: 133px;
height: 210px;
float: left;
background:#333333 url(i/layout/navbg.jpg) top left no-repeat;
}


.navcontainer ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style-type: none;
}

 
.navcontainer ul li { display: inline; }

 
.navcontainer ul li a {
float:left;
text-decoration: none;
display: block;
text-indent: -1700em;
height: 53px; 
}

 
.navcontainer ul li a:hover {background-position: 0 -53px;}
  
.navcontainer ul li a.on  {background-position: 0 -53px;}
	
.home a  { width: 133px;background: url(i/layout/navhome.jpg) no-repeat top left }
	
.web a  { width: 133px;background: url(i/layout/navweb.jpg) no-repeat top left }
	
.ref a  { width: 133px;background: url(i/layout/navref.jpg) no-repeat top left }
	
.kontakt a  { width: 133px;background: url(i/layout/navkontakt.jpg) no-repeat top left }
	
	

/* schrift und überschrift ------------------------------------------------------------ */

.inhalt{
padding: 0px 0px 0px 0px;
font-weight: bold;
line-height:165%;
}

.inhalt p{
padding: 0px 0px 0px 0px;
font-size:0.7em;
line-height:165%;
}

.inhalt ul {
margin:10px 0 0px 30px;
padding:0;
}

.inhalt li {line-height:200%;
list-style-type: none;
margin-left: 0;
padding: 0 0 0 19px;
}


.sidebar p{
text-align: right;	
padding: 0px 0px 0px 0px;
color:#FFF;                                          
font-size:0.7em;
line-height:165%;
}


.sidebar ul {
text-align: left;
margin:10px 0 10px 40px;
padding:0;
font-size:0.7em;
}

.sidebar li {line-height:200%;
list-style-type: none;
margin-left: 0;

padding: 0px 5px 12px 25px;

}

.liblau {background: url(i/referenzen/liblau.jpg) top left no-repeat;}
.ligelb {background: url(i/referenzen/ligelb.jpg) top left no-repeat;}
.lirosa {background: url(i/referenzen/lirosa.jpg) top left no-repeat;}
.ligrun {background: url(i/referenzen/ligrun.jpg) top left no-repeat;}
.liblau2 {background: url(i/referenzen/liblau2.jpg) top left no-repeat;}
.ligelb2 {background: url(i/referenzen/ligelb2.jpg) top left no-repeat;}
.lirosa2 {background: url(i/referenzen/lirosa2.jpg) top left no-repeat;}
.ligrun2  {background: url(i/referenzen/ligrun2.jpg) top left no-repeat;}

.footer {
	
padding: 0px 0px 0px 0px;
color:#FFF;   
text-align: right;
font-size:0.7em;
line-height:165%;
}

.rosa {color:#ffcccc;}

.blau {color:#99ccff;}

.gelb {color:#ffff66;}

.grun {color:#99ff66;}

/* links ------------------------------------------------------------*/


a:focus { outline: none;}

a:link, a:visited, a:active {
	color:#ffcccc;
}


a:hover {
	color:#99ccff;
}


.inhalt a:link, a:visited, a:active {color:#ffcccc; font-weight: bold;}

.inhalt a:hover {color:#99ccff; font-weight: bold;}

.sidebar a:link, a:visited, a:active {color:#ffff66;font-weight: bold;}

.sidebar a:hover {color:#99ff66;font-weight: bold;}




/* referenzenlinks ------------------------------------------------------------ */

.referenzen{
margin: 0px 0px 0px 0px;
width: 445px;
float: left;
border:0px solid #FFF;
text-align: center;
}

.referenzen ul {margin: 0px 0px 0px 0px;}

.referenzen li {
padding: 0px 2px 8px 0px;
width: 220px;
float: left;}

.comingsoon{
margin: 0px 0px 0px 0px;
width: 220px;
float: left;
border:0px solid #FFF;
text-align: center;
}

.comingsoon ul {margin: 0px 0px 0px 0px;}

.coming soon li {
padding: 0px 2px 8px 0px;
width: 220px;
float:left;}



.reflist ul {
margin: 0;
padding: 0;
list-style-type:none;
}

 
.reflist ul li { display: inline;}

 
.reflist ul li a {
float:left;
text-decoration: none;
display: block;
text-indent: -1700em;
height: 170px; 
}

 
.reflist ul li a:hover {background-position: 0 -170px;}
  
.reflist ul li a.on  {background-position: 0 -170px;}
	
.andi a  { width: 220px;background: url(i/referenzen/refandi.jpg) no-repeat top left }
	
.tak a  { width: 220px;background: url(i/referenzen/reftak.jpg) no-repeat top left }

.klaus a  { width: 220px;background: url(i/referenzen/refklaus.jpg) no-repeat top left }	

.hso a  { width: 220px;background: url(i/referenzen/refhso.jpg) no-repeat top left }	

.kirstin a  { width: 220px;background: url(i/referenzen/refkirstin.jpg) no-repeat top left }	

.shanka a  { width: 220px;background: url(i/referenzen/refshanka.jpg) no-repeat top left }	

.bruno a  { width: 220px;background: url(i/referenzen/refbruno.jpg) no-repeat top left }

.musici a  { width: 220px;background: url(i/referenzen/refmusici.jpg) no-repeat top left }

.eva a  { width: 220px; background: url(i/referenzen/refeva.jpg) no-repeat top left }

.allan a  { width: 220px; background: url(i/referenzen/refallan.jpg) no-repeat top left }

.tobi a  { width: 220px; background: url(i/referenzen/reftobi.jpg) no-repeat top left }

.biosauna a  { width: 220px; background: url(i/referenzen/biosauna.jpg) no-repeat top left }

.playmobeat a  { width: 220px; background: url(i/referenzen/playmobeat.jpg) no-repeat top left }


/* intro ------------------------------------------------------------ */


.intro{width:708px; margin:100px auto 0px auto;text-align:left;}


.navigationintro{
    margin: 0px;
    width: 708px;
	height: 356px;
	background:#333333 url(i/layout/intro.jpg) top left no-repeat;
	}


.navintro ul
 {
 margin: 0;
 padding: 196px 0px 0px 160px;
 list-style-type: none;
 }

.navintro ul li { display: inline; }

 
.navintro ul li a
 {
 float:left;
 text-decoration: none;
  display: block;
		text-indent: -1700em;
		height: 19px; 
 }

 
.navintro ul li a:hover
 {
background-position: 0 -19px;
 }
 
.navintro ul li a.on{background-position: 0 -19px;}

	
.enter a  { 	width: 97px;
		background: url(i/layout/enter.jpg) no-repeat top left;
		overflow:hidden;}