style.css

/* universal */
*{margin:0;padding:0}

html,body{width:100%;height:100%;}
body {background-color:black;
		background: url(img/texturay.jpg)  repeat-y fixed left top;
		background-size:100%;
			
		}
img{border:0}
.clear{clear:both;}
#wrapper {
		min-width: 800px;
		max-width:1200px;
		margin: 0 auto ;
		height:100%;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
		padding: 140px 0px 0px;
		-webkit-box-sizing:border-box;
		
		
		
			}
#content{  
		  
		  min-height:100%;
		  -moz-box-sizing:border-box;
		  padding-bottom:100px;
		  background-color: rgba(255,255,255,0.65);
		  margin: 0 50px;
		  position:relative;
		  -webkit-box-sizing:border-box;
		  -moz-box-sizing:border-box;
		  box-sizing:border-box;
		  
		  
		  
			
			}
#content[white=no]{ background-color: transparent;}
#back {   position:fixed;
		  top:0;
		  left:0;
		  background-image: url(img/texturay.jpg);
		  background-position:top left;
		  background-size:100%;
		  height:140px;
		  width: 100%;
		  z-index:10;
		  
		  


			}
			
#header { position:fixed;
		  top:0;
		  left:50%;
		  height:135px;
		  width: 1200px;
		  z-index:1;
		  margin-left:-600px;
		  


			}
#footer {position:fixed;
		bottom:0;
		left:0;}


#logo{display:inline-block;
		margin-left:20px;
		float:left;
		width:200px;
		height:177px;}
#logo img{height:177px; width:210px;}
#header   div#menu {
			 
			 margin-left: 220px;
			 margin-right:50px;
			 margin-top:35px;
			 position:relative;
			 
			 
			 }
#header div > ul{list-style-type: none;
			display:inline-block;
			background-color:rgba(255,255,255,0.24);
			width:100%;
			border-radius:0.4em 0 0 0.6em;
			 border: solid 2px black;
			 border-width: 3px 0 3px 3px; 
			
			}
#header >div >ul >li >a{text-decoration:none;
			text-transform:uppercase;
			font-family:  'Oswald',​ Arial,​ sans-serif;
			font-weight:300;
			color:white;
			display:inline-block;
			
			height:100%;
			padding: 2px 10px;
			}
#header >div >ul > li:hover>a, .ajax.active{background-color:rgba(0,0,0,0.5)}			
#header >div>ul > li{float:left;
			
			font-size: 2.75em;
			text-align:center;
			}

#header div >ul ul {display: none;}
#header div >ul li:hover ul  {display: block;
						position:absolute;
						background-color: rgba(0,0,0,0.7);
						list-style:none;
						font-family: 'Oswald';
						color: white;
						
						}
#header div >ul > li > ul > li > a{padding: 1% 3%;
						text-decoration:none;
			text-transform:uppercase;
			font-family:  'Oswald',​ Arial,​ sans-serif;
			font-weight:300;
			color:white;
			display:inline-block;
			width:94%;
			
						
						}
#header div >ul > li > ul > li:hover > a{color:black}
#header div >ul > li > ul > li:hover {background-color:rgba(255,255,255,0.7);}
/*#flag{position:absolute;
		height:50%;width:40px;
		background-color:rgba(100,100,100,0.5);
		bottom: 5px; 
		right:-46px;
		border-width:0;
		border-right-width:3px;
		border-color:black;
		border-style:solid;
		}
#flag:before{content:"";
			width:0;
			height:0;
			position:absolute;
			border-top: 36px solid transparent;
	    	border-left:40px solid rgba(100,100,100,0.5);
			top: -36px;
			right:0px;
			
			
			}
#flag:after{content:"";
			width:0;
			height:0;
			position:absolute;
			border-bottom: 36px solid transparent;
	    	border-right:40px solid rgba(100,100,100,0.5);
			top: 44px;
			right:0px;
			
			
			}*/
#flag{height:86%;
		width:40px;
		background-color:rgba(255,255,255,0.5);
		border-width: 4px 3px 4px 0;
		border-style: solid;
		border-color:black;
		transform: skew(0deg,40deg);
         -ms-transform: skew(0deg,40deg); /* IE 9 */
		-webkit-transform: skew(0deg,40deg); /* Safari and Chrome */
		position:absolute;
		top:18px; right:-46px;
		border-radius: 0 0px 0px 0;
		}
