html {
	background:url(img/bg_htmlx.jpg) top no-repeat #402940; 
	
}
/* RESET */
html, body, p, ul, li {
	margin:0px; padding:0px; 
	text-decoration:none; 
}

.refertext {
	
	width:465px;
}
.refertext a {
	
	
	color:white;
	 font-style: italic;
	font-size:16px;
	  line-height: 150%;
	
	
	
}

.refertext a:hover {

color:gray;

}
a {
	
	
	
	
	text-decoration:none; 
	
	
	
	
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu ul li {
list-stylex:none;
}
.muza ul  li {
	list-style: none;
	
}
/* CONTENT obejmujący wszystko */
#content_box {
	width:1000px;
	margin:0 auto;
	margin-top:0px;
	padding-left:0px;
	borderx: 1px solid white;
}
/* MENU */
.menu {
	width:2px;
	height: 30px;
	margin-top:580px;
	margin-left: 105px;
	borderx: 1px dotted yellow;
	position: absolute;
	background:rgb(53,20,47);
	backgroundx:#321b32;
	displayx:none;
	overflow:hidden;
	box-shadow:5px 5px 8px rgba(0,0,0,.6);	
	
}

.circle_jm {
background:url(img/kolo-menu-open.png) top left no-repeat; 
	backgroundx: #321b32;
	border-radius: 39px;
	width: 78px;
	height: 78px;
	position:absolute;
	margin-top:555px;
	margin-left: 30px;
	background-attachmentx:fixed;
	background-size: 80px 80px;
	z-index: 900;
	box-shadow:5px 5px 8px rgba(0,0,0,.6);
}
.circle_jmx:hover {
background:url(img/kolo-menu-close.png) top left no-repeat; 
width: 80px;
	height: 80px;
	background-size: 80px 80px;
}
/* ---------------------------------- CONCERT --------------------------------- */
.cytat {  color:rgba(255,255,255, .6);
 font: normal 13px 'Droid Serif', Georgia, Arial;
 margin-top:30px;
 }
.post  {
margin-top: 20px;
margin-bottom:30px;
 color:rgb(255,255,255);
 font: normal 13px 'Droid Serif', Georgia, Arial;
}


div.kolo { 
positionx:absolute;
	border-radius: 28px;
	width: 56px;
	height: 56px;
	background: rgba(181,163,177, .9);
	font: normal 11px 'Droid Serif', Georgia;
	text-align: center;
	margin-top:0px;
	margin-left:0px;
	padding-top: 0px;
	color:#402940;
	
	}
.more  {
text-align: right;
background:url(img/more-znaczek-01.png) top left no-repeat;
height:20px;
width:42px;
borderx: 1px dotted blue;
margin-left:30px;
margin-top:5px;
positionx:absolute;
background-size:100% 100%;
float:right;
opacity: 0.3;

}

.more:hover{opacity: 0.8;}

.opis  {
font: normal 15px/18px 'Droid Serif', Georgia;
margin-top: 10px;
margin-left: 5px;
}
	
.numer {
font-size: 18px;
margin-bottom: -100px;
}	
	
.menu .strzalka {
	background:url(img/strzalkax.png) top left no-repeat; 
	width:110px;
	height:0px;
	}
	
.menu ul li {
	background:redx;
	display:block; 
	width:78px;
	height:40px;
	margin-right:0px;
	float:left;   
}

.menu ul li a .on { 
	color:pink;
}
.menu ul li a {
	display:block;
	width:100%;
	height:30px;
	margin-top:4px;  
	font-family: 'Droid Serif', Georgia, Arial, Helvetica, sans-serif;
	font-size:13px;
	color:white;	
	text-align:center;
	text-decoration:none; 
	borderx: 1px dashed blue;
} 
.menu ul li a:hover {
color:grey;
}

