/**********************************************************/
/* Style Sheet for the Chrysalis Keep Site                */
/* William J. Knight - 02/12/2007                         */
/**********************************************************/

/* define the pages background color and image */
body {background-color: #FFFFDD;
      background-image: url(images/parch2.gif);
      background-repeat: repeat;
     }

/* This defines the color pattern for the links: Blue for new, */
/* Dark Magenta for visited, and Red for active.               */
/* hovered links will have a light yellow background,          */
/* active links will have a darker yellow background.          */

a:link                         {color: 0000FF;}
a:visited                      {color: 990099;}
a:link:hover, :visited:hover   {color: FF0000; 
                                background: #FFFFCC; 
                                text-decoration: none;}
a:link:active, :visited:active {color: FF0000; 
                                background: #FFFF66; 
                                text-decoration: none;}

/* These are general CSS settings that define my preferences */
  
.heading  {font-family: Arial, Helvetica, sans-serif;
	       font-size: 24px;
           font-weight: bold;
	       text-align: center;}
.table-title  {font-weight: bold;
   	       text-align: center;}   
.section-header{font-family: Arial, Helvetica, sans-serif;
                text-align: center;
                font-size: 11px;
                letter-spacing: 3px;
                text-decoration: underline;}
.centered {text-align: center}
.smaller  {font-size: smaller}
.bold     {font-weight: bold}

/* These CSS definitions allow the floating menu to work -             */
/* The Content DIV is 150px left to allow room for the floating        */
/* menu, which will occupy the left 150px of the page as the menu DIV. */

div#header {Position: Absolute;
            left: 0;
			top: 0;
            padding:5px;
            margin:0;
	        clear:both;
           }

div#menu {position: Absolute;
          top: 190px;
          left: 10px;
          padding-left: 0px;
		 }
		  	
div#content {Position: Absolute;
             Top: 180px;
             Left: 150px; 
             padding-right: 10px;
			}

/* This is a CSS trick for roll-overs in the menu. I'm using a     */
/* single image, which has the normal, hovered, and active images  */
/* stacked.  hovering or activating will change the background     */
/* position of the image displayed, and change the text-decoration */

div#menu ul {margin: 0;
             padding: 0;
             list-style-type: none;}

div#menu li {height: 30px;
	         width: 120px;
	         margin: 0px;
	         font-family: Arial, Helvetica, sans-serif;
	         font-size: 12px;
	         text-align: center;
	         line-height: 30px;
	         list-style-type: none;
	         background-image: url(images/buttons.jpg);
	         background-repeat: no-repeat;}
div#menu li a {display: block;
               width: 100%;
               height: 100%;
               text-decoration: none;
               color: #000000;}
div#menu li a:link {color: #000000;
	                background-image: url(images/buttons.jpg);
	                background-position: 0px 0px;}
div#menu li a:visited {color: #000000;
                       background-image: url(images/buttons.jpg);
                       background-position: 0px 0px;}
div#menu li a:hover {font-weight: bold;
                     color: #000000;
                     background: none;
                     background-image: url(images/buttons.jpg);
                     background-position: 0px -30px;}
div#menu li a:active {font-weight: bold;
                      color: #000000;
                      background: none;
                      background-image: url(images/buttons.jpg);
                      background-position: 0px -60px;}

/* these are special settings for the menu table to display the */
/* backgrounds I want.                                          */
				  
td.parch {text-align: center;
          background: #FFFFCC url(images/parch2.gif) repeat;}