#back1 {   position:fixed;
		  bottom:0;
		  left:0;
		  background-image: url(img/bottom.jpg);
		  background-position:center center;
		  background-repeat: no-repeat;
		  height:91px;
		  width: 100%;
		  z-index:10;
		  background-color:black;
		  box-shadow: 0 0 0px black;
		  
		  


			}
#back1:before {   position:fixed;
			content:"";
		  bottom:0;
		  left:0;
		  background-image: url(img/bottom.jpg);
		  background-position:center center;
		  background-repeat: no-repeat;
		  height:91px;
		  width: 100%;
		  z-index:0;
		  background-color:black;
		  box-shadow: 0 -10px 50px black;
		  
		  


			}
			
#footer{ margin:0 auto;
		  position:relative;
		  background-color: rgba(255,255,255,0.5);
		  width:1100px;
		  height:20px;
		  margin-top: 20px;
		  padding: 20px 0;
		  
		  
		  


			}
#footer:before{position:absolute;
				content: "";
				width:0px;
				height: 0px;
				border-top: transparent solid 60px;
				border-right: rgba(255,255,255,0.5) solid 140px;
				top:0;
				left: -140px;
				}
#footer:after{position:absolute;
				content: "";
				width:0px;
				height: 0px;
				border-top: transparent solid 60px;
				border-left: rgba(255,255,255,0.5) solid 140px;
				top:0;
				right: -140px;
				}
#footer >div{ margin:0 auto;
		  position:relative;
		  width:1000px;
		  height:30px;
		  margin-top: 0px;
		  
		  
		  }
	      /*#footer div:after{position:absolute;
				content: "";
				width:0px;
				height: 0px;
				border-top: transparent solid 27px;
				border-left: rgba(255,255,255,1) solid 30px;
				top:-30;
				right: -30px;
				}*/
#footer div.gradient, #footer div:after, #footer div:before{
background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0%, rgba(255, 247, 247, 0)), color-stop(100%, #ffffff));
background-image: -webkit-linear-gradient(top, rgba(255, 247, 247, 0) 0%, #ffffff 100%);
background-image: -moz-linear-gradient(top, rgba(255, 247, 247, 0) 0%, #ffffff 100%);
background-image: -ms-linear-gradient(top, rgba(255, 247, 247, 0) 0%, #ffffff 100%);
background-image: -o-linear-gradient(top, rgba(255, 247, 247, 0) 0%, #ffffff 100%);
background-image: linear-gradient(to bottom, rgba(255, 247, 247, 0) 0%, #ffffff 100%);
vertical-align:top;}
#footer div.gradient iframe{display:inline-block;vertical-align:top;}
/* koniec universal */
/* uvod zaciatiok*/

#content{font-family: arial;
		font-size: 1.1em;
		text-align:center;
		}
#slidesw{
		width:100%;
		
		overflow-x:hidden;
		overflow-y:hidden;
		margin: 0 auto;
		}
#slidesw #slides {width:1900%;
				margin-left:-00%;
				
				
			}
#slides >div{float:left;
			width:5.26315789%;
			/*height:464px;*/
			text-align:justify;
			background-color:rgba(255,255,255,.5);
			}
#slides >div img,#slides >div iframe{width:75%;
			box-shadow: 0 0 10px black;
			float:right;
			margin-left:1%;
			position:relative;margin:1%;}

#slides >div #text{padding:1%;
				
				color:black;
				min-height:420px;/*toto treba pri zmen8ch rozlisenia upravit*/}
#slider {width:100%;
		height: 60px;
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.5)), to(transparent));
		background: -moz-linear-gradient(top, rgba(255,255,255,.5), transparent);
		background: linear-gradient(top, rgba(255,255,255,.5),transparent );
		position:relative;
		}

#slider #gutter1{margin:-5px 5% 0;
				box-shadow: 0 0 5px black inset;
				height:10px;
				border-radius:5px;
				background-color: black;
				position:relative;
				font-size:10px;
				cursor:pointer;
				
				}