/* CONTENT */
.content {
	width:1000px;
	height:667px;
	margin-top:0px;
	background:url(img/content_bgx.png) top left repeat;
	float:left;
	borderx: 1px dashed red;
}
/* MASKA */
.content .maska { 
	width:1000x;
 	height:667px;
	margin-left:0px;
	overflow:hidden; 
	position:relative;
	borderx: 1px dashed yellow;
}
/* PODSTRONY (div) */ 
.content .podstrony {
	width:1500%;  
	overflow:hidden; 
}   
.content .podstrony .slide  {
	width:1000px;  
	float:left; 
}
/* TREŚCI */
.content .podstrony h1 {
	color:white;
	text-align:center;
	font-size:15px;
	font-family:'Droid Serif', Georgia, Arial, Helvetica, sans-serif;
	letter-spacing:0.2em;
	margin:0 auto;
	padding:20px 10px 10px;
}
.content .podstrony .tresc {
	position:relative; 
	text-align:justify;
	color:white;
	line-height:18px; 
	paddingx:3px 15px 10px;
	height: 667px;
	font:normal 13px 'Droid Serif', Georgia, Arial;
}
.content .podstrony .tresc a img  {
	text-decoration:none;
	border:none;
}
.content .podstrony .tresc .button {
	margin:0 auto;
	padding:5px;
}
/* PRZYCISKI */ 
.tresc .next {
    position: absolute;
	top: 45px; 
    right: 3px;
    width: 32px;
    height: 22px;  
    background: url(img/dol.jpg) no-repeat;
} 
.tresc .prev {
    position: absolute; 
	bottom:45px;
	right: 3px; 
    width: 32px;
    height: 22px; 
    background: url(img/gora.jpg) no-repeat;
} 
.tresc .suwak {
    position: absolute;
    top: 25px;
	right: 3px; 
    width: 32px;
    height: 170px; 
    background:#959595; 
}
.tytul  {
	color: white;
	margin-topx: -650px;
	margin-left: 425px;
	borderx: 1px dashed yellow;
	margin-top:20px;
	z-index: 300;
	font: normal 20px 'Droid Serif', Georgia, Arial;
	color:rgba(180,150,180, .8);
	}
	
.tytul2  {
	font: normal 22px 'Droid Serif', Georgia, Arial;
	color:rgb(255,255,255);
	margin-topx: -650px;
	margin-left: 20px;
	borderx: 1px dashed yellow;
	margin-top:20px;
	z-index: 300;
	
	}
	
imgx
{
position:relative;
left:0px;
top:0px;
border:0px;
z-index:-1;
}


/* FOTO jako teuka dla menu*/

#home
 { 
background:url(pic/strona-home.jpg) top left no-repeat;
}
#biography { 
background:url(pic/strona-bio.jpg) top left no-repeat;
}
#recent{ 
background:url(pic/strona-koncert.jpg) top left no-repeat;
}
#awards{ 
background:url(pic/strona-award.jpg) top left no-repeat;
}
#charitable{ 
background:url(pic/fotel_polowa.jpg) top left no-repeat;
}
#reference{ 
background:url(pic/strona-oczy.jpg) top left no-repeat;
}
#critics{ 
background:url(pic/strona-sala.jpg) top left no-repeat;
}
#gallery{ 
background:url(pic/strona-fortepian.jpg) top left no-repeat;
}
#events{ 
background:url(pic/strona-sala-kadr.jpg) top left no-repeat;
}
#recordings{ 
background:url(pic/strona-kwiaty-2.jpg) top left no-repeat;
}
#contact{ 
background:url(pic/strona-fotel-2.jpg) top left no-repeat;
}

.ubaplayer-controlsx a { color: blue; text-decoration: none; }
  
li.playingx a { color: red; }



.teuko { 
position: absolute;
    top: 0px;
	margin-left: 400px; 
    width: 550px;
    height: 667px; 
    background:rgba(50,20,50, .8); 
}

.teuko3 { 
position: absolute;
    top: 0px;
	margin-left: 50px; 
    width: 550px;
    height: 667px; 
    background:rgba(70,50,70, .9); 
}

.teuko2 { 
position: absolute;
    top: 0px;
	margin-left: 400px; 
    width: 550px;
    height: 667px; serif
    backgroundx:rgba(50,20,50, .9); 
}

