/* get other css */ @import url("reset.css"); @import url("typography.css"); /* SNIPPETS */ img { border:0; } input { vertical-align:middle; } .float-left { float:left; } .float-right { float:right; } .text-left { text-align:left !important; } .text-right { text-align:right !important; } .text-center { text-align:center !important; } .text-justify { text-align:justify; } .clear:after { content: "."; display:block; height:0; clear:both; visibility:hidden;} .clear { display: inline-block; } html[xmlns] .clear { display: block; } * html .clear { height: 1%; } .icon {position: relative; top:.1em;} .nowrap {white-space: nowrap;} /* ************ Begin General Layout Styles ************ */ /* BODY */ html { margin: 0; padding: 0; } body { background: #8aad2f url(../images/bg.jpg) top center repeat; } /* CONTAINER */ #wrapper { width: 960px; margin: auto; text-align: center; position: relative; } /* HEADER */ #header { text-align: left; } #social { position: absolute; top: 28px; left: 170px; } #social li {display:inline; padding-right: 8px; } #pageTitle { position: absolute; top:145px; left:-32px; width: 670px; height: 232px; text-indent: -9999px; } #aboutUs a { position: absolute; top:332px; left:8px; width: 145px; height: 145px; text-indent: -9999px; background: url(../images/aboutUs.png) 0 0 no-repeat; } #photobooth { position: absolute; top:448px; left:-58px; width: 181px; height: 431px; text-indent: -9999px; background: url(../images/photobooth_2.png) 0 0 no-repeat; } #ideas a { position: absolute; top:680px; left:12px; width: 135px; height: 135px; text-indent: -9999px; background: url(../images/coolideas.png) no-repeat; background-position: top; z-index: 123; } #clients a { position: absolute; top:840px; left:-18px; width: 150px; height: 150px; text-indent: -9999px; background: url(../images/ourclients.png) no-repeat; background-position: top; z-index: 123; } #press a { position: absolute; top:483px; left:90px; width: 135px; height: 140px; text-indent: -9999px; background: url(../images/press.png) 0 0 no-repeat; } #letsTalk a { position: absolute; top:83px; left:684px; width: 125px; height: 126px; text-indent: -9999px; background: url(../images/letsTalk.png) 0 0 no-repeat; } #freeStuff a { position: absolute; top:123px; left:580px; width: 89px; height: 92px; text-indent: -9999px; background: url(../images/freeStuff.png) 0 0 no-repeat; } #featuredProducts a { position: absolute; top:71px; right:20px; width: 133px; height: 133px; text-indent: -9999px; background: url(../images/featuredProducts.png) 0 0 no-repeat; } #whatWellDo a { position: absolute; top:260px; left:644px; width: 125px; height: 127px; text-indent: -9999px; background: url(../images/whatWellDo.png) 0 0 no-repeat; } #logo a { position: absolute; top:10px; left:10px; width: 149px; height: 183px; text-indent: -9999px; background: url(../images/ifractal.png) 0 0 no-repeat; } #join a { position: absolute; top:10px; left:10px; width: 149px; height: 183px; text-indent: -9999px; background: url(../images/ifractal.png) 0 0 no-repeat; } #slogan { position: absolute; top:32px; right:20px; width: 471px; height: 15px; text-indent: -9999px; background: url(../images/slogan.png) 0 0 no-repeat; } #polaroid a { position: absolute; top:190px; right:3px; width: 175px; height: 210px; text-indent: -9999px; background: url(../images/polaroid.png) 0 0 no-repeat; } #flickr { position: absolute; top:216px; right:21px; width: 133px; height: 150px; background:#000; overflow: hidden; text-align: center; } #flickr img { position: relative; left:-20%; top:-20%; } #aboutUs a:hover, #letsTalk a:hover, #whatWellDo a:hover, #featuredProducts a:hover, #freeStuff a:hover, #ideas a:hover, #clients a:hover { background-position: bottom; } .welcome { background-image: url(../images/h-welcome.jpg); } .aboutUs { background-image: url(../images/h-aboutUs.jpg); } .ideas { background-image: url(../images/h-ideas.jpg); } .letsTalk { background-image: url(../images/h-letsTalk.jpg); } .press { background-image: url(../images/h-press.jpg); } .freeStuff { background-image: url(../images/h-freeStuff.jpg); } .featuredProducts { background-image: url(../images/h-featuredProducts.jpg); } .whatWellDo { background-image: url(../images/h-whatWellDo.jpg); } .clients { background-image: url(../images/h-clients.jpg); } .jobs { background-image: url(../images/h-jobs.jpg); } .error { background-image: url(../images/h-error.jpg); } .quote {position: absolute; width: 680px; top:400px; left:250px; text-align: left; } /* FOOTER */ /* ************ Begin Specific Layout Styles ************ */ .subheading.champion { font-size: 40px; line-height: 48px; } .subheading.cyclone { font-size: 72px; line-height: 0; margin: 40px 0 0 0; text-transform: uppercase; } /* ABOUT */ .shortquote {position: absolute; width: 480px; top:400px; left:250px; text-align: left; } .papers {position: absolute; width: 175px; top:400px; left:750px; padding: 80px 65px ; text-align: left; background: url(../images/hp-paper.png) 0 0 no-repeat; } #fractals { position: absolute; top:740px; left: 225px; width: 675px; text-align: left; } .fractal { margin-bottom: 40px; width: 620px; } .fractal img { float: left; } .fractal .bio { float: right; width: 420px; padding-top: 20px; margin-left: 40px; } .fractal .bio h4 { font-size: 56px; text-transform: uppercase; } .fractal .bio p { font-size: 16px; line-height: 1.6em; margin-bottom: 2em; } #hiring a {position:absolute; display: block; top:1205px; left:0; width: 180px; height: 125px; background: url(../images/joinourteam.png) 0 0 no-repeat;} #controls {position: absolute; top:727px; left: 427px; z-index: 234;} #controls li { display: block; float: left; } .slideNext { position: absolute; top:900px; left: 865px; z-index: 234; } .slidePrev { position: absolute; top:900px; left: 175px; z-index: 234; } #slidePager a { background: url(../images/aboutUs/pager.gif) 0 0 no-repeat; text-indent: -9999px; display: block; float: left; width: 16px; height: 16px;} #slidePager a.activeSlide { background-image: url(../images/aboutUs/sliderActive.gif); } /* FREE STUFF */ #downloads { text-align: left} #request { text-align: left} #downloads h4 { position: absolute; top:600px; left:150px; } #request h4 { position: absolute; top:600px; left:650px; } #tenets a { position: absolute; top:740px; left:180px; width: 335px; height: 425px; text-indent: -9999px; background: url(../images/fs-tenets.png) 0 0 no-repeat; } #posters a { position: absolute; top:950px; left:-20px; width: 480px; height: 570px; text-indent: -9999px; background: url(../images/fs-posters.png) 0 0 no-repeat; } #things a { position: absolute; top:1435px; left:30px; width: 330px; height: 360px; text-indent: -9999px; background: url(../images/fs-65things.png) 0 0 no-repeat; } #book a { position: absolute; top:750px; left:560px; width: 215px; height: 270px; text-indent: -9999px; background: url(../images/fs-book.png) 0 0 no-repeat; } #umbrellas a { position: absolute; top:930px; left:670px; width: 279px; height: 368px; text-indent: -9999px; background: url(../images/fs-umbrellas.png) 0 0 no-repeat; } /* WWD */ #wwdText { position: absolute; top:650px; left:150px; width: 700px; text-align: left; padding-bottom: 30px; } #wwdText p { font-size: 18px; line-height: 1.4em; margin-bottom: 1em } .dt { color: #fff; font-family: Arial, sans-serif; text-transform: uppercase; font-weight: bold;} #wwdText h3 img { position: relative; top:5px;} /* STI */ #stiText { position: absolute; top:520px; left:245px; width: 685px; text-align: left; } #stiText p { font-size: 18px; line-height: 1.4em; margin-bottom: 1em } #stiText p.subtle { font-size: 12px; line-height: 1.4em; margin-bottom: 1em } .frameMovie { margin-bottom: 1em; border: 3px solid #000; background: #000; } /* JOBS */ #jobsText { position: absolute; top:510px; left:250px; width: 650px; text-align: left; } #jobsText p { font-size: 18px; line-height: 1.4em; margin-bottom: 1em } /* LET'S TALK */ .callUs { position: absolute; top:820px; left: 150px; width: 250px; height: 200px; background: url(../images/lt-callus.png) 0 0 no-repeat; } .callUs p { margin-top: 100px; font-size: 28px;} .fax { position: absolute; top:780px; right: 0; width: 405px; height: 300px; background: url(../images/lt-fax.png) 0 0 no-repeat; } .fax p { margin-top: 100px; font-size: 28px;} .vcards { position: absolute; top:1040px; left: 100px; width: 405px; height: 500px; background: url(../images/lt-vcards.png) 0 0 no-repeat; } .snailmail { position: absolute; top:560px; left: 250px; width: 300px; height: 500px; background: url(../images/snailmail_us.png) 0 0 no-repeat; text-align: left; padding: 90px 0 0 35px;} .snailmail p { font-size: 28px; line-height: 1.3em;} .email { position: absolute; top:520px; left: 600px; width: 300px; height: 500px; background: url(../images/email_us.png) 0 0 no-repeat; text-align: left; padding: 90px 0 0 35px;} .email p { font-size: 28px; line-height: 1.3em;} /* HOMEPAGE */ #invention { position: absolute; top:420px; left:130px; background: url(../images/hp-inventions.jpg) 0 0 no-repeat; height: 315px; width: 515px; padding: 15px 30px; z-index: -1; text-align: left; } #news { text-align: left; position: absolute; top:750px; left:150px; width: 380px; } #h-stimodelers a { position: absolute; top:410px; left:660px; background: url(../images/STI_banner.png) 0 0 no-repeat; height: 398px; width: 322px; text-align: left; text-indent: -9999px; } #lyrics { position: absolute; top:700px; left:120px; height: 273px; width: 630px; padding: 60px 50px 0 0; } .lyrics-col { width: 50%; float: left; margin-top: 20px; margin-bottom: 50px; } #newsletter-signup { position: absolute; top: 830px; right: -10px; width: 279px; height: 173px; padding-top: 60px; background: url(../images/mailing_list.png) 0 0 no-repeat; } #newsletter-signup input[type=submit] { width: 150px; display: block; margin: 10px auto; padding: 10px;} #newsletter-signup .join { font-size: 18px; } #h-news { position: absolute; top:1020px; left:730px; width: 255px; text-align: left; } #h-news h3 { font-size: 48px } #h-address { position: absolute; top: 1650px; width: 100%; padding-bottom: 15px; } #h-address { font-weight: bold;} /* PRESS */ #latest {position: absolute; width: 680px; top:650px; left:150px; text-align: left; } #latest p { font-size: 16px} #streetcred {position: absolute; top:500px; left:650px; background: url(../images/streetcred.png) 0 0 no-repeat; width:325px; height:383px; } #pressText {position: absolute; top:860px; left:150px; width:800px; text-align: left} #pressText h3 { font-size: 62px; text-transform: uppercase;} .speech-col1 { float: left; width: 370px; margin-top: 20px; } .speech-col2 { float: right; width: 370px; margin-top: 20px; } #interviews {width:370px; float: left; text-align: left; margin-top: 40px; margin-bottom: 40px; background: url(../images/interviews.png) top right no-repeat;} #awards {width:370px; float: right; text-align: left; margin-top: 40px;} #speeches h3 img { position: absolute; top: -25px;} #awards { background: url(../images/awards.png) top right no-repeat; } #awards h3 { margin-right: 100px; } #pressText dt { margin: 0;} #pressText dt a { color: #000; display: block; padding-right: 16px;} #pressText dt a:hover { color: #fff; background: url(../images/popout.gif) top right no-repeat; } #pressText dd { margin: 0 0 20px 20px} /* CLIENTS */ #clientList { position: absolute; top:460px; left:250px; width: 650px; text-align: left; } #clientList img { margin-left: 30px; } /* COOL IDEAS */ #cheeto { position: absolute; top:780px; left:160px; width: 306px; height: 347px; text-indent: -9999px; background: url(../images/ci-cheeto.png) 0 0 no-repeat; } #fwb { position: absolute; top:750px; left:420px; width: 382px; height: 335px; text-indent: -9999px; background: url(../images/ci-fwb.png) 0 0 no-repeat; } #interrupt { position: absolute; top:1350px; left:50px; width: 465px; height: 465px; text-indent: -9999px; background: url(../images/ci-interrupt.png) 0 0 no-repeat; } #lick { position: absolute; top:1295px; left:470px; width: 359px; height: 295px; text-indent: -9999px; background: url(../images/ci-lick.png) 0 0 no-repeat; } #talent { position: absolute; top:1600px; left:400px; width: 335px; height: 438px; text-indent: -9999px; background: url(../images/ci-talent.png) 0 0 no-repeat; } #ux { position: absolute; top:1065px; left:80px; width: 434px; height: 339px; text-indent: -9999px; background: url(../images/ci-ux.png) 0 0 no-repeat; } #yahoo { position: absolute; top:1065px; left:480px; width: 395px; height: 265px; text-indent: -9999px; background: url(../images/ci-yahoo.png) 0 0 no-repeat; } a { outline: none; }