#slider:hover #gutter1{margin:40px 5%;}
#slider {height:40px;
	}	
#slider:hover{height:133px; }	
#slider #gutter1 div#desc div{display:none}	
#slider:hover #gutter1 div#desc div{display:block;}
#slider #gutter1 div#desc div{
							position:absolute;
							background-color:rgba(255,255,255,0.5);
							border:1px solid black;
							width:8.33333%;
							margin-left:-4.366666%;
							border-radius:5px;
							box-shadow:0 0 6px black inset;
							font-weight:bold;
							height: 30px;
							padding:5px .2%;
							cursor:pointer;
							
							
							
							}
#slider #gutter1 div#desc div:nth-child(2n+1){
									top:-47px;}
#slider #gutter1 div#desc div:nth-child(2n){top:15px;}
#slider #gutter1 div#desc div:nth-child(2n):before{content:'';
											height:0;
											width:0;
											border-bottom:6px solid black;
											border-left:6px solid transparent;
											border-right:6px solid transparent;
											position:absolute;
											top:-6px;
											left:43%;
											}
#slider #gutter1 div#desc div:nth-child(2n+1):before{content:'';
											height:0;
											width:0;
											border-top:6px solid black;
											border-left:6px solid transparent;
											border-right:6px solid transparent;
											position:absolute;
											bottom:-6px;
											left:43%;
											}
	#handle1			{
	position: absolute;
	top: -5px;
	left: 0;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	background: url(img/player.png) no-repeat -65px -5px;
	cursor: pointer;
	z-index:2;}
#cisla {float:right;
		clear:right;
		width:700px;
		margin: 1%; 
		text-align:center;
		background-color:rgba(255,255,255,.3); 
		box-shadow: 0 0 5px black; 
		font-size: 1.5em; 
		padding:5px 0;
		margin-top:1px}
#cisla h2{font-size: 1em;}
#cisla  ul {padding-left:40px; text-align:left;font-size:20px}
#cisla  ul li{list-style-type: square;margin: 5px 0; }
#left1{position: absolute;
        height: 46px;
		width:50px;
		background-image: url('img/prev.png');
		top:250px;
		left:-60px;
		cursor:pointer;
		transition: transform 0.5s;
		}
#right1{position: absolute;
        height: 46px;
		width:50px;
		background-image: url('img/next.png');
		top:250px;
		right:-60px;
		cursor:pointer;
		transition: transform .5s;}
#left1:hover, #right1:hover {transform: scale(1.5)}
	
#audio{width:200px; 
		height:30px;
		float:right;
		padding: 0 44px;
		position:relative;
		text-align:center;
		margin-right:63px;
		font-size:1.2em;
		}		
#audio_back{position:absolute;
			width: 44px;
			height:30px;
			left:0;
			top:-5px;
			background-image:url(img/audio/arrow_left.png);
			cursor:pointer;
			}
#go{		position:absolute;
			width: 44px;
			height:30px;
			top:-5px;
			right:0;
			background-image:url(img/audio/arrow_right.png);
			cursor:pointer;
			}
#mute     {	position:absolute;
			width: 50px;
			height:44px;
			background-image:url(img/audio/audio.png);
			right:-60px;
			bottom:4px;
			cursor:pointer;
			}
#description{cursor:pointer;}
/*uvod koniec*/
/*fotky zac*/
#content.fotky{background-color:transparent;}
#content.fotky a{width: 25%; 
				float: left;
				}
#content.fotky a img{display:block;}
#content.fotky a:nth-last-child(2), #content.fotky a:nth-last-child(3){width: 25%; position:relative; top: -50px;
				
				}

#content.fotky:hover  img{

    
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
	border:0;


				}
#content.fotky img:hover{

	filter: none; /* IE6-9 */
    -webkit-filter: grayscale(0%);
}
/*dab posledna foto*/
#content.fotky a.dab{position: relative; top:-231px; left:275px;}
/*fotky tanec posledne dve*/
#content.fotky a.none, #content.fotky a.none{width: 25%; position:relative; top: 0px;
				
				}
/*ucinkujuci*/
dt{color:white;text-shadow: 0 0 5px red;text-decoration: underline;
	line-height:15px;margin-top:10px}
