/* ------------------------------------------------------------------------ Theme Name: Volt Festival Theme URI: http://voltfestivalen.se/ Description: Theme for Volt Festival 2010. Design by Håkan Ullberg, HTML/CSS/Wordpress by Tobias Gärder (hellorobot.se). Version: 1.0 Author: Tobias Gärder Author URI: http://www.hellorobot.se7 ------------------------------------------------------------------------ */ /* ----------------------------------------- RESET ----------------------------------------- */ *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td {margin:0; padding:0; } table {border-collapse:collapse; border-spacing:0} fieldset, img {border:0} address, caption, cite, code, dfn, em, strong, th, var {font-style:normal; font-weight:normal} ol, ul, li {list-style:none} caption, th {text-align:left} h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:normal} q:before, q:after {content:''} strong {font-weight:bold} em {font-style:italic} a img {border:none} h1, h2, h3, h5, h5, h6 {font-weight:bold} /* ----------------------------------------- FONT FACE ----------------------------------------- */ @font-face { font-family: 'ITCAvantGardeGothicProBook'; src: url('webfonts/itcavantgardepro-bk-webfont.eot'); src: local('☺'), url('webfonts/itcavantgardepro-bk-webfont.woff') format('woff'), url('webfonts/itcavantgardepro-bk-webfont.ttf') format('truetype'), url('webfonts/itcavantgardepro-bk-webfont.svg#webfontc7ylDkbs') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ITCAvantGardeGothicProMedium'; src: url('webfonts/itcavantgardepro-md-webfont.eot'); src: local('☺'), url('webfonts/itcavantgardepro-md-webfont.woff') format('woff'), url('webfonts/itcavantgardepro-md-webfont.ttf') format('truetype'), url('webfonts/itcavantgardepro-md-webfont.svg#webfontc7ylDkbs') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ITCLubalinGraphStdExtraLightO'; src: url('webfonts/lubalingraphstd-exlightobl-webfont.eot'); src: local('☺'), url('webfonts/lubalingraphstd-exlightobl-webfont.woff') format('woff'), url('webfonts/lubalingraphstd-exlightobl-webfont.ttf') format('truetype'), url('webfonts/lubalingraphstd-exlightobl-webfont.svg#webfontROYYiGeV') format('svg'); font-weight: normal; font-style: normal; } /* ----------------------------------------- BASE ----------------------------------------- */ body { background-color: #000; font-family: arial, verdana, sans-serif; font-size: 12px; color: #fff; text-align: center; position: relative; } #ct { width: 960px; padding: 0 30px; background: transparent url('img/bg.gif') repeat-y top left; text-align: left; position: relative; margin: 0 auto; } #hd { height: 190px; position: relative; } #bd { width: 960px; } #ft { float: left; width: 960px; margin-top: 90px; } #bd #content { width: 620px; float: left; margin: 20px 20px 0 0; } #bd #sidebar { width: 300px; float: left; margin: 20px 0 0 0; } p { font-size: 12px; line-height: 130%; } a { color: #fff; text-decoration: none; } a:hover { text-decoration: underline; color: #0ff; } .clear { clear: both; } /* ----------------------------------------- HEADER ----------------------------------------- */ #hd h1 { position: absolute; top: 0; left: 0; width: 380px; height: 190px; } #hd h1 a { font-size: 0; text-indent: -3000px; display: block; float: left; width: 380px; height: 190px; background: transparent url('img/logo.gif') no-repeat top left; outline: none; } #hd #icons { width: 15px; position: absolute; right: 20px; top: 30px; } #hd #icons ul { float: left; width: 15px; } #hd #icons ul li { display: block; float: left; width: 15px; height: 15px; margin-bottom: 10px; } #hd #icons ul li a { display: block; width: 15px; height: 15px; font-size: 0; text-indent: -3000px; background: transparent url('img/header_icons.gif') no-repeat top left; } #hd #icons ul li a.icon_rss { background-position: 0px 0px; } #hd #icons ul li a.icon_facebook { background-position: 0px -40px; } #hd #icons ul li a.icon_youtube { background-position: 0px -80px; } #hd #menu { position: absolute; right: 50px; top: 30px; width: 480px; text-align: right; } #hd #menu ul { display: inline; float: right; width: auto; } #hd #menu ul li { display: block; float: left; padding-left: 1px; width: auto; line-height: 0; } #hd #menu ul li a { display: block; float: left; font-size: 0; line-height: 0; text-indent: -4000px; height: 15px; color: transparent; background: transparent url('img/topmenu.gif') no-repeat 0px 0px; } #hd #menu ul li a:hover { text-decoration: none; color: transparent; } #hd #menu ul li.m_home a { background-position: 0px 0px; width: 50px; } #hd #menu ul li.m_artists a { background-position: -51px 0px; width: 56px; } #hd #menu ul li.m_archive a { background-position: -108px 0px; width: 65px; } #hd #menu ul li.m_press a { background-position: -175px 0px; width: 48px; } #hd #menu ul li.m_info a { background-position: -224px 0px; width: 43px; } #hd #menu ul li.m_home a:hover { background-position: 0px -20px; } #hd #menu ul li.m_artists a:hover { background-position: -51px -20px; } #hd #menu ul li.m_archive a:hover { background-position: -108px -20px; } #hd #menu ul li.m_press a:hover { background-position: -175px -20px; } #hd #menu ul li.m_info a:hover { background-position: -224px -20px; } #hd #menu ul li.m_home.active a { background-position: 0px -20px; } #hd #menu ul li.m_artists.active a { background-position: -51px -20px; } #hd #menu ul li.m_archive.active a { background-position: -108px -20px; } #hd #menu ul li.m_press.active a { background-position: -175px -20px; } #hd #menu ul li.m_info.active a { background-position: -224px -20px; } #hd #artistsubmenu { position: absolute; top: 44px; left: 721px; width: 69px; height: 58px; background: transparent url('img/topmenu.gif') no-repeat 0px -60px; } #hd #artistsubmenu ul { display: block; float: left; padding: 5px 0 0 6px; } #hd #artistsubmenu ul li { display: block; float: left; width: 65px; height: 12px; } #hd #artistsubmenu ul li a { font-family: "ITCAvantGardeGothicProMedium", arial, sans-serif; font-size: 10px; line-height: 9px; color: #000; } #hd #artistsubmenu ul li a:hover { text-decoration: none; color: #fff; } /* ----------------------------------------- FEATURED ARTIST ----------------------------------------- */ #slider { width: 960px; float: left; height: 320px; overflow: hidden; position: relative; } #slider ul { float: left; width: 940px; height: 320px; background: transparent url('img/featured_bg.gif') repeat-x top left; position: relative; } #slider ul li { float: left; width: 940px; height: 320px; overflow:hidden; } #slider div.featured_artist { float: left; margin: 0 60px; width: 840px; background: transparent url('img/featured_item_bg.gif') repeat-x top left; } #slider a.featured_img { display: block; float: left; width: 580px; height: 320px; } #slider div.featured_info { float: left; width: 240px; padding-top: 20px; } #slider div.featured_info h6 { color: #0f0; font-size: 10px; padding-bottom: 40px; } #slider div.featured_info h4 { line-height: 100%; float: left; font-size: 30px; font-family: "ITCLubalinGraphStdExtraLightO", georgia, serif; font-weight: normal; margin-bottom: 15px; } #slider div.featured_info h4 a { color: #fff; } #slider div.featured_info h4 a:hover { color: #0f0; text-decoration: none; } #slider div.featured_info p.artistinfo { clear: left; color: #0f0; margin-bottom: 20px; } #slider p.readmore { clear: left; width: 240px; text-align: right; margin-top: 20px; } #slider p.readmore a { display: block; float: right; color: #0f0; padding-right: 30px; background: transparent url('img/readmore.gif') no-repeat top right; height: 40px; padding-bottom: 5px; padding-top: 3px; } #prevBtn, #nextBtn { display: block; width:20px; height:20px; position:absolute; top: 150px; left: 0px; z-index: 2990; } #nextBtn { left: 915px; z-index: 3000; } #prevBtn a, #nextBtn a { outline: none; display: block; width:20px; height:20px; font-size: 0; text-indent: -3000px; background: transparent url('img/button_arrow_left.png') no-repeat top left; } #nextBtn a { background-image: url('img/button_arrow_right.png'); } .htag_live { padding-right: 29px; background: transparent url('img/htag_live.gif') no-repeat right 8px; } .htag_dj { padding-right: 19px; background: transparent url('img/htag_dj.gif') no-repeat right 8px; } .htag_vj { padding-right: 19px; background: transparent url('img/htag_vj.gif') no-repeat right 8px; } .htag_installation { padding-right: 27px; background: transparent url('img/htag_inst.gif') no-repeat right 8px; } /* ----------------------------------------- CONTENT ----------------------------------------- */ #bd #content { border-top: 2px solid #0ff; } #bd #content h2 { font-size: 24px; color: #0ff; font-family: "ITCAvantGardeGothicProBook", arial, verdana, sans-serif; font-weight: normal; margin-left: 160px; padding-top: 5px; padding-bottom: 5px; } #bd #content .posts { float: left; width: 620px; } #bd #content .posts .post, #bd #content .posts .page { float: left; width: 620px; background: transparent url('img/hr_cyan.gif') no-repeat top left; padding: 20px 0 28px 0; } #bd #content .posts .postmetadata { float: left; width: 140px; margin-right: 20px; } #bd #content .posts .postmetadata p.tags { clear: left; color: #fff; font-size: 10px; } #bd #content .posts .postmetadata p.tags a { color: #0ff; } #bd #content .posts .postmetadata img.avatar { float: left; width: 58px; border: 1px solid #0ff; margin-bottom: 10px; } #bd #content .posts p.comments { float: right; width: 40px; height: 25px; background: transparent url('img/comment_bubble.gif') no-repeat top right; text-align: right; margin-top: 20px; } #bd #content .posts p.comments a { display: block; float: right; width: 30px; text-align: center; font-size: 12px; font-style: italic; font-weight: bold; color: #000; } #bd #content .posts p.comments span { display: none; } #bd #content .posts .postcontent { font-family: arial, verdana, sans-serif; float: left; width: 380px; } #bd #content .posts .postcontent span.date { display: block; color: #0ff; padding-bottom: 5px; font-size: 10px; } #bd #content .posts .postcontent h3 { float: left; font-size: 18px; color: #0ff; font-family: "ITCAvantGardeGothicProBook", arial, verdana, sans-serif; font-weight: normal; line-height: 110%; padding-bottom: 20px; } #bd #content .posts .postcontent h3 a { display: block; float: left; color: #0ff; } #bd #content .posts .postcontent h3 a:hover { color: #fff; text-decoration: none; } #bd #content .posts .postcontent p { font-family: arial, verdana, sans-serif; margin-bottom: 20px; } #bd #content .posts .postcontent a { color: #0ff; } #bd #content .posts .postcontent a:hover { color: #0ff; text-decoration: underline; } #bd #content .posts .postcontent h4 { color: #0ff; font-weight: bold; font-size: 14px; } #bd #content a span.readmore { cursor: pointer; color: #0f0; display: block; width: 350px; text-decoration: none; text-align: right; padding-right: 30px; background: transparent url('img/readmore.gif') no-repeat top right; height: 12px; padding-bottom: 5px; padding-top: 3px; } #bd #content a span.readmore:hover { cursor: pointer; color: #fff; text-decoration: none; } #bd #content .posts .postmetadata p.artistlinks { font-size: 10px; font-weight: bold; color: #0ff; padding: 8px 0 3px 0; margin: 0; } #bd #content .posts .postmetadata ul.artisticons { clear: left; width: 140px; float: left; } #bd #content .posts .postmetadata ul.artisticons li { float: left; padding-right: 7px; width: 15px; } #bd #content .posts .postmetadata ul.artisticons li a { float: left; display: block; width: 15px; height: 16px; background: transparent url('img/artist_icons.gif') no-repeat top left; font-size: 0; text-indent: -3000px; color: transparent; } #bd #content .posts .postmetadata ul.artisticons li.artist_web a { background-position: 0px 0px; } #bd #content .posts .postmetadata ul.artisticons li.artist_twitter a { background-position: 0px -20px; } #bd #content .posts .postmetadata ul.artisticons li.artist_myspace a { background-position: 0px -40px; } #bd #content .posts .olderposts { float: left; width: 620px; background: transparent url('img/hr_cyan.gif') no-repeat top left; padding: 15px 0 18px 0; font-size: 11px; } #bd #content .posts .olderposts a { float: right; } #bd #content .posts .olderposts a:hover { color: #fff; text-decoration: none; } #bd #content .posts .postcontent p a img { border: 1px solid #000; } #bd #content .posts .postcontent p a:hover img { border: 1px solid #0ff; } /* ----------------------------------------- SIDEBAR ----------------------------------------- */ #bd #sidebar { border-top: 2px solid #0f0; } #bd #sidebar h4 { font-size: 18px; color: #0f0; font-family: "ITCAvantGardeGothicProBook", arial, verdana, sans-serif; font-weight: normal; padding: 5px 0; } #bd #sidebar ul.artistlist { margin-bottom: 20px; float: left; width: 300px; } #bd #sidebar ul.artistlist li { display: inline; font-family: "ITCLubalinGraphStdExtraLightO", georgia, serif; font-weight: normal; font-size: 18px; } #bd #sidebar ul.artistlist.main li { font-size: 26px; } /* ----------------------------------------- MODS FOR ARTISTPAGES ----------------------------------------- */ #bd #content.artistpage { border-top: 2px solid #0f0; } #bd #content.artistpage h2 { color: #fff; font-size: 21px; padding-top: 15px; padding-bottom: 15px; } #bd #content.artistpage h2 span { color: #0f0; } #bd #content.artistpage .posts .post, #bd #content.artistpage .posts .page { background-image: url('img/hr_artist.gif'); } #bd #content.artistpage .posts .postmetadata p.tags { color: #0f0; } #bd #content.artistpage .posts .postmetadata p.tags a { color: #fff; } #bd #content.artistpage .posts .postmetadata img.avatar { border: 1px solid #0f0; } #bd #content.artistpage .posts .postcontent h3 { font-family: "ITCLubalinGraphStdExtraLightO", georgia, serif; font-size: 30px; color: #fff; padding-bottom: 8px; } #bd #content.artistpage .posts .postcontent h3 a { color: #fff; } #bd #content.artistpage .posts .postcontent h3 a:hover { color: #0f0; } #bd #content.artistpage .posts .postcontent span.date { color: #0f0; } #bd #content.artistpage .posts .postcontent h4 { color: #0f0; } #bd #content.artistpage .posts .postcontent a { color: #0f0; } #bd #content.artistpage .posts p.comments { background-image: url('img/comment_bubble_green.gif'); margin-top: 9px; } #bd #content.artistpage .posts p.artistsub { color: #0f0; font-size: 11px; margin-bottom: 25px; } #bd #content.artistpage .posts .postcontent h5 { width: 460px; margin-left: -160px; background: transparent url('img/hr_splitheadline.gif') no-repeat top left; height: 50px; color: #0f0; padding: 6px 0 0 160px; font-size: 22px; font-family: "ITCAvantGardeGothicProBook", arial, sans-serif; font-weight: normal; } #bd #sidebar.artistpage { border-top: none; } #bd #sidebar.artistpage h4 { border-top: 2px solid #0ff; padding-top: 15px; padding-bottom: 15px; font-size: 18px; color: #0ff; } #bd #sidebar.artistpage p { padding-bottom: 15px; } #bd #sidebar.artistpage p.sidebarend { border-top: 2px solid #0ff; } #bd #content .posts .postcontent p a:hover img { border: 1px solid #0f0; } /* ----------------------------------------- MODS FOR PAGES ----------------------------------------- */ #bd #content .posts .page .postcontent h3 { font-family: "ITCAvantGardeGothicProBook", arial, sans-serif; color: #0ff; font-size: 25px; padding-bottom: 17px; } #bd #content.artistpage .posts .page .postcontent h3 { font-family: "ITCAvantGardeGothicProBook", arial, sans-serif; color: #0f0; font-size: 25px; padding-bottom: 17px; } /* ----------------------------------------- COMMENTS ----------------------------------------- */ #bd #content #thecommentlist { float: left; clear: left; width: 620px; position: relative; } #bd #content h3#comments { font-family: "ITCAvantGardeGothicProBook",arial,sans-serif; color: #0f0; padding-top: 10px; font-size:16px; height: 50px; background: transparent url('img/hr_comments.gif') no-repeat top left; font-weight: normal; margin-bottom: 6px; clear: left; width: 460px; padding-left: 160px; } #bd #content #commentform textarea { width: 620px; } #bd #content ol.commentlist { position: relative; } #bd #content ol.commentlist li { width: 620px; clear: left; float: left; padding-bottom: 20px; margin-bottom: 20px; background: transparent url('img/hr_comment.gif') no-repeat bottom left; } #bd #content ol.commentlist li div.comment-author { float: left; width: 140px; padding-right: 20px; } #bd #content ol.commentlist li div.comment-author p.commentname { float: left; width: 140px; } #bd #content ol.commentlist li div.comment-author p.commentname a { color: #0f0; } #bd #content ol.commentlist li div.comment-author p.commentdate { float: left; width: 140px; font-size: 10px; } #bd #content ol.commentlist li div.comment { width: 380px; float: left; } #bd #content ol.commentlist li.bypostauthor div.comment-author p.commentname { color: #0ff; } #bd #content #respond { float: left; width: 620px; } #bd #content #respond h3 { font-family: "ITCAvantGardeGothicProBook",arial,sans-serif; background: none; color: #0f0; padding-top: 10px; font-size:20px; font-weight: normal; margin-bottom: 6px; clear: left; width: 460px; padding-left: 160px; } #bd #content div.commentlabel { clear: left; width: 160px; float: left; height: 30px; margin-top: 4px; line-height: 100%; } #bd #content div.commentlabel em { color: #aaa; font-size: 10px; } #bd #content div.commentinp { float: left; width: 380px; height: 30px; } /* ----------------------------------------- FOOTER ----------------------------------------- */ #ft .ftblock { float: left; width: 300px; padding-right: 20px; } #ft .ftblock.ftlast { padding-right: 0; } #ft .ftblock h4 { display: block; width: 300px; font-size: 18px; text-indent: -3000px; float: left; height: 70px; } #ft .ftblock h4.ft_h_info { background: transparent url('img/footer_info.gif') no-repeat top left; } #ft .ftblock h4.ft_h_tickets { background: transparent url('img/footer_tickets.gif') no-repeat top left; } #ft .ftblock h4.ft_h_presented { background: transparent url('img/footer_presented.gif') no-repeat top left; } #ft .ftblock p { margin-bottom: 10px; line-height: 130%; clear: both; } #ft .f_logo { font-size: 0; text-indent: -3000px; float: left; padding-right: 20px; background-color: transparent; background-position: top left; background-repeat: no-repeat; } #ft .f_logo.f_ukk { width: 142px; height: 102px; background-image: url('img/footer_logo_ukk.gif'); } #ft .f_logo.f_strom { margin-top: 41px; width: 99px; height: 29px; background-image: url('img/footer_logo_strom.gif'); } #ft .f_logo.f_si { margin-top: 5px; width: 63px; height: 32px; background-image: url('img/footer_logo_si.gif'); } #ft .f_logo.f_gi { margin-top: 5px; width: 61px; height: 32px; background-image: url('img/footer_logo_gi.gif'); } p#pageend { clear: left; padding: 40px 0; width: 960px; text-align: center; } .footer_ticnet { float: left; padding-right: 10px; padding-top: 4px; }