body  { 
    margin:0;
    font-size:12px; line-height:16px;
        /* 130% nominal line-height for this site; 
           some UAs round up and some down, so state as px */
    font-family:Verdana, Arial, Helvetica, sans-serif;
}
p  { 
    margin:12px 0 6px /*sep floating imgs below/next para*/ 0; padding:0;
}
ul   {
    margin:0px 12px 0px 30px; padding:0px;
}
li { 
    margin:4px 0px 0px; padding:0px;
}
img { 
    border-width:0; 
    display:block;
        /* in STRICT mode, imgage is displayed as an inline, which leaves 
            space below for text descenders (block mode doesn't); margin:auto, 
            which we use for aligning images L/R, applies to block but not 
            inline elements */
}
a:link {
    color:rgb(25,103,153)/*slate blue*/;
}
a:hover {
    color:rgb(152,32,107)/*maroon*/;
}
em {
    font-weight:normal; font-style:italic;
}
td {
    padding:0;
    vertical-align:top;
}

/*
 * The banner background is anchored to the page as it actually extends down
 * below the banner into the main content.  The background is a shadowed curve 
 * sweeping up and to the right so, visually, the right side of it "ends"
 * higher than the left.  The main content can then start in that extra
 * space on the right (and must ensure the left side doesn't start until clear
 * of the lower banner background on the left).
 */
.Page {
    background-color:rgb(209,170,136)/*flesh*/;
    background-image:url(../images/Banner_Background.gif);
    background-repeat:no-repeat; background-position:50% 0;
    border:12px solid black;
    position:relative;
        /* establish containing block for position:absolute children; ensure
            IE hasLayout */
    min-width:666px/*153+360+153*/; max-width:1200px;
    margin:0 auto;
}


/*
 * In the banner, the company name and tagline are centered.  The logo is to 
 *  the left, and the purpose and a soaring bird graphic are on the right.  
 *
 *  The primary challenge with this page is making it look good at any window
 *  width: it reflows to use the available space (constrained by a min and max).
 *  The banner background remains centered, as do the company name and tagline.
 *  The logo and soaring bird center within their space (less a buffer around 
 *  the name and tagline).  The purpose flows in a right-justified block above 
 *  the bird (constrained by a max width).  The overall page min-width ensures 
 *  the logo, bird, and purpose have sufficient separation from adjacent 
 *  elements and that the purpose isn't too narrow.
 *
 *  See the Illustrator mockup Layout elements for more info. 
 */
.BannerL {
    float:left; 
    width:49.99%;
        /* ensure one half rounds down so odd width doesn't result in their not 
            fitting side by side; standard stitching problem and UAs handle 
            differently (some even differently for different CSS concepts); 
            this may result in a 1px gap, but these clear the BannerC so never 
            seen */
}
.BannerL .ClearC { 
    /* distinct from BannerL as that % width can't incl margin (box model) */
    margin:0 180px 0 0;
}
.BannerL .Logo {
    margin:31px auto 2px auto;
}
.BannerR {
    float:right;
    width:50%;
}
.BannerR .ClearC {
    margin:0 0 0 180px; 
}
.Purpose {
    float:right; 
    height:62px; max-width:200px; margin:7px 8px 12px 0; 
    text-align:right;
}
.Bird {
    clear:right; 
    margin:0 auto;
}
.BannerC {
    position:absolute; top:0; width:100%; padding:43px 0 0 0;
}
.BannerC .NameAndTagline {
    margin:0 auto;
}

/* 
 * The main content flows down the right of the page, flowing to fill most of 
 * the width (constrained by the min and max for the page).  The menu and a 
 * graphic separator are absolute-positioned to the left (not floated, to allow 
 * the separator shadow to overlap the main content).  The contact info is 
 * included at the bottom of the "column" below the menu.  Note: the main 
 * content must be long enough to accommodate the menu and contact info. 
 */
.MainContent {
    margin:0; padding:13px 0 0 142px; 
    position:relative;
        /* establish containing block for position:absolute children */
}
.MainContentLevel2 { /* added to 2nd level [in menu] pages */
    padding-left:159px; padding-top:13px;
}
.MainContentPersonalBg { /* added to About page for more personal touch */
    background-image:url(../images/Dolphin.gif); 
    background-repeat:repeat-y; background-position:10px 0;
}

.Menu {
    position:absolute; left:11px; top:55px; 
    padding:0; margin:0
}
.MenuItem { 
    padding:7px 0 0 0; margin:0; 
}
.MenuSep {
    position:absolute; top:53px; left:107px;
}
.MenuSepLevel2 { /* added to 2nd level [in menu] pages */
    left:124px;
}


.IntroImage { 
    float:right; 
    margin:0 9px 8px 10px; 
}
.RightImage { 
    float:right; 
    margin:8px 0 4px 12px; 
}
.LeftImage { 
    float:left; 
    margin:8px 12px 4px 0; 
}
.BorderedImage {
    border:2px solid black;
}
.HeadshotName {
    width:89px; padding:5px 0 0 54px;
    font-size:13px; line-height:16px;
    text-align:center; 
}
.HeadshotQual {
    width:89px; padding:0 0 0 54px;
    font-size:10px; line-height:13px;
    text-align:center;
}