dd{line-height:15px;display:inline-block;padding:0 5px ;color:white; text-shadow: 2px 2px 2px black}

#content>a>dl{display:block; height: 100%;margin-top: -10px;} 
#content>a{text-decoration:none;}
dl:nth-child(odd){}
dl img{position:absolute;left:0;width:100%;z-index:-20;}
#content[white=no]>a, #content[white=no]>dl{display:inline-block; width: 33.3333333%; min-height: 150px;vertical-align:top;box-shadow:0 0 10px black inset;position:relative;z-index:0; overflow:hidden; background-color: rgba(0,0,0,0.5)}
#content>a dt{padding-top:10px}
/*ucinkujuci koniec */
/*ankety review */
#content #padding{padding:10px}
#content table{width:100%;border:0px;
				
				border-collapse:collapse}
#content table td{border-bottom:2px dotted black;
                width:50%;
				padding:10px;
				cursor:pointer;
				}
#content table td:nth-child(odd){border-right:2px dotted black;}
#content table tr:nth-last-child(1) td{border-bottom:0 dotted black;}
#content table td {text-align:justify;vertical-align:top}
#content table td img{float:left; margin-right:10px}
#content table td a:hover{background-color:rgba(0,0,0,0.5);
                      color:white;
					  }
#content table td a{color:black;
			     text-decoration:none;
				 display:block;
				 height:100%;
				 }
/*#content table td em{padding:10px;}*/
/*ankety konkretne*/
.col1 strong {display:list-item; margin-top:20px;list-style-type:square;}
.col1 >strong {margin-left:18px;}
.col1 strong:first-child{margin-top:0px;}
.col1 p{margin:0 0px 0 18px;}
.col1{
padding:20px;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
text-align:justify;
text-justify:inter-word;
}
#hlavicka{padding:10px;}
/* odpovedajuci*/
.col1 p strong.odpo{list-style-type:circle;margin-left:15px}
.col1  strong.odpo{list-style-type:circle;margin-left:30px}
.col1  ul {margin-left:30px}
.col1  ul  li{margin-bottom:10px}
.col1 img{display:block;
			margin: 10px auto;
			}
/*hudba*/
ul#playlist{
			width:33.3333%;
			
			float:right;
			position:relative;
			}
ul#playlist li {display:block;
			text-align: left;
			
			background-color:rgba(0,0,0,0.5);color:white;
			padding:10px;
			cursor:pointer;
			}
ul#playlist li.active, ul#playlist li:hover {font-style:italic;}
ul#playlist li.active:after, ul#playlist li:hover:after{content:'';
														position:absolute;
														height:0px;
														width:0;
														border-right:25px solid rgba(255,255,255,0.5);
														border-top:15px solid transparent;
														border-bottom:15px solid transparent;
														left:-28px;
														z-index:3;
														}
ul#playlist li.active .decoration{display:block;}
ul#playlist li:hover .decoration{display:block;z-index:2;}
ul#playlist li:nth-child(2n){background-color:rgba(255,255,255,0.5);color:black;}
ul#playlist  a{display:block; float:right;position:relative; width:25px; height:26px;background-repeat:no-repeat}
ul#playlist  li:nth-child(2n+1) a{background-image:url('img/white.png'); color:white;}
ul#playlist  li:nth-child(2n) a{background-image:url('img/black.png'); color:white;}
ul#playlist .decoration {width:200%;
						left:-200%;
						position:absolute;
						height:100%;
						overflow:hidden;
						top:0;
						display:none;
						
						}
ul#playlist .decoration  img{width:100%;}
ul#playlist .decoration  .autor{width:100%; 
								position:absolute;
								top:20px;
								color:white;
								text-align:center;
								}
ul#playlist .decoration  .spev{width:80%; 
								position:absolute;
								top:40px;
								color:white;
								text-align:center;
								background-color:rgba(255,255,255,0.5);
								margin:0 10%;
								border-radius:4px
								}						
