/* CSS Document: jccal.css */

/* ******************** THEME ******************** */

/*
       -  #7C7668  Page Color  [background brown; RGB = 124,118,104 HSL = 029,022,114]
       -  #3F310B  Dark Color  [chocolate brown]
       -  #400000  Medium Color  [rust brown]
       -  #996666  Light Color  [light brown]
       -  #332D2D  [brown title in header graphic; RGB = 051,045,045 HSL = 255,016,048]
       
       -  #000000  [black]
       -  #FFFFFF  [white]
       -  #9499A0  [background gray 2; RGB = 148,153,160 HSL = 152,015,154]
       
       -  #FFFFA7  [menu bar fill yellow]
       -  #263140  [menu bar background 1]
       -  #465262  [menu bar background 2]
       
       -  #087CE7  [medium blue, RGB = 008,124,231]
       -  #D0E6F5  [light blue, RGB = 208,230,245]
       -  #034BC4  [book blue from Lulu graphic]
*/

/* ******************** BODY ******************** */

body {
   font-family: "Trebuchet MS", Geneva, sans-serif;
   font-size: 100%;
   color: #000000;
   background-color: #7C7668;
   margin: 0;
   padding:0;
/*   behavior: url(css/csshover.htc); */
   }

* {margin:0; padding:0;}   /* neutralizes all default margins and padding */

*.clearthefloats {clear:both;}

body.links {
   font-family: Verdana, Helvetica, Arial, sans-serif;
   font-size: .75em;
   color: #000000;
   background: white url(g/chain_background.gif) repeat-y;
   }
   
/* ******************** MENU DIVS ******************** */

/* the horizontal menu starts here */
div#listmenu {
	width:100%; 	                	/* makes the div full width */
	float:left;                     	/* makes the div enclose the list */
	border-top:1px solid #3F310B;		/* draws line on top edge of div; originally #069 */
	border-bottom:1px solid #3F310B;	/* draws line on bottom edge of div */
	font-size:.8em;	                	/* SET FONT-SIZE HERE */
	background-color:#3F310B;       	/* colors the div; originally #087CE7 */
	margin: 10px 0 10px 0;       /* TEMPORARY - pushes div away for clarity in this example*/
	}
div#listmenu ul {
        width: 575px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
/*        margin:0 0 0 30px;            original: indents ul from edge of container */
	}
div#listmenu li {
	float:left;	                 /* causes the list to align horizontally instead of stack */
	list-style-type:none;	         /* removes the bullet off each list item */
	background-color:#FFA;           /* sets the background of the menu items */
	border-right:1px solid #3F310B;  /* creates dividing lines between the li elements */
	}
div#listmenu li:first-child {
	border-left:1px solid #3F310B;   /* the first vertical line on the menu */
	}
div#listmenu li:hover { 
	background-color:#FFF;       /* sets the background of the menu items */
	}
div#listmenu a {
	padding:0 6px;               /* creates space each side of menu item's text */
	text-decoration:none;	     /* removes the underlining of the link */
	color:#3F310B;	             /* sets the type color */
	}
div#listmenu a:hover {
	color:#F33;
	}
/* end of horizontal menu */
/* -- THE HACK ZONE -- */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#listmenu ul {
	float:left;                  /* makes the ul wrap the li's */
	border-left:1px solid #000;  /* adds the rightmost menu vertical line to the ul */
	margin-left:15px;            /* IE doubles the given value above - why? */
	}
* html a {display:block;}            /* makes IE5 & 5.5 accept the padding on the link */
/* end of hack zone */

/* ******************** ORDER DIVS ******************** */

/* the horizontal menu starts here */
div#ordermenu {
	width:100%; 	                	/* makes the div full width */
	float:left;                     	/* makes the div enclose the list */
	border-top:1px solid #7C7668;		/* draws line on top edge of div; originally #069 */
	border-bottom:1px solid #7C7668;	/* draws line on bottom edge of div */
	font-size:.8em;	                	/* SET FONT-SIZE HERE */
	background-color:#7C7668;       	/* colors the div; originally #087CE7 */
	margin: 10px 0 10px 0;       /* TEMPORARY - pushes div away for clarity in this example*/
	}
div#ordermenu ul {
        width: 118px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
/*        margin:0 0 0 30px;            original: indents ul from edge of container */
	}
div#ordermenu li {
	float:left;	                 /* causes the list to align horizontally instead of stack */
	list-style-type:none;	         /* removes the bullet off each list item */
	background-color:#FFA;           /* sets the background of the menu items */
	border-right:1px solid #3F310B;  /* creates dividing lines between the li elements */
	}
div#ordermenu li:first-child {
	border-left:1px solid #3F310B;   /* the first vertical line on the menu */
	}
div#ordermenu li:hover { 
	background-color:#FFF;       /* sets the background of the menu items */
	}
div#ordermenu a {
	padding:0 6px;               /* creates space each side of menu item's text */
	text-decoration:none;	     /* removes the underlining of the link */
	color:#3F310B;	             /* sets the type color */
	}
