/* ----------------------------------------------- CiaraCorr.com/GetMyWay v1.0 3 March 2010 ----------------------------------------------- Will Phillips - Will@Volterna.com Volterna.com - Web Design & Strategy ----------------------------------------------- */ /* ----------------------------------------------- Elements ----------------------------------------------- */ html { background: #15181c url(../img/bg.jpg) top center repeat-x; text-align: center; padding: 0; margin: 0; } body { width: 940px; margin: 0 auto; padding: 0; text-align: left; font-family: Verdana, sans-serif; font-size: 12px; } a { color: #7496b3; text-decoration: none; } a:hover { color: #15181c; text-decoration: underline;} fieldset label { display: block; width: 274px; margin: 0 0 10px 6px; font-size: 14px; } fieldset input { display: block; width: 270px; height: 20px; padding: 10px 5px; margin: 0 0 10px 0; border: 1px solid #d3d7da; background: transparent url(../img/btn-input.png) center center; font-size: 14px; } fieldset input.hidden { display: none; } fieldset input.submit { display: block; background: transparent url(../img/btn-mailing.jpg) center center; width: 280px; width: 43px; border: 0 none; color: #fff; font-size: 12px; } fieldset input#submit { display: block; background: transparent url(../img/btn-mailing.jpg) center center; width: 280px; height: 43px; border: 0 none; text-indent: -9999px; cursor: pointer; padding: 0; } h1, h2, h3 { color: #33393f; font-weight: normal; } h1 { font-size: 20px; text-shadow: 0 2px 1px #a9acb4; } h2 { font-size: 16px; text-shadow: 0 1px 1px #a9acb4; } h3 { color: #47596b; font-size: 12px; background: transparent url(../img/bg-line.gif) bottom center repeat-x; padding: 0 0 10px 0; margin: 0 0 10px 0; } h1 span, h2 span, h3 span { display: none; } ul { list-style: none; } li { background: transparent url(../img/icon-bullet.png) center left no-repeat; padding: 5px 0 5px 12px; margin: 0 0 5px 0; } li.even { background-color: #d9dde0; } p { line-height: 166%; margin-bottom: 0.5em; } p.cta { display: block; width: 270px; height: 20px; padding: 10px 10px 13px 10px; margin: 0 0 2px 0; color: #fce62a; background: transparent url(../img/btn-blank.png) center center; } p.cta a { width: 100%; color: #e4b707; } p.cta a :hover { color: #fce62a;} a.cta-itunes { background: transparent url(../img/icon-itunes.png) center left no-repeat; padding: 2px 2px 2px 21px; } a.cta-masterbeat { background: transparent url(../img/icon-masterbeat.png) center left no-repeat; padding: 2px 2px 2px 21px; } .box p { padding: 0 10px; } .bottom { width: 100%; height: 20px; margin: 0; padding: 0; } .last { margin-right: 0; } .clear { clear: both; } /* ----------------------------------------------- Main Architecture ----------------------------------------------- */ #container { width: 100%; background: black url(../img/bg-content.gif) top center repeat-y; } #content { width: 100%; background: transparent url(../img/bg-masthead.jpg) top center no-repeat; } #header { height: 220px; } #header ul { display: none; padding: 180px 0 0 0; margin: 0 10px 0 20px; width: 920px; list-style: none; background: transparent; } #header:hover ul{ display: block; } #header ul li { float: left; display: block; width: 300px; padding: 0; margin-right: 10px;padding: 0; margin: 0; background: none;} #header ul li a { color: #e4b707; font-size: 14px;} #header ul li a:hover { color: #fce62a; } #header ul li a#itunes{ background: transparent url(../img/icon-itunes.png) center left no-repeat; padding: 2px 2px 2px 21px;} #header ul li a#enter { background: transparent url(../img/icon-arrow.png) center left no-repeat; padding: 2px 2px 2px 13px;} /* ----------------------------------------------- Navigation ----------------------------------------------- */ ul#nav { padding: 0; margin: 0 10px; width: 920px; list-style: none; background: transparent; } ul#nav li { padding: 0; margin: 0; } li#promos { margin-right: 0; } ul#nav li a { float: left; display: block; width: 300px; height: 40px; padding: 0; margin: 0 10px 0 0; background: #15181c url(../img/bg-tabs.jpg) center center no-repeat; color: #e3b505; white-space: nowrap; } ul#nav li a span { display: none; } ul#nav li#tab-video a { background-position: bottom left; } ul#nav li#tab-video a:hover { background-position: center left; } ul#nav li#tab-video a.active { background-position: top left; } ul#nav li#tab-iphone a { background-position: bottom center; } ul#nav li#tab-iphone a:hover { background-position: center center; } ul#nav li#tab-iphone a.active { background-position: top center; } ul#nav li#tab-promos a { background-position: bottom right; margin-right: 0;} ul#nav li#tab-promos a:hover { background-position: center right; margin-right: 0;} ul#nav li#tab-promos a.active { background-position: top right; margin-right: 0;} /* ----------------------------------------------- Marquee Features ----------------------------------------------- */ #marquee { clear: both; width: 920px; margin: 0 10px; background: #f0f4f8 url(../img/bg-marquee.gif) top center repeat-y; color: #33393f; } #marquee #video { background: transparent url(../img/bg-marquee-video.jpg) top center no-repeat; } #marquee #iphone { background: transparent url(../img/bg-marquee-iphone.jpg) top center no-repeat; } #marquee #promos{ background: transparent url(../img/bg-marquee-promos.jpg) top center no-repeat; } #marquee .feature { width: 900px; padding: 10px 10px 0; } #marquee .feature .col { float: left; width: 280px; margin: 0 10px 0 0; } #marquee .feature .double { width: 600px; margin-left: 10px; } #marquee .feature .half { width: 445px; } #marquee .feature .half img.banner { width: 445px; height: 150px; margin-bottom: 10px; } #marquee .feature .last { margin-right: 0; } #marquee .feature li { line-height: 166%; } #marquee #video .col { width: 290px; margin-right: 0; } #marquee #video .feature .double { margin-left: 0; } #marquee #video h2 { display: block; height: 100px; width: 290px; background: transparent url(../img/bg-request.jpg) center center no-repeat; margin-bottom: 0; } #marquee #iphone .col p { margin-bottom: 10px; } #marquee #iphone #screenshots { width: 318px; height: 300px; background: transparent url(../img/bg-iphone-sprite.png) center top repeat-y; } #marquee #iphone #screenshots #screenshots-t { width: 100%; height: 250px; background: transparent url(../img/bg-fade-t.png) center top repeat-x; } #marquee #iphone #screenshots #screenshots-b { width: 100%; height: 50px; background: transparent url(../img/bg-fade-b.png) center bottom repeat-x; } #marquee #iphone li { font-size: 16px; background-position: 5px 15px; padding-left: 17px; } #marquee .bottom { background: transparent url(../img/bg-marquee-bottom.jpg) bottom center no-repeat; } /* ----------------------------------------------- Sub-feature Modules ----------------------------------------------- */ #modules { clear: both; width: 920px; margin: 0 10px; } #modules .module { float: left; width: 300px; height: 314px; padding: 0 0 10px 0; margin: 0 10px 0 0; background: #f0f4f8 url(../img/bg-module.jpg) bottom center no-repeat; color: #33393f; } #modules .module .heading { background: transparent url(../img/bg-module-header.jpg) top center no-repeat; width: 280px; padding: 10px; } #modules .last { margin-right: 0; } #modules #tweet { width: 260px; height: 141px; padding: 10px; background: transparent url(../img/bg-twitter.jpg) top center no-repeat; font-size: 14pt; overflow: hidden; } #modules #tweet ul { list-style: none; } #modules #tweet ul li{ padding: 0; background-image: none; } #modules #tweet ul li .tweet_time{ display: block; font-size: 8pt; margin-bottom: 10px; } #modules #twitter-footer { width: 280px; height: 86px; background: transparent url(../img/bg-twitter-footer.jpg) top center no-repeat; } #modules #twitter-footer p { display: none; } /* ----------------------------------------------- Footer ----------------------------------------------- */ #footer { clear: both; background: transparent url(../img/bg-footer.jpg) top center no-repeat; width: 920px; padding: 15px 10px 40px;} #footer p { font-size: 10px; color: #fff; } #footer a { color: #e3b505; } #footer p#enter { float: right; display: block; width; 300px; height: 40px; } #footer p#enter a { display: block; width: 300px; height: 40px; background: #15181c url(../img/btn-enter.jpg) center center no-repeat; } #footer p#enter a span { display: none; }