/* Project Smooth - Relunch 2010 */







html,body {
width: 100%;
min-width: 950px;

margin: 0px; 

padding: 0px;




font: 12px Verdana,sans-serif; 

cursor: default;

background: #2a070e url('_img/site/background.jpg') top left fixed;



scrollbar-arrow-color: #731A47;

scrollbar-base-color: #731A47;

scrollbar-face-color: #ffffff;

scrollbar-highlight-color: #731A47;

scrollbar-shadow-color: #731A47;

scrollbar-darkshadow-color: #731A47;

scrollbar-track-color: #FFFFFF;

}


#page {z-index: 10; position: relative; background: transparent ; min-height: 800px; width: 900px; margin: 0px auto;}
#disco {background: transparent url('_img/site/uebergang1.png') no-repeat -20px -10px fixed; position: fixed; top: 0px; left: 0px; width: 400px; height: 400px; z-index: 2;}


/* Allgemein */



div {background-color: transparent;}

img {vertical-align: bottom; border: 0px; background: transparent;}

ul {margin: 0px; padding-left: 14px;}

li {margin: 0px; padding: 0px;}

input {margin: 0px; padding: 0px;}





h1 {display: inline;}

h2 {color: #000000; font-size: 26px; font-variant: small-caps;

color: #FFF;
font-size: 26px;
font-variant: small-caps;
background: #440817;
padding: 5px 20px 5px 20px;
font-family: Arial, Helvetica;
font-weight: bold;
background: #CCC;
text-shadow: 0px 0px 4px #440817;

background: -moz-linear-gradient(left, rgba(68,8,23,1) 0%, rgba(68,8,23,0) 69%, rgba(68,8,23,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(68,8,23,1)), color-stop(69%,rgba(68,8,23,0)), color-stop(100%,rgba(68,8,23,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(68,8,23,1) 0%,rgba(68,8,23,0) 69%,rgba(68,8,23,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(68,8,23,1) 0%,rgba(68,8,23,0) 69%,rgba(68,8,23,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(68,8,23,1) 0%,rgba(68,8,23,0) 69%,rgba(68,8,23,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(68,8,23,1) 0%,rgba(68,8,23,0) 69%,rgba(68,8,23,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#440817', endColorstr='#00440817',GradientType=1 ); /* IE6-9 */
}

h3 {text-transform: uppercase; font-size: 20px; font-weight: normal; margin-bottom: 5px;}

h4 {color: #731A47; font-size: 16px;}





/* Spezialfälle */

#content p{margin: 0px; padding: 0px 20px; text-align: justify;}

h2 {font-size: 14px; clear: left;}

#content h3 {font-size: 14px; margin-left: 20px;}

#content ul {padding-left: 34px;}


.musik p.bodylink {min-height: 90px;}
p.bodylink {-webkit-transition:background-color 0.6s;
	-moz-transition:background-color 0.6s;
	transition:background-color 0.6s; background-color: rgba(255,255,255,0);}
p.bodylink:hover {background: transparent url(_img/site/absatz_links.jpg)repeat-y left top; background-color: rgba(255,255,255,1) ; cursor: pointer;}


.quartett h2, .trio h2, duo h2, barpiano h2 {clear: none;}



img.weiter {vertical-align: baseline;}



ul.repertoire {font-size: 20px; font-variant: small-caps; list-style-type: none; }

ul.repertoire li{}

.referenzen #content li {font-size: 14px; margin: 10px 20px; list-style-type: square; width: 300px;}

li.nop {list-style-type: none;}



/* Klassen */

.contentheader {font-variant: small-caps !important; font-size: 20px !important; font-weight: normal !important; display: block !important; padding: 0px 0px 10px 20px; margin-left: 0px;}

.event .contentheader {background: url(_img/events.jpg) 0px 30px no-repeat; height: 110px; }





#abstand {margin-top: 20px;}
.abstand {margin-top: 10px !important;}

.eingerueckt {margin-left: 110px;}

 

.underline {text-decoration: underline;}

.textcolor {color: #731A47;}

.italic {font-style: italic;}



/* Seite */





.navlist { padding: 0px; font: bold 12px Courier New, monospace;  margin-top: 15px; background: transparent url('_img/site/vertical_gradient.png') repeat-x 0px -40px; background-color: rgba(255,255,255,0.7);}

.navlist li {list-style: none; text-align: left;  width: 180px;}

.navlist li a {display: block; padding: 0.25em 0px 0.25em 15px; text-decoration: none; width: 165px;}




.sideheader {font-size: 12px; width: 100%; text-align: center;  color: #731A47; font-weight: bold; font-variant: small-caps;}

.sidediv {margin-top: 40px; margin-left: 10px; width: 162px;}

.sideimage {float: left; margin-right: 2px;}





.newsdate {font-size: 10px; font-weight: bold;}



div.player{margin-top: 15px; padding-left: 24px;}

/*news*/
div.img {margin-top: 30px;}

div#news{ width: 160px; padding: 60px 10px 10px 10px; background: transparent url('_img/site/vertical_gradient.png') repeat-x 0px 0px;}

div#newsframe{height: 160px; margin-top: 5px; width: 160px; overflow: auto; border: 1px dashed #731A47;}



/* Links */



a {color: #731A47; text-decoration: none; font-weight: bold; outline: 0;}

#content a:hover{color: #999999; text-decoration: underline;}

#topdiv a{color: #AAA; text-shadow: 0px 0px 2px #000, 0px 0px 3px #000, 0px 0px 10px #731A47, 0px 0px 10px #731A47;}

#topdiv a:hover{color: white;}

.navlist li a:link { color: #731A47; }

.navlist li a:visited { color: #731A47; }

.navlist li a:hover {color: #731A47;background: white; }


#sidea a {color: black; font-weight: normal;}






/* Listenkonstruktion */



#header h1 {padding: 0px; margin: 0px; vertical-align: bottom;}

#menue li{float:left;}

div.menu {height: 85px; width: 100%; float: right;  margin: -20px 0px 0px 0px;  position: relative; z-index: 99;}
ul#menue{list-style-type: none; text-align: left; float: right;   margin: 0px !important; z-index: 5; padding: 0px; display: block; width: 758px;
	-webkit-transition:background-color 1s;
	-moz-transition:background-color 1s;
	transition:background-color 1s;
	background-color: rgba(255, 255, 255, 0);
    -moz-border-radius-bottomright: 50px;
   border-bottom-right-radius: 50px; 
   -moz-border-radius-bottomleft: 50px;
   border-bottom-left-radius: 50px;
}
ul.fixed {position: fixed !important; top: -10px !important;}
#menue a {display: block;}
#menue a:hover {background: transparent url('test-menuebg.png') no-repeat center 25px;}

.fixedmenue { position: fixed !important; top: -10px; z-index: 99; background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.97) !important;
box-shadow: 0px 0px 10px rgba(0,0,0,0.6);
}
ul.fixedmenue:hover {background-color: rgba(255, 255, 255, 1) !important;}




/* Formular */

form {color: #666666; font-family: "Avant Garde", Verdana; font-size: 12px;}





/* Rahmenkonstruktion */



div#topdiv{width: 100%; margin-top: 0px; text-align: right; font-size: 11px; color: #999999; position: relative; z-index: 3;}

div#site{text-align: left; width: 833px; margin-top: 700px; background: transparent url(http://project-smooth.com/jazzband-tanzmusik.css) no-repeat right bottom; }

div#border {background: transparent url(http://project-smooth.com/jazzband-tanzmusik.css) repeat-y; background-position: 0px 0px;}

div#hintergrundbild{background: transparent url(http://project-smooth.com/jazzband-tanzmusik.css) no-repeat 70px 232px; }

div#header{}

div#content {
	position: relative;
	z-index: 10;
	float: right; 
	padding: 10px 0px 20px 0px; 
	width: 570px; 
	margin: 0px 130px 30px 0px; 
	background: url('_img/site/textbackground.png') top center; 
	background-color: rgba(255,255,255,0.6);  
	text-align: left;
	box-shadow: 1px 2px 2px 1px #444;
	-moz-box-shadow: 1px 2px 2px 1px #444;
	-webkit-box-shadow: 3px 3px 3px 2px #888;
	-webkit-transition:background-color 0.6s;
	-moz-transition:background-color 0.6s;
	transition:background-color 0.6s;
	
}

div#content:hover, div#anfrage:hover, div#kontakt:hover {background-color: rgba(255, 255, 255, 0.88);}

.start div#side {top: 800px; z-index: 0; left: 830px;}	


#saengern {position: absolute; left: 10px; top: 20px; z-index: 3; }
#saxofon {position: fixed; right: -10px; bottom: -0px; z-index:1;}
div#side {position: absolute; top: 460px; left: 780px; background: #eeeeee url('http://project-smooth.com/x_img/textbackground.png') repeat-y top center; width: 250px; padding: 10px; color: #444; font-family: Monospace; z-index: 3;
box-shadow: 1px 2px 3px 1px #888;
-moz-box-shadow: 1px 2px 3px 1px #888;
-webkit-box-shadow: 3px 3px 3px 2px #888;


}



.musik #background {z-index:1; position:fixed; -moz-border-radius: 245px; left: 50%; top: 175px;}
.musik #background_tanz {z-index:1; position:fixed; right: 0px; bottom: 0px;}
.start #background {position:fixed; right: 0px; bottom: 0px;  pointer-events:none; z-index: 2;}
#schallplatte {position:fixed; left: 0px; bottom: 0px;  pointer-events:none; z-index: -1;}
/* .hoerproben #background {z-index:1; position:fixed; left: 50%; margin-left: 150px; bottom: 20px;}  SCHALLPlATTE */
.hoerproben #background {z-index:1; position:fixed; right: 0px; bottom: 0px;} 

.rund {-moz-border-radius:20px;
		-webkit-border-radius:20px;
		-opera-border-radius:20px;
		-khtml-border-radius:20px;
		border-radius:20px;

}

/* Index */
#photos {top: 154px; left: 615px; position:absolute; z-index: 2;}
#bild1 {top: 175px; left: 634px; position:absolute; z-index: 2;}
#bild2 {top: 453px; left: 631px; position:absolute; z-index: 2;}
#text {top: 170px; left: 239px; position:absolute; z-index: 3;}

/* Kontakt */
#kontakt form, #anfrage form { font-size: 12px; padding: 10px 5px 0px 5px; margin-top:40px;}
.kontakt div h2 {margin-left: 20px !important;}
form input {border: 0px; border-bottom: 2px solid #770000; background: transparent; font-size: 12px;}
#kontakt form .textinput {width: 200px;}
#kontakt {width: 400px; clear: both; padding: 10px;background:  url('_img/site/textbackground.png') repeat-y top center	; background-color: rgba(255,255,255,0.7); }
#anfrage {width: 500px; padding: 10px; margin-right: 40px; position: absolute; top: 480px; left: 50%; background:  url('_img/site/textbackground.png') repeat-y top right; border-left: 1px solid #999999; z-index: 2; background-color: rgba(255,255,255,0.6); }
#anfrage2 {background:  url('_img/site/textbackground.png') repeat-y top right; background-color: rgba(255,255,255,0.6); }

.musik #content {background: transparent url('_img/site/t_90.png') repeat top left;}
.hoerproben #content {background: transparent url('_img/site/textbackground.png') repeat top left;}
#lounge {position: absolute; top: 460px; left: 720px; z-index: 2; background:  url('_img/site/t_98.png') repeat top center	; padding: 20px;}

/* Footer */

#footer {z-index: 2; overflow: hidden; position: relative; left: 0px; bottom: 0px; width: 99.1%; min-height: 60px; margin: 0px auto; background:  url('_img/site/scan.png') repeat-x top left; padding: 70px 0px 0px 10px; text-align: center; color: white;}
.wlinks {padding:0px !important;  font-style: italic; position: absolute; bottom: 0px; right: 10px; text-align: left;}
.weight a, .wlinks a:link {color: black; font-weight: normal; font-style: normal;}
#footer a {color: white; font-weight: bold; font-size: 11px;}
#footer img {margin-top: 20px; z-index: 0;}

div#left {
	float: right; 
	position: relative;
	top: 320px; 
	width: 180px; 
	background:  url('_img/site/vertical_gradient.png') repeat-x top center; 
	padding: 100px 0px 0px 0px;}
	
#left p {padding: 0px 6px;}

#logo2 {position: absolute; z-index: 2; top: 0px; left: 200px;}
#logo {position: relative; right: 0px; top: 0px; margin: 0px !important; float: right; z-index: 2;}


body.start #footer {}
body.musik #footer {min-width: 700px;}

#band_bilder {z-index: 1; left: 50%; margin-left: -100px; top: 200px; position: absolute; width: 200px; height: 200px;}
#photosa {top: 54px; left: 95px; position:absolute;}
#bild1a {top: 75px; left: 114px; position:absolute; }
#bild2a {top: 353px; left: 111px; position:absolute;}
#texta {top: 170px; left: 239px; position:absolute; z-index: 3; display: none;}
#backgroundtext {z-index: 0; position: fixed; overflow-x: hidden; overflow-y:
hidden; top: 160px; left: 0px; width: 100%; font-size: 20px; font-weight: bold; text-transform: uppercase; color: white; line-height: 50px; opacity: 0.3;}
#backgroundtext div {width: 4000px;}

p.background {background: transparent url('_img/site/t_20.png') repeat top left;}
td.alert {background: red url('project-smooth.com/_img/site/t_90.png') repeat top left; font-weight: bold;}
input.alert {background: transparent url('_img/site/t_90.png') repeat top left;}

#shadow {width: 100%; height: 100%; background: url('http://project-smooth.com/x_img/site/hintergrund_schwarz.png') repeat-x bottom left; position: fixed; bottom: 0px; left: 0px; z-index: 1;

background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 9%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 69%, rgba(0,0,0,0.5) 89%, rgba(0,0,0,0.8) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(9%,rgba(0,0,0,0.2)), color-stop(22%,rgba(0,0,0,0)), color-stop(69%,rgba(0,0,0,0)), color-stop(89%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.8))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.2) 9%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 69%,rgba(0,0,0,0.5) 89%,rgba(0,0,0,0.8) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.2) 9%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 69%,rgba(0,0,0,0.5) 89%,rgba(0,0,0,0.8) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.2) 9%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 69%,rgba(0,0,0,0.5) 89%,rgba(0,0,0,0.8) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.2) 9%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 69%,rgba(0,0,0,0.5) 89%,rgba(0,0,0,0.8) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#cc000000',GradientType=0 ); /* IE6-9 */
}

/* OLD */
#footermenue ul{display: inline; width: 833px; height: 17px;  list-style-type: none;}

#footermenue li{float:left;}
div#navcontainer{ width: 260px;}


table#pics {}
table#pics td {height: 200px; width: 200px; vertical-align: middle; text-align: center;}

#pics img {border: 6px solid #DDDDDD;}




/* iPad [portrait + landscape] */
@media only screen and (max-width: 1000px) {
div#content {background-color: rgba(255,255,255,0.85) !important;}
}

@media only screen and (max-width: 1000px) {
.start #background {position:fixed; left: 750px; bottom: 0px;  pointer-events:none; z-index: 2;}
}

/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
div#content {background-color: rgba(255,255,255,0.85) !important;}
}