/* info -------------------------------------------------------- Start: 01.04.2008. Author: BozooArt, www.bozooart.com Name: Skitnice - www.skitnice.hr */ /* Colors ----------------------------------------------- #72716f = dark gray, text #50422c = dark brown, date #4d7e90 = blue, titles #ede6ca = beige #f59c5b = orange 1 #ea5312 = orange 2 #ffd200 = yellow ----------------------------------------------- */ /* 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; } caption, th { text-align: left; } q:before, q:after { content:''; } hr { display: none; } legend { display: none; } input, textarea, select { font-family: Arial,Helvetica,sans-serif; } img { margin: 0; padding: 0; } /* General ----------------------------------------------- */ body { font: 65.2%/1.6 "Trebuchet MS", Arial,Helvetica,sans-serif; background: #000 url(images/bg.jpg) repeat-x; text-align: center; color: white; } a { } a:hover { text-decoration: none; } a:focus { outline: none; } blockquote { margin: 0 0 30px 50px; } /* Classes ----------------------------------------------- */ .clr { clear: both; } .left { float: left; } .red { color: #ed1c24; } .center { text-align: center; } .okvir { padding: 4px; border: 1px solid #9b9b9b; } .slika { float: left; padding: 2px; margin: 4px 10px 0 0; } .foto { margin-bottom: 50px; } h2, h3, h4 { clear: both; } #smoke { background: url(images/smoke.jpg) repeat-x 100% 0; width: 100%; } #container { width: 895px; margin: 0 auto; text-align: left; } h1 { position: absolute; margin-left: -9999em; text-indent: -9999em; } /* Content ----------------------------------------------- */ #content { float: left; width: 537px; } #stage { background: url(images/skitnice_main.jpg) no-repeat; width: 572px; height: 370px; } #insmoke { background: url(images/smoke.jpg) no-repeat; width: 220px; height: 155px; margin: 0 0 0 -174px; position: absolute } ul#nav { background: url(images/wet_floor.png); width: 529px; height: 37px; margin-left: -30px; padding: 18px 0 0 10px; } ul#nav li { display: inline; } ul#nav li span { background: url(images/square.png) no-repeat; width: 7px; height: 6px; display: block; text-indent: -9999em; float: left; margin: 2px 5px; } ul#nav li a { float: left; display: block; padding-bottom: 12px; text-indent: -9999em; height: 10px; } ul#nav li a:hover, ul#nav li.active a { border-bottom: 2px solid #ffd200; } ul#nav li.active a:hover { border-bottom: 2px solid #fff; } ul#nav li#naslovnica a { background: url(images/naslovnica.png) no-repeat; width: 101px; } ul#nav li#o_nama a { background: url(images/o_nama.png) no-repeat; width: 63px; } ul#nav li#repertoar a { background: url(images/repertoar.png) no-repeat; width: 91px; } ul#nav li#fotke a { background: url(images/fotke.png) no-repeat; width: 48px; } ul#nav li#video a { background: url(images/video.png) no-repeat; width: 47px; } ul#nav li#kontakt a { background: url(images/kontakt.png) no-repeat; width: 73px; } #nav_line { background: url(images/nav_line.gif) repeat-x; width: 508px; height: 3px; margin: -15px 0 30px -20px; } #floor { width: 476px; background: url(images/floor.jpg) repeat; border: 1px solid #605d5d; border-bottom: none; padding: 0 30px; font-size: 120%; } #floor a { color: #ffd200; } #floor #audioInfo { margin-bottom: 10px; } #floor h2#bandName { font-weight: bold; font-size: 160%; margin-bottom: 5px; text-transform:uppercase } #floor h2#listen { background: url(images/listen.png) no-repeat; width: 382px; height: 49px; text-indent: -9999em; margin: 0 0 17px 0; } #floor h2#lookUs { background: url(images/lookus.png) no-repeat; width: 382px; height: 32px; text-indent: -9999em; margin: 0 0 17px 0; } #floor #about { padding-bottom: 25px; } .player { background: url(images/player_bg.gif) repeat-y; width: 443px; height: 270px; margin-left: 10px; } .audioplayer { background: url(images/audioplayer.gif) repeat-y; width: 443px; height: 270px; margin-left: 10px; } #musicPlayerTop{ background: url(images/playerTape.png) no-repeat; width: 463px; height: 35px; } .playerBottom { background: url(images/player_bottom.png) no-repeat; width: 443px; height: 14px; margin-bottom: 70px; margin-left: 10px; } #floor #about { padding-bottom: 25px; } #floor #about p { margin-bottom: 20px; } .aboutSpace { line-height: 1.3em; background: url(images/player_bg.gif) repeat-y; width: 443px; } .aboutTop{ background: url(images/playerTape.png) no-repeat; width: 463px; height: 35px; margin-left: -10px; } .aboutBottom { background: url(images/player_bottom.png) no-repeat; width: 443px; height: 14px; margin-bottom: 70px; } .aboutSpace img { margin: 10px; padding: 2px; border: 1px solid black; float: left; } .aboutSpace div.meso { float: left; width: 230px; color: #4e392b; font-size: 90%; line-height: 1.3em; } .aboutSpace div.meso h2 { color: #1e6b7d; font-size: 140%; font-weight: bold; font-family: "trebuchet ms", arial, helvetica, sans-serif; padding: 8px 0 5px 0; } .aboutSpace .what { margin: 0 0 3px 0; } #tape1 { background: url(images/tape1.png) no-repeat; position: absolute; width: 94px; height: 66px; margin: -20px 0 0 -30px; } #tape2 { background: url(images/tape2.png) no-repeat; position: absolute; width: 89px; height: 80px; margin: -30px 0 0 380px; } /* Right Column ----------------------------------------------- */ #rightCol { float: left; width: 320px; margin-left: 34px; } #photos { background: url(images/photos.jpg) no-repeat; width: 356px; height: 414px; margin: 0 0 40px -37px; padding-top: 3px; } #slideshow { padding: 15px 0 0 46px; } #playing { padding: 110px 0 0 60px; } #playing a#power { background: url(images/power.gif) no-repeat; width: 96px; height: 21px; display: block; float: left; text-indent: -9999em; margin-right: 15px; } #playing a#power:hover { background-position: right; } #playing a#withoutPower { background: url(images/withoutPower.gif) no-repeat; width: 90px; height: 20px; display: block; float: left; text-indent: -9999em; } #playing a#withoutPower:hover { background-position: right; } #playing span { background: url(images/and.gif) no-repeat; width: 15px; height: 21px; display: block; float: left; text-indent: -9999em; margin-right: 20px; } #playlist a { background: url(images/playlist.gif) no-repeat; clear: both; width: 279px; height: 133px; display: block; text-indent: -9999em; border: 3px solid white; margin-bottom: 40px; } #gigs { background: #32a8c4 url(images/gigs.gif) no-repeat; border: 3px solid white; width: 279px; margin-bottom: 40px; } #gigs h3 { margin: 55px 0 17px 77px; } #gigs ul {} #gigs ul li { background: #217184; display: block; padding: 5px 12px; font-size: 110%; margin-bottom: 1px; } #gigs ul li:hover { background: #206a7d; } #gigs ul li span { margin-left: 10px;} #contact { background: url(images/contact.gif) no-repeat; width: 279px; height: 159px; border: 3px solid white; } #contact a { text-decoration: underline; color: white } #contact a:hover { text-decoration: none; } #contact dl { font-size: 110%; padding-top: 55px; } #contact dt { margin-bottom: 15px; padding-left: 77px; } #contact dd.phone { margin-left: 51px; } #contact dd.email { margin-left: 35px; } #contact dd.myspace { margin-left: 15px; } #copyright { color: #b9b9b9; margin-top: 15px; font-size: 110%; } #copyright span { display: block; position: absolute; left: -9999em; } #copyright a { color: #b9b9b9; padding: 1px 3px; text-decoration: none; } #copyright a:hover { color: white; background: #ea5311; } /* Photo Gallery ----------------------------------------------- */ #photogallery { margin: 20px 0; } #photogallery a img { border: 2px solid #fff; } #photogallery a:hover img { border: 2px solid #ffd200; } /* Contact Form ----------------------------------------------- */ #contactForm { margin: 0 0 50px 50px; } #contactForm .inputext { width: 260px; padding: 4px; margin-bottom: 10px; font-weight: bold; font-size: 110%; background: transparent url(images/nav_line.gif) repeat-x 0 100%; border: none; color: white !important; margin-left: 50px; } #contactForm textarea { padding: 4px; font-size: 110%; width: 260px; margin: 0 0 20px 50px; background: inherit; border: 2px solid #282829; color: white !important; font-weight: bold; } #contactForm .validation-advice { color: #f0e19d; font-size: 100%; margin: 0 0 10px 50px } #contactForm label { font-size: 110%; color: #ffd200; } #contactForm #mssg { margin-top: 10px;} #contactForm #mssg label { margin-bottom: 5px; display: block; } #contactForm .button { font-size: 140%; margin: 10px 0 0 50px; font-weight: bold; padding: 5px 10px; } .tabbertab #contactForm.playlist { clear: both; margin: 0 5px 0 0; padding: 30px 0 42px 0px !important; } label.error { display: block; color: #ea5312 !important; margin: 0 0 10px 50px; font-size: 100% !important; } label.error { display: block; color: #f0e19d !important; margin: 0 0 10px 50px; font-size: 100% !important; } /* Repertoar ----------------------------------------------- */ #tabs { display: block; margin: 0 6px; padding: 0; font-size: 110%; } #playlistBox { margin: 30px 0 30px 5px; font-size: 110%; } .tabbertab h3 { display: none; } #tabs td a { display: block; background: url(images/plus.gif) no-repeat; width: 12px; height: 12px; text-indent: -9999em; margin: 1px 0 0 3px; } #collected td a { display: block; background: url(images/minus.gif) no-repeat; width: 12px; height: 12px; text-indent: -9999em; margin: 1px 0 0 3px; } #tabs td a:hover, #collected td a:hover { background-position: right; } ul.tabbernav { margin: 0 0 1px 0; font-size: 90%; } .tabbernav li { display:inline; } .tabbernav li a { padding: 6px 5px; color: #1c6677 !important; text-align: center; background: white; font-weight: bold; display: block; float: left; margin-right: 1px; font-size: 100%; text-decoration: underline; border: 2px solid white; border-bottom: none; } .tabbernav li a#tabsnav1 { width: 130px; } .tabbernav li a#tabsnav2 { width: 190px; } .tabbernav li a#tabsnav3 { width: 90px; } .tabbernav li a#tabsnav4 { width: 100px; } .tabbernav li.tabberactive a { background: #ff4b00; border: 2px solid white; border-bottom: none; color: white !important; text-decoration: none; } #tab1, #tab2, #tab3, #tab4 { clear: both; margin-top: 1px !important; } .tabbertab h4 { font-weight: bold; width: 100px; height: 17px; color: white; padding: 5px 10px; font-size: 130%; } .tabbertab h4 a { color: white !important; } .tabbertab h4 a:hover { text-decoration: underline !important; } .tabberlive .tabbertabhide { display:none; } #tabs table { background: #258ba4; width: 463px !important; border: 2px solid white; margin-top: 2px !important; } #tabs table tr { border-bottom: 1px solid #2e9db8; background: #1c6577; line-height: 1.9em; } #tabs table tr:hover { background: #ff4b00; cursor: pointer; } #tabs table tr td { border-bottom: 1px solid #2e9db8 !important; padding-left: 15px; color: #e7e6e6; } #tabs table tr.head td { line-height: 2.5em; background: white; padding-left: 10px; color: #5c5c5c; } #tabs table tr.marked { background: #2290ab; } /* Slide ----------------------------------------------- */ #slideshow { height: 250px; width: 187px; margin: 0 0 0 33px; } #slideshow img { padding: 10px; border: 1px solid #ccc; background: #fff; width: 250px; height: 187px; top: 0; left: 0 } #legs { text-align: center; line-height: 0em; margin: 20px 0 0 -15px; } #hvala { font-size: 0; } #hvala h2 { font-size: 20px; color: white; } #hvala p { color: white; font-size: 12px !Important; } #hvala a { margin-top: 20px; display: block; } #contactInfo { padding: 22px; font-size: 110%; } #contactInfo h2 { font-size: 190%; padding: 20px 0; } #contactInfo p { margin-bottom: 20px; } #pdf { margin: 40px; } #pdf li { margin-top: 20px; } #pdf li a { font-size: 150%; font-weight: bold; } #pdf li a { background: url(http://www.skitnice.com/css/images/pdf.png) no-repeat 0 60%; padding: 10px 0 10px 50px; margin-bottom: 5px; } #intro p { margin-bottom: 20px; } #tabs .lista ul { background: white; padding: 1px; } #tabs .lista ul li { clear: both; padding: 4px 0 14px 0; height: 10px; border-bottom: 1px solid #2e9db8; width: 462px; background: #227487; } #tabs .lista ul li:hover { cursor: pointer; background: #ff4b00; } #tabs .lista ul li input { margin: 3px 0 0 10px; float: left; } #tabs .lista ul li span { width: 210px; padding: 0 10px; float: left; } #tabs .lista ul li strong { width: 185px; padding: 0 10px; float: left; font-weight: normal; } #form { font-size: 90%; } .prviples h3 { font-size: 200%; font-weight: bold; margin: 30px 0 0 5px; text-transform: uppercase; } .prviples ul { background: white; padding: 1px; width: 464px; margin-left: 5px; } .prviples ul li { clear: both; padding: 4px 0 14px 0; height: 10px; border-bottom: 1px solid #2e9db8; width: 464px; background: #227487; } .prviples ul li:hover { cursor: pointer; background: #ff4b00; } .prviples ul li input { margin: 3px 0 0 10px; float: left; } .prviples ul li span { width: 190px; padding: 0 10px; float: left; } .prviples ul li strong { width: 210px; padding: 0 10px; float: left; font-weight: normal; } .prviples p.intro { margin: 20px 5px; font-size: 120%; font-weight: bold; } .prviples p { margin: 10px 5px; } #home-spacer { height: 100px} .player_img { margin-left: 11px }