/* Thanks to Chris Coyier & Tom Gavin http://chriscoyier.net http://tomgavin.net */ html { height: 101%; } * { margin: 0; padding: 0; border: 0; } body { height: 100%; color: #4c4c4c; font-size: 63.5%; font-family: arial, sans-serif; background: #F9CC8A url(../images/backgrounds/toparch11.jpg) no-repeat center top; } body#welcome { background: url(../images/backgrounds/body-bg-color.jpg) repeat; } body#welcome html { height: 100%; } p { font-size: 1.3em; margin: 2px 1px 10px 5px} ul, li { font-size: 1.1em; list-style: none; } ol { margin-left: 2em; font-size: 1.2em;} a { outline: none; color: #004991; font-family: arial, sans-serif; text-decoration: none; } /*a img { border: none; } */ a:hover, a:active { text-decoration: underline; } h3 { margin: 0; padding: 0; border: 0; font-size: 1.0em; } h4 { font-size: 0.9em; font-weight: 400; } h5 { font-size: 1.0em; color: #004991; cursor: pointer; padding: 0px 10px 3px 7px; font-weight: 600; margin: 0; } .small { font-size: 1.1em; } .small-link { font-size: 1.0em; color: #4c4c4c; } .smaller { font-size: 0.9em; } .smallest { font-size: 0.75em; font-weight: 900; } .left { float: left; } .left-text { text-align: left; } .right { float: right; } .bold { font-weight: 700; } .bolder { font-weight: 900; } .centered { margin: 0 auto; } .centered-text { text-align: center; } .border { border: 1px solid; background-color: #4c4c4c; color: white; padding: 5px; } .italic { font-style: italic; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4.5em; } .push { height: 4.5em; } .stickyfooter { background: black url(../images/backgrounds/footer.jpg); height: 4.5em; color: white; text-align: center; } .stickyfooter a { color: white; } .stickyfooter p { padding-top: 1em; font-size: 1.1em; } #header { margin: 0px auto ; padding: 100px 0 0 0; border: 0; height: 100px; text-indent: -9999px; } #title { margin: 0 auto; width: 152px; height: 27px; background: url(../images/vitamin-d-title3.png) no-repeat center top; text-indent: -9999px; } #title a { display: block; width: 152px; height: 27px; } #title-welcome { margin: 0 10px 10px 0; float: right; width: 152px; height: 37px; background: url(../images/vitamin-d-title3.png) no-repeat center top; text-indent: -9999px; } #title-welcome a { display: block; width: 152px; height: 37px; } #menu-wrap { padding-top: 5px; margin: 0 auto; width: 425px; } ul#menu { margin: 0 auto; padding-top: 10px; position: relative; left: 12px; } #menu li a { margin: 0 12px 0 0; } #menu { margin: 15px auto 3px; width: 410px; } #menu-words { padding: 5px; } .lyric-p {float: left;} body#home #menu a.home { background-position: right; } body#listen #menu a.listen { background-position: right; } body#look #menu a.look { background-position: right; } body#about #menu a.about { background-position: right; } body#trumpet #menu a.trumpet { background-position: right; } body#reviews #menu a.reviews { background-position: right; } body#links #menu a.links { background-position: right; } body#faq #menu a.faq { background-position: right; } body#contact #menu a.contact { background-position: right; } #menu a.home { display: block; height: 26px; width: 43px; margin: 0 6px 0 6px; background: url(../images/menu-home.png) no-repeat left; text-indent: -9999px;} #menu a.listen { display: block; height: 26px; width: 49px; margin: 0 6px 0 6px; background: url(../images/menu-listen.png) no-repeat left; text-indent: -9999px; } #menu a.look { display: block; height: 26px; width: 35px; margin: 0 6px 0 6px; background: url(../images/menu-look.png) no-repeat left; text-indent: -9999px;} #menu a.about { display: block; height: 26px; width: 45px; margin: 0 6px 0 6px; background: url(../images/menu-about.png) no-repeat left; text-indent: -9999px;} #menu a.reviews { display: block; height: 26px; width: 62px; margin: 0 6px 0 6px; background: url(../images/menu-reviews.png) no-repeat left; text-indent: -9999px; } #menu a.links { display: block; height: 26px; width: 39px; margin: 0 6px 0 6px; background: url(../images/menu-links.png) no-repeat left; text-indent: -9999px;} #menu a.faq { display: block; height: 26px; width: 38px; margin: 0 6px 0 6px; background: url(../images/menu-faq.png) no-repeat left; text-indent: -9999px;} #menu a.contact { display: block; height: 26px; width: 66px; margin: 0 6px 0 6px; background: url(../images/menu-contact.png) no-repeat left; text-indent: -9999px;} #menu a.home:hover, #menu a.listen:hover, #menu a.look:hover, #menu a.about:hover, #menu a.reviews:hover, #menu a.links:hover, #menu a.faq:hover, #menu a.contact:hover { background-position: right center; } #page-wrap { margin: 0 auto; width: 800px; min-height: 400px; } #page-wrap-look { margin: 0 auto; width: 750px; min-height: 400px; } #page-wrap-home { margin: 0 auto; width: 750px; min-height: 400px; } #bridge-title { margin: 0 auto; height: 21px; width: 71px; margin-bottom: 2px; background: url(../images/title-bridge-black.png) no-repeat center top; text-indent: -9999px; } #new-release { font-size: 1.1em; margin: 1px 0 3px 0; } #bridge-sidebar { float: left; width: 200px; min-height: 400px; border: 0; margin-right: 30px; padding: 0; text-align: center;} #bridge-sidebar ul { text-align: left; padding-bottom: 5px; } #bridge-cd-cover { width: 200px; height: 200px; background: url(../images/cdcover-bridge200.png); } #bridge-cd-cover a { display: block; width: 200px; height: 200px; background: url(../images/cdcover-bridge-player.png) no-repeat left center; text-indent: -9999px; } #bridge-cd-cover a:hover { background-position: right; } ul#songs { font-size: 1.1em; list-style: none; letter-spacing: -0.02em; margin: 10px 0 0 40px; text-align: right;} ul#songs li { list-style: none; margin-bottom: 3px; } ul#songs object { display: inline-block; vertical-align: middle; height: 20px; width: 20px;} #music-player { text-align: left; display: block; width: 100px; height: 20px; margin: 0 auto; } #music-player a { display: block; width: 100px; height: 20px; background: url(../images/music-player-button.png) no-repeat left center; text-indent: -9999px; } #music-player a:hover { background-position: right;} #buy-button { display: block; width: 35px; height: 35px; margin: 10px 10px 10px 0; float: left; } #buy-button a { display: block; width: 35px; height: 35px; background: url(../images/buy-button-2.png) no-repeat right center; text-indent: -9999px; } #buy-button a:hover { background-position: left;} #news { float: left; width: 350px; margin-bottom: 20px; } #news-title { height: 19px; width: 54px; margin-bottom: 15px; background: url(../images/title-news.png) no-repeat center top; text-indent: -9999px; } #social { width: 80px; margin: 20px auto 10px;} #social p { padding-bottom: 10px; } #social-title { height: 17px; width: 66px; margin: 0 auto 10px; background: url(../images/title-social.png) no-repeat center top; text-indent: -9999px; } #social-logos { width: 80px; } #logo-facebook { display: block; float: left; height: 40px; width: 40px; background: url(../images/logo-facebook.png) no-repeat center top; text-indent: -9999px; } #logo-facebook a { display: block; height: 40px; width: 40px; background: url(../images/logo-facebook.png) no-repeat center top; text-indent: -9999px; } #logo-facebook:hover { opacity: 0.8 } #logo-myspace { display: block; float: left; height: 40px; width: 40px; background: url(../images/logo-myspace.png) no-repeat center top; text-indent: -9999px; } #logo-myspace a { display: block; height: 40px; width: 40px; background: url(../images/logo-myspace.png) no-repeat center top; text-indent: -9999px; } #logo-myspace:hover { opacity: 0.8 } #logo-bandcamp { display: block; float: left; height: 40px; width: 40px; background: url(../images/logo-bc2.png) no-repeat center top; text-indent: -9999px; } #logo-bandcamp a { display: block; height: 40px; width: 40px; background: url(../images/logo-bc2.png) no-repeat center top; text-indent: -9999px; } #logo-bandcamp:hover { opacity: 0.8 } #logo-reverbnation { display: block; float: left; height: 40px; width: 40px; background: url(../images/logo-reverbnation.png) no-repeat center top; text-indent: -9999px; } #logo-reverbnation a { display: block; height: 40px; width: 40px; background: url(../images/logo-reverbnation.png) no-repeat center top; text-indent: -9999px; } #logo-reverbnation:hover { opacity: 0.8 } #shows-sidebar { margin: 0 0 10px 10px; float: left; text-align: center; width: 150px; background: #C0A172; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px;} #shows-sidebar p { margin-bottom: 0px;} #shows-title { height: 10px; margin-bottom: 5px; padding: 5px 0 10px 0; background: url(../images/title-shows.png) no-repeat center center; text-indent: -9999px; } .hidden-text { text-align: left; margin: 0 14px 10px 14px; } #trumpet-sm-wrap { width: 180px; margin-top: 20px;} #trumpet { margin: 5px 5px 5px 0; padding: 5px 0 5px 0; display: block; width: 136px; height: 72px; background: white url(../images/trumpet_sm.png) no-repeat left center; text-indent: -9999px; -moz-border-radius: 10px; -webkit-border-radius: 10px;} #trumpet:hover { opacity: 0.8 } /* +++++++++ LISTEN PAGE +++++++++++++++++++++++++++++++ */ #music-player2 { text-align: left; display: block; width: 100px; height: 20px; float: right; } #music-player2 a { display: block; width: 100px; height: 20px; background: url(../images/music-player-button.png) no-repeat left center; text-indent: -9999px; } #music-player2 a:hover { background-position: right;} #buy-button2 { text-align: left; display: block; width: 35px; height: 35px; float: right; margin: 8px 0 0 0; } #buy-button2 a { display: block; width: 35px; height: 35px; background: url(../images/buy-button-2.png) no-repeat right center; text-indent: -9999px; } #buy-button2 a:hover { background-position: left;} #bridge { float: left; width: 250px; text-align: center; margin: 0 10px 0 0; } #bridge-cover { margin: 6px 0 0 0; width: 250px; height: 250px; background: url(../images/cdcover-bridge250.png) no-repeat center top; text-indent: -9999px; } #cd-info { float: left; width: 265px; height: 300px; margin: 60px 10px 0 0; text-align: right; } ul#listen-songs { float: left; width: 250px; font-size: 1.25em; list-style: none; letter-spacing: -0.02em; margin: 40px 0 0 0; } ul#listen-songs li { list-style: none; margin-bottom: 2px; font-size: 0.95em; } ul#listen-songs li a { color: #4c4c4c; } ul#listen-songs object { display: inline-block; vertical-align: middle; height: 20px; width: 20px; } #build-another-wrap { width: 400px; float: left; padding-bottom: 20px; } #build-another-cdwrap { width: 200px; text-align: center; float: left; margin: 0 10px 0 0; } #build-another-cover { margin: 6px 0 0 0; width: 200px; height: 200px; background: url(../images/cdcover-build-another200.png) no-repeat center top; text-indent: -9999px; } #build-another-info { } #music-player3 { display: block; width: 100px; height: 20px;} #music-player3 a { display: block; width: 100px; height: 20px; background: url(../images/music-player-button.png) no-repeat left center; text-indent: -9999px; } #music-player3 a:hover { background-position: right;} #buy-button3 { display: block; width: 35px; height: 35px; margin: 8px 0 0 0; } #buy-button3 a { display: block; width: 35px; height: 35px; background: url(../images/buy-button-2.png) no-repeat right center; text-indent: -9999px; } #buy-button3 a:hover { background-position: left;} .top-padding { padding-top: 40px; } ul#listen-songs2 { float: left; width: 190px; font-size: 1.25em; list-style: none; letter-spacing: -0.02em; margin: 0px 0 10px 0; } ul#listen-songs2 li { list-style: none; margin-bottom: 2px; font-size: 0.95em; } ul#listen-songs2 li a { color: #4c4c4c; } ul#listen-songs2 object { display: inline-block; vertical-align: middle; height: 20px; width: 20px; } #trumpet-moments-wrap { width: 400px; float: left; padding-bottom: 20px; text-align: right; } #trumpet-moments-cdwrap { width: 200px; text-align: center; float: right; margin: 0 0 0 10px; } #trumpet-moments-cover { margin: 6px 0 0 0; width: 200px; height: 200px; background: url(../images/trumpetmoments200.png) no-repeat center top; text-indent: -9999px; } #trumpet-moments-info { text-align: right; } ul#listen-songs3 { float: right; text-align: right; width: 190px; font-size: 1.25em; list-style: none; letter-spacing: -0.02em; margin: 0px 0 10px 0; } ul#listen-songs3 li { list-style: none; margin-bottom: 2px; font-size: 0.95em; } ul#listen-songs3 li a { color: #4c4c4c; } ul#listen-songs3 object { display: inline-block; vertical-align: middle; height: 20px; width: 20px; } /* +++++++++ LOOK PAGE +++++++++++++++++++++++++++++++ */ #music-films-wrap { float: left; width: 375px; } #music-films-title { margin: 0 0 15px auto; height: 20px; width: 130px; background: url(../images/title-music-films.png) no-repeat center top; text-indent: -9999px; } #music-films-ul { } .film-info { text-align: right; margin: 15px 0 0 0; } .film-thumb { float: right; margin: 0 0 0 8px; } #music-films-ul li a { border-style: solid; border-width: 1px; border-color: #444444; } #music-films-li-tm2 { width: 375px; height: 110px; float: right; margin: 0 0 10px 0; } #music-films-li-tm2 a { display: block; width: 150px; height: 110px; background: url(../images/film-trumpet-moment-2.png) no-repeat left center; text-indent: -9999px; } #music-films-li-tm2 a:hover { background-position: right;} #music-films-li-hop { width: 370px; height: 110px; float: right; margin: 0 0 10px 0; } #music-films-li-hop a { display: block; width: 150px; height: 110px; background: url(../images/film-hopscotch.png) no-repeat left center; text-indent: -9999px; } #music-films-li-hop a:hover { background-position: right;} #music-films-li-miss { width: 370px; height: 110px; float: right; margin: 0 0 10px 0; } #music-films-li-miss a { display: block; width: 150px; height: 110px; background: url(../images/film-miss-tomorrow.png) no-repeat left center; text-indent: -9999px; } #music-films-li-miss a:hover { background-position: right; } #photos-wrap { float: right; width: 375px; } #photos-title { margin: 0 0 15px 0; height: 21px; width: 82px; background: url(../images/title-photos.png) no-repeat center top; text-indent: -9999px; } .photos-info { padding: 10px 0 0 0; } .photos-thumbs { float: left; margin: 0 8px 0 0; border-style: solid; border-width: 1px; border-color: #444444; } #photos-ul li { margin-bottom: 10px; width: 390px; } .photos { width: 375px; height: 110px; } #photos-studio { display: block; float: left; width: 150px; height: 110px; border: solid 1px #444444; margin: 0 8px 0 0; background: url(../images/photos-studio.png) no-repeat left center; text-indent: -9999px; } #photos-studio:hover { background-position: right; } #photos-publicity { display: block; float: left; width: 150px; height: 110px; border: solid 1px #444444; margin: 0 8px 0 0; background: url(../images/photos-bunker.png) no-repeat left center; text-indent: -9999px; } #photos-publicity:hover { background-position: right; } #photos-various { display: block; float: left; width: 150px; height: 110px; border: solid 1px #444444; margin: 0 8px 0 0; background: url(../images/photos-various.png) no-repeat left center; text-indent: -9999px; } #photos-various:hover { background-position: right; } .photo-gallery { margin-top: 5px; } /* +++++++++ ABOUT PAGE +++++++++++++++++++++++++++++++ */ #band-wrap { margin: 0 auto; width: 640px; padding-right: 30px; } #hatch { float: left; margin: 7px 15px 15px 0; height: 250px; width: 250px; background: url(../images/band-hatch250.png) no-repeat center top; text-indent: -9999px; } #sofie { float: right; margin: 7px 15px 15px 0; height: 237px; width: 300px; background: url(../images/band-sofie300.png) no-repeat center top; text-indent: -9999px; } #dennis-wrap {} /* +++++++++ REVIEWS PAGE +++++++++++++++++++++++++++++++ */ #review-wrap { margin: 0 auto; width: 750px; } #review1 { float: left; width: 230px; padding: 10px; } #review2 { float: left; width: 230px; padding: 10px; } #review3 { float: left; width: 230px; padding: 10px; } #review4 { float: left; width: 340px; padding: 10px; } #review5 { float: left; width: 340px; padding: 10px; } #indiemusic { display: block; width: 170px; height: 30px; background: url(../images/reviewsindiemusic.png) no-repeat center top; text-indent: -9999px; } #nxne { display: block; width: 170px; height: 28px; background: url(../images/reviewsnxne.jpg) no-repeat center top; text-indent: -9999px; } #americanauk { display: block; width: 170px; height: 26px; background: url(../images/reviewsamericanauk.jpg) no-repeat center top; text-indent: -9999px; } #metroland { display: block; width: 170px; height: 27px; background: url(../images/reviewsmetroland.jpg) no-repeat center top; text-indent: -9999px; } #altcountrynl { display: block; width: 116px; height: 36px; background: url(../images/reviewsaltcountry.jpg) no-repeat center top; text-indent: -9999px; } /* +++++++++ BUY PAGE +++++++++++++++++++++++++++++++ */ #buy-wrap { margin: 0px auto 20px; width: 750px; text-align: center; padding: 27px; background: #D2B07D; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #buy-wrap h1 { padding: 0 0 15px 0; } #buy-cdcovers { float: left; margin: 15px auto 8px auto; width: 140px; height: 250px; } #buy-cd-bridge { width: 140px; height: 125px; background: url(../images/cdcover-bridge100.png) no-repeat center center; text-indent: -9999px; } #buy-cd-buildanother { width: 140px; height: 125px; background: url(../images/cdcover-buildanother100.png) no-repeat center center; text-indent: -9999px; } #buy-cdbaby { float: left; width: 260px; padding: 20px; } #buy-cdbaby a { font-size: 1.3em; } #buy-cdbaby h2 { padding-bottom: 10px; } #buy-cdbaby p { padding: 15px 20px 0 20px; } #buy-button-cdbaby { margin: 10px 0 0 0; display: block; width: 260px; height: 63px; background: url(../images/logo-cdbaby.png) no-repeat center center; text-indent: -9999px; } #buy-button-cdbaby a { margin: 10px 0 0 0; display: block; width: 260px; height: 63px; background: url(../images/logo-cdbaby.png) no-repeat center center; text-indent: -9999px; } #buy-button-cdbaby:hover { opacity: 0.8 } #buy-download { float: left; width: 260px; padding: 20px; } #buy-download h2 { padding-bottom: 10px; } #buy-download p { padding: 0 20px 0 20px; } #download-bc { width: 130px; float: left; } #download-itunes { width: 130px; float: left; } #buy-button-bc { float: left; margin: 10px 0 0 0; display: block; width: 130px; height: 75px; background: url(../images/logo-bc.png) no-repeat center top; text-indent: -9999px; } #buy-button-bc a { margin: 30px 0 0 0; display: block; width: 130px; height: 75px; background: url(../images/logo-bc.png) no-repeat center top; text-indent: -9999px; } #buy-button-bc:hover { opacity: 0.8 } #buy-button-itunes { float: left; margin: 10px 0 0 0; display: block; width: 130px; height: 75px; background: url(../images/logo-itunes.png) no-repeat center top; text-indent: -9999px; } #buy-button-itunes a { margin: 30px 0 0 0; display: block; width: 130px; height: 75px; background: url(../images/logo-itunes.png) no-repeat center top; text-indent: -9999px; } #buy-button-itunes:hover { opacity: 0.8 } /* ++++++++++++++ LINKS PAGE ++++++++++++++++++++++ */ #links-wrap { width: 700px; margin: 0 auto; } #links-wrap a { font-weight: 600; } #links-wrap li { padding-bottom: 13px; } #links1 { width: 320px; float: left; padding: 15px; } #links2 { width: 320px; float: left; padding: 15px; } /* ++++++++++++++ TRUMPET DIAGRAM ++++++++++++++++++++++ */ #trumpet-diagram-wrap { width: 590px; margin: 0 auto; text-align: center; padding-bottom: 15px; } .border { width: 590px; border: 1px solid #C0A172; } /* ++++++++++++++ CONTACT PAGE ++++++++++++++++++++++ */ #contact-wrap { margin: 0 auto 20px; width: 550px; background: #D2B07D; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 30px;} #contact-info { text-align: center;} #contact2 { padding: 15px 30px 0px 30px; } #contact2 form { font-size: 1.3em; padding-top: 10px; } #thanks-wrap { margin: 50px auto 200px; width: 350px; background: #D2B07D; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 30px;} #thanks { text-align: center; margin: 10px 0 0px 0; font-size: 1.1em; } #contact-team { float: right; padding-top: 15px; } #contact-team p { padding-bottom: 25px; } .clear { clear: both; } #footer { width: 525px; text-align: center; margin: 0 auto; } #footer p { padding: 2px 0 0 0; margin: 0; } #footer-menu li { display: inline; margin: 0 auto; padding: 0 4px 0 4px; } #footer-menu { padding-top: 0.7em; } .container .pusher { color: #004991; cursor: pointer; padding: 0px 10px 3px 7px; font-weight: 500; margin: 0; } .container .mover { text-align: left; padding: 0px 10px 3px 7px; margin: 0; font-size: 0.9em; } .container { }