/*
 *  yoga.css, for 800px wide, last tweaked December 31, 2011.
 *
 *  The styles are listed here in much the same order that they're first used in the HTML. 
 *  But to avoid unnecessarily complicating this stylesheet, the different pages' HTML also    
 *  has a little styling scattered around in it.
 *
 *  The layout styling used here is not elegant. The right column is floated and the main left  
 *  column is not, which means the right column is listed in the HTML first. Trying to keep 
 *  the layout CSS simple avoids using most CSS and/or javaScript hacks to accomodate all the 
 *  different platforms for both monitor display and printing.
 *
 *  The original of the highly manipulated masthead image of the desert dune is from the 
 *  National Park Service at http://www.nps.gov/deva/ .
 *
 *  The original of the highly manipulated images of the lotus flower can be found at
 *  http://en.wikipedia.org/wiki/Nelumbo_nucifera. It is licensed both there and here under the 
 *  Creative Commons Attribution ShareAlike 3.0 License. See http://creativecommons.org/licenses/by-sa/3.0/ 
 *  In short, you are free to share and make derivative works of the file under the condition that you 
 *  appropriately attribute it, and that you distribute it only under a license identical to this one. 
 * 
 *  Except for the text-shadow property, at http://jigsaw.w3.org/css-validator/ this file and print.css
 *  validate error-free as CSS 2.1. At http://validator.w3.org/ the pages don't quite validate error-free 
 *  as HTML 4.01 Strict.
 *
 *  If any style looks unnecessary, it might be here to make Internet Explorer (MSIE) behave.
*/

html {margin:0; padding:0;}
/* Just to make sure that all browsers start the same. */

body {margin-top:20px; margin-left:auto; margin-right:auto; padding:0px 6px; 
  font:100% Verdana,sans-serif; color:#333; background:#fff7e7;}
/* 
 * The little body padding is nice for small (handheld) screens.
 *
 * Using relative font-sizes (percentages) allows MSIE users to change them. They are further 
 * set below, which seems to work only if the doctype is specified on the pages. The sizes
 * are compromises for MSIE and Firefox and Safari. MSIE still seemed to want a conditional
 * comment on each page.
*/

#wrapper {position:relative; width:800px; margin-left:auto; margin-right:auto; 
  background-image:url(images/dunes5_800x71.jpg); background-repeat:no-repeat;}
/* 
 * Although that is for a screen only 800px wide, it's still reasonable for 1024px 
 * and somewhat wider, too.
 *
 * With the width specified and left and right margins set to auto, everything except the 
 * lotus flower is contained within the centered 774px wrapper (in wider windows; see below). 
 *
 * This wrapper is position:relative so that the position-specified elements below are relative 
 * to this centered and width-specified wrapper, rather than to some window of unknown width. 
*/

#noscript {position:absolute; top:-20px; width:100%; text-align:center; font:70% Verdana; 
  font-weight:bold; color:#903; padding:0;} /* background:#f9eaaf; */

#small_lotus {display:none;}
/* This image is displayed only on print.css. */

#right_lotus {position:absolute; top:-18px; left:-10px;}
#left_lotus {position:absolute; top:-18px; left:-48px;}
/* 
 * Right_lotus is the default display either for javaScript off or for windows narrower than 870px. 
 * Left_lotus displays for (most) windows that javaScript reveals are more than 870px wide. 
 * For the little scripting that chooses which to display, see yoga.js and the pages themselves.
*/