.PageTitle {
    margin:60px 10px 30px 40px; max-width:456px /*for query on Home page*/;
    color:rgb(152,32,107)/*maroon*/;
    font-family:Georgia, 'Times New Roman', Times, serif; font-weight:bold; 
    font-size:24px; line-height:32px; 
    text-align:left; 
}
.MainText {
    margin:39px 11px 12px 6px;
}
.Section {
    clear:left; 
    margin:18px 0 0 30px; text-indent:-30px; 
    font-weight:bold;
    font-size:16px; line-height:20px; 
}

.ClientDo {
    margin-right:151px; /*space for headshot*/
    font-style:italic;
    font-size:12px; line-height:15px; /*tighter since narrower cols*/
}
.NowThen {
    width:85%; padding:4px; margin:0 auto;
    border:1px solid black; border-collapse:collapse;
}
.NowThen th {
    padding:4px; border:1px solid black;
    text-align:center; vertical-align:middle; 
    font-weight:bold;
}
.NowThen td {
    padding:4px; border:1px solid black;
    text-align:left; vertical-align:top;
    color:rgb(153,0,51)/*red magenta*/; 
}
.NowThen td li {
    font-size:12px; line-height:15px; /*tighter since narrower col*/
    font-style:italic;
    color:black;
}

.Testimonial {
    float:right; width:38%;
    margin:0 0 10px 10px; padding:2px 3px 2px 3px; 
    background-color:rgb(202,196,255)/*lt periwinkle*/; 
    border:3px solid rgb(89,79,172)/*dk periwinkle*/;
    font-size:12px; line-height:15px; /*tighter since narrower col*/
}
.Testimonial p { 
    margin:5px 5px 12px 5px;
    font-style:italic; 
}
.Testimonial .Attribution { 
    margin:12px 5px 5px 12px; text-indent:50px;
    font-style:normal;
}

.DefinedTerm {
    font-weight:bold; font-size:14px; line-height:18px; 
}
.Definition {
    margin-top:15px;
    font-style:italic;
}
.DefinitionMore {
    margin-top:10px;
    font-style:italic;
}
.DefinitionSep {
    clear:both;
}

.ListCols {
    width:90%; margin:0 auto;
    font-size:12px; line-height:15px; /*tighter since narrower col*/
}
.ListColOf2 {
    float:left;
    width:49.99%;
        /* ensure cols fit if pixel width not a multiple of num cols (some UAs 
            round up); may result in slight gap at right of ListCols */
}
.ListColOf3 {
    float:left;
    width:33.33%;
}
.ListColOf4 {
    float:left;
    width:24.99%;
}

.EmpowerTable {
    width:80%; margin:0 auto;
    border:1px solid black; border-collapse:collapse;
}
.EmpowerTable thead th { /* IE6 doesn't support preferred child selector */
    padding:4px;
    color:rgb(206,88,0)/*dk orange = sat. flesh*/; border:1px solid black;
    font-weight:bold; font-style:italic;
    text-align:center; vertical-align:middle;
}
.EmpowerTable tbody td { /* IE6 doesn't support preferred child selector */
    padding:4px; 
    border:1px ridge black;
}
.GayStage {
    margin-right:20px; margin-left:20px;
}
.GayStageId {
    font-weight:bold;
}
.GaySay {
    color:rgb(71,91,7)/*dk lime*/;
    font-style:italic;
}

.Price {
    text-align:center;
    font-size:16px; font-weight:bold; line-height:25px;
}
.Rebate { 
    font-style:italic;
}
.CDCover {
    margin:20px auto 0 auto;
}

.PubTitle {
    text-decoration:underline;
}
.Attribution {
    font-style:italic;
}
.PageSig {
    padding-left:80px; text-align:center; padding-bottom:5px;
    font-style:italic;
}
.PageSig img {
    margin:0 auto;
}
.LYVVision {
    margin-right:30px; margin-left:30px; 
    color:rgb(152,32,107)/*maroon*/;
    font-weight:bold; font-style:italic; 
}
.LYVPurpose { 
    margin-right:30px; margin-left:45px; text-indent:-15px;
    color:rgb(152,32,107)/*maroon*/;
    font-weight:bold; font-style:italic; 
}

.CDOffer {
    margin:20px 0 35px 0;
}
.CDOffer .ProductImage {
    float:left; 
    padding:0 20px 0 0;
}
.CDOffer .BuyNow {
    float:left;
    margin-top:48px;
        /* want vertical centering, which is unavail w/CSS; PayPal button size 
            not guaranteed (they have changed it) */
}
.BuyNow .PayPalButton {
    margin:12px auto 0 auto;
}
.BuyNow .Amount {
    margin:5px 0 12px 0;
    text-align:center;
}
.PayPalButton {
    display:block; /*an image; no text descender space*/
}