#plyta {
width:200px;
margin: 20px 0px 0px 30px; 
floatx:left; 
}

#plyta img  {
floatx:left;
padding:10px;
box-shadow:5px 5px 8px rgba(0,0,0,.4);
margin:10px;
}

.bio  {
width:470px;
font-size: 12px;
font-familyx: 'Droid Serif', Arial,sans-serif;
margin: 20px 0px 0px 0px;
color: rgb(255,255,255);
line-height: 130%;
font-family: 'Droid Serif', serif;
text-alignx: center;
}
.content_scroll div.centertxt  {
text-align: left;
font-size: 13px;
font-style: italic;
line-height: 130%;
}

p.margin_jest { 
	margin-top: 5px;
	paddingx: 30px;
	font-sizex: 30px;
	font-weight: bold;
	heightx: 40px;
	colorx:red;
	floatx:left;
	clearx: both;
	}


.muza { 
positionx: relative;
marginx: -600px 0px 0px 200px;
width: 400px;
borderx: 1px solid red;}
.concert {margin-top: 20px;float:left;}
.concert img { height:80px; float:left; padding-right: 5px; padding-top: 5px; text-align: left; }
.concert img{ opacity: 0.3 }
.concert  img:hover  { opacity: 1.0}

.pianist { heightx:200px; float:left; padding-right: 5px; padding-top: 5px; text-align: left; }
.pianist img{ opacity: 0.3 }
.pianist  img:hover  { opacity: 1.0}
.pianist img { heightx: 80px; float:left; padding-right: 5px; padding-top: 5px; text-align: left;}
.example-imagex img { height:200px}

#motyw  {
widthx:40px;
heightx: 40px;
z-index: 800;
margin: -650px 0px 0px 965px;
}


.subtytul-awards { font:  normal 15px 'Droid Serif', serif; text-align:left; margin-bottom:0px; margin-top:12px; color:rgb(255,255,255);}


.chari  img  { height:110px; floatx:left; padding-right: 8px; padding-top: 8px; text-alignx: left; opacity: 0.3}
.chari  img:hover  {  opacity: 1.0}



.ref img  { height:110px; float:left; padding-right: 8px; padding-top: 8px; text-align: left;opacity: 0.3}
.ref img:hover  {opacity: 1.0;}


.subtytul-chari { font: normal 15px  'Droid Serif', Georgia; text-align:left; margin-bottom:10px;}
.subtytul { font:  normal 15px 'Droid Serif', Georgia; text-align:left; margin-bottom:0px; margin-top:50px;clear: both;}
.subtytul2 { font:  normal 15px 'Droid Serif', Georgia; text-align:left; margin-bottom:5px; margin-top:10px; color:rgb(255,255,255);}
.subtytul-concert { font: normal 15px 'Droid Serif', Georgia; text-align:left; margin-top: 0px; }
.subtytul2 a {text-decoration:none; color:rgba(255,255,255, .6); font:  normal 15px 'Droid Serif', Georgia;}
.subtytul2 a:hover {text-decoration:none; color:rgba(220,200,200, 1)}

.awards-dif img  { height:110px; floatx:left; padding-right: 8px; padding-top: 8px; text-align: left; opacity: 0.3}
.awards-dif img:hover {opacity: 1.0}
.awards-dif  {floatx:left;}


/* ---------------------------------- KONTAKT --------------------------------- */
.kontakt { 
	margin-left: 4px;
	margin-top:0px;  
	font: normal 13px 'Droid Serif', Georgia, Arial;
	line-height:20px;
	color: rgb(255,255,255);	
	}
	.kontakt a {
	color: rgb(255,255,255);
	text-decoration:none; 
	}
	.kontakt a:hover {
	color: rgba(255,255,255, .5);
	text-decoration:none; 
	}
	
	
	
	
