/* Meg Richichi site */ /*------------------------------------------- reset, various base styles, general tools --------------------------------------------- */ /* Eric Meyer's reset [http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/] */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; } :focus { outline:none; } body { line-height:1; } ol, ul { list-style:none; } table { border-collapse:separate; border-spacing:0; } caption, th, td { text-align:left; font-weight:normal; } table, td, th { vertical-align:middle; } blockquote:before, blockquote:after, q:before, q:after { content:""; } blockquote, q { quotes:"" ""; } a img { border:none; } em { font-style:italic; } strong { font-weight:bold; } cite, address { font-style:normal; } textarea { overflow:auto; } textarea { resize:none; } /* Clearfix [http://www.positioniseverything.net/easyclearing.html] */ .clearfix:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; } .clearfix { display:inline-block; } html[xmlns] .clearfix { display:block; } * html .clearfix { height:1%; } .hidden { display:none; } .centered { margin-left:auto; margin-right:auto; } .cb { clear:both; } .cl { clear:left; } .cr { clear:right; } .fl { float:left; } .fr { float:right; } .graphic span { display:none; } .panel { position:relative; background-repeat:no-repeat; background-position:bottom center; zoom:1; } .panel .hd { background-repeat:no-repeat; zoom:1; } .panel .bd { background-repeat:repeat-y; zoom:1; } .panel .ft { background-repeat:no-repeat; } a.logo { display:block; } /*------------------------------------- ------------------------------------- */ body { background-color:#350800; background-image:url("graphics/panels/body-bg.gif"); background-repeat:repeat-x; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10px; text-align:center; color:#481006; } body.cover { background-color:#000000; background-image:none; color:#754f3d; } /* NOTE: Live content width of the page is 975 pixels. The wrapper
has extra width to allow for spillover of graphic elements. */ #page { text-align:left; margin:0 auto; width:1007px; } body.cover #page, .xNoBleed { width:975px; } a, a:link, a:visited, a:active { color:#cc1d00; font-weight:bold; text-decoration:none; } a:hover { color:#cc1d00; text-decoration:underline; } h1, h2, h3, h4, h5, h6 { font-family:Arial,Helvetica,sans-serif; font-weight:normal; } /*------------------------------------- homepage ------------------------------------- */ #main { float:right; position:relative; display:inline; width:443px; margin:75px 46px 0 0; } #main h1 { position:absolute; top:186px; left:64px; } #main blockquote.tagline { width:397px; height:168px; background-image:url('graphics/text/tagline-BIG.gif'); margin:0 auto; } #main p.its-not-enough-to { width:443px; height:115px; background-image:url('graphics/text/its-not-enough-to-on-black.gif'); margin-top:110px; } .cover img#headshot { margin:24px 0 0 46px; } .cover ul.nav { overflow:hidden; width:922px; margin:27px 0 0 26px; padding-bottom:100px; background-position:-25px 40px; background-image:url('graphics/misc/flourish.gif'); background-position:bottom center; background-repeat:no-repeat; } .cover ul.nav li { float:left; display:inline; } .cover ul.bottom-flourish { padding-bottom:100px; background-position:-25px 40px; } .cover ul.nav li a { display:block; padding-right:14px; } .cover ul.nav li.last a { padding-right:0; } .cover ul.nav li a { height:9px; background-image:url('graphics/text/cover-nav.gif'); } .cover ul.nav li.three-keys a { width:213px; background-position:0 0; } .cover ul.nav li.demystifying a { width:272px; background-position:-227px 0; } .cover ul.nav li.infertility a { width:100px; background-position:-513px 0; } .cover ul.nav li.about a { width:162px; background-position:-627px 0; } .cover ul.nav li.testimonials a { width:117px; background-position:-805px 0; } .cover ul.nav li.three-keys a:hover { width:213px; background-position:0 9px; } .cover ul.nav li.demystifying a:hover { width:272px; background-position:-227px 9px; } .cover ul.nav li.infertility a:hover { width:100px; background-position:-513px 9px; } .cover ul.nav li.about a:hover { width:162px; background-position:-627px 9px; } .cover ul.nav li.testimonials a:hover { width:117px; background-position:-805px 9px; } cite.foot { display:block; clear:both; text-align:center; margin:20px 0 4px; font-size:9px; } #main h1, #pageHead .logo { width:322px; height:61px; background-image:url("graphics/logo.gif"); } .cover #main h1 { background-image:url("graphics/logo-on-black.gif"); } /*------------------------------------- page header ------------------------------------- */ #pageHead { overflow:hidden; background-image:url("graphics/panels/page-top.gif"); background-repeat:no-repeat; background-position:bottom center; padding:20px 0 30px; } #pageHead .logo { margin:5px 0 0 4px; } #pageHead blockquote { width:378px; height:43px; background-image:url("graphics/text/tagline.gif"); margin:17px 6px 0 0; } /*------------------------------------- page footer ------------------------------------- */ #pageFoot { text-align:center; padding:20px 0 40px; font-size:1.1em; line-height:1.8; color:#d08d6c; } #pageFoot a, #pageFoot a:link, #pageFoot a:visited, #pageFoot a:active { color:#e41c00; text-decoration:none; font-weight:bold; } #pageFoot a:hover { color:#e41c00; text-decoration:underline; } #pageFoot .logo { width:245px; height:49px; margin:0 auto 8px; background-image:url("graphics/logo-alt.gif"); } #pageFoot address span { padding-right:.9em; } #pageFoot address span.last { padding-right:0; } /*------------------------------------- page body ------------------------------------- */ #pageBody { background-image:url("graphics/panels/page-bg.gif"); background-repeat:repeat-y; padding:64px 0 130px; } .narrow-column { width:196px; float:left; overflow:hidden; } .narrow-column .panel { margin:0 0 56px 0; padding:0 0 0 43px; } .narrow-column p { font-size:1.1em; line-height:1.6; } .narrow-column .nav { left:-18px; } .nav ul { background-image:url('graphics/misc/stacked-nav-border.gif'); background-position:bottom left; background-repeat:no-repeat; width:169px; } .nav ul li { background-image:url('graphics/misc/stacked-nav-border-with-bullet.gif'); background-position:top left; background-repeat:no-repeat; padding:16px 3px 16px 28px; zoom:1; } .nav ul li a, .nav ul li a:link, .nav ul li a:visited { font-family:Arial,Helvetica,sans-serif; font-size:1.2em; letter-spacing:.03em; line-height:1.5; font-weight:bold; text-decoration:none; text-transform:uppercase; color:#481006; } body#three-keys .nav ul li.three-keys a, body#demystifying .nav ul li.demystifying a, body#infertility .nav ul li.infertility a, body#about .nav ul li.about a, body#testimonials .nav ul li.testimonials a, body#products .nav ul li.products a, body#blog .nav ul li.blog a, .nav ul li.selected a, .nav ul li.selected a:link, .nav ul li.selected a:visited, .nav ul li a:hover { color:#cc0000; } .narrow-column .did-you-know { width:193px; padding:0 0 40px; left:6px; } .narrow-column .did-you-know .hd h3 { margin:0 auto; } .narrow-column .did-you-know .bd { padding:0 27px 0 37px; } .did-you-know .hd h3 { width:144px; } .percent .hd h3.graphic { height:123px; background-image:url('graphics/did-you-know/percent.gif'); } .lightning .hd h3.graphic { height:124px; background-image:url('graphics/did-you-know/lightning.gif'); } .heart .hd h3.graphic { height:121px; background-image:url('graphics/did-you-know/heart.gif'); } .sun .hd h3.graphic { height:142px; background-image:url('graphics/did-you-know/sun.gif'); } .intestine .hd h3.graphic { height:124px; background-image:url('graphics/did-you-know/intestine.gif'); } .vegetable .hd h3.graphic { height:121px; background-image:url('graphics/did-you-know/vegetable.gif'); } .cream { background-image:url('graphics/panels/cream-panel-ft.gif'); } .cream .hd { background-image:url('graphics/panels/cream-panel-hd.gif'); padding:20px 0; } .cream .bd { background-image:url('graphics/panels/cream-panel-bd.gif'); } .wide-column { width:811px; float:right; } .wide-column .content { padding:0 76px 0 60px; } .wide-column .content .panel { display:inline; float:right; margin-right:-40px; padding:0 0 40px; } .wide-column .content .panel .hd h3 { text-align:center; } .wide-column .content .panel .bd { padding:0 40px; } .yellow { width:390px; left:30px; } .content .yellow, .content .yellow .hd, .content .yellow .bd { background-image:url('graphics/panels/yellow-panel-bd.gif'); background-repeat:repeat-y; } .yellow .hd h3.mothers-path { width:273px; height:61px; background-image:url('graphics/text/mothers-path.gif'); background-repeat:no-repeat; margin:24px 0 0 30px; } .orange { width:435px; left:33px; color:#f4e7d6; background-image:url('graphics/panels/orange-panel-ft.gif'); } .orange .hd { background-image:url('graphics/panels/orange-panel-hd.gif'); padding:30px 0 0; } .orange .bd { background-image:url('graphics/panels/orange-panel-bd.gif'); margin-top:-19px; } .orange .hd h3.womb-of-creation { width:300px; height:55px; background-image:url('graphics/text/womb-of-creation.gif'); background-repeat:no-repeat; margin:0 auto; padding:40px 0 0; } .content .orange .photobox, .content .orange .photobox img, .content .orange .photobox .wrapper-for-bottom { background-image:none; zoom:1; } .content .orange .small-photo { width:154px; background-image:url('graphics/panels/orange-small-photobox-hd.gif'); padding:10px 0 0 0; } .content .orange .small-photo img { background-image:url('graphics/panels/orange-small-photobox-bd.gif'); padding:0 12px 0 9px; } .content .orange .small-photo .wrapper-for-bottom { background-image:url('graphics/panels/orange-small-photobox-ft.gif'); height:13px; } * html .content .orange .small-photo .wrapper-for-bottom { margin-top:-6px; } .content h1 { font-size:3.4em; letter-spacing:.02em; margin-bottom:30px; } body#three-keys .content h1.graphic { width:603px; height:32px; background-image:url('graphics/text/TheThreeKeysToWomensWellness.gif'); } body#demystifying .content h1.graphic { width:537px; height:34px; background-image:url('graphics/text/DemystifyingHormonalBalance.gif'); } body#infertility .content h1.graphic { width:136px; height:34px; background-image:url('graphics/text/Infertility.gif'); } body#about .content h1.graphic { width:520px; height:34px; background-image:url('graphics/text/AboutMegRichichi.gif'); } body#testimonials .content h1.graphic { width:197px; height:26px; background-image:url('graphics/text/Testimonials.gif'); } body#products .content h1.graphic { width:469px; height:26px; background-image:url('graphics/text/ProductRecommendations.gif'); } .content h2 { font-size:2.2em; letter-spacing:.025em; line-height:1.4; margin-bottom:30px; } .content h2.hormone-balanced-lifestyle { width:312px; height:22px; background-image:url('graphics/text/HormoneBalancedLifestyle.gif'); } .content .ultimately-what-we h2 { width:579px; height:108px; background-image:url('graphics/text/ultimately-what-we.gif'); } .content .when-a-woman-makes h2 { width:562px; height:107px; background-image:url('graphics/text/when-a-woman-makes.gif'); } .content .its-not-enough-to h2 { width:573px; height:150px; background-image:url('graphics/text/its-not-enough-to.gif'); } #about .content h2, #testimonials .content h2, .content h3.raised-line-height { font-size:1.8em; line-height:1.7; } .content h3 { font-size:1.8em; letter-spacing:0.025em; line-height:1.2; margin-bottom:16px; } .content p, .content ul li { font-size:1.1em; line-height:1.8; margin-bottom:24px; } .content ul { list-style-type:disc; list-style-position:inside; } .content ul.headers, .content ul.box-list { list-style-type:none; list-style-position:outside; margin:0; padding:0; } .content ul.headers li, .content ul.box-list li { font-size:1em; } .content ul.headers li { width:659px; background-repeat:no-repeat; } .graphic .were-you-put-on-the { height:38px; background-image:url('graphics/text/were-you-put-on-the.gif'); } .graphic .have-doctors-told-you { height:16px; background-image:url('graphics/text/have-doctors-told-you.gif'); } .graphic .have-you-had { height:38px; background-image:url('graphics/text/have-you-had.gif'); } .graphic .are-you-still-gaining-weight { height:16px; background-image:url('graphics/text/are-you-still-gaining-weight.gif'); } .graphic .are-you-still-suffering-from { height:16px; background-image:url('graphics/text/are-you-still-suffering-from.gif'); } .graphic .have-you-attempted { height:16px; background-image:url('graphics/text/have-you-attempted.gif'); } .graphic .have-you-experienced { height:16px; background-image:url('graphics/text/have-you-experienced.gif'); } .content .accented { margin:65px 0; } .content .accented h3 { margin:0 0 24px; } .content .accented ul { list-style-type:none; } .content .accented ul li { font-family:Arial,Helvetica, sans-serif; font-size:1.8em; letter-spacing:0.025em; line-height:1.2; text-transform:capitalize; margin-bottom:16px; padding-left:14px; background-image:url('graphics/misc/bullet.gif'); background-repeat:no-repeat; background-position:0 9px; } .content .accented ul li.more { background-image:none; position:relative; left:-14px; text-transform:none; font-weight:bold; } .content ul.three-column { overflow:hidden; } .content ul.three-column li { float:left; width:215px; } .content ul.three-column li.last-col { float:right; width:136px; } .content ul.three-keys { width:283px; height:73px; background-image:url('graphics/text/three-keys-list.gif'); background-repeat:no-repeat; } .content ul.three-keys li { zoom:1; } .content ul.symptoms { width:542px; height:136px; background-image:url('graphics/text/symptoms-list.gif'); background-repeat:no-repeat; } #three-keys-diagram { position:relative; left:13px; padding:8em 0 5em 26px; } .content div.fr { margin:0 0 10px 14px; } .content div.fl { margin:0 14px 10px 0; } .content .orange div.fr, .content .orange div.fl { margin-bottom:4px; } .content .photobox { width:326px; background-image:url('graphics/panels/photobox-hd.gif'); background-repeat:no-repeat; position:relative; } .content .photobox img { margin:0 auto; background-image:url('graphics/panels/photobox-bd.gif'); background-repeat:repeat-y } .content .photobox cite { font-size:9px; color:#620000; position:absolute; right:20px; bottom:20px; } .content .photobox cite.pink { color:#ceadc1; } .content .photobox cite.purple { color:#594c4f; } .content .photobox cite.slate { color:#82716d; } .content .photobox cite.beige { color:#968b8c; } .content .photobox .wrapper-for-bottom { margin:-2px 0 0; background-image:url('graphics/panels/photobox-ft.gif'); background-repeat:no-repeat; background-position:bottom center; } .content .pad-photo { padding:12px 0 0 0; } .content .pad-photo img { padding:0 13px 0 12px; } .content .pad-photo .wrapper-for-bottom { height:15px; zoom:1; } * html .content .pad-photo .wrapper-for-bottom { margin-top:-3px; } .content .no-pad-photo { padding:3px 0 0 0; } .content .no-pad-photo img { padding:0 3px 0 2px; } .content .no-pad-photo .wrapper-for-bottom { padding:0 0 5px; zoom:1; } .content blockquote p cite { display:block; } blockquote.pull-quote { margin-top:30px; margin-bottom:40px; } blockquote.most-illness-is { width:573px; height:89px; margin-left:auto; margin-right:auto; background-image:url('graphics/text/most-illness-is.gif'); } blockquote.we-are-in-a { width:281px; height:59px; margin-left:21px; background-image:url('graphics/text/we-are-in-a.gif'); } .orange blockquote.ultimately-what-we-bring-forth { width:352px; height:114px; margin-left:auto; margin-right:auto; background-image:url('graphics/text/ultimately-what-we-bring-forth.gif'); } .yellow blockquote.if-we-want-to-create { width:281px; height:64px; background-image:url('graphics/text/if-we-want-to-create.gif'); background-repeat:no-repeat; } .yellow a.visit-mothers-path { display:block; width:243px; height:11px; background-image:url('graphics/text/visit-mothers-path.gif'); margin:0 auto; } /*------------------------------------- drop caps ------------------------------------- */ p.drop-cap { position:relative; z-index:0; padding-top:40px; } p.drop-cap span.letter { float:left; text-indent:-99999px; width:42px; height:20px; } p.drop-cap span.letter { height:20px;*height:32px; } /* *filter to adjust height for IE */ p.drop-cap span.letter span { position:absolute; display:block; width:125px; height:100px; z-index:-99; top:-6px; left:-48px; } p.drop-cap span.A span { background-image:url('graphics/drop-caps/A.gif'); } p.drop-cap span.B span { background-image:url('graphics/drop-caps/B.gif'); } p.drop-cap span.C span { background-image:url('graphics/drop-caps/C.gif'); } p.drop-cap span.D span { background-image:url('graphics/drop-caps/D.gif'); } p.drop-cap span.E span { background-image:url('graphics/drop-caps/E.gif'); } p.drop-cap span.F span { background-image:url('graphics/drop-caps/F.gif'); } p.drop-cap span.G span { background-image:url('graphics/drop-caps/G.gif'); } p.drop-cap span.H span { background-image:url('graphics/drop-caps/H.gif'); } p.drop-cap span.I span { background-image:url('graphics/drop-caps/I.gif'); } p.drop-cap span.J span { background-image:url('graphics/drop-caps/J.gif'); } p.drop-cap span.K span { background-image:url('graphics/drop-caps/K.gif'); } p.drop-cap span.L span { background-image:url('graphics/drop-caps/L.gif'); } p.drop-cap span.M span { background-image:url('graphics/drop-caps/M.gif'); } p.drop-cap span.N span { background-image:url('graphics/drop-caps/N.gif'); } p.drop-cap span.O span { background-image:url('graphics/drop-caps/O.gif'); } p.drop-cap span.P span { background-image:url('graphics/drop-caps/P.gif'); } p.drop-cap span.Q span { background-image:url('graphics/drop-caps/Q.gif'); } p.drop-cap span.R span { background-image:url('graphics/drop-caps/R.gif'); } p.drop-cap span.S span { background-image:url('graphics/drop-caps/S.gif'); } p.drop-cap span.T span { background-image:url('graphics/drop-caps/T.gif'); } p.drop-cap span.U span { background-image:url('graphics/drop-caps/U.gif'); } p.drop-cap span.V span { background-image:url('graphics/drop-caps/V.gif'); } p.drop-cap span.W span { background-image:url('graphics/drop-caps/W.gif'); } p.drop-cap span.X span { background-image:url('graphics/drop-caps/X.gif'); } p.drop-cap span.Y span { background-image:url('graphics/drop-caps/Y.gif'); } p.drop-cap span.Z span { background-image:url('graphics/drop-caps/Z.gif'); } .orange p.drop-cap span.letter { width:60px; } .orange p.drop-cap span.letter span { width:72px; height:74px; top:10px; left:-14px; } .orange p.drop-cap span.A span { background-image:url('graphics/drop-caps/orange/A.gif'); } .orange p.drop-cap span.B span { background-image:url('graphics/drop-caps/orange/B.gif'); } .orange p.drop-cap span.C span { background-image:url('graphics/drop-caps/orange/C.gif'); } .orange p.drop-cap span.D span { background-image:url('graphics/drop-caps/orange/D.gif'); } .orange p.drop-cap span.E span { background-image:url('graphics/drop-caps/orange/E.gif'); } .orange p.drop-cap span.F span { background-image:url('graphics/drop-caps/orange/F.gif'); } .orange p.drop-cap span.G span { background-image:url('graphics/drop-caps/orange/G.gif'); } .orange p.drop-cap span.H span { background-image:url('graphics/drop-caps/orange/H.gif'); } .orange p.drop-cap span.I span { background-image:url('graphics/drop-caps/orange/I.gif'); } .orange p.drop-cap span.J span { background-image:url('graphics/drop-caps/orange/J.gif'); } .orange p.drop-cap span.K span { background-image:url('graphics/drop-caps/orange/K.gif'); } .orange p.drop-cap span.L span { background-image:url('graphics/drop-caps/orange/L.gif'); } .orange p.drop-cap span.M span { background-image:url('graphics/drop-caps/orange/M.gif'); } .orange p.drop-cap span.N span { background-image:url('graphics/drop-caps/orange/N.gif'); } .orange p.drop-cap span.O span { background-image:url('graphics/drop-caps/orange/O.gif'); } .orange p.drop-cap span.P span { background-image:url('graphics/drop-caps/orange/P.gif'); } .orange p.drop-cap span.Q span { background-image:url('graphics/drop-caps/orange/Q.gif'); } .orange p.drop-cap span.R span { background-image:url('graphics/drop-caps/orange/R.gif'); } .orange p.drop-cap span.S span { background-image:url('graphics/drop-caps/orange/S.gif'); } .orange p.drop-cap span.T span { background-image:url('graphics/drop-caps/orange/T.gif'); } .orange p.drop-cap span.U span { background-image:url('graphics/drop-caps/orange/U.gif'); } .orange p.drop-cap span.V span { background-image:url('graphics/drop-caps/orange/V.gif'); } .orange p.drop-cap span.W span { background-image:url('graphics/drop-caps/orange/W.gif'); } .orange p.drop-cap span.X span { background-image:url('graphics/drop-caps/orange/X.gif'); } .orange p.drop-cap span.Y span { background-image:url('graphics/drop-caps/orange/Y.gif'); } .orange p.drop-cap span.Z span { background-image:url('graphics/drop-caps/orange/Z.gif'); } /* suppress drop-caps for IE6 */ * html p.drop-cap { position:static; z-index:inherit; } * html p.drop-cap span.letter { float:none; text-indent:0; width:auto; height:auto; } * html p.drop-cap span.letter span { position:static; display:inline; width:auto; height:auto; z-index:inherit; }