/* Mostly done by Nick Urbanik <nicku@nicku.org>, although Kitty
   started the whole thing off in Macromedia.

   Nick removed the table layout and replaced with CSS using emacs. */

/* The page references are to
   "Cascading Style Sheets: Separating Content from Presentation"
   by Owen Briggs, Steven Champeon, Eric Costello and Matt Patterson.
   
   The navigation is based on the example "04 Photo Gallery/" from
   Chapter 12 of the above book, the html and css of which is available
   in http://friendsofed.com/download.html?isbn=159059231X
*/

body {
    background-color: #ccc;
    font-family: Lucidasans, Helvetica, Verdana, sans-serif;
    /* See http://www.alistapart.com/articles/elastic/: this fixes a bug in IE */
    font-size: 100%;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    /* text-align: center; */  /* See page 267 */
}


#container {
    background-color: #ccc;
    text-align: left;   /* See page 267 */
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

/* This approach from http://wellstyled.com/css-replace-text-by-image.html
   The trouble with this particular arrangement is that the background colour
   covers the text when the image is not displayed, defeating one of the main
   purposes of this technique.  It is probably still read by screen readers,
   however.  It works in IE 5, 6, Firefox 1.5, Opera 9, Konqueror.
 */

h1 {
    position: relative;
    /* width: 800px; */
    width: 100%;
    height: 138px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: black;
    background-color:  #c00;
}

h1 span {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    height: 138px;
    width: 100%;
    padding: 0;
    margin: 0;
    /* #c00 seems to match the red of the redhorz on my monitor, but not
       on Joanna's. */
    background: top left url(../images/redhorz162.jpg) no-repeat #c00;
}

a:link {
    color: #000000;
    text-decoration: none;
}

a:visited {
    text-decoration: none;
    color: #000066;
}

a:hover {
    color: #FF0000;
    /* text-decoration: none; */
}

a:active {
    text-decoration: none;
}

table.testimonials td {
    padding-bottom: 28px;
}

.style1 {
    font-family: Lucidasans, Helvetica, Verdana, sans-serif;
    font-size: medium;
}

.style13 { font-size: small; }
.style18 { color: #FFFFFF; }
.style20 { font-weight: bold; font-size: small; }
.style23 {
    font-family:Lucidasans, Helvetica, Verdana, sans-serif;
    font-size: medium;
    /* font-family: "Times New Roman", Times, serif; */
    /* font-size: 18px; */
}

.style26 {
    font-weight: bold;
    font-size: small;
    color: #FFFFFF;
}

.style27 {
    font-size: medium;
}

.navigation {
    font-size: small;
    text-align: center;
}

/* lists
----------------------------------------------- */
ul#footer, ul#footer li,
ul#nav, ul#nav li {
    margin: 0;
    padding: 0;
}

ul#footer,
ul#nav {
    padding-top: 0.4em;
    padding-bottom: 0.6em;
    background-color: #666;
    text-align: center;
    /* position: relative;
    height: 0em; */
}

ul#footer li,
ul#nav li {
    display: inline;
    list-style-type: none;
}

ul#references {
    list-style-type: none;
    margin: 0;
    padding: 0 0 4px 1%;
}

/* links
----------------------------------------------- */
ul#footer li a:link, ul#footer li a:visited,
ul#nav li a:link, ul#nav li a:visited {
    /* float: left; */
    margin: 0;
    padding: 2px 10px 4px 10px;
    border-top: 1px solid #151f1c;
    border-bottom: 1px solid #151f1c;
    background-color: transparent;
    /* background-color: #666; */
    font-size: small;
    /* line-height: 1.7; */
    color: #fff;
    /* font: 10px/21px verdana, lucida, arial, sans-serif; */
    text-decoration: none;
}

ul#nav li a:hover {
    color: #fff;
    /* background-color: #57746c; */
    background-color: #c00;
}

ul#footer li a:hover {
    background-color: darkred;
}

ul#footer li a:active,
ul#nav li a:active {
    background-color: #425953;
    color: #fff;
}

/* "You Are Here" selectors
These selectors set the current tab in the navigation,
based on the ID of the <body> tag */

body#aboutjk ul#nav li#aboutjknav a, 
body#abouthom ul#nav li#abouthomnav a,
body#aboutmassage ul#nav li#aboutmassagenav a,
body#faqpage ul#nav li#faqsnav a,
body#testimonials ul#nav li#testimonialsnav a,
body#readings ul#nav li#readingsnav a,
body#links ul#nav li#linksnav a,
body#available ul#footer li#availablenav a,
body#contact ul#nav li#contactnav a,
body#home ul#nav li#homenav a {
    margin-left: 1px;
    margin-right: 1px;
    border-bottom: 1px solid #a7ad65;
    /* background-color: #a7ad65;
    color: #151f1c; */
    color: black;
    background-color: #66c;
}

div#hahnemann {
    background-color: #66c;
    font-size: large;
    font-weight: bold;
    min-height: 197px;
    _height: 197px;
    margin-top: 0;
    vertical-align: middle;
}

div#hahnemann p {
    margin-right: 203px;
    margin-top: 0px;
    padding: 5px 2% 5px 2%;
    text-align: center;
    vertical-align: middle;
}

div#hahnemann img {
    float: right;
    vertical-align: middle;
}

div#basicfacts div#hombasics {
    width: 17em;
    margin-right: 1em;
    _width: 14em;
}

div#basicfacts {
    margin-left: auto;
    margin-right: auto;
}

div#basicfacts img { 
    float: left;
    margin: 1.5em 1% 1.5em 1%;
}

div#basicfacts div {
    float: left;
    min-height: 196px;
    _height: 196px;
    _margin-top: 1em;
}

div#basicfacts h3 {
    text-align: center;
}

ul#footer {
    clear: both; /* unless have this, footer overlaps a column */
    background-color: #c00;
    text-align: center;
}

p.faqs, p.faqa {
    font-size: small;
}

p.faqa {
    margin-top: 0em;
}

p.faqs {
    font-weight: bold;
    margin-bottom: 0em;
}

h2 {
    text-align: center;
}
p.author {
    text-align: right;
    
}

div#contactpictures img,
div#availablepictures img,
div#aboutjkpictures img,
div#abouthompictures img {
    margin: 0px;
    padding: 0px;
    border: none;
    vertical-align: middle;
}

div#contactpictures,
div#availablepictures,
div#aboutjkpictures,
div#abouthompictures {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: none;
    margin-left: auto;
    margin-right: auto;
    width: 768px;
}

div#contactinfo {
    width: 18em;
    margin-left: auto;
    margin-right: auto;
}

div#contactinfo p, div#contactinfo h4 {
    /* text-align: center; */
}

div#leftcol {
    float: left;
    margin: 0em 0em% 0em 0em;
    padding: 1em 1% 1em 1%;
    border-right: 1px black solid;
    width: 48%;
}

div#rightcol {
    float: right;
    padding: 1em 1% 1em 0%;
    margin: 0em;
    width: 48%;
}

div#contactinfo address {
    font-style: normal;
}