.ComposeEmail {
    width:322px; margin:30px 0 0 30px;
}
.ComposeEmail td {
    padding-bottom:7px;
}
.ComposeEmail .EndSubgroup td {
    padding-bottom:25px;
}
.ComposeEmail .Label {
    padding-top:4px; padding-right:10px;
    text-align:right;
    color:rgb(152,32,107)/*maroon*/;
    font-weight:bold; font-style:italic; 
}
.ComposeEmail .Info {
}
.ComposeEmail .Info input, .ComposeEmail .Info textarea {
    width:300px; border:2px inset;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px; 
}
.SendButtonCell {
    text-align:right;
}
.SendButtonCell button {
    text-align:center;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px; font-weight:bold; 
}
.SubmitErr {
    color:red;
    font-weight:bold; font-style:italic;
}
.SentEmail {
    width:300px; margin:30px 0 0 30px;
}
.SentEmail .Label {
    padding-right:10px; padding-bottom:15px;
    text-align:right;
    color:rgb(153,0,51)/*red magenta*/; 
    font-style:italic; 
}
.SentEmail .Info {
    width:100%; padding-bottom:15px;
}

.EssenceEcstasy {
    /* this layout is similar to the 1/3 sheet flyer: tall and narrow; just 
        float it on the page */
    width:388px; padding:0 131px 0 0; margin:180px auto 0 auto; 
    position:relative;
}
.EssenceEcstasy .Title {
    position:absolute; left:64px; top:-153px;
}
.EssenceEcstasy .What {
    text-align:center;
    font-style:italic;
}
.EssenceEcstasy .WhenWhere {
    margin:20px 0 0 0;
    text-align:center;
}
.EssenceEcstasy .Experience {
    width:217px; height:160px; margin:24px auto 23px auto;
        /* padding would affect relative origin */
    position:relative; 
}
.EssenceEcstasy .Experience .Dance {
    position:absolute; left:217px; top:-54px; 
}
.EssenceEcstasy .Experience .BeFree {
    position:absolute; left:317px; top:-103px;
    width:92px; height:35px;
    font-style:italic; text-align:center
}
.EssenceEcstasy .Experience .W1 {
    position:absolute; left:-6px; top:14px; 
}
.EssenceEcstasy .Experience .W2 {
    position:absolute; left:119px; top:125px; 
}
.EssenceEcstasy .Experience .W3 {
    position:absolute; left:94px; top:0;
}
.EssenceEcstasy .Experience .W4 {
    position:absolute; left:152px; top:52px; 
}
.EssenceEcstasy .Experience .W5 {
    position:absolute; left:3px; top:113px; 
}
.EssenceEcstasy .Experience .W6 {
    position:absolute; left:58px; top:63px;
}
.EssenceEcstasy p {
    font-size:12px; line-height:15px /*tighter since narrower col*/;
}
.EssenceEcstasy .Cost {
    padding:16px 0 0 0;
    text-align:center;
}
.EssenceEcstasy .Facilitation {
    margin:12px 0 0 0;
    font-size:11px; font-style:italic;
}
.EssenceEcstasy .Facilitator {
    margin:12px 0 0 0;
    font-style:normal; font-size:11px; line-height:14px;
}
.EssenceEcstasy .Facilitator .Name {
    font-size:12px; font-weight:bold; line-height:15px; 
}
.EssenceEcstasy .Facilitator .Phone {
    float:right;
}
.EssenceEcstasy .Facilitator p {
    margin:6px 0 0 0; text-indent:18px;
}
.EssenceEcstasy .Come {
    margin:12px 0 0 0; 
    text-align:center;
}
.EssenceEcstasy .MoreInfo {
    margin:20px 0 40px 0;
    font-size:14px; font-weight:bold; line-height:17px;
}
.EssenceEcstasy .MoreInfo .Link {
    display:block;
    margin:8px 0 0 15px;
    font-size:13px; font-weight:normal; line-height:16px;
}


.Copyright { 
    clear:both;
    width:100%; padding:6px 0 8px 0;
    background-color:rgb(147,201,15)/*lime*/;
    text-align:center; 
    font-size:11px;
}

.FindMe {
    position:absolute; left:9px; bottom:5px;
    font-family:Georgia, 'Times New Roman', Times, serif;
}
.FindMe .Biz {
    font-size:18px; line-height:22px;
}
.FindMe .Name {
    font-size:13px; line-height:17px;
}
.FindMe .Phone  { 
    font-size:11px; line-height:15px;
}
.FindMe .City {
    font-size:10px; line-height:15px;
}

.Latin {
    font-style:italic;
}


/* Shrink a div to fit its contents and center within parent
    [http://www.brunildo.org/test/shrink_center_3fr.html].
    Fails on IE6 if parent has L/R margin. */
.ShrinkToFitAndCenter1 { 
    float:left;
    position:relative; left:50%;
}
.ShrinkToFitAndCenter2 {
    float:left; 
    position:relative; left:-50%;
}
.ClearFloats {
    clear:both;
}
.MenuStrut { 
    /* ensure FindMe clears menu; [FindMe needing to be at bottom of col which 
        might be shorter or longer not supported in CSS] */
    height:200px;
}