/*html5 audio laYer*/
.player {
	display: block;
	height: 48px;
	position: relative;
	clear:both;
	
	-webkit-box-shadow: 0 -1px 0 rgba(20, 30, 40, .75);
	-moz-box-shadow: 0 -1px 0 rgba(20, 30, 40, .75);
	-o-box-shadow: 0 -1px 0 rgba(20, 30, 40, .75);
	box-shadow: 0 -1px 0 rgba(20, 30, 40, .75);
	border-top: 0px solid #c2cbd4;
	border-bottom: 0px solid #283541;
	background: #939eaa;
	background-color:rgba(0,0,0,0.5);
	cursor: default;
}

#playtoggle {
	position: absolute;
	top: 9px;
	left: 10px;
	width: 30px;
	height: 30px;
	background: url(img/player.png) no-repeat -30px 0;
	cursor: pointer;
}

#playtoggle.playing {
	background-position: 0 0;
}

#playtoggle:active {
	top: 10px;
}

#timeleft {
	line-height: 48px;
	position: absolute;
	top: 0;
	right: 0;
	
	width: 50px;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 1px 0 #546374;
}

#wrapper #timeleft {
	right: 0px;
}

#gutter {
	position: absolute;
	top: 19px;
	left: 50px;
	right: 50px;
	height: 6px;
	padding: 2px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	background: #546374;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#242f3b), to(rgba(255,255,255,.5)));
	background: -moz-linear-gradient(top, #242f3b, rgba(255,255,255,.5));
	background: linear-gradient(top, #242f3b, rgba(255,255,255,.5));
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .75) inset, 0 1px 0 rgba(176, 187, 198, .5);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .75) inset, 0 1px 0 rgba(176, 187, 198, .5);
	-o-box-shadow: 0 1px 4px rgba(0, 0, 0, .75) inset, 0 1px 0 rgba(176, 187, 198, .5);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .75) inset, 0 1px 0 rgba(176, 187, 198, .5);
}

#wrapper #gutter {
	right: 50px;
}

#loading {
	background: #fff;
	background: #939eaa;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eaeef1), to(#c7cfd8));
	background: -moz-linear-gradient(top, #eaeef1, #c7cfd8);
	background: linear-gradient(top, #eaeef1, #c7cfd8);
	-webkit-box-shadow: 0 1px 0 #fff inset, 0 1px 0 #141e28;
	-moz-box-shadow: 0 1px 0 #fff inset, 0 1px 0 #141e28;
	-o-box-shadow: 0 1px 0 #fff inset, 0 1px 0 #141e28;
	box-shadow: 0 1px 0 #fff inset, 0 1px 0 #141e28;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	display: block;
	float: left;
	min-width: 6px;
	height: 6px;
}

#handle {
	position: absolute;
	top: -5px;
	left: 0;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	background: url(img/player.png) no-repeat -65px -5px;
	cursor: pointer;
}

.player a.popup {
	position: absolute;
	top: 9px;
	right: 8px;
	width: 32px;
	height: 30px;
	overflow: hidden;
	text-indent: -999px;
	background: url(img/player.png) no-repeat -90px 0;
}

.player a.popup:active {
	background-position: -90px 1px;
}

/* @end */

/* @group popup */

.popup {
	overflow-y: hidden;
}

.popup #listen {
	width: 400px;
	height: 150px;
	border: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -75px 0 0 -200px;
	-webkit-animation: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
}

.popup #listen header h2 {
	line-height: 26px;
}

.popup #listen .photo {
	margin: 0;
	width: 100px;
	height: 100px;
}

.popup #listen .photo:after {
	border-right: 1px solid rgba(0, 0, 0, .1);
	-webkit-box-shadow: 1px 0 0 #fff;
	-moz-box-shadow: 1px 0 0 #fff;
	-o-box-shadow: 1px 0 0 #fff;
	box-shadow: 1px 0 0 #fff;
}

.popup #listen .player {
	top: 101px;
	left: 0;
	border-bottom: 0;
}

.popup #listen .photo img {
	width: 100px;
}

.popup #listen header {
	position: absolute;
	top: 0;
	left: 115px;
	padding: 11px 0;
	margin: 0;
	width: 285px;
	-webkit-background-size: 100px 75px;
	-moz-background-size: 100px 75px;
	background-size: 100px 75px;
	background-position: 175px 15px;
}
#content .loading{margin:100px auto;
					width:32px;
					height:32px;
					background-image:url('img/loading.gif');}