/* General Styles PasseyAdvertising.com V1.0 */ * { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; text-decoration: none; } body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; /*grid of 21px */ background: #2c2c2c; color: #8d8d8d; } :focus { outline: 0; } /* group application */ p, ul, ol, dl, table, blockquote, fieldset, pre, div { font-size: 1em; /* 14 */ } ul { list-style: none; list-style-type: none; } /* general layout */ .frame { width: 100%; /* use this to apply 100% bg's and contain windows */ } .window { width: 980px; /* site width */ margin: 0 auto; } /* header */ #header { position: fixed; top: 0; left: 0; width: 100%; height: 150px; } #header #headerBg { position: absolute; top: 0; left: 0; width: 100%; height: 125px; background: #000; opacity: 0.80; filter: alpha(opacity='80'); z-index: 900; } /* logo */ #passeyAdvertisingLogo { position: relative; width:73px; height: 79px; background: url('../img/ui/passeyAdvertisingLogo.png') no-repeat; z-index: 991; top: 27px; left: 0;} #passeyAdvertisingLogo a { position: relative; width: 73px; height: 79px; display: block; text-indent: -999px; z-index: 992;} #passeyAdvertisingLogoAlt { position: relative; top: -79px; left: 0; width: 73px; height: 79px; background: url('../img/ui/passeyAdvertisingLogo.png') no-repeat;; background-position: 0 -79px; z-index: 991; opacity: 0; filter: alpha(opacity='0'); } /* title */ #title { position: relative; top: -28px; left: 70px; z-index: 991; } #title h3 { font-size: 171%; font-weight: bold; } #titlePassey { color: #FFF; } #titleAdvertising { color: #7a7a7a; } #titleInc { color: #4f4f4f; } #title h5 { font-size: 85%; font-weight: 400; text-transform: uppercase; } #title h5 a { color: #f0f0f0; } /* navigation */ #mNav { position: relative; top: -63px; left: 440px; z-index: 992;} #mNav li { float: left; margin-left: 10px;} #mNav li a { position: relative; float: left; padding: 15px 15px 30px 15px; color: #9f9f9f; font-weight: 400; text-transform:uppercase; z-index: 994;} #mNav li a:hover { color: #FFF;} #mNav li .hoverBg { position: relative; z-index: 993; opacity: 0; overflow:visible; } #mNav li .hoverBg .bg { position: relative; background: #FFF; z-index: 991; -webkit-box-shadow: 0px 4px 4px #5d5d5d; -moz-box-shadow: 0px 4px 4px #5d5d5d; } #mNav li .hoverBg .arrow { position: relative; height: 9px; width: 16px;background: url('../img/ui/mNavHoverArrow.png') center center no-repeat; z-index: 992;} #google-partner {position: relative; top: -153px; left: 830px; z-index: 1000; width: 150px;} /* mentions */ #mentions { background: url('../img/ui/mentionsRibbon.png') no-repeat; width: 123px; height: 72px; position: fixed; top: 0; right: 5px; z-index: 995; text-indent: -999999px;} /* body container */ #bodyBg { background: #e2e2e2 url('../img/ui/bodyBg.png'); background-attachment:fixed; padding: 200px 0 50px 0; } /* aboutHeading */ #aboutAnchor { float: left; margin-top: -200px;} #aboutHeading { background: #FFF; clear: left; border-width: 5px 0 5px 0; border-color: #FFF; border-style: solid; } #aboutHeading #aboutContentContainer { background: #FFF; border-width: 0 0 5px 0; border-color: #FFF; border-style: solid; height: 250px; } #aboutHeading #contentWindow { width: 980px; height: 300px; overflow: hidden;} #aboutHeading #contentWindow ul.sections { width: 10000px; position: relative; } #aboutHeading #contentWindow ul.sections li.section { width: 980px; height: 250px; float: left; } /* who we are section */ #aboutHeading #aboutContentContainer #whoWeAre h1 { font-family: Georgia, "Times New Roman", Times, serif; color: #202020; font-size: 395%; font-weight:100; line-height: 1.0; display: block; text-align: center; margin-top: 50px; } #aboutHeading #aboutContentContainer #whoWeAre h2 { color: #7f7f7f; font-size: 214%; line-height: 1.2; font-weight: 200; margin-top: 10px; display: block; text-align: center;} /* what we do section */ #whatWeDo { background: #222020; color: #FFF; } /* #whatWeDo h1 { font-size: 350%; text-align: center; display: block; } #whatWeDo h2 { font-size: 200; font-weight: 200; color: #f5f5f5; text-align:center; display: block; } */ #whatWeDo ul { float: left; width: 450px; height: 250px; margin-top: 25px; } #whatWeDo ul:first-child { margin-right: 30px; } #whatWeDo ul li { float: left; clear: left; font-size: 150%; font-weight: bold; color: #f5f5f5; margin-top: 25px;} #whatWeDo ul li span.num { background: #FFF; color: #222020; padding: 8px 10px; -webkit-border-radius: 20px; -moz-border-radius: 12px; } #whatWeDo ul li span.listElement { margin-left: 20px; } /* development section */ #development h1, #design h1, #production h1 { color: #494949; font-size: 257%; font-weight: bold; margin: 15px 0;} #development h2, #design h2, #production h2 { color: #494949; font-size: 170%; font-weight: 200; line-height: 24px; margin-bottom: 35px;} #development p, #design p, #production p { color: #494949; } #development img, #design img, #production img { float:right; margin-left: 15px; } #aboutHeading #aboutButtonContainer { margin: -5px 0 0 30px; } #aboutHeading #aboutButtonContainer ul li a { float: left; background: #e5e5e5 url('../img/ui/aboutHeadingBtnShadow.png') repeat-x; margin-right: 6px; padding: 15px 25px; border-width: 5px 5px 5px 5px; border-color: #FFF; border-style: solid; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -webkit-box-shadow: 0px 5px 3px #cacaca; } #aboutHeading #aboutButtonContainer ul li a:hover { background-color: #f1f1f1; } #aboutHeading #aboutButtonContainer ul li a.active { background: #FFF; } #aboutHeading #aboutButtonContainer ul li a strong { font-family:Georgia, "Times New Roman", Times, serif; color: #494949; font-size: 128%; font-weight: 200; display: block; } #aboutHeading #aboutButtonContainer ul li a small { font-size: 86%; line-height: 20px; color: #aeaeae; width: 100px; display: block; } /* heading */ #heading { background: #FFF; display: none; } #heading .window { padding: 20px 0 30px 0; text-align: center;} #heading h1 { font-family: Georgia, "Times New Roman", Times, serif; color: #202020; font-size: 400%; font-weight:100; line-height: 1.0;} #heading h2 { color: #7f7f7f; font-size: 214%; line-height: 1.2; font-weight: 200; margin-top: 10px;} #underHeading { margin-top: -10px; text-align: center; } #underHeadingBtn { background: #222020; color: #FFF; padding: 10px 15px; text-transform:uppercase; font-weight: bold; -webkit-border-radius: 5px; -moz-border-radius: 5px; /* -webkit-transition: background 0.5s linear; */ display: none; /* uncomment to show */ } #underHeadingBtnShadow { background: url('../img/ui/underHeadingShadow.png') no-repeat; width: 216px; height: 42px; margin:-23px auto; display: none; /* uncomment to show */} /* portfolio */ #portfolioAnchor { float: left; margin-top: -25px;} #portfolioFrame { background: #f0f0f0; margin-top: 250px; height: 500px; -webkit-box-shadow: -5px -1px 5px #838383; -moz-box-shadow: -8px 0px 8px #838383;} #portfolioTab { float: right; display: block; width: 132px; height: 40px; background: url('../img/ui/portfolioTab.png') no-repeat; text-indent: -9999px; margin-top: -38px;} #portfolioSelector { float: left; margin-top: 20px;} #portfolioSelector li { float: left; width: 220px; margin-right: 25px; } #portfolioSelector li a { display: block; padding-left: 40px;} #portfolioSelector li a strong { text-transform:uppercase; color: #969696; display: block; } #portfolioSelector li a small { font-size: .85em; color: #c6c6c6; } #portfolioSelector li a:hover strong { color: #373737; } #portfolioSelector li a:hover small { color: #9f9f9f; } #portfolioSelector li a.toggle { background: url('../img/ui/portfolioBtnToggleBg.png') top left no-repeat; } #portfolioSelector li a.toggle strong { color: #42a1ef; } #portfolioSelector li a.toggle small { color: #7f7f7f; } #portfolioWindow { margin-top: 25px; height: 280px; width: 980px; float: left; overflow: hidden; background: url('../img/ui/ajax-loader-01.gif') center center no-repeat; } #portfolioSlider { float: left; position: relative; height: 280px; width: 980px; background: #f0f0f0; opacity:0; filter: alpha(opacity='0');} .portfolioList { float: left; width: 980px; overflow: hidden;} .portfolioList li { float: left; width: 130px; height: 130px; margin: 5px; overflow: hidden;} .portfolioList li a.name { display: block; padding: 5px; width: 120px; height: 120px; background: #2f3137; color: #FFF; text-align:right; text-transform:uppercase; line-height: 14px; font-weight: 500;} .portfolioList li a.img { display: block; width: 130px; height: 130px; padding: 0; overflow:hidden;} .portfolioList2 { width: 580px; overflow: show;} .portfolioList3 { width: 420px; overflow: show;} .portfolioList4 { width: 140px; overflow: show;} #portfolioDragBg { height: 10px; width: 880px; padding-right: 112px; background: #CCC; display: block; float: left; clear: left; margin-top: 50px;} #portfolioDragBtn { width: 108px; height: 36px; display: block; position: relative; background: url('../img/ui/dragMe.png') no-repeat; text-indent: -9999px; margin-top: -12px; color: #FFF; } #portfolioDragBtn:hover { cursor:pointer;} /* temporary spot for portfolio entities */ .portfolioList li a img { position: relative; top: 0; width: 130px; height: 260px; display: block; } .portfolioList li a span { position: relative; top: -260px; height: 130px; width: 130px; display: block; opacity: 0; filter:alpha(opacity='0'); } /* look at portfolio css to see individual portfolio styles */ /* stats */ #statsAnchor { float: left; margin-top: -50px; } #statsFrame { background: url('../img/ui/stripedBg.png') repeat; margin-top: 200px; padding: 15px 0;} #statsContainer { float: right; width: 962px; background: #FFF; } #statsContainer h3 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 280%; color: #FFF; padding: 10px 35px; background: #42a1ef; float: left; font-weight:100; margin: -35px 0 0 -16px; position: relative; z-index: 10; text-shadow: 1px 1px 1px #525252; -webkit-box-shadow: 3px 3px 3px #525252; -moz-box-shadow: 3px 3px 3px #525252; } #statsTitleFlap { background: url('../img/ui/blueTitleFlap.png') no-repeat; height: 16px; width: 16px; float: left; clear: left; margin-left: -16px;} #theStats { float: left; clear: left; margin: 20px 0 0 20px; width: 430px; padding-left: 20px;} #theStats li { float: left; clear: left; border-bottom: 2px dotted #c6c6c7; width: inherit; padding: 5px 0px 0px 0px; height: 15px; margin-bottom: 5px;} #theStats li span { color: #474747; font-size: 86%; float: left; background-color: #FFF; padding-right: 5px; } #theStats li strong { color: #42a1ef; font-size: 100%; font-weight: 600; float: right; background-color: #FFF; padding-left: 5px;} #theStats li .new { background: #42a1ef; position: absolute; font-size: 71%; color: #FFF; padding: 3px 0; text-transform:uppercase; width: 45px; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; margin-left: -55px;} #statsGraph01 { background: url('../img/ui/statsBarGraph01.png') no-repeat; width: 393px; height: 472px; float: right; position: relative; margin: -150px 25px 0 0;} #statsDisclaimer { font-size: 71%; color: #c6c6c6; font-weight: 400; float: right; clear: right; margin: 0 10px 10px 0;} /* contact form etc. */ #contactFrame { margin-top: 150px; } #contactFormContainer { width: 400px; float: left; } #contactFormContainer h2, #contactInfoContainer h2 { color: #474747; font-size: 257%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; } #contactForm { padding-top: 30px; width: 325px; } #contactForm ul { width: 325px;} #contactForm ul li { float: left; clear: left; margin-bottom: 18px; width: 325px; } #contactForm ul li .num { background: #474747; color: #FFF; font-size: 300%; font-weight: bold; padding: 2px 10px; float: left; margin-right: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-box-shadow: 0px 0px 5px #474747; -moz-box-shadow: 0px 0px 5px #474747;} #contactForm ul li h4 { color: #000000; font-size: 128%; float: left; margin-top: 40px;} #contactForm ul li .textInput { float: left; clear: left; padding: 8px 12px; background: #FFF; border: 1px solid #c4c4c4; margin-top: 10px; width: 300px; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-border-radius: 5px; -moz-border-radius: 5px;} #contactForm ul li .textInput:focus { border: 1px solid #42a1ef;} #contactForm ul li textarea.textInput { height: 100px; resize: none; } #contactForm ul li .desc { float: left; clear: left; margin-top:5px; font-size: 71%; color: #797979; } #contactSubmit { float: right; clear: left; background: #474747; color: #FFF; padding: 6px 10px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-box-shadow: 0px 0px 5px #474747; -moz-box-shadow: 0px 0px 5px #474747; } #contactSubmit:hover { cursor:pointer; } #contactFormAjax { background: url('../img/ui/ajax-loader-01.gif') no-repeat; height: 32px; width: 32px; float: right; clear: left; margin-right: -40px; display: none;} #contactInfoContainer { width: 500px; float: right; } #contactInfoContainer ul li { float: right; clear: right; margin-top: 25px; } #contactInfoContainer ul li .leftSegment { float: left; width: 120px; padding-top: 6px;} #contactInfoContainer ul li .leftSegment span { background: #474747; color: #FFF; padding: 6px 25px; -webkit-border-radius: 5px; -moz-border-radius: 5px;} #contactInfoContainer ul li .leftSegment span.blue { background: #42a1ef; color: #FFF; } #contactInfoContainer ul li .rightSegment { float: right; width: 370px; } #contactInfoContainer ul li .rightSegment span { color: #474747;} #contactInfoContainer ul li .rightSegment .additional { color: #b1b1b1; } #contactInfoContainer ul li .rightSegment a { color: #42a1ef; padding-bottom: 3px; border-bottom: 1px dotted #42a1ef; } #contactInfoContainer ul li .rightSegment a:hover { color: #474747;} /* twitter feed */ #twitterContainer { margin-top: 50px; float: right; background: #FFF; width: 460px; padding: 0px 20px 20px 20px; -webkit-border-radius: 12px; -moz-border-radius: 12px; -webkit-box-shadow: -1px -3px 3px #b3b3b3; -moz-box-shadow: -1px -3px 3px #b3b3b3;} #twitterAjax { background: url('../img/ui/ajax-loader-01.gif') no-repeat; width: 32px; height: 32px; margin: 20px auto;} #twitterContainer ul { display: none; width: 420px; } #twitterContainer ul li { border-bottom: 1px solid #e7e7e7; padding-bottom: 10px; width: inherit;} #twitterContainer ul li:last-child { border-bottom: none;} #twitterContainer ul li a { color: #42a1ef; } #twitterContainer ul li a:hover { text-decoration: underline; } .twitterPubDate { color: #898989; font-weight: 200; font-size: 75%; display: block; } #twitterArrow { float: right; clear: right; width: 490px; background: url('../img/ui/twitterArrow.png') 400px 0px no-repeat; font-size: 71%; padding-top: 5px; height: 28px; margin-top: -1px;} #twitterArrow a { color: #2c2c2c; } #twitterArrow a:hover { text-decoration: underline; } #twitterBird { width: 61px; height: 73px; background: url('../img/ui/twitterBird.png') no-repeat; float: right; clear: right; margin-right: 75px;} /* testimonials */ #testimonial { margin-top: 80px; height: 250px; } #testimonialBody { background: #FFF; display: block; padding: 20px 30px; float: left; width: 920px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -webkit-box-shadow: -1px -3px 3px #b3b3b3; -moz-box-shadow: -1px -3px 3px #b3b3b3; } #testimonialBody h2 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 260%; color: #4f5a5d; font-weight: 200; } #testimonialBody strong { color: #42a1ef; font-weight: normal; line-height: 12px;} #testimonialBody p { background: url('../img/ui/testimonialsQuotesRight.png') top right no-repeat; min-height:50px; padding-right: 90px; margin-top: 15px;} #testimonialArrow { background: url('../img/ui/testimonialsArrow.png') no-repeat; width: 31px; height: 32px; float: left; clear: left; margin-left: 100px; } /* news */ #newsFrame { background: #c6c6c6; } #newsFrame .blackBar { height: 25px; background: #000; overflow:visible; } #newsWindow { padding: 25px 0; } #newsEntries { } #newsEntries li { float: left; margin-right: 75px; width: 250px; } #newsEntries li .date { font-size: 86%; color: #FFF; display: block; padding-bottom: 5px; font-weight: bold;} #newsEntries li h4 { font-size: 171%; color: #FFF; background: #000; padding: 10px; display: block; font-weight: 300; line-height: 1.0em;} #newsEntries li h4 a:hover { background: #474747; } #newsEntries li .articleLink { color: #FFF; background: #42a1ef; padding: 8px 10px; float: right; text-transform:uppercase;} #newsEntries li p { display: block; color: #53575a; width: 250px; padding-top: 20px; } #newsEntries li p a { color: #42a1ef; } #newsEntries li p a:hover { background: #42a1ef; color: #FFF; } /* form response */ #formResponse { } /* shadows */ .shadowBottom { background: url('../img/ui/shadowBottom.png') center center no-repeat; height: 12px; margin: 0 auto;} .shadowRight { float: right; height:320px; width: 15px; background: url('../img/ui/shadowRight.png') center bottom no-repeat; } .shadowTopRight { float: right; height: 276px; width: 18px; background: url('../img/ui/shadowTopRight.png') no-repeat; } /* footer */ #footer { background: #2c2c2c url('../img/ui/shadowBottom.png') top center no-repeat; color: #8d8d8d; padding: 40px 0 50px 0; clear: both; } #agencyDescription { float: left; width: 250px; margin-top: 55px;} #agencyDescription h4 { color: #eaeaea; font-size: 128%; text-shadow: #000 3px 3px 0px; -webkit-transition: text-shadow 0.5s linear;} #agencyDescription h4:hover { text-shadow: #42a1ef 0px 0px 10px;} #agencyDescription p { color: #8d8d8d; font-size: 86%; margin-top: 30px;} #agencyDescription a { color: #FFF; } #agencyDescription a:hover { background: #FFF; color: #000;} #agencyDescription strong { color: #FFF; font-weight: normal;} #footerP { background: url('../img/ui/footerP.png') no-repeat; width: 42px; height: 45px; margin: -55px auto; } #rightFooter { float: right; width: 250px; margin-top: 65px; color: #4f4f4f; font-size: 86%; text-align: right; } #rightFooter p { margin-bottom: 15px;} #rightFooter a { color: #FFF; } #rightFooter a:hover { background: #FFF; color: #000;} /* tooltip classes */ .portfolioWobbletip { position: absolute; z-index: 80; top: 0; left: -9999px; } .portfolioWobbletip #wobbletip-content { background: #363636; padding: 10px 15px; color: #FFF; height: 50px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -webkit-box-shadow: 5px 5px 5px #9a9a9a; -moz-box-shadow: 5px 5px 5px #9a9a9a; } .portfolioWobbletip #wobbletip-content h3 { font-size: 24px; text-transform:uppercase; font-weight: bold; line-height: 30px;} .portfolioWobbletip #wobbletip-content .desc { font-size: 14px; font-weight: 400; color: #9e9e9e; } .portfolioWobbletip #wobbletip-arrow { background: url('../img/ui/tooltipPortfolioArrow.png') no-repeat; width: 13px; height: 6px; margin-left: 70px;} .aboutWobbletip { position: absolute; z-index: 80; top: 0; left: -9999px; } .aboutWobbletip #wobbletip-content { background: #474a47; padding: 10px; color: #FFF; -webkit-border-radius: 8px; -moz-border-radius: 8px; -webkit-box-shadow: 5px 5px 5px #9a9a9a; -moz-box-shadow: 5px 5px 5px #9a9a9a; } .aboutWobbletip #wobbletip-arrow { background: url('../img/ui/tooltipArrow.png') no-repeat; width: 20px; height: 10px; margin: 0 auto;} /* canvas */ #wobblecanvas { position: absolute; top: 0; left: 0; color: #000;} /* ui elements */ .clear { clear: both; } .clearLeft { clear: left; } .clearRight { clear: right; } /* intervention plugin - yes, it's bolt action */ #interveneOverlay { background: #000; position: absolute; top: 0px; left: 0px; width: 100%; height: 1px; z-index: 9997; border: 0px none; opacity: 0; filter:alpha(opacity='0'); } #intervene { background: #dfdfdf; padding: 10px; width: 30px; height: 30px; position: absolute; top: 0; left: 0; z-index:9998; border: 0px none; -webkit-border-radius: 10px; -moz-border-radius: 10px; opacity: 0; filter:alpha(opacity='0'); -webkit-box-shadow: 3px 3px 10px #303030; -moz-box-shadow: #303030 3px 3px 10px;} #interveneContent { overflow: hidden; border: 0px none; padding: 0; opacity: 0; filter:alpha(opacity='0'); margin-top: -28px; } #interveneContent h4 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 257%; color: #000; font-weight: 200; } #interveneContent p { color:#424242;} #interveneTitle { position: relative; float: right; margin-right: 5px; top: -58px; background: #42a1ef; color: #FFF; padding: 5px 8px; opacity: 0; filter:alpha(opacity='0'); font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; text-shadow: 1px 1px 1px #525252; } #interveneLoader { margin: -28px auto; height: 100%; width: 100%; background: url('../img/ui/ajax-loader-01.gif') center center no-repeat; float: left; display: block; } #interveneClose { background: url('../img/ui/interimClose.png') no-repeat; height: 28px; width: 27px; z-index: 99999; position: relative; text-indent: -9999px; opacity: 0; filter:alpha(opacity='0'); display: block; top: -20px; left: -20px; } #interveneArrows { position: absolute; top: -100px; left: -100px; opacity: 0; filter:alpha(opacity='0'); z-index: 9998; margin-top: 50px; padding: 10px;} #interveneLeftArrow { background: url('../img/ui/interimArrows.png') no-repeat; width: 100px; height: 64px; text-indent: -99999px; display: block; float: left; } #interveneRightArrow { background: url('../img/ui/interimArrows.png') 0 -64px no-repeat; width: 100px; height: 70px; text-indent: -99999px; display: block; float: right; } #interveneOffscreen { position: absolute; top: -99999px; left: -99999px; } #ohnoes { display: none; }