div#ordermenu a:hover {
	color:#F33;
	}
/* end of horizontal menu */
/* -- THE HACK ZONE -- */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#ordermenu ul {
	float:left;                  /* makes the ul wrap the li's */
	border-left:1px solid #000;  /* adds the rightmost menu vertical line to the ul */
	margin-left:15px;            /* IE doubles the given value above - why? */
	}
* html a {display:block;}            /* makes IE5 & 5.5 accept the padding on the link */
/* end of hack zone */

/* ******************** DIVS ******************** */

div#header {
   height: 100px;
/*   background-color: #7C7668; */
   text-align: center;
   }

div#maincontent {
   margin: 20px 0 0 2px;
   padding: 0 1em;
   }

div#maincontent ul {
   font-size: 0.95em;
   line-height: 1.5em;
   margin: 0 0 0 1.5em;
   padding: .5em;
   }

div#maincontent li {
   font-size: 0.95em;
   line-height: 1.5em;
   margin: 0 .5em 0em 1em;
   }

div#pagefooter p {
   font-family: Calibri, Tahoma, Verdana, Helvetica, Arial, sans-serif;
   font-size: .75em;
   color: #000000;
   text-align: center;
   }

/* ******************** HEADINGS ******************** */

h1 {
   font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
   font-size: 1.7em;
   color: 400000;
   background-color: #7C7668;
   text-align: center;
   letter-spacing: .02em;
   margin: 20px 1.5em;
   }

h2 {
   font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 1.3em;
   color: #3F310B;
   background-color: #7C7668;
   text-align: center;
   letter-spacing: .02em;
   }

h3 {
   font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
   font-size: 1.1em;
   color: #FFFFA7;
   background-color: #7C7668;
   letter-spacing: .02em;
   margin: .5em .5em 1em .5em;
   }

/* ******************** GENERAL ******************** */

*.center {
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   }

*.bold {
   font-weight: bolder;
   }

*.italics {
   font-style: italic;
   }

*.underline {
   text-decoration: underline;
   }

*.overline {
   text-decoration: overline;
   }
   
/* ******************** IMAGES ******************** */

img {
   float: center;
/*   margin: .5em 1.5em 1em 1.5em; */
   }

/* ******************** PARAGRAPHS ******************** */

p {
   font-size: 0.95em;
   color: #000000;
   background-color: #7C7668;
   line-height: 1.5em;
   margin: .5em .5em 1em 2em;
/* border: 2px solid red; */
   }

p.blockquote {
   font-size: 0.7em;
   color: #000000;
   margin: 3em 4em;
   padding: 1em;
   border: 1px solid #400000;
   background-color: #FFFFFF;
   }

p.nexttothumb {
   margin: 3em .5em 1em 2em;
   }

.intro {
   font-size: 0.85em;
   color: #3F310B;
   }

.invisible {
   font-size: 0.25em;
   color: #7C7668;  /* matches background */
   }

.comment {
   font-family: 'Trebuchet MS', 'Times New Roman', Times, serif;
   font-size: 0.95em;
   color: navy;
   }

.commentcentered {
   font-family: 'Trebuchet MS', 'Times New Roman', Times, serif;
   font-size: 0.95em;
   color: #3F310B;
   text-align: center;
   }

.definition {
   font-size: 0.7em;
   color: #400000;
   }

.floatleft {
   float: left;
   margin: 0px 10px 0px 0px;
   }

.floatright {
   float: right;
   margin: 0px 0px 0px 10px;
   }

.indented {
   margin-left: 4em;
   }

.introIndented {
   color: #800080;   /* purple */
   margin-left: 100px;
   }

.introOnBlack {
   color: yellow;
   font-style: italic;
   margin-left: 20px;
   }

.navmenu {
   font-size: 0.75em;
   color: #400000;
   line-height: 1.5em;
   }

.navlink {
   font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
   font-size: 0.75em;
   color: #000000;   /* black */
   line-height: 1.5em;
   }

.onBlackContrast {
   color: red;   /* red */
   text-align: center;
   }

/* ******************** LINKS ******************** */

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

a:hover {
   color: #FFFFA7;
   text-decoration: overline underline;
   }

a:active {
   color: blue;
   }

a:visited {
   color: orange;
   text-decoration: none;
   }

/* ******************** TABLES ******************** */

table {
   /*border: 2px solid black;*/
   margin: 1em auto;
   padding: 3px;
   }

th {
   font-size: 1em;
   color: #000000;
   background-color: #7C7668;
   padding: .5em;
   }

tr {
   /*border: 2px solid red;*/
   font-size: 0.9em;
   color: #400000;
   }

td {
   /*border: 2px solid navy;*/
   padding: .5em;
   }

#zebra {
   border: 1px solid #FFC1C1;
   }

#zebra td {
   font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
   font-size: 8pt;
   padding: 3px 5px;
   border-left: 1px solid #FFC1C1;
   }

/* ************************* END ************************* */