/* Theme Name: Sound and Show */ /* import core styles */ @import url(interface/css/base.css); /* Theme Name: Sound and Show */ /* import core styles */ @import url(interface/css/base.css); /*------------------------------------------ // 1.BASIC ELEMENTS //------------------------------------------*/ body { color:#000; background:#fff; font-family:Arial, Helvetica, sans-serif; } h1, h2, h3, l1, p, a{ line-height:1.2em;} h1.pagetitle { font-size:240%; color:#fff; margin-bottom:10px; } /*------------------------------------------ // 2.LAYOUT //------------------------------------------*/ /*---- Container ----*/ div#container { } /*---- Header ----*/ div#header{ background:url(interface/images/header/header-bg.jpg) 0 0 repeat-x;} div#header div.inner-header { background:url(interface/images/header/inner-header-bg.jpg) top center no-repeat;} div#header div.wrapper{ width:945px; margin:0 auto; padding-top:18px;} /*---- Navigation ----*/ div#navigation { float:left; width:350px; } /*---- Content ----*/ div#content { background:url(interface/images/content/content-bg.jpg) top center repeat-y; overflow:hidden;} div#content div.inner-content{ background:url(interface/images/content/inner-content-bg.jpg) top center no-repeat;} div#content div.wrapper{ width:935px; margin:0 auto; padding:50px 0 0 10px;} /*---- Main ----*/ div#main { padding-bottom:30px; overflow:hidden; } /*---- Footer ----*/ div#footer { clear:both; background:url(interface/images/footer/footer-bg.jpg) top center no-repeat;} div#footer div.wrapper{ width:920px; margin:0 auto; overflow:hidden; padding:32px 0 35px 25px;} /*------------------------------------------ // 2. COMMON PAGE STYLES //------------------------------------------*/ /*---- Header - Logo ----*/ div#header h1{ padding:0px 0 0 10px; float:left; margin-right:90px; width:290px;} div#header h1 a.logo{ display:block; width:275px; height:64px; background:url(interface/images/header/logo.png) 0 0 no-repeat; } /*---- Navigation ----*/ div#navigation ul { overflow:hidden; } div#navigation ul li {float:left;} div#navigation ul li a { display:block; float:left; } div#navigation ul li#home a{ background:url(interface/images/header/navigation.jpg) 0% 0% no-repeat; width:73px; height:82px; } div#navigation ul li#services a{ background:url(interface/images/header/navigation.jpg) -73px 0 no-repeat; width:84px; height:82px; } div#navigation ul li#testimonials a{ background:url(interface/images/header/navigation.jpg) -157px 0 no-repeat; width:105px; height:82px; } div#navigation ul li#contact-us a{ background:url(interface/images/header/navigation.jpg) -262px 0 no-repeat; width:86px; height:82px; } /*---- Navigation -Active & Hover---*/ div#navigation ul li#home a:hover, div#navigation ul li#home a.active{ background:url(interface/images/header/navigation.jpg) 0 -93px no-repeat;} div#navigation ul li#services a:hover, div#navigation ul li#services a.active{ background:url(interface/images/header/navigation.jpg) -73px -93px no-repeat;} div#navigation ul li#testimonials a:hover, div#navigation ul li#testimonials a.active{ background:url(interface/images/header/navigation.jpg) -157px -93px no-repeat;} div#navigation ul li#contact-us a:hover, div#navigation ul li#contact-us a.active{ background:url(interface/images/header/navigation.jpg) -262px -93px no-repeat;} /*---- Header - Site - info ----*/ div#header div.site-info{ float:right; padding-top:15px; width:196px;} div#header div.site-info p{ font-size:120%; color:#7c7676; text-align:right; padding-right:27px; margin-bottom:12px;} div#header div.site-info span{ background:url(interface/images/header/search.jpg) 0 5px no-repeat; width:42px; height:15px; display:block; float:left; padding-right:10px; } div#header div.site-info form input.textbox{ background:#c0bfbf; color:#FFF; font-size:120%; border:0; padding:0px 3px 2px; width:110px;} div#header div.site-info form input.submit-button{ vertical-align:middle; padding-bottom:4px;} /*---- Content ----*/ div#content h2{ font-size:260%;} div#content h3{ font-size:220%;} div#content div.tagline { margin-bottom:125px;} div#content div.tagline h1{ background:url(interface/images/content/the-party-people.png) 0 0 no-repeat; width:484px; height:93px;} /*---- Line ----*/ div#content div.devider{ background:#050b0f url(interface/images/content/line.jpg) top center no-repeat; height:5px; line-height:5px; overflow:hidden; width:100%;} /*----Services----*/ div#services{ overflow:hidden; margin-bottom:20px;} div#services div.service{ border:#ededed 4px solid; float:left; margin-right:22px; width:209px; height:175px;} div#services div.service a{ text-decoration:none;} div#services div.service h2{ float:left; width:125px; color:#FFF; font-weight:normal;} div#services div.service a.button{ float:right; display:block; width:32px; height:31px;} div#services div.service span.punch-line{ width:180px;color:#ffffff; font-size:135%; line-height:1.2em; margin:-45px 0 0px 16px; position:relative; display:block;} div#services div.last{ margin:0px;} /*---- Main - Post----*/ div#main div.post { width:430px; float:left; background:#06151f url(interface/images/content/post-bg.jpg) 0 0 repeat-x; padding:12px;} div#main div.post h2{ font-size:220%; color:#19a7d9; margin-bottom:5px; font-weight:normal; padding-top: .2em; border-bottom-style: solid; } div#main div.post h2 a{ color:#19a7d9; text-decoration:none;} div#main div.post div.entry small { color:#FFF; font-size:110%; margin-bottom:5px; display:block; } div#main div.post div.heading { padding-bottom:10px; background:url(interface/images/content/dot.gif) 0 100% repeat-x; margin-bottom:15px; overflow:hidden;} div#main div.post div.heading div.metadeta{ overflow:hidden;} div#main div.post div.heading div.metadeta p{ float:left; color:#867f84; font-size:120%; margin-right:10px;} div#main div.post div.heading div.metadeta p.date{ background:url(interface/images/content/date-icon.gif) 0 0px no-repeat; padding-left:20px; line-height:14px;} div#main div.post div.heading div.metadeta p.author{ background:url(interface/images/content/pan-icon.gif) 0 0px no-repeat; padding-left:20px; line-height:14px;} div#main div.post div.heading div.comment-count{ float:right; width:50px;} div#main div.post div.heading div.comment-count a{ background:url(interface/images/content/comment-icon.gif) 0 0 no-repeat; font-size:220%; font-weight:bold; padding:4px 16px 13px 15px; color:#FFF; text-decoration:none; display:block;} div#main div.post div.heading div.comment-count span{color:#aeabad; font-size:100%; line-height:1.2em;} div#main div.post div.entry p { font-size:120%; color:#FFF; margin-bottom:20px; line-height:22px; } div#main div.post div.entry a { color:#fff; } /*---- box ----*/ div.box{ border:#092233 4px solid; background:#102c39 url(interface/images/content/box2-bg.jpg) 0 0 repeat-x; float:left; margin-left:15px;} div.box div.inner-box{ padding:12px;} div.box h3{ color:#ededed; font-weight:normal;} div.box ul li{ font-size:120%; background:url(interface/images/content/dotted-border.gif) 0 100% repeat-x; padding:8px 0 8px 5px;} div.box ul li a{color:#ededed;} div.box ol li{ font-size:120%; list-style:decimal; color:#ededed; list-style-position:inside; } div.box ol li a{color:#ededed; } /*---- Content - Dashboard ----*/ div#dashboard{ background:url(interface/images/content/deshboard-bg.jpg) center top no-repeat;} div#dashboard h3{ color:#205872; margin-bottom:15px; font-size:220%; line-height:1.2em; font-weight:normal;} div#dashboard div.wrapper{ width:915px; margin:0 auto; padding:24px 0 20px 30px; position:relative;} div#dashboard div.wrapper img#chords { position:absolute; left:350px; top:70px;} div#dashboard div.recent-post{ width:400px; float:left; margin-right:55px;} div#dashboard div.recent-post ul li{ background:url(interface/images/content/recent-border.gif) 0 100% repeat-x; padding-bottom:5px; margin-bottom:20px; color:#d2d2d2; line-height:22px; font-size:120%;} div#dashboard div.recent-post ul li a{color:#d2d2d2; text-decoration:none; line-height:22px;} div#dashboard div.photobox{width:220px; float:left; margin-right:7px;} div#dashboard div.photobox a{ border:#0a1015 6px solid; float:left; margin:0 10px 14px 0; } div#dashboard div.photobox img{ vertical-align:middle;} /*---- Footer ----*/ div#footer div.navigation{ float:left;} div#footer div.navigation ul li{ font-size:130%; margin-right:45px; float:left;} div#footer div.navigation ul li a{ color:#116e9a; text-decoration:none;} div#footer div.designer{ float:right;} div#footer div.designer a{ color:#3f5058; font-size:130%;} /*------------------------------------------ // 3.1 INDEX PAGE SPECIFIC STYLES //------------------------------------------*/ div#venues.box div.inner-box{ width:190px; background:url(interface/images/content/bulding.gif) 100% 0 no-repeat; float: right; } div#venues.box h3{ padding-bottom:21px; background:url(interface/images/content/dotted-border.gif) 0 100% repeat-x;} div#playlist.box div.inner-box{ width:190px; background:url(interface/images/content/playlist-design.gif) 100% 0 no-repeat;} div#playlist h3{ background:none; padding:0px; margin-bottom:2px;} div#playlist div.categories{ padding-bottom:4px;} div#playlist div.categories a{ color:#f19b00; font-size:120%; padding-right:10px; text-decoration:none;} div#playlist.box ol li{ background:url(interface/images/content/dotted-border.gif) 0 0 repeat-x; padding:5px 0;} /*------------------------------------------ // 3.2 SINGLE PAGE SPECIFIC STYLES //------------------------------------------*/ div#main.page{ padding-top: 15px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: #ededed; border-right-color: #ededed; border-bottom-color: #ededed; border-left-color: #ededed; } div#main.page div.post{ width:400px; background-image: none; margin-right: 20px; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; } div#main.page div.post div.entry { background:none;} div#main div.post div.entry p.postmetadata small { color:#D2D2D2; font-size:100%; margin-bottom:10px;} div#main div.post div.entry p.postmetadata a { color:#fff; } /*---- Comments ----*/ div#main div.comments { width:711px; overflow:hidden;} div#main div.comments h4 a{ color:#ece6b3; font-size:140%; text-decoration:none; margin-bottom:10px; display:block;} div#main div.comments div.comment { border:#084563 3px solid; background:#092233; padding:15px 10px; margin-bottom:15px;} div#main div.comments div.comment div.photo{ float:left; margin-right:20px;} div#main div.comments div.comment div.entry { width:572px; float:left;} div#main div.comments div.comment div.entry h3 { color:#FFF; font-size:200%; margin-bottom:6px; margin-right:20px; line-height:1.2em;} div#main div.comments div.comment div.entry h3 span.date { color:#071822; font-size:50%;; margin-bottom:0px; padding:8px 0 0 20px; font-weight:normal;} div#main div.comments div.comment div.entry p { color:#FFF; font-size:120%; line-height:22px; margin-bottom:15px; } div#main div.comments div.comment div.entry a { color:#FFF; text-decoration:none; } div#main div.comments div.comment div.entry a.comment-reply-link { font-size:120%; } /*---- Comment - Form ----*/ div#comment-form { border:#084563 3px solid; background:#092233; padding:15px 10px;} div#comment-form form{ width:445px;} div#comment-form h3{color:#FFF; font-size:200%; margin-bottom:18px; line-height:1.2em;} div#comment-form p{ margin-bottom:25px; color:#d2d2d2; font-size:120%; line-height:22px; } div#comment-form p.submit{ text-align:right; margin:0px;} div#comment-form label{ padding-left:5px; color:#D2D2D2; font-size:100%;} div#comment-form input.textbox{ padding:3px; width:185px;} div#comment-form textarea.textarea{ width:420px; padding:10px;} div#comment-form a { color:#fff; } /*------------------------------------------ // 1.BASIC ELEMENTS //------------------------------------------*/ body { color:#000; background:#fff; font-family:Arial, Helvetica, sans-serif; } h1, h2, h3, l1, p, a{ line-height:1.2em;} h1.pagetitle { font-size:240%; color:#fff; margin-bottom:10px; } /*------------------------------------------ // 2.LAYOUT //------------------------------------------*/ /*---- Container ----*/ div#container { } /*---- Header ----*/ div#header{ background:url(interface/images/header/header-bg.jpg) 0 0 repeat-x;} div#header div.inner-header { background:url(interface/images/header/inner-header-bg.jpg) top center no-repeat;} div#header div.wrapper{ width:945px; margin:0 auto; padding-top:18px;} /*---- Navigation ----*/ div#navigation { float:left; width:350px; } /*---- Content ----*/ div#content { background:url(interface/images/content/content-bg.jpg) top center repeat-y; overflow:hidden;} div#content div.inner-content{ background:url(interface/images/content/inner-content-bg.jpg) top center no-repeat;} div#content div.wrapper{ width:935px; margin:0 auto; padding:50px 0 0 10px;} /*---- Main ----*/ div#main { padding-bottom:30px; overflow:hidden; } /*---- Footer ----*/ div#footer { clear:both; background:url(interface/images/footer/footer-bg.jpg) top center no-repeat;} div#footer div.wrapper{ width:920px; margin:0 auto; overflow:hidden; padding:32px 0 35px 25px;} /*------------------------------------------ // 2. COMMON PAGE STYLES //------------------------------------------*/ /*---- Header - Logo ----*/ div#header h1{ padding:0px 0 0 10px; float:left; margin-right:90px; width:290px;} div#header h1 a.logo{ display:block; width:275px; height:64px; background:url(interface/images/header/logo.png) 0 0 no-repeat; } /*---- Navigation ----*/ div#navigation ul { overflow:hidden; } div#navigation ul li {float:left;} div#navigation ul li a { display:block; float:left; } div#navigation ul li#home a{ background:url(interface/images/header/navigation.jpg) 0% 0% no-repeat; width:73px; height:82px; } div#navigation ul li#services a{ background:url(interface/images/header/navigation.jpg) -73px 0 no-repeat; width:84px; height:82px; } div#navigation ul li#testimonials a{ background:url(interface/images/header/navigation.jpg) -157px 0 no-repeat; width:105px; height:82px; } div#navigation ul li#contact-us a{ background:url(interface/images/header/navigation.jpg) -262px 0 no-repeat; width:86px; height:82px; } /*---- Navigation -Active & Hover---*/ div#navigation ul li#home a:hover, div#navigation ul li#home a.active{ background:url(interface/images/header/navigation.jpg) 0 -93px no-repeat;} div#navigation ul li#services a:hover, div#navigation ul li#services a.active{ background:url(interface/images/header/navigation.jpg) -73px -93px no-repeat;} div#navigation ul li#testimonials a:hover, div#navigation ul li#testimonials a.active{ background:url(interface/images/header/navigation.jpg) -157px -93px no-repeat;} div#navigation ul li#contact-us a:hover, div#navigation ul li#contact-us a.active{ background:url(interface/images/header/navigation.jpg) -262px -93px no-repeat;} /*---- Header - Site - info ----*/ div#header div.site-info{ float:right; padding-top:15px; width:196px;} div#header div.site-info p{ font-size:120%; color:#7c7676; text-align:right; padding-right:27px; margin-bottom:12px;} div#header div.site-info span{ background:url(interface/images/header/search.jpg) 0 5px no-repeat; width:42px; height:15px; display:block; float:left; padding-right:10px; } div#header div.site-info form input.textbox{ background:#c0bfbf; color:#FFF; font-size:120%; border:0; padding:0px 3px 2px; width:110px;} div#header div.site-info form input.submit-button{ vertical-align:middle; padding-bottom:4px;} /*---- Content ----*/ div#content h2{ font-size:260%;} div#content h3{ font-size:220%;} div#content div.tagline { margin-bottom:125px;} div#content div.tagline h1{ background:url(interface/images/content/the-party-people.png) 0 0 no-repeat; width:484px; height:93px;} /*---- Line ----*/ div#content div.devider{ background:#050b0f url(interface/images/content/line.jpg) top center no-repeat; height:5px; line-height:5px; overflow:hidden; width:100%;} /*----Services----*/ div#services{ overflow:hidden; margin-bottom:20px;} div#services div.service{ border:#ededed 4px solid; float:left; margin-right:22px; width:209px; height:175px;} div#services div.service a{ text-decoration:none;} div#services div.service h2{ float:left; width:125px; color:#FFF; font-weight:normal;} div#services div.service a.button{ float:right; display:block; width:32px; height:31px;} div#services div.service span.punch-line{ width:180px;color:#ffffff; font-size:135%; line-height:1.2em; margin:-45px 0 0px 16px; position:relative; display:block;} div#services div.last{ margin:0px;} /*---- Main - Post----*/ div#main div.post { width:422px; float:left; background:#06151f url(interface/images/content/post-bg.jpg) 0 0 repeat-x; padding:12px; margin-right: 7px; border: 4px solid #FFF; } div#main div.post h2{ font-size:220%; color:#19a7d9; margin-bottom:5px; font-weight:normal;} div#main div.post h2 a{ color:#19a7d9; text-decoration:none;} div#main div.post div.entry small { color:#FFF; font-size:110%; margin-bottom:5px; display:block; border-top-width: 1px; border-top-style: dotted; border-top-color: #FFF; } div#main div.post div.heading { padding-bottom:10px; background:url(interface/images/content/dot.gif) 0 100% repeat-x; margin-bottom:15px; overflow:hidden;} div#main div.post div.heading div.metadeta{ overflow:hidden;} div#main div.post div.heading div.metadeta p{ float:left; color:#867f84; font-size:120%; margin-right:10px;} div#main div.post div.heading div.metadeta p.date{ background:url(interface/images/content/date-icon.gif) 0 0px no-repeat; padding-left:20px; line-height:14px;} div#main div.post div.heading div.metadeta p.author{ background:url(interface/images/content/pan-icon.gif) 0 0px no-repeat; padding-left:20px; line-height:14px;} div#main div.post div.heading div.comment-count{ float:right; width:50px;} div#main div.post div.heading div.comment-count a{ background:url(interface/images/content/comment-icon.gif) 0 0 no-repeat; font-size:220%; font-weight:bold; padding:4px 16px 13px 15px; color:#FFF; text-decoration:none; display:block;} div#main div.post div.heading div.comment-count span{color:#aeabad; font-size:100%; line-height:1.2em;} div#main div.post div.entry p { font-size:120%; color:#d2d2d2; margin-bottom:20px; line-height:22px;} div#main div.post div.entry a { color:#fff; } /*---- box ----*/ div.box{ border:#092233 4px solid; background:#102c39 url(interface/images/content/box2-bg.jpg) 0 0 repeat-x; float:left; margin-left:15px; width:214px; } div.box div.inner-box{ padding:12px;} div.box h3{ color:#ededed; font-weight:normal;} div.box ul li{ font-size:120%; background:url(interface/images/content/dotted-border.gif) 0 100% repeat-x; padding:8px 0 8px 5px;} div.box ul li a{color:#ededed;} div.box ol li{ font-size:120%; list-style:decimal; color:#ededed; list-style-position:inside; } div.box ol li a{color:#ededed; } /*---- Content - Dashboard ----*/ div#dashboard{ background:url(interface/images/content/deshboard-bg.jpg) center top no-repeat;} div#dashboard h3{ color:#205872; margin-bottom:15px; font-size:220%; line-height:1.2em; font-weight:normal;} div#dashboard div.wrapper{ width:915px; margin:0 auto; padding:24px 0 20px 30px; position:relative;} div#dashboard div.wrapper img#chords { position:absolute; left:350px; top:70px;} div#dashboard div.recent-post{ width:400px; float:left; margin-right:55px;} div#dashboard div.recent-post ul li{ background:url(interface/images/content/recent-border.gif) 0 100% repeat-x; padding-bottom:5px; margin-bottom:20px; color:#d2d2d2; line-height:22px; font-size:120%;} div#dashboard div.recent-post ul li a{color:#d2d2d2; text-decoration:none; line-height:22px;} div#dashboard div.photobox{width:220px; float:left; margin-right:7px;} div#dashboard div.photobox a{ border:#0a1015 6px solid; float:left; margin:0 10px 14px 0; } div#dashboard div.photobox img{ vertical-align:middle;} /*---- Footer ----*/ div#footer div.navigation{ float:left;} div#footer div.navigation ul li{ font-size:130%; margin-right:45px; float:left;} div#footer div.navigation ul li a{ color:#116e9a; text-decoration:none;} div#footer div.designer{ float:right;} div#footer div.designer a{ color:#3f5058; font-size:130%;} /*------------------------------------------ // 3.1 INDEX PAGE SPECIFIC STYLES //------------------------------------------*/ div#venues.box div.inner-box{ width:190px; background:url(interface/images/content/bulding.gif) 100% 0 no-repeat; } div#venues.box h3{ padding-bottom:21px; background:url(interface/images/content/dotted-border.gif) 0 100% repeat-x;} div#playlist.box div.inner-box{ width:190px; background:url(interface/images/content/playlist-design.gif) 100% 0 no-repeat;} div#playlist h3{ background:none; padding:0px; margin-bottom:2px;} div#playlist div.categories{ padding-bottom:4px;} div#playlist div.categories a{ color:#f19b00; font-size:120%; padding-right:10px; text-decoration:none;} div#playlist.box ol li{ background:url(interface/images/content/dotted-border.gif) 0 0 repeat-x; padding:5px 0;} /*------------------------------------------ // 3.2 SINGLE PAGE SPECIFIC STYLES //------------------------------------------*/ div#main.page{ padding-top: 15px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; border-top-width: 4px; border-right-width: 4px; border-bottom-width: 4px; border-left-width: 4px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: #ededed; border-right-color: #ededed; border-bottom-color: #ededed; border-left-color: #ededed; } div#main.page div.post{ width:420px; background-image: none; margin-right: 12px; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; color: #FFF; border: 3px solid #ffffff; } div#main.page div.post div.entry { background:none;} div#main div.post div.entry p.postmetadata small { color:#D2D2D2; font-size:100%; margin-bottom:10px;} div#main div.post div.entry p.postmetadata a { color:#fff; } /*---- Comments ----*/ div#main div.comments { width:400px; overflow:hidden;} div#main div.comments h4 a{ color:#ece6b3; font-size:140%; text-decoration:none; margin-bottom:10px; display:block;} div#main div.comments div.comment { border:#084563 3px solid; background:#092233; padding:15px 10px; margin-bottom:15px;} div#main div.comments div.comment div.photo{ float:left; margin-right:20px;} div#main div.comments div.comment div.entry { width:572px; float:left;} div#main div.comments div.comment div.entry h3 { color:#FFF; font-size:200%; margin-bottom:6px; margin-right:20px; line-height:1.2em;} div#main div.comments div.comment div.entry h3 span.date { color:#071822; font-size:50%;; margin-bottom:0px; padding:8px 0 0 20px; font-weight:normal;} div#main div.comments div.comment div.entry p { color:#d2d2d2; font-size:120%; line-height:22px; margin-bottom:15px;} div#main div.comments div.comment div.entry a { color:#FFF; text-decoration:none; } div#main div.comments div.comment div.entry a.comment-reply-link { font-size:120%; } /*---- Comment - Form ----*/ div#comment-form { border:#084563 3px solid; background:#092233; padding:15px 10px;} div#comment-form form{ width:445px;} div#comment-form h3{color:#FFF; font-size:200%; margin-bottom:18px; line-height:1.2em;} div#comment-form p{ margin-bottom:25px; color:#d2d2d2; font-size:120%; line-height:22px; } div#comment-form p.submit{ text-align:right; margin:0px;} div#comment-form label{ padding-left:5px; color:#D2D2D2; font-size:100%;} div#comment-form input.textbox{ padding:3px; width:185px;} div#comment-form textarea.textarea{ width:420px; padding:10px;} div#comment-form a { color:#fff; }