h1, h2 {position:relative; text-align:right; font-family:Georgia,serif; color:#007878; 
  font-weight:normal; font-style:italic; text-shadow:0px 0px 4px #eee;}
h1 {padding-top:4px; padding-right:16px; font-size:210%;}
h2 {right:2.4em; top:-1.4em; font-size:110%; letter-spacing:0.4px;} 
/*
 * MSIE up through version 8 doesn't yet easily display text-shadows, so, with the new addition 
 * of #wrapper's background-image of the desert dunes, these fonts (plus h2, :hover, etc.) have 
 * had their colors darkened a bit, from #308080 to #007878.
*/

h3,h4 {font-family:Georgia,serif; color:#007878; font-weight:bold; letter-spacing:1px; 
  margin-top:1.6em; margin-bottom:0; padding:0;}
/* h3's bottom-margin is also set by p.first's margin-top, below. */

#rightcolumn h3 {font-size:105%;}
#leftcolumn h3 {font-size:115%;}
h4 {font-size:105%;}

p.first {margin-top:2px; padding:0;}
/* p.first is the first paragraph after an h3. */

.menu {position:relative; text-align:center; margin-top:-1em; margin-bottom:4.5em; 
   padding:1px 0 2px 0; font-size:77%; letter-spacing:1px;}
.menu #current {font-weight:bold; color:#007878; border-top:1px #007878 solid;}
/* 
 * The .menu here is position:relative so that ".menu a:hover span" below is positioned
 * relative to this .menu, not the enclosing #wrapper or whatever.
*/

.menu a:link, .menu a:visited, .menu a:active {font-weight:bold; text-decoration:none;}
.menu a:link {color:#06b; text-decoration:underline;}
.menu a:visited {color:#903090;}
.menu a:active {color:#a00;}
.menu a:hover {color:#007878; font-weight:bold; text-decoration:none;}
/* .menu a:hover specifies the colors again so IE will display the .menu a:hover span, below. */

.menu a span {display:none;}
.menu a:hover span {display:block; position:absolute; top:2em; left:21%; z-index:10; background:#fafcfc; 
  border:1px #307a7a dotted; padding:3px; font:105% Verdana,sans-serif; white-space:nowrap;}
/* 
 * This displays the spanned text in each link's anchor only when hovered. If this fails in an  
 * older browser, because of the display:none it should fail nicely.
 *
 * Although this is position:absolute, it's absolutely positioned relative to .menu. See above.
 * This needs to be "out of the flow" using position:absolute so that...well, just try without it. 
 * But being position:absolute also means that its position must be specified, which leads to this:
 * The kludgy left:20% puts the text close enough to center to look okay if the total widths of the 
 * text blocks are all about the same. (I've found no better way to center this with CSS alone.)
*/ 

a:link, a:visited, a:active {font-weight:normal;}
a:link {color:#06b; text-decoration:underline;}
a:visited {color:#903090; text-decoration:none;}
a:active {color:#a00; text-decoration:underline;}
a:hover {color:#007878; font-weight:normal; text-decoration:none;}
/*
 * These are for all links other than the menu. 
 * a:link, etc, were border-bottom:1px blue dotted, but MSIE browsers seem to have a problem with it. 
 * a:hover was text-decoration:none and border-bottom:1px #308080 solid, but MSIE has issues there, too.
*/

/* id="maincontent" is not used here in the CSS, but is used by the javaScript function resizeText(). */

#rightcolumn {float:right; margin:0; font:84% Arial,sans-serif; line-height:130%; color:#555;}
/* 
 * The width of this column varies with the width of its image, so it's set in the HTML of each page. 
 * See comment below for #leftcolumn. On resources.html different margins are set, overriding the 
 * margin:0 set here. On index.html an MSIE conditional comment adds a 50px margin-left.
*/

ul#tools {white-space:nowrap; font-family:Verdana,sans-serif; font-weight:normal; padding:1.3em 2px 0 0;}
ul#tools li {display:inline;}
li#resize a, li a#prformat, li a#mail {color:#888; background:#fafcfc; 
   border:1px #007878 dotted; text-decoration:none;} 
li#resize a#resizesmall {font-size:80%; padding:3px 5px 1px 5px;}
li#resize a#resizebig {font-size:105%; padding:0 2px 0 1px;} /* Was: margin-left:0; */
li#resize a img {width:1px; height:1px; border:none;}
/*
 * The padding used here lines up the boxes in all browsers (IE, Safari, Opera, and newer Firefox)
 * except for older versions of Firefox, like 3.6, where the "Larger text" box is too high by a pixel.
 * Oh, well.
*/

li a#prformat, li a#mail {font-size:80%; margin-left:1.5em; padding: 2px 2px 1px 2px;}
li a#prformat img, li a#mail img {border:none;}

li#resize a:hover, li a#prformat:hover, li a#mail:hover {color:#007878; background:#eeeeee; cursor:pointer;}

div#date {white-space:nowrap; margin:3em 0 1em 0;}

table#sked td {border:1px #666666 solid; padding:2px 3px; color:#444; line-height:140%;}
/* Used for the tabled schedule on contact.html. Was: font-size:96%; */

table#sked {border-collapse:collapse; background:#fafcfc; font-size:96%;}
/* 
 * "Collapsing" the table border combines what would otherwise be two borders between cells 
 * (each cell with its own border) into just one. This is supposed to be default behavior, but...
*/

#sked tr {vertical-align:top;}
#sked td.header {font-weight:bold; color:#555;}
#sked td.pb {padding-bottom:1em;}
/* 
 * Used in the first column of "day" cells, this last one adds extra space for rows with only one entry.
 * It's done this way, rather than some other way, to make the Mac OS X print preview behave properly. 
*/

#sked td.right {text-align:right;}
/* In the table's "time" column, this is used to align the hours properly. */

#specials {margin-top:5em; border:1px #308070 dotted; padding:0 8px; color:#555; background:#fafcfc;}
/* Used for the specials box, if there is one. */

#leftcolumn {margin-bottom:2em; font-size:85%; line-height:140%;}
/* 
 * This column's width varies with the width of the (floated) right column, which itself varies 
 * with the width of its pic. On all pages except index.html on MSIE and resources.html the left    
 * column styling provides the padding for the right column width plus the padding between.
 *
 * Line-height:140% looks better and seems more readable than other choices. 
 *
 * In the head of each page an MSIE conditional comment is now used to style the text font-size down
 * a bit in this left column. (MSIE doesn't seem to have a size problem with right-column's Arial.) 
*/

#update {color:#666;}

.parahead {font-size:92%;}
/* 
 * Font-variant:smallcaps is inconsistently rendered in different browsers.
 * Instead, all caps in the text is used with this smaller font. 
*/

.reg {font-size:76%; position:relative; bottom:0.5em;}
.tm {font-size:95%; position:relative; bottom:0.1em;}
/* These are mostly used only once on each page to keep them unobtrusive. */

ul {list-style-type:circle; margin-top:-1em;}
li {padding-top:0.4em;}
/* 
 * These are used for the many non-id'd lists.
 * HTML's 'ul compact' and 'type' have been deprecated. Circle is less obtrusive than a black dot. 
*/ 

p.quote {margin-top:3em;}
p.quotee {text-align:right; margin-right:4em; margin-top:-0.6em;}
/* These two classes are used on testimonials.html. */

#footer {clear:both; width:100%; margin-bottom:0.5em; font-size:80%; letter-spacing:0.5px;
  background:#fafcfc; border:1px #007878 dotted;}
#footer td a {text-decoration:none;}
td#phone a img {width:16px; height:12px; border:none;}
td a#copyright {font-size:95%; color:#888; letter-spacing:0; padding-left:3em;}
td#btmmenu {text-align:right;}