/* 
     style01site.css

     highest-level style sheet for website

     Copyright 2011, Anita Clark
     All rights reserved

     7-2-11    created
     7-24-11   add td.center class
     8-13-11   add styles for "popup" book pictures on XREF page
     8-28-11   add "submenu" class styles
               change "menu" ID to "main_menu" class
               change "pagebottom" from ID to class
               leave "revdate" as ID, but remove items that are in common
                 with "pagebottom" class
               merge in styles from the book detail style sheet
     8-29-11   go back to ID for menu, and relocate the code to
                 the end of the file
     8-30-11   play with top_menu styling
     9-3-11    add "debug" class
     9-27-11   start adding stuff for braid side menu
     9-28-11   explicitly style table borders (side menu borders messed them up)
     10-9-11   style top-menu active link the same way as its unvisited link
                 (for some reason, the xrefhelp link retained active focus
                 after the help page was closed. Did not do this in Firefox or
                 Chrome... go figure!)
     10-14-11  more styling on braid photos side menu and page content                 
*/


body {
margin-left:120px;
background-color: lightgray;
background-image: url('pictures/tada108.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left top;
font-family: Tahoma, Arial, Helvetica, Trebuchet, sans-serif;
font-weight: normal;

white-space: nowrap;
}

h1 {
margin-left:40px;
margin-right:50px;
text-align:left;
font-size:36pt;
}

h2 {
margin-left:40px;
margin-right:50px;
text-align:left;

}

h3, h4 {
margin-left:80px;
margin-right:50px;
}

p {
margin-left:80px;
margin-right:50px;
font-size:14pt;
}

a:link {
color:black;
background-color:none;
border:none
}

/************** CENTER class for table cell ****************/

.center {text-align:center;}

/************** 14-pt font class ****************/

.font14pt {
font-size:14pt;
}

/************** DEBUG class for dedebugging output ************/
/* this is an easy way to turn debug writes off and on

     to turn them off, uncomment the "display" line
     to turn them on, make the "display" line a comment
     THE EASIEST WAY TO DO THIS IS TO MOVE THE DISPLAY LINE IN OR OUT
     OF THE COMMENT
     
   of course, this depends on using html tags with class="debug" for the
   debug output!   
*/
.debug {
background-color:aqua;
display:none;
/* --------
----------- */  
}

/************** COPYRIGHT, ETC. ****************/

p.pagebottom {
margin-left:40px;
font-family:Tahoma, Arial, Helvetica, Trebuchet, sans-serif;
font-size:small;
font-weight:normal;
}

a:link.pagebottom {
display:inline;
text-decoration:underline;
}

/************** REVISION DATE ****************/

#revdate p {
display:block;
/*
***  margin-left:40px;
***  font-family:Tahoma, Arial, Helvetica, Trebuchet, sans-serif;
***  font-size:small;
***  font-weight:normal;
*/
}

/************** PICTURES OF BOOKS (show-all-books page) ****************/

#bookpics img {
margin-left:120px;
float:left;
margin:20px;
border:4px solid black;
}

#bookpics a:hover img {
border:4px solid white;
}

/************** BOOK DETAIL PAGE ****************/
/*  (be careful with making changes here... it was a bear to get this
     to look like I wanted it to!)
*/

body.no_background_picture {
background-image:none;
margin-left:40px;
}

#book_detail {
margin-left:0px;  /* div margin is relative to the body container */
}

#book_detail p {
margin-left:40px;
}

#book_detail img {
border:2px solid black;
}

#book_detail a:hover img {
border:2px solid white;
}

#book_detail a:hover, #book_detail a:active {
color:blue;
}

#bookbraids table {
  border:2px solid black;
}

#bookbraids th, #bookbraids td {
  border:1px solid black;
  padding:8px;
  white-space:nowrap;
}
ul.inside, ol.inside {
list-style-position:inside;
}

/************** LINKS PAGE ****************/

#reglink p {
white-space:normal;
}

#reglink a:hover, #reglink a:active {
color:blue;
}

/************** XREF PAGE ****************/
/* *** these "hover_pic" styles make the
   *** book pictures pop up when the
   *** mouse rolls over the "book name"
   *** of a braid.  It was hard to get it
   *** to work, so don't mess with it!!
*/

.hover_pic{
position: relative;
z-index: 0;
}

.hover_pic:hover{ /* image on hover */
background-color: transparent;
z-index: 50;
}

.hover_pic span{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;   /* note: visibility is hidden */
color: black;
text-decoration: none;
}

