/* 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');}