/* ---------------------------------- RECORDINGS --------------------------------- */	
.record 	img  { height:120px; float:left; padding-right: 0px; padding-top: 0px; text-alignx: left;}
.record {margin-leftx:0px;}
.autor-cd {margin:0px 0px 0px 30px; color: rgb(255,255,255);}
.example-image-link  {floatx:left; }
.cd-blok {
	margin-left: 0px;
	margin-top:25px;
	displayx:blok;
	borderx:1px solid red;
	floatx:left;
	backgroundx:rgba(50,20,50, .4); 
	width: 440px;
	height: 120px;
	font: normal 13px/20px 'Droid Serif', Georgia, Arial;
	line-heightx: 22px;
	
	}	
.cd-blok img  { opacity: 0.8;}
.cd-blok img:hover  { opacity: 1.0;}
	

.ubaplayer-controlsx a:hover {
color:grey;
}
.record .ubaplayer-controls  {
width: 300px;
height: 20px;
borderx: 1px solid rgb(70,50,70);
borderx: 1px solid blue;
line-heightx:150px;
margin-top:50px;
margin-left: 150px;
position:absolute;
}
/* ---------------------------------- CRITICS --------------------------------- */	



#critics-01	{ 
	font-family: 'Droid Serif', Georgia, Arial, Helvetica, sans-serif;
	width: 700px;
	display:none;
	color:rgb(70,20,70);
	}
#critics-live  { 
	font-size: 10px;
	font-family: 'Droid Serif', Georgia;
	width: 500px;
	display:none;
	line-height:20px; 
	color:rgb(70,20,70);
	backgroundx: #999;
	}
#critics-chopin-v1  { 
	font-size: 15px;
	font-family: 'Droid Serif', Georgia;
	width: 500px;
	display:none;
	line-height:20px; 
	color:rgb(70,20,70);
	backgroundx: #321b32;
	}
#critics-chopin-v2  { 
	font-size: 15px;
	font-family: 'Droid Serif', Georgia;
	width: 500px;
	display:none;
	line-height:20px; 
	color:rgb(70,20,70);
	backgroundx: #999;
	}		
#critics-liszt  { 
	font-size: 15px;
	font-family: 'Droid Serif', Georgia;
	width: 500px;
	display:none;
	line-height:20px; 
	color:rgb(70,20,70);
	backgroundx: #999;
	}	
#critics-reflections  { 
	font-size: 15px;
	font-family: 'Droid Serif', Georgia;
	width: 500px;
	display:none;
	line-height:20px; 
	color:rgb(70,20,70);
	backgroundx: #999;
	}


	
h1.critic-tyt {font-size:20px}	
.critic img {height: 110px; width:110px; float:left; padding-right: 8px; padding-top: 8px; text-alignx: left;opacity: 0.3}	
.critic img:hover {opacity: 1.0}
.critic  {float:left; margin-bottom: 20px;}	

.critic-music img {height: 110px; width:110px; float:left; padding-right: 8px; padding-top:8px; text-alignx: left; margin-topx:30px;opacity: 0.3}
.critic-music img:hover {opacity: 1.0}
.critic {margin-top:0px}

.events img  {
	height: 110px; 
	width: 110px;
	padding-right:8px;
	opacity: 0.3;
	border: none;
	}
.events img:hover  {
	opacity: 1.0
	}

.blok-tresc  {
font: normal 15px 'Droid Serif', Georgia;
}
.menu a.jm {colorx: green;}
a.jm.active  {colorx: pink;}
.activex {color: pink;}
.test1  {height: 10px; width:20px;background:red}
.test2  {height: 10px; width:30px;background:blue; displayx:none;}

 .logo img {width: 175px;margin-top:25px;margin-left:15px;position:relative;}
  .opacity {opacity:0.7}
  .opacity2 {opacity:0.5}
#tabs li a.current {color:  #555;}

p.copyright {font: normal 10px Verdana,Arial; padding-top: 0px; color: gray; height:20px; width:1000px;floatx:rigth;}
.design {margin-left: 580px; floatx:rigth;}
.design a { color:grey; text-decoration: none; }
.design a:hover {color:white;}

.baner {clearx:both; heightx:100px; margin-top:10px;positionx:relative;float:left;}
a { outline:none }
a img { border:none }