/* Page Styles */
body { background-color: #fff; margin: 0; padding: 0; text-align: center; font-family: "Lucida Grande", Tahoma, Verdana, sans-serif; }
H1, H2, H3, H4, H5, P, UL, LI { margin: 0; padding: 0; font-weight: normal; }
IMG { border: 0; }
A { cursor: pointer; color: #460189; text-decoration: none; font-weight: bold; }
A:hover { text-decoration: underline; }
.left { float: left; }
.right { float: right; }
.invisible { display: none; }
.visible { display: block; }

#overallNav { padding-bottom: 20px; width: 1000px; margin: 0 auto; margin-top: 20px; margin-bottom: 20px;  border: 1px solid #ccc; }

/* Header */
#titleHeader { width: 100%; background-image: url(../images/headerBackground.jpg); height: 109px; }
#logoContainer { width: 926px; margin: 0 auto; text-align: left; }
#logoContainer IMG { margin-left: 50px; }
IMG#odylInHeader { margin-left: 475px; }
/* Navigation */
#navigation { width: 100%; background-image: url(../images/navigationBackground.jpg); height: 49px; }
#navigation UL { width: 926px; margin: 0 auto; text-align: left; }
#navigation LI { display: inline; }
#navigation A { margin-left: 48px; _margin-left: 24px; _margin-right: 24px; height: 49px; float: left; display: block; background: transparent url(../images/navSprite.gif) repeat scroll 0 0; }
#navigation LI A#home { width: 114px; background-position: 0 0; }
#navigation LI A#products { width: 137px; background-position: -114px 0; }
#navigation LI A#team { width: 106px; background-position: -251px 0; }
#navigation LI A#blog { width: 146px; background-position: -357px 0; }
#navigation LI A#contact { width: 131px; background-position: -503px 0; }
/* Navigation - Hover States*/
#navigation LI A#home:hover { background-position: 0 -49px; }
#navigation LI A#products:hover { background-position: -114px -49px; }
#navigation LI A#team:hover { background-position: -251px -49px; }
#navigation LI A#blog:hover { background-position: -357px -49px; }
#navigation LI A#contact:hover { background-position: -503px -49px; }
/* Navigation - Selected States */
#navigation.home LI A#home { background-position: 0 -98px; }
#navigation.products LI A#products { background-position: -114px -98px; }
#navigation.team LI A#team { background-position: -251px -98px; }
#navigation.blog LI A#blog { background-position: -357px -98px; }
#navigation.contact LI A#contact { background-position: -503px -98px; }

/* New Navigation */
#newNavSprite { overflow: hidden; width: 926px; margin: 0 auto; text-align: left; padding-top: 40px; }
#newNavSprite LI IMG#newLogo { margin-right: 40px; }
#newNavSprite LI { list-style-type: none; float: left; }
#newNavSprite LI A { float: left; margin: 0 20px; _margin: 0 10px; display: block; }
#newNavSprite LI A#home, #newNavSprite LI A#clients, #newNavSprite LI A#team, #newNavSprite LI A#blog, #newNavSprite LI A#contact { margin-top: 30px; }
#newNavSprite LI A#home { width: 81px; height: 39px; background: transparent url(../images/newNavSprite.gif) repeat scroll 0 0; }
#newNavSprite LI.selected A#home, #newNavSprite LI A#home:hover { width: 81px; height: 39px; background: transparent url(../images/newNavSprite.gif) repeat scroll 0 -39px; }
#newNavSprite LI A#clients { width: 108px; height: 39px; background: transparent url(../images/newNavSprite.gif) repeat scroll -90px 0; }
#newNavSprite LI.selected A#clients, #newNavSprite LI A#clients:hover { width: 108px; height: 39px; background: transparent url(../images/newNavSprite.gif) repeat scroll -90px -39px; }
#newNavSprite LI A#team { width: 119px; height: 39px; background: transparent url(../images/newNavSprite.gif) repeat scroll -200px 0; }
#newNavSprite LI.selected A#team, #newNavSprite LI A#team:hover { width: 119px; height: 39px; background: transparent url(../images/newNavSprite.gif) repeat scroll -200px -39px; }
#newNavSprite LI A#blog { width: 66px; height: 39px; background: transparent url(../images/newNavSprite.gif) repeat scroll -320px 0; }
#newNavSprite LI.selected A#blog, #newNavSprite LI A#blog:hover { width: 66px; height: 39px; background: transparent url(../images/newNavSprite.gif) repeat scroll -320px -39px; }
#newNavSprite LI A#contact { width: 120px; height: 39px; background: transparent url(../images/newNavSprite.gif) repeat scroll -390px 0; }
#newNavSprite LI.selected A#contact, #newNavSprite LI A#contact:hover { width: 120px; height: 39px; background: transparent url(../images/newNavSprite.gif) repeat scroll -390px -39px; }

/* The Bubble Container */
.topBubbleContainer { width: 926px; margin: 0 auto; text-align: left; }
.topBubble-top { margin-top: 32px; width: 926px; height: 25px; background-image: url(../images/topBubble-top.jpg); }
.topBubble-middle { padding-bottom: 10px; overflow: auto; width: 100%; background-image: url(../images/topBubble-middle.jpg); }
.topBubble-bottom { width: 926px; height: 31px; background-image: url(../images/topBubble-bottom.jpg); }

/* About Odyl (left column) */
#aboutOdyl { float: left; width: 400px; margin: 36px 0 0 78px; _margin-left: 38px; }
#aboutOdyl H1 { margin-top: 20px; }
#aboutOdyl H2 { color: #666; font-size: 14px; line-height: 22px; margin: 18px 0 30px 0; width: 340px;  }
IMG#infoGraphic { margin-bottom: 40px; }

/* Featured Product (right column) */
#featuredProductContainer { margin: -21px 27px 0 492px; *margin-left: 0; position: absolute; }
#featuredProduct { background-color: #f7f0ff; border-style: solid; border-width: 0px 1px; border-color: #ccc; width: 405px; padding-bottom: 14px; }
#featuredProductHeader { width: 407px; height: 36px; background-image: url(../images/featuredProductHeader.gif); margin-top: 6px; }
#featuredProduct H4 { margin: 0 0 0 58px; }
#featuredProduct IMG#babyBrandScreenshot { margin: 14px 0 14px 56px; }
#featuredProduct P { width: 336px; _width: 312px; margin: 0 34px; font-size: 10px; line-height: 16px; text-align: center; }
#featuredProduct A#takeTheTour { margin: 20px 0 0 85px; display: block; background: transparent url(../images/buttonSprite.gif) scroll repeat 0 0; width: 235px; height: 45px; }
#featuredProduct A#takeTheTour:hover { background: transparent url(../images/buttonSprite.gif) scroll repeat 0 -45px; }
#featuredProduct-bottom { overflow: hidden; width: 407px; height: 11px; background-image: url(../images/featuredProduct-bottom.gif); }
IMG#provenResults { margin: 2px 0 0 32px; }
A#newButton IMG { margin: 10px 0 0 0; }

#featuredProduct H3 { padding: 22px 0 10px 94px; }
#purpleBOF { margin-left: -22px; }

A.seeAllPosts { float: right; display: block; background: transparent url(../images/blackButtonSprite.gif) scroll repeat 0 0; width: 136px; height: 20px; }
A.seeAllPosts:hover { background: transparent url(../images/blackButtonSprite.gif) scroll repeat 0 -20px; }
/* Twitter */
#twitterColumn { padding-right: 29px; margin: 10px 0 0 50px; _margin-left: 20px; width: 380px; _width: 330px; float: left; }
#odylinteractive UL { margin-top: 10px; }
#odylinteractive UL LI { list-style-type: none; padding: 13px 0; border-top: 1px dashed #ccc; font-size: 12px; }
#odylinteractive UL LI:hover { background-color: #F7F7F7; }
#odylinteractive UL LI SPAN.twitterTime { display: block; font-size: 10px; color: #999; margin-top: 3px; }
#odylinteractive UL LI SPAN.twitterPrefix { font-weight: bold; }
#odylinteractive UL LI A { color: #460189; text-decoration: none; }
/* Tumblr */
#blogColumn { margin: 10px 30px 0 0; padding-left: 50px; width: 380px; float: left; border-left: 1px solid #ccc; }
.blogEntry { margin: 20px 0; border-top: 1px dashed #ccc; padding-top: 20px; }
.blogEntry H3 { margin-bottom: 10px; font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;}
.blogEntry IMG { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; width: 326px; }
.blogEntry P { font-size: 12px; line-height: 18px; width: 350px; margin-top: 10px; }

/* Footer */
#aboutUs { font-size: 14px; margin: 26px 0 30px 0; text-align: center; }
#footer { color: #fff; width: 100%; background-image: url(../images/footerBackground.jpg); height: 75px; text-align: center; font-size: 12px; }
#footer A { font-weight: normal; color: #fff; text-decoration: underline; }
#footer A:hover { color: #F7F0FF; }
#footer UL { width: 926px; height: 75px; margin: 0 auto; padding-left: 90px; text-align: left; }
#footer UL LI { padding-top: 35px; float: left; display: block; margin: 0 0 0 60px; }
#footer UL LI#odylFooterGraphic { margin: 0 58px 0 78px; padding: 0; background-image: url(../images/odylFooterGraphic.jpg); display: block; width: 93px; height: 75px; }

#newFooter { color: #000; width: 100%; height: 45px; text-align: center; font-size: 12px; border-top: 1px solid #ccc; }
#newFooter A { font-weight: normal; color: #460189; text-decoration: underline; }
#newFooter UL { width: 926px; height: 75px; margin: 0 auto; padding-left: 120px; *padding-left: 170px; text-align: left; }
#newFooter UL LI { padding-top: 20px; float: left; display: block; margin: 0 0 0 40px; }
#newFooter UL LI#odylFooterGraphic { margin: 0 58px 0 78px; padding: 0; background-image: url(../images/odylFooterGraphic.jpg); display: block; width: 93px; height: 75px; }


/* Team Page */
.pageHeader { margin: 10px 0 0 70px; }
.personBio { margin: 20px 7px 0 7px; padding: 40px 60px 20px 60px; border-top: 1px dashed #ccc; overflow: auto; }
.personBio P { float: left; font-size: 12px; line-height: 20px; width: 650px; margin-top: 10px; _margin-top: -10px; _margin-bottom: 30px;  }
IMG.profilePicture { margin-right: 38px; }

/* Contact Page */
#contactContainer { margin: 30px 80px 0 80px; }
#contactForm { margin: 30px 0 50px 0; }
#contactForm DIV { clear: both; margin: 10px 0 0 0; }
#contactForm LABEL { width: 200px; display: block; float: left; }
#contactForm INPUT, #contactForm TEXTAREA { color: #460189; font-size: 13px; font-family: "Comic Sans MS"; width: 360px; border: 1px solid #ccc; padding: 5px; }
#contactForm TEXTAREA { height: 70px; }
#contactForm INPUT#submitButton { cursor: pointer; margin: 10px 0 0 200px; width: 136px; height: 20px; background: transparent url(../images/blackButtonSprite.gif) scroll repeat -136px 0; border: 0; }
#contactForm INPUT#submitButton:hover { background: transparent url(../images/blackButtonSprite.gif) scroll repeat -136px -20px; }
IMG#contactHeader { margin-bottom: 6px; }
IMG#contactMapGraphic { margin-right: 40px; border: 1px solid #ccc; }
DIV#contactMap { overflow: auto; margin: 30px 0 30px 0; border-top: 1px solid #ccc; padding-top: 50px; }
DIV#contactMap P { margin-top: 6px; line-height: 22px; }

/* Product Page */
#theProduct { margin: 0 50px; }
IMG#productHeader { margin: -21px 0 0 0; position: absolute; }
IMG#productHeader2 { margin-top: 40px; }
IMG#productHeader3 { margin-top: 10px; }
#theProduct P { font-size: 14px; line-height: 22px; margin-bottom: 20px; }
A#productTourBtn { margin: 6px 20px 0 200px; _margin-left: 100px; float: left; display: block; width: 383px; height: 45px; background: transparent url(../images/buttonSprite.gif) scroll repeat -235px 0; }
A#productTourBtn:hover { background: transparent url(../images/buttonSprite.gif) scroll repeat -235px -45px; }
A#getAQuoteBtn { clear: both; margin: 38px 20px 0 0; float: right; display: block; width: 235px; height: 45px; background: transparent url(../images/buttonSprite.gif) scroll repeat -618px 0; }
A#getAQuoteBtn:hover { background: transparent url(../images/buttonSprite.gif) scroll repeat -618px -45px; }
.lightPurpleLine { border-bottom: 1px solid #e7d4fc; width: 100%; height: 1px; clear: both; margin: 30px 0 20px 0; _margin-top: 10px; }
IMG#whatCanIDo { margin: 20px 0 30px 33px; }
UL#bofPerks LI { float: left; width: 295px; list-style-type: none; margin-left: 70px; _margin-left: 40px; }
A.viewSampleScreenshot { margin: 10px 0 40px 50px; display: block; width: 202px; height: 25px; background: transparent url(../images/sampleScreenshotSprite.gif) repeat scroll 0 0; } 
A.viewSampleScreenshot:hover { background: transparent url(../images/sampleScreenshotSprite.gif) repeat scroll 0 -25px; } 

/* Tour Splash Page */
#splashPageContainer { font-size: 12px; overflow: auto; margin: 0 auto; margin-top: 50px; width: 810px; }
#factsOfFacebook { float: left; width: 290px; margin-top: 50px;}
#factsOfFacebook UL LI { margin-top: 20px; height: 126px; list-style-type: none; background-image: url(../images/facebookFactBubble.gif); width: 270px; }
#factsOfFacebook UL LI P { padding: 35px 30px 30px 30px; }
#theTour { text-align: left; background-image: url(../images/theTourBackground.gif); float: left; width: 516px; height: 474px; }
#theTour UL { margin: 20px 0 30px 0; }
#theTour UL LI { margin: 10px 80px 0 80px; }
IMG#brandEOnFacebook { margin: 20px 0 0 70px; }
#theTour P { margin: 30px 60px; border-top: 1px solid #c3b2d5; padding-top: 20px; }
A#loginToTakeTour { margin: 20px 0 20px 60px; background: transparent url(../images/buttonSprite.gif) scroll repeat -853px 0; display: block; width: 385px; height: 45px; }
A#loginToTakeTour:hover { background: transparent url(../images/buttonSprite.gif) scroll repeat -853px -45px; }
#productTourHeader { margin: 5px 0 0 162px; }

/* Other Text Pages */
.textPage H1 { margin: 20px 40px 10px 40px; }
.textPage H2 { margin: 30px 40px 10px 40px; font-size: 20px; }
.textPage P, .textPage OL, .textPage UL { line-height: 22px; margin: 10px 40px; font-size: 12px; }
.textPage OL LI { margin-top: 10px; }
.textPage UL LI { margin-left: 20px; }
.jobsPage H2 { border-top: 1px dashed #ccc; padding-top: 20px; }

/* New Product Page */
#featProd { position: absolute; margin: -51px 0 0 322px; }

UL#selectSlide { position: absolute; margin: 0 auto; margin-left: 604px; width: 200px; height: 34px; overflow: hidden; }
UL#selectSlide LI { overflow: hidden; display: inline; list-style-type: none;  }
UL#selectSlide LI A { border: 1px solid transparent; font-weight: normal; float: left; background-color: #000; color: #fff; padding: 6px 9px; margin-left: 19px; }
UL#selectSlide LI.selected A { border: 1px solid #ccc; text-decoration: none; background-color: #e5e5e5; color: #000; text-align: center; }
UL#selectSlide LI A:hover { border: 1px solid transparent; text-decoration: none; background-color: #5d1aa5; color: #fff; text-align: center; }

#productTourViewer { padding-top: 30px; overflow: auto; width: 100%; background-color: #e5e5e5; border: 1px solid #ccc; margin: 30px 0 20px 0; padding-bottom: 30px; }
#productTourViewer H2 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 36px; padding-left: 30px; }
#productTourViewer P { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin: 0 25px; margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #ccc; }
DIV#slide { margin: 30px 0 0 25px; text-align: center; width: 774px; background-color: #fff; border: 2px solid #ccc; }
#paragraph UL { margin-left: 15px; }
#paragraph UL LI { margin-top: 8px; }

#whyOdyl { background-color: #000; }
#whiteArea { background-color: #fff; padding: 20px 0 40px 0; }
#topTour { background-color: #000; padding: 50px 0; }


#brandPortals #contentContainer { padding: 20px 0 0 0; overflow: auto; margin-left: 40px; }
#odylProductTour { margin: 100px 0 40px 0; }
#welcomeContentPanel { background-color: #fff; overflow: auto; }
.content { width: 404px; float: left; padding: 74px 10px; }
.content IMG { border: 1px solid #ccc; }
.content IMG.linkButton { border: 0; margin-top: 30px; }

/* Facebook Brand Portals */

#brandPortalTop { padding: 80px 0 20px 0; }
IMG#odylProductTourSmall { margin-right: 100px; } 
.portal { margin: 0 12px 30px 12px; width: 256px; float: left; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
IMG.portalScreenshot { border: 1px solid #ccc; }
.portalInformation { margin-top: 6px; overflow: auto; border: 1px solid #ccc; font-size: 12px; width: 240px; padding: 8px; }
.portalInformation SPAN { font-size: 14px; }
.portalInformation P { width: 130px; margin: 0; padding: 0; float: left; text-align: center; }
.portalInformation P SPAN { display: block; }
.portalInformation IMG { float: right; }
#footer1 { width: 100%; height: 70px; border-top: 1px solid #ccc; background-color: #e7e7e7; d}
IMG#odylBeforeAfterBtn { padding-top: 19px; }
#footer2 { width: 100%; height: 30px; background-color: #000; }
#topElements { width: 820px; margin: 0 auto; overflow: hidden; }
#floatingTour { float: right; margin-top: 65px; }
#productTourContainer { float: left; }
A#takeTheOdylTour { display: block; background: transparent url('images/takeTheOdylTour.gif') scroll repeat 0 0; width: 121px; height: 123px; }
A#takeTheOdylTour:hover { background: transparent url('images/takeTheOdylTour.gif') scroll repeat -121px 0; }

.clientHeader { padding-top: 10px; margin-left: 51px; border-bottom: 2px solid #e7e7e7; }
#partners { margin-bottom: 30px; overflow: hidden; }
#partners IMG { border: 1px solid #ccc; }
#partner1 { margin: 20px 13px 0 50px; float: left; }
#partner2 { margin-top: 40px; float: left; }
#partner3 { margin: 20px 0 0 12px; float: left; }