/* Theme Name: Special Sound Unit Theme URL: http://specialsoundunit.com Description: A funky, electric-pink radio theme for the Special Sound Unit record label Version: 1.0 Author: Clive Portman Author URL: http://portman2.com */ /* RESETS */ body {text-align: center; margin: 0; padding-bottom: 20px;} h1, h2, h3, h4, h5, p, ol, ul, p {text-align: left; margin: 0; font: 14px Arial, Helvetica, sans-serif; color: #000000;} ol, ul, li {text-align: left; list-style-type: none; margin: 0; padding: 0;} img {border: none;} a {text-decoration: none;} /* COMMON ELEMENTS */ h1 {} h2 {} p, li {font-size: 12px; line-height: 15px;} p a:link, p a:visited {color: #000000; text-decoration: underline;} p a:hover {color: #000000; text-decoration: none;} /* COMMON CLASSES */ .hide {position: absolute; left: -9999px;} /* invisible but still presented by screen readers */ .noshow {display: none;} /* invisible, even to screen readers */ .clearboth {clear: both;} body {background: #ffffff url(../images/site_gradient.png) repeat-x;} #home_page, #blog_page, #artists_page {width: 700px; min-height: 1044px; margin: 49px auto 0 auto; padding-right: 100px; position: relative; background: #E8008B url(../images/aerial.png) no-repeat top right;} #knobs {width: 700px; height: 44px; background: url(../images/knobs.png) no-repeat;} #header {width: 700px; height: 332px; background: url(../images/header_gradient.png) repeat-x; position: relative;} #header h1 {position: absolute; left: 29px; top: 33px;} #header h1 a {display: block; width: 162px; height: 117px; background: url(../images/special_sound_unit.png) no-repeat; text-indent: -9999px;} #header h2 {position: absolute; left: 25px; top: 162px; width: 334px; height: 37px; background: #ffffff url(../images/analogue_digital.png) no-repeat 4px 8px; text-indent: -9999px;} #header h3 {position: absolute; left: 25px; top: 211px; width: 631px; height: 121px; background: url(../images/artists_hatches.png) no-repeat;} #header h3 a {position: absolute; left: 0px; top: 41px; display: block; width: 276px; height: 57px; background: #ffffff url(../images/artists.png) no-repeat 6px 9px; text-indent: -9999px;} #header h4 {position: absolute; right: 5px; top: 8px; width: 196px; height: 185px; background: url(../images/speaker.png) no-repeat; text-indent: -9999px;} #flag {width: 255px; height: 85px; position: absolute; left: 232px; top: 217px; background: url(../images/flag.png) no-repeat;} /* CONTAINER HOLDS EVERYTHING BELOW THE HEADER */ #container {text-align: left; min-height: 669px; background: #000000 url(../images/container_gradient.png) repeat-x;} #content {margin-left: 25px; position: relative; background: url(../images/content_hatches.png) no-repeat left bottom;} /* HOME PAGE SPECIFIC */ #home_page #content {height: 319px;} #home_page #welcome {width: 629px; padding: 20px 0 5px; border-bottom: 1px dashed #ffffff;} #home_page #welcome p {font: bold 16px Arial, Helvetica, sans-serif; word-spacing: 5px; color: #d9e021;} #intro {position: relative;} #intro p { margin-bottom: 10px; font: bold 10px Arial, Helvetica, sans-serif; color: #ffffff;} #intro div.left {position: absolute; left: 0; top: 15px; width: 165px;} #intro div.right {position: absolute; left: 170px; top: 15px; width: 175px;} #intro div.getintouch {position: absolute; left: 0; top: 110px; width: 350px; height: 36px; background: #333333;} #intro div.getintouch p a:link, #intro div.getintouch p a:visited {color: #d9e021; text-decoration: none;} #intro div.getintouch p a:hover {text-decoration: underline;} #intro div.getintouch p.left {position: absolute; left: 7px; top: 5px;} #intro div.getintouch p.right {position: absolute; left: 175px; top: 5px;} #whitebox {position: absolute; left: 355px; top: 52px; width: 276px; height: 239px; background: #ffffff;} #whitebox h3 a {display: block; width: 262px; height: 33px; margin: 0 5px; background: #ffffff url(../images/blog_news_feed.png) no-repeat 3px 9px; border-bottom: 1px dashed #00a99d; text-indent: -9999px;} #whitebox h4 {margin: 5px 10px 0;} #whitebox h4 a { font: 26px "Times New Roman", Times, serif; color: #333333; line-height: 26px;} #whitebox p { margin: 10px; height: 73px; overflow: hidden; font: bold 10px Arial, Helvetica, sans-serif; color: #333333;} #whitebox a.blogpostlink {position: absolute; right: 7px; bottom:7px; display: block; width: 125px; height: 18px; padding-top: 3px; background: #333333; font: bold 10px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center;} /* BLOG PAGE SPECIFIC */ #blog_page #container {padding-top: 10px;} #left {width: 163px; float: left; margin-left: 25px; padding-right: 8px;} #left h5 {font: bold 10px Arial, Helvetica, sans-serif; color: #d9e021; margin: 20px 0 3px;} #left h5 a:link, #left h5 a:visited {font: bold 10px Arial, Helvetica, sans-serif; color: #d9e021; margin: 20px 0 3px;} #left h5 a:hover {text-decoration: underline;} #left p {font: bold 11px Arial, Helvetica, sans-serif; color: #ffffff; margin-bottom: 10px;} #left li a:link, #left a:visited {font: bold 10px Arial, Helvetica, sans-serif; color: #ffffff; margin-bottom: 2px;} #left li a:hover {text-decoration: underline;} #blog_page #welcome {width: 163px;} #blog_page #getintouch {position: relative; height: 92px; margin: 50px 0 10px; padding: 7px 10px; background: #333333;} #blog_page #getintouch p {font: bold 10px Arial, Helvetica, sans-serif;} #blog_page #getintouch p a:link, #blog_page #getintouch p a:visited {color: #d9e021; text-decoration: none;} #blog_page #getintouch p a:hover {text-decoration: underline;} #blog_page #getintouch p.subscribe {margin-bottom: 0;} #mailpress {} #mp-formdiv {position: relative; background: #96C;} #mp-formdiv form {margin: 0; padding: 0; } #mp-formdiv input {position: absolute; margin: 0; width: 143px;} #mp-formdiv input.MailPressFormEmail {top: 5px; left: 0; width: 137px; padding: 2px; font: bold 10px Arial, Helvetica, sans-serif; color: #d9e021; border: 1px solid #222222; background: #333333;} #mp-formdiv input.MailPressFormSubmit {top: 25px; right: 0; width: 70px; font: bold 10px Arial, Helvetica, sans-serif; color: #333333;} #mp-formdiv input.MailPressFormSubmit:hover {color: #E20088;} #mp-loading {margin-top: 10px;} #blog_page #footer {padding-top: 131px; background: url(../images/blog_hatches.png) no-repeat;} #blog_page #footer li {float: none; display: block; } #blog_page #footer li.copyright {margin-left: 0; padding-right: 0; border-right: none;} #blog_page #footer li.sds {padding-left: 0;} #right {float: right; width: 458px; margin-right: 45px; } #right h2 {} #right h2 a {display: block;height: 62px; background: url(../images/blog_news_feed_large.png) no-repeat; text-indent: -9999px;} div.post {background: #ffffff; padding: 10px; margin-bottom: 10px;} div.post h4 { margin-bottom: 10px;} div.post h4 a {font: 26px "Times New Roman", Times, serif; color: #333333; line-height: 26px;} div.post img {margin-bottom: 10px;} div.post p {margin-bottom: 10px; font: bold 11px Arial, Helvetica, sans-serif;} ul.postcredits {width: 360px; margin-bottom: 10px; border-top: 1px dashed #999999;} ul.postcredits li {float: left; display: inline; font: bold italic 10px Arial, Helvetica, sans-serif; line-height: 14px;} ul.postcredits li.author, ul.postcredits li.date {padding-right: 5px; text-transform: uppercase; } ul.postcredits li.author {color: #999999;} ul.postcredits li.date {color: #333333} ul.postcredits li.commentcount {color: #999999} /* ARTISTS PAGE SPECIFIC */ #artists_page #content {padding-top: 5px;} #artists_page #content h3 a {display: block; width: 273px; height: 34px; margin: 0 0 0 357px; background: #ffffff url(../images/blog_news_feed.png) no-repeat 8px 8px ; text-indent: -9999px;} div.artist {width: 631px; height: 237px; border-bottom: 1px dashed #ffffff;} ul.artist {display: block; width: 631px; height: 20px; padding-bottom: 3px; margin-bottom: 7px; border-bottom: 1px dashed #e7bfd7;} ul.artist li {float: left; display: inline; font: bold 10px Arial, Helvetica, sans-serif; color: #ffffff; padding: 6px 5px 0 0;} ul.artist li.artist, ul.artist li.album { font: bold 16px Arial, Helvetica, sans-serif; color: #ffffff; padding-top: 0;} div.albumcover {float: left;} div.tracklist {float: left; margin-left: 10px; width: 211px; height: 200px; position: relative;} div.tracklist h5 {font: bold 11px Arial, Helvetica, sans-serif; color: #d9e021;} .mp3player {display: block; float: left; height: 12px; margin: 2px 2px 0 0; border: none;} div.tracklist li {clear: both; text-transform: uppercase; font: bold 11px Arial, Helvetica, sans-serif; color: #ffffff; margin: 0; line-height: 13px;} div.tracklist p {position: absolute; left: 0; bottom: 0; width: 200px; font: bold 11px Arial, Helvetica, sans-serif; color: #d9e021;} div.tracklist p a:link, div.tracklist p a:visited {color: #ffffff; text-decoration: none;} div.tracklist p a:hover {text-decoration: underline;} div.purchase {float: left; width: 200px; height: 200px; margin-left: 10px; background: #333333;} div.purchase h5 {margin: 8px 0 0 10px; font: bold 10px Arial, Helvetica, sans-serif; color: #ffffff;} div.purchase p {margin: 0 10px; font: bold 10px Arial, Helvetica, sans-serif; color: #d9e021;} div.purchase ul {padding-left: 40px; height: 34px; margin-left: 8px;} div.purchase ul.cd {margin-top: 25px; background: url(../images/cd.png) no-repeat;} div.purchase ul.mp3 {margin-top: 10px; background: url(../images/download.png) no-repeat;} div.purchase li a {text-transform: uppercase; font: bold 16px Arial, Helvetica, sans-serif; color: #ffffff; line-height: 16px;} div.purchase li.price a:link, div.purchase li.price a:visited {color: #d9e021;} div.purchase li.price a:hover {text-decoration: underline;} #artists_page div.getintouch {position: absolute; left: 0; top: 285px; width: 350px; height: 36px; background: #333333;} #artists_page div.getintouch p {font: bold 11px Arial, Helvetica, sans-serif; color: #ffffff;} #artists_page div.getintouch p a:link, #artists_page div.getintouch p a:visited {color: #d9e021; text-decoration: none;} #artists_page div.getintouch p a:hover {text-decoration: underline;} #artists_page div.getintouch p.left {position: absolute; left: 7px; top: 5px;} #artists_page div.getintouch p.right {position: absolute; left: 175px; top: 5px;} #artists_page div.getintouch {clear: both;} #artists_page #content {padding-bottom: 174px;} /* DOWNLOADS SPECIFIC */ #download {padding: 20px 0; height: 385px;} #download p, #download li {margin-bottom: 10px; color: #ffffff; font-size: 14px;} #download li a:link, #download li a:visited {text-decoration: underline; color: #ffffff;} #download p a:hover {color: #D9E021;} /* FOOTER */ #footer {margin-top: 4px;} #footer li {float: left; display: inline; font: 9px Arial, Helvetica, sans-serif; line-height: 9px; color: #ffffff;} #footer li.copyright {margin-left: 25px; padding-right: 5px; border-right: 1px solid #ffffff;} #footer li.sds {padding-left: 5px;} #footer li a:link, #footer li a:visited {color: #ffffff; text-decoration: none;} #footer li a:hover {text-decoration: underline;} /* RADIO BASE SITS OUTSIDE THE _PAGE ELEMENT */ #radio_base {width: 800px; height: 100px; background: url(../images/radio_base.png) no-repeat; margin: 0 auto;}