.hover_pic span img{
border-width: 0;
padding: 2px;
}

.hover_pic:hover span{ /* image on hover*/
visibility: visible;   /* note: visibility is NOT hidden */
top: 0;
left: 60px; /*position where image should offset horizontally */
}
/******************* XREF TABLE ***************************/

#xref table {
  border: 2px solid black;
}

#xref th, #xref td {
  border: 1px solid black;
  padding:5px;
  white-space:nowrap;
}

/*******************************************************************/
/* IMPORTANT NOTE concerning the physical location of the menu
   styles in this file:
   
   The styles for the menus must be physically located AFTER
   the styles used elsewhere.  Even though these styles are
   "named" with an ID, some elements (e.g. a:hover) seem to
   be overridden with styles used in "containing" <div id="...">
   in the html pages. (The menu div's are nested within other
   div's). This may be a "feature" of IE... but the only way
   I could get the hover color of the menu to work right on
   some pages was to physically move this code down to the
   bottom of the file! (go figure...)
*********************************************************************/

.standout {
  background-color:white;
  color:black;
  padding:20px 0;
}

/************* TOP_MENU div ************/

#top_menu ul {
  list-style-type:none;
  margin-left:40px;:0;
  padding:0;
}

#top_menu li{
  display:inline;
}

#top_menu a:link,
#top_menu a:visited,
#top_menu a:active  {
  color:black;
  background-color:darkgray;
  text-decoration:none;
  font-family: Tahoma, Arial, Helvetica, Trebuchet, sans-serif;
  font-weight:bold;
  padding:10px 0px;
  border:none;
  outline-style:none;
  overflow:hide;
}

#top_menu a:link.standout,
#top_menu a:visited.standout {
  background-color:white;
  color:black;
  padding:20px 0;
}

#top_menu a:hover {
  color:white;
  background-color:black;
  padding:20px 0px;
  border:none;
  outline-style:none;
}

/************* SUBMENU ************/

#submenu form {
  margin-left:40px;:0;
}

/************** SIDE MENU ****************/

#sidemenu p {
  margin:10px;
  text-align:center;
  font-weight:bold;
}

#sidemenu ul {
  list-style-type:none;
  margin:10px;
}

.standout2 {
  background-color:white;
  color:black;
}

#sidemenu a {
  display:block;
  width:130px;
}

#sidemenu a:link,
#sidemenu a:visited {
  color:black;
  text-decoration:none;
  font-family: Tahoma, Arial, Helvetica, Trebuchet, sans-serif;
  font-weight:bold;
  text-align:center;
  padding:4px;
  background-color:darkgray;
/*  border:none; */
  border:5px; 
/*  border-style:outset;  */
/*  border-style:solid;  */
/* simulate outset -- not rendered well in several browsers */
  border-left-style:groove;
  border-top-style:groove;
  border-right-style:solid;
  border-bottom-style:solid;
  border-left-color:whitesmoke;
  border-top-color:whitesmoke;
  border-right-color:dimgray;
  border-bottom-color:dimgray;
  
  outline-style:none;
  overflow:hide;
}

#sidemenu a:link.standout2,
#sidemenu a:visited.standout2 {
  color:black;
  background-color:white;
/*  border:none;  */
/*  border-style:inset;  */
/*  border-style:solid;  */
/* simulate inset -- not rendered well in several browsers */
  border-left-style:solid;
  border-top-style:solid;
  border-right-style:ridge;
  border-bottom-style:ridge;
  border-left-color:dimgray;
  border-top-color:dimgray;
  border-right-color:whitesmoke;
  border-bottom-color:whitesmoke;
}

#sidemenu a:hover, 
#sidemenu a:active  {
  color:white;
  text-decoration:none;
  background-color:black;
  padding:4px;
/*  border:none;  */
  border:5px;  
/*  border-style:inset;  */
/*  border-style:solid;  */
/* simulate inset -- not rendered well in several browsers */
  border-left-style:solid;
  border-top-style:solid;
  border-right-style:ridge;
  border-bottom-style:ridge;
  border-left-color:dimgray;
  border-top-color:dimgray;
  border-right-color:whitesmoke;
  border-bottom-color:whitesmoke;
  outline-style:none;
}

/************** BRAIDS & EQUIPMENT PHOTOS pages **************/

#braids td {
  padding:10px;
}

/************** BLAH BLAH on BRAIDS MAIN page and NOT YET page****************/

#blahblah p {
  white-space:nowrap;
}

#blahblah ul {
  list-style-position:outside;
  margin-left:100px;
  font-size:14pt;
}