/* info -------------------------------------------------------- Start: 24.1.2014. Name: Lutka od soli Author: BozooArt, www.bozooart.com */ /* Colors ----------------------------------------------- #000 = black #97999c = gray #ec008c = pink #22428f = blue #ff0000 = red #fa7400 = orange #750077 = purple #8AAC03 = green #07ABF4 = aquablue /* Normalize ----------------------------------------------- */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; margin: 0; font-weight: normal; } ol, ul { list-style: none; } address, caption, cite, code, dfn, th, var { font-style: normal; font-weight: normal; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0; padding: 0; margin: 0; } caption, th { text-align: left; } hr { display: none; } legend { display: none; } input, textarea, select { font-family: Arial, Helvetica, sans-serif; color: #6d6d6d; } img { margin: 0; padding: 0; } a { text-decoration: none; color: #ff0000 } a:hover { border: none; text-decoration: none; color: #444; } a:focus { outline: none; } .clr { clear: both; } .center { text-align: center; } /* Fonts ----------------------------------------------- */ @font-face { font-family: 'Litterbox'; src: url('font/litterbox-webfont.eot'); src: url('font/litterbox-webfont.eot?#iefix') format('embedded-opentype'), url('font/litterbox-webfont.woff') format('woff'), url('font/litterbox-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SourceSans'; src: url('font/sourcesanspro-regular-webfont.eot'); src: url('font/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'), url('font/sourcesanspro-regular-webfont.woff') format('woff'), url('font/sourcesanspro-regular-webfont.ttf') format('truetype');font-weight: normal; font-style: normal; } /* General ----------------------------------------------- */ body { font: 16px/1.6em 'Litterbox', Arial, Helvetica, sans-serif; color: #444; text-align: left; background: #fff url(img/bg.jpg) center -20px no-repeat; } #container { width: 980px; margin: 0 auto; padding: 20px 0 0 0 } #nav { float: right; transform:rotate(2deg); -ms-transform:rotate(2deg); -webkit-transform:rotate(2deg); height: 30px; margin-bottom: 30px } #nav li { display: inline; margin-left: 50px; } #nav li a { font-size: 30px; padding-bottom: 15px; } #nav li a:hover, #nav li.active a { background: url(img/link-hover.png) no-repeat } #nav li.about a { color: #750077; } #nav li.listen a { color: #ff0000; } #nav li.order a { color: #22428f; } #nav li.impressum a { color: #fa7400; } #nav li.about a:hover, #nav li.about.active a { background-position: 27px 32px } #nav li.listen a:hover, #nav li.listen.active a { background-position: -103px 32px } #nav li.order a:hover, #nav li.order.active a { background-position: -258px 28px } #nav li.impressum a:hover, #nav li.impressum.active a { background-position: -400px 30px } h1 { font-size: 90px; transform:rotate(-4deg); -ms-transform:rotate(-4deg); -webkit-transform:rotate(-4deg); clear: both; line-height: .8em; width: 420px; margin-top: 10px; } h1 a { color: #22428f; } #subtitle { color: #97999c; font-size: 20px} #subtitle ul { width: 170px } #subtitle li.l1:before { content:"*"; position: absolute; margin: 4px 0 0 -15px; color: #00aeef; } #subtitle li.l1:after { content:"*"; position: absolute; margin: 4px 0 0 8px; color: #fa7400; } #subtitle li.l2 { text-align: center; } #subtitle li.l2 span { display: block } #subtitle h2 { font: 18px 'SourceSans', sans-serif; margin: 20px 0 0 230px; color: #363b44; text-transform: uppercase; letter-spacing: .07em } #content { padding-bottom: 20px; position: relative } .hello { width: 560px; height: 520px; background: url(img/hello-bg.png) no-repeat; padding: 80px 100px 0 80px; text-align: center; margin: -80px -30px 0 0; float: right } .hello h3 { font-size: 40px; color: #ec008c; margin-bottom: 20px; } .hello-text { font: 16px 'SourceSans', sans-serif; } .hello p { margin-bottom: 20px; } .contact { width: 608px; height: 592px; background: url(img/contact-bg.png) no-repeat; padding: 60px 60px 0 60px; margin: -40px -30px 0 0; float: right; } .contact h3 { font-size: 40px; color: #22428f; margin-bottom: 10px; text-align: center; } .contact .note { font: 14px 'SourceSans', sans-serif; margin-bottom: 40px; } .contact .note strong { font-size: 22px; color: #ec008c; } .contact p { margin-bottom: 20px; } .contact-info { margin: 30px 0 0 !important; font: 14px 'SourceSans', sans-serif; margin-bottom: 40px; } .contact-info span { } .contact-info strong { } .contact.thanks { padding-top: 160px; height: 492px; font-size: 50px; } .contact.thanks h3 { font-size: 100px; line-height: 1em; margin-bottom: 30px; } .contact.thanks .note { text-align: center; font-size: 30px; } #audio { position: absolute; margin: -10px 0 0 30px } #audio a { display: block !Important; width: 33px; height: 28px; background: url(img/sound.png) no-repeat; text-indent: -9999em; cursor: pointer; } #audio a:hover, #audio a.off { background-position: 0 -28px } #form { text-align: left } #form span { display: inline-block; width: 180px; text-align: right; font-size: 24px; margin-right: 20px; } #form .in4 span { display: block; float: left; margin-top: 10px } #form .in1 { color: #8AAC03 } #form .in2 { color: #750077 } #form .in3 { color: #ec008c } #form .in4 { color: #07ABF4 } #form .in4 span { margin-right: 25px; } .input-text { border: 1px solid #EAEAEA; width: 350px; padding: 10px; color: #ccc; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .input-text:focus, #form textarea:focus { color: #000; } #form textarea { border: 1px solid #EAEAEA; width: 350px; padding: 10px; color: #ccc; height: 110px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; font-size: 13px; } #form button { background: none; border: none; font: 30px 'Litterbox', sans-serif; color: #ec008c; border-bottom: 1px solid #ec008c; cursor: pointer; float: right; margin-right: 20px; width: 70px; padding: 0; height: 35px; } #form button:hover { color: #444 } .impressum-holder { width: 370px; height: 548px; padding: 60px 60px 0 90px; margin: -100px -80px 0 0; background: url(img/impressum-bg.png) no-repeat; float: right } .impressum-holder ul { padding: 0 50px 0 20px; } .impressum-holder h3 { font-size: 40px; color: #fa7400; margin-bottom: 30px; } .impressum-holder li { font: 16px 'SourceSans', sans-serif; color: #697180; margin-bottom: 15px; } .impressum-holder li strong { color: #000; font-weight: normal; } .impressum-holder li span { font: 30px 'Litterbox', sans-serif; position: absolute; margin: -2px 0 0 -20px; } .impressum-holder li.im1 span { color: #ff009c; } .impressum-holder li.im2 span { color: #2e3192; } .impressum-holder li.im3 span { color: #827b00; } .impressum-holder li.im4 span { color: #00aeef; } .impressum-holder li.im5 span { color: #760078; } .impressum-holder li.im6 span { color: #fa7400; } .impressum-holder li.im7 span { color: #89ae00; } .impressum-holder li.im8 span { color: #ff0000; } .about-holder { width: 256px; height: 566px; background: url(img/about-bg.png) no-repeat; padding: 60px 60px 0 90px; margin: -100px -30px 0 0; float: right } .about-holder h3 { font-size: 40px; color: #fa7400; margin: 40px 0 30px; color: #fff; } .about-holder ul { margin: 0 0 0 20px } .about-holder li { list-style-type: disc; font: 20px 'Litterbox', sans-serif; margin-bottom: 20px; line-height: .8em } .about-holder li a { color: #fff; font: 16px 'SourceSans', sans-serif; } .about-holder li a:hover, .about-holder li.active a { color: #fa7400; } .about-holder li.ab1, #quote #ab1 h3 { color: #fa7400 } .about-holder li.ab2, #quote #ab2 h3 { color: #ec008c } .about-holder li.ab3, #quote #ab3 h3 { color: #07ABF4 } .about-holder li.ab4, #quote #ab4 h3 { color: #aedc02 } .about-holder li.ab5, #quote #ab5 h3 { color: #ff0000 } .about-holder li.ab6, #quote #ab6 h3 { color: #8aac03 } #quote h2 { font-size: 36px; line-height: .8em; margin-bottom: 20px; } #quote h2 span { font-size: 30px; } #quote h3 { font-size: 36px; line-height: 1em; margin-bottom: 20px; } .quote-text { font: 14px 'SourceSans', sans-serif; line-height: 1.5em; letter-spacing: 1px } .quote-text p { margin-bottom: 20px; } #quote #ab1 { background: url(img/about1-bg.png) no-repeat; width: 576px; height: 301px; position: absolute; z-index: 100; top: -100px; left: -60px; padding: 110px 90px 60px; display: none } #quote #ab2 { background: url(img/about2-bg.png) no-repeat; width: 552px; height: 527px; position: absolute; z-index: 100; top: -100px; left: -60px; padding: 90px 80px 60px; display: none } #quote #ab3 { background: url(img/about3-bg.png) no-repeat; width: 490px; height: 713px; position: absolute; z-index: 100; top: -100px; left: 00px; padding: 90px 80px 60px; display: none } #quote #ab4 { background: url(img/about1-bg.png) no-repeat; width: 576px; height: 331px; position: absolute; z-index: 100; top: -100px; left: -60px; padding: 80px 90px 60px; display: none } #quote #ab5 { background: url(img/about5-bg.png) no-repeat; width: 515px; height: 855px; position: absolute; z-index: 100; top: -100px; left: -30px; padding: 100px 90px 60px 100px; display: none } #quote #ab6 { background: url(img/about6-bg.png); width: 533px; height: 892px; position: absolute; z-index: 100; top: -100px; left: -40px; padding: 60px 90px; display: none } #close a { display:block; background: url(img/close.png) no-repeat; width: 23px; height: 26px; position: absolute; z-index: 1000; left: 560px; text-indent: -9999em; top: -40px; } .hello img { float: right; margin-left: 15px } #close a:hover { background-position: 0 bottom; } #playlist { float: right; background: url(img/playlist-bg.png) no-repeat; width: 359px; height: 1183px; padding: 60px 80px 100px 110px; margin: -140px -30px 0 -100px } #playlist li { margin: 0px 0 11px; } #playlist li a { display: block; font-size: 26px; color: #cf001d; } #playlist li span { font: 14px 'SourceSans', sans-serif; line-height: 1.1em; display: block; letter-spacing: .05em } #playlist li a:hover { color: #000; } #playlist .playing { color: #97999c } #playlist .playing a { color: #000; } #playlist .playing:before { content: '►'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 4px; color: #000; font-size: 13px; } #player-wrapper { position: relative; z-index: 15 } #player { background: url(img/playing-bg.png) no-repeat; width: 447px; height: 176px; position: absolute; z-index: 10; left: -30px; padding: 50px 70px } #player h3 { font-size: 40px; color: #000;line-height:1.4em; margin-left: 27px; } #audio-meta { position: absolute; z-index: 10000 } #display-track h4 { color: #fff; font-size: 30px; } #display-track span { display: block ; line-height: 1em; color: #fff; font: 14px 'SourceSans', sans-serif; margin-bottom: 10px; } #display-track { height: 80px; overflow: hidden; } #display-track li { display: none; } #display-track li.show { display: block; } .audiojs { width: 460px; height: 36px; overflow: hidden; font: 14px 'SourceSans', sans-serif; margin-left: 10px; margin-top: 83px } .audiojs .play { background: url(img/play.png) no-repeat; } .audiojs .pause { background: url(img/pause.png) no-repeat; } .audiojs .play-pause, .audiojs .pause { width: 26px; height: 25px; padding: 0; margin: 0px; float: left; overflow: hidden; margin-top: 5px; } .audiojs .pause { margin-top: 0; } .audiojs .play:hover, .audiojs .pause:hover { background-position: 0 -24px } .audiojs .scrubber { position: relative; float: left; width: 280px; background: #fff; height: 2px; margin: 17px 10px; border-left: 0px; border-bottom: 0px; overflow: hidden; } .audiojs .progress { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #ccc; z-index: 1; } .audiojs .loaded { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #000; } .audiojs .time { float: left; height: 36px; line-height: 36px; margin: 0px 0px 0px 6px; padding: 0px 6px 0px 6px; color: #cf001d; } .audiojs .time em { padding: 0px 2px 0px 0px; color: #f9f9f9; font-style: normal; color: #fff; } .audiojs .time strong { padding: 0px 0px 0px 2px; font-weight: normal; color: #000; display: none; } #success { background: #8AAC03; color: #fff; padding: 5px 20px; font: 16px 'SourceSans', sans-serif; margin: 10px 0 10px 50px; width: 460px; text-align: center; display:none } #error { background: #cf001d; color: #fff; padding: 5px 20px; font: 16px 'SourceSans', sans-serif; margin: 10px 0 10px 50px; width: 460px; text-align: center; display:none } .error { display: block; font: 16px 'SourceSans', sans-serif; position: absolute; margin: 0 0 0 200px; text-align: right; width: 375px; } #playlist ul { position: relative; z-index: 2000 } #playlist li.playing:before { font-size: 40px; color: #fff; position: absolute; top: 190px; width: 460px !important; display: block; left: -530px; z-index: 100 !important; } #playlist li.playing:after { color: #fff; position: absolute; top: 220px; width: 400px !important; display: block; left: -520px; z-index: 1000; font: 14px 'SourceSans', sans-serif; } #pl1.playing:before { content:"1. Lutka od soli i more"; } #pl1.playing:after { content:"Priča mnogih kultura / Vrijednost istine kroz vlastito neposredno iskustvo / Svi uzrasti"; } #pl2.playing:before { content:"2. Košulja sretnoga čovjeka"; } #pl2.playing:after { content:"Vrijednost mira kroz samozadovoljstvo naspram nezadovoljstva sa sobom / 9 do 15 godina"; } #pl3.playing:before { content:"3. Težina snježne pahuljice"; } #pl3.playing:after { content:"Nenasilje kroz štovanje drugih, trpeljivost i svjesnost cjeline / 9 do 15 godina"; } #pl4.playing:before { content:"4. Oblačić"; } #pl4.playing:after { content:"Vrijednost mira kroz samozataju i samoživost / 6 do 9 godina"; } #pl5.playing:before { content:"5. Starac i bijeli konj"; } #pl5.playing:after { content:"Kineska priča / Mir kroz spokoj u dobru i zlu / 9 do 15 godina"; } #pl6.playing:before { content:"6. Vedri vragoljan"; } #pl6.playing:after { content:"Iz baštine japanskog zena / Vrijednost mira kroz samozadovoljstvo i nezadovoljstvo sa sobom / 9 do 15 godina"; } #pl7.playing:before { content:"7. Čudotvorni kovčežić"; } #pl7.playing:after { content:"Hrvatska priča / Vrijednost mira kroz samosagledavanje / 9 do 15 godina"; } #pl8.playing:before { content:"8. Zrcalo iz Matsuyame"; } #pl8.playing:after { content:"Japanska priča / Vrijednost mira kroz čistoću srca / 9 do 12 godina"; } #pl9.playing:before { content:"9. Priča o Ivanu"; } #pl9.playing:after { content:"Keltska priča / Vrijednost mira kroz pročišćenje nečistih misli / 9 do 12 godina"; } #pl10.playing:before { content:"10. Kako su nastali leptiri"; } #pl10.playing:after { content:"Indijanski mit plemena papago / Nenasilnost kroz vrline složnosti, ravnopravnosti i jedinstvenosti / 6 do 12 godina"; } #pl11.playing:before { content:"11. Čavli u ogradi"; } #pl11.playing:after { content:"O nenasilnosti kroz blag i srdačan govor naspram grubog i uvredljivog / 9 do 12 godina"; } #pl12.playing:before { content:"12. Ručak u paklu i raju"; } #pl12.playing:after { content:"Priča mnogih kultura / Uči nenasilnosti kroz službu bližnjemu za razliku od zanemarivanja bližnjega / 9 do 15 godina"; } #pl13.playing:before { content:"13. Kip u mramoru"; } #pl13.playing:after { content:"Prikazuje traganje za istinom nasuprot tromosti duha i tijela i nemaru / 9 do 12 godina"; } #pl14.playing:before { content:"14. Klin čorba"; } #pl14.playing:after { content:"Švedska priča / O ispravnom djelovanju kroz složnost / 9 do 15 godina"; } #pl15.playing:before { content:"15. Odgovor se nalazi u tvojim rukama"; font-size: 35px !important } #pl15.playing:after { content:"Priča mnogih kultura / O nenasilnosti kroz odgovornost i čuvanje okoliša / 6 do 12 godina"; } #pl16.playing:before { content:"16. Plop"; } #pl16.playing:after { content:"Tibetanska, nepalska, mongolska basna / O miru kroz promišljenost i razbor / 6 do 9 godina"; } #pl17.playing:before { content:"17. Mala vila"; } #pl17.playing:after { content:"Kineska priča / Mir kroz spokoj u dobru i zlu / 9 do 15 godina"; } #pl18.playing:before { content:"6. Vedri vragoljan"; } #pl18.playing:after { content:"Naša narodna pripovijetka / O ljubavi kroz vjernost / Svi uzrasti"; } #footer { clear: both; font-size: 30px; color: #fff; text-shadow: 0 1px 0 #000; text-align: right; } #footer p { height: 100px; padding-top: 2px; background: url(img/face.png) no-repeat; padding-left: 40px; width: 300px; float: right; margin-bottom: 10px } #footer a { color: #22428f; } #footer a:hover { color: #ec008c; }