.ugly {display: none;}

body { margin: 0; padding: 0; background: #060d20 url(../graphics/patK.gif) 50% 50% no-repeat; color: #666; font: normal .8125em/1.8em Geneva, Verdana, Arial, sans-serif; }
p { font-size: 100%; line-height: 2em; margin: 0 0 .5em; padding: 0; }
a, a:link, a:visited { color: #f66; text-decoration: underline; }
a:visited { color: #c66; }
a:hover { color: #3b4d65; text-decoration: none; }
ul, ol, dl { margin: 0; padding: 0; }
dl { clear: both; width: 80%; margin: .5em auto; line-height: 1.4em; }
dt { margin: 0; padding: 0; font-weight: bold; }
li, dd{ margin-left: 2em; padding: 0; }
dd { margin-bottom: .5em; }

img, img a, img a:hover { border: none; text-decoration: none; }
img.fl { float: left; margin-right: .5em; }
img.fr { float: right; margin-left: .25em; }
img#anim { margin: 30px 0 50px 30px; width: 167px; height: 320px; }

h1 { color: #f66; font: bold 200% "Trebuchet MS", "Bookman Old Style", serif; margin: 0 0 .5em; }
h2 { font-size: 120%; line-height: 2.5em; margin: 1em 0 0; padding: 0; clear: both; }
h3 { font-size: 100%; margin: 1em 0 0; padding: 0; text-transform: uppercase; }
h4 { font-size: 100%; line-height: 1.25em; font-weight: bold; margin: .5em 0 0; padding: 0; }
h5 { font-size: 90%; line-height: 1.25em; margin: 6px 0 0; padding: 0; }
h6 { font-size: 90%; text-transform: uppercase; color: #666; margin: 0; padding: 0; }

/* --- main stuff layout --- */
#wrapper { width: 85%; position: relative; top: 0; left: 0; border: 3px solid #525a7f; margin: 0 auto; padding: 0; background: #699 url(../graphics/yaBG.gif) 0 0 repeat-y; width: 90%; height: 100%; }

/* --- homepage ---*/
#header { position: absolute; top: 0; left: 0; width: 100%; background: url(../graphics/bg-bubbles.gif) 0 0 no-repeat; padding: 0; border-bottom: 1px solid #525a7f; }
#hd { margin: 0; padding: 20px; color: #060d20; font: bold 140% "Trebuchet MS", "Bookman Old Style", serif; text-transform: uppercase; }
#hd span { font-weight: normal; text-transform: none; }
#hd a, #hd a:visited { color: #060d20; text-decoration: none; }
#hd a:hover { color: #3b4d65; }
img#lk { float: left; width: 580px; height: 414px; margin: -30px 10px 10px -100px; border: 3px solid #525a7f; }

#content { border: 3px solid #525a7f; border-bottom-width: 0; margin: 68px 6px 0 168px; padding: 20px; background: #fff; }
#indent { width: 80%; margin: 0 auto; padding: 0 1em;  }
img#hdimg { float: left; margin: 10px 20px 10px 0; }

/* --- left bar navigation --- */
#lbar { position: absolute; top: 0; left: 0; width: 160px; margin: 0; padding: 0; }
#note { width: 90%; font-size: 80%; position: relative; bottom: 0; left: 0; padding: .5em; margin: 200px auto 0; color: #699; text-transform: uppercase; }
#note a:link, #note a:visited { color: #699; }

#meter { width: 90%; margin: 0 auto; padding: 0; }
#meter a, #meter:visited, #meter a:hover { text-decoration: none; font-size: 1px; color: #000; }

/* --- button navigation --- */
#butnav { position: relative; top: 52px; left: 1px; padding: 0; }
#butnav span { margin-left: -1000px; }
#butnav #hm, #butnav a#tw, #butnav a#yt, #butnav a#es { display: block; border-bottom: 1px solid #060d20; margin: 10px 0; padding: 0; }
/* --- home --- */
#butnav a#hm:link, #butnav a#hm:visited { width: 160px; height: 36px; position: relative; background: url(../graphics/butHome.gif) 0 0 no-repeat; }
#butnav a#hm:hover { background: url(../graphics/butHome.gif) 0 -36px no-repeat; }
/* --- teaching and writing --- */
#butnav a#tw:link, #butnav a#tw:visited { width: 160px; height: 81px; position: relative; background: url(../graphics/butTW.gif) 0 0 no-repeat; }
#butnav a#tw:hover { background: url(../graphics/butTW.gif) 0 -81px no-repeat; }
/* --- yoga therapy --- */
#butnav a#yt:link, #butnav a#yt:visited { width: 160px; height: 92px; position: relative; background: url(../graphics/butYT.gif) 0 0 no-repeat; }
#butnav a#yt:hover { background: url(../graphics/butYT.gif) 0 -92px no-repeat; }
/* --- eSutra --- */
#butnav a#es:link, #butnav a#es:visited { width: 160px; height: 72px; position: relative; background: url(../graphics/butESutra.gif) 0 0 no-repeat; }
#butnav a#es:hover { background: url(../graphics/butESutra.gif) 0 -72px no-repeat; }

#subnav { margin: 100px 0 0; padding: 0; width: 161px; }
#subnav li { font-size: 85%; line-height: 1.1em; list-style: none outside; float: left; width: 100%; margin: 0 0 1em; padding: 0; }
#subnav a, #subnav a:link { display: block; margin: 0; padding: .5em; font-size: 100%; text-transform: uppercase; text-decoration: none; color: #060d20; } /*border: 1px solid #BED5D8; border-width: 1px 0; */
#subnav a:visited { color: #05054d; text-decoration: none; }
#subnav a:hover { color: #460a0a; background-color: #a5c1c5; }

#links { width: 60%; margin: 1em auto; }
#links li { font-size: 100%; line-height: 1.5em; list-style: none outside; margin: 0 0 1.5em; padding: 0; }
#links a, #links a:link { display: block; text-decoration: none; color: #060d20; border: 1px solid #a5c1c5; border-width: 1px 0; }
#links a:visited { color: #05054d; text-decoration: none; }
#links a:hover { color: #460a0a; background-color: #b5cad0; }

address { display: block; color: #060d20; padding: .5em; font: 80% Geneva, Verdana, Arial, sans-serif; }
address a:link { text-transform: none; color: #060d20; }

div#archive h3 { margin: 1em 0 0 }
div#archive p {	font: 11px/1.25em Geneva, Verdana, Arial, sans-serif; margin: 0;}
div#archive a {	font-size: 10px; color: #c66; text-transform: uppercase; margin: 0; }

/* calendar */
table#calendar { background-color: white; font-size: 80%; color: black; width: 100%; margin: 0; padding: 0;	border-bottom: 1px solid #999; }
table#calendar a, table#calendar a:link { display: block; padding: 1px 0 5px; text-decoration: none; }
tr#title th, tr#days th, table#calendar td { border: 1px solid #ccc; border-color: #ccc #999 #fff #ccc; }
tr#title th { background: #e7e7e7; padding: 3px; width: 14%; }
tr#days th { background-color: #603; color: white; font-weight: normal; text-align: center; padding: 2px; }
table#calendar td { vertical-align: top; padding: 2px 2px 8px; }
tr#days th.mon, table#calendar td.mon { border-left: 1px solid #ccc; }
.sat, .sun { background: #e7e7e7; }
span.time { display: block; padding: 0; }

/* price schedule */
table.prices { background-color: #fff; font-size: inherit; width: 60%; margin: 10px 0; border: 1px solid #666; text-align: center; }
table.prices th, table.prices td { text-align: center; }
table.prices th { background-color: #999; color: white; font-weight: normal; text-transform: uppercase; padding: 2px 6px; border-right: 1px solid #666; }
table.prices td { border: 1px solid #666; padding: 2px; }
table.prices td.quantity { background-color: #999; color: #fff; text-transform: uppercase; }

/* callout */
div#grayBox { float: left; width: 40%; border: 1px dotted #ccc; margin: 10px 10px 0 0; padding: 3px 12px; font: 110%/2em "Arial-Narrow", "Helvetica-condensed", sans-serif; color: #666; }
div#grayBox a, div#grayBox a:visited { color: #666; text-decoration: underline; }
div#grayBox a:hover { color: #603; text-decoration: none; }

/* banner */
div#banner { width: 100%; text-align: center; border: 1px solid #603; margin: 10px 0; padding: 12px; font: 1.4em/1.2em Verdana, Helvetica, sans-serif; background-color: #666; color: #fff; }
div#banner a, div#banner2 a { color: #fff; text-decoration: underline; }

/* banner2 */
div#banner2 { float: right; width: 20%; text-align: center; margin: 10px; padding: 12px; font-size: 110%; line-height: 1.5em; background-color: #999; color: white; }
div#banner a:hover, div#banner2 a:hover, table#banner2 td a:hover { color: black; text-decoration: none; }

#bbpbox a:hover { color: #c03; }
table.prices h3, #bbpbox h3 { margin: 0; }

div.photobox { float: left; width: 100%; margin: 1em 0; padding: .5em; clear: both; border: 1px solid silver; }
div.photobox p { font: 90% arial, sans-serif; color: #060d20; margin: .5em; }

div.rule { line-height: 1px; margin: .5em 0; padding: 0; width: 100%; border-bottom: 1px solid #ccc; }

/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

.clearfix {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */