body {
	background-image: url(grid.png);	                              	
	font-family: "Times New Roman", Times, serif ;
	font-size: 18px;
	text-transform: normal;
	letter-spacing: normal;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* Define the various ids. The container sits inside the body.
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

#container{
	/* Set the width of the container in ems, so that it scales
	   properly as the text size is changed. */
	width:840px;
	/* The auto margins are needed to center the container on the page.*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.5em;
	/*padding-left: 3em;
	padding-right: 3em;*/
	border: 1px solid #dddddd;
	/* Add a light drop-shadow around the container.*/
	box-shadow: 0px 0px 5px #cccccc;
	margin-bottom: 32px;
	background-color: #ffffff;
}	

/* ------------------------------------------------------------ */	
/* Within the container are a header, a navigation area called
/* 'centeredmenu', a content area, and a footer.
/* ------------------------------------------------------------ */	

#header { 	/* 640 x 94 */
	/* Add some space inside the top of the header. */
	padding-top: 48px;
	/*border: 1px solid #ff0000;*/
	/*background-color: #ededed;*/
	background: url(mathheader.png) no-repeat;
	}		

#title { 	/* 640 x --- */
	padding-top: .5em;
	background: url(mathmain.png) ;
	}		
	
#content {  	/* 640 x --- */
	/* Need to add this so that all of the centerting, etc. in the menu is cleared. */
	clear: both;
	/* Add 0.5em of space at the top of the content block, and 1 em at the bottom. */
	padding-top:  0.5em;
	padding-bottom:  3em;
	padding-left: 3em;
	padding-right: 3em;
	/*border: 1px solid #00ff00;*/

	background: url(mathmain.png) ;
}


#footer { 	/* 640 x 62 */
	/* Uncommenting the following lines gives a smaller, centered footer. */
	/* margin-left: auto;
	margin-right: auto;
	width: 80%; */
	/* Add some space to the top of the footer, both outside and inside. */
	/*margin-top: 3em;*/
	padding-top: 2em;	
	/* Add some space at the bottom, inside the footer. */
	padding-bottom: 1em;
	color: #333333;
	text-align: center;
	font-size:.9em;
	/* Set off the footer with a double-lined border at the top. */
	/*border-top: 4px double #cccccc;*/
	background: url(mathmain.png) ;	
	}
	
#bottom {
	height: 24px;
	background: url(mathfooter.png);
}



/* ------------------------------------------------------------ */
/* The 'centeredmenu' id is the most complicated id in the con-
/* tainer so we set it up last. It is a horizontally centered
/* menu that always places itself correctly, regardless of how
/* many links it contains.
/* ------------------------------------------------------------ */

#centeredmenu { 	/* 640 x 67 */
   /* Float this div left. That would adjust its size to the content, but then we 
      explicitly set the width to 100%. That makes it as wide as the content div
      that it sits in. */
   float:left;
   width:100%;
   overflow:hidden;
   position:relative;
   padding: 0;
   /* Add some space below the menu, above the content. */
   /*margin-bottom: 1em;
   margin-top: 0.5em;*/

   /*background-color: #e0e0e0;*/

	background: url(main.png) ;

}

#centeredmenu ul {
   clear:left;
   float:left;
   list-style:none;
   padding:0;
   /* Shift the position of the unordered list by 50% of the width of the parent
   	  div -- the centered menu. */
   position:relative;
   left:50%;
   /* This element is *not* centered -- it is off to the right. So don't put any
      colors or images here, as they won't be centered. */
}

#centeredmenu ul li {
   display:block;
   /* Using float:left puts the li elements in order, from left to right. */
   float:left;
   /* No bullets for list elements. */
   list-style:none;
   padding:0;
   position:relative;
   /* Now shift the elements of the list back to the left by half of their parent div.
	  Since the parent div is floated left it is set to the width of its content. So when
	  we shift the list items by 50% of that width, we get a horizontally centered list.*/
   right:50%;
   /* Add a small amount of padding to the top and bottom of each li. */
   padding-top: 0.15em;
   padding-bottom: 0.15em;
   /* Set the background color to light grey. */
   /*background-color: #fbfbfb;*/
   border-top: 3px double #dedede;
   border-bottom: 3px double #dedede;  
   font-size: 1.125em;
}

/* Style links that appear within list items, in an unordered list, in the centeredmenu id. */
#centeredmenu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:0.25em 0.75em 0.25em 0.75em;
	/* Set the text to small caps and add a bit of spacing between letters. */
   font-variant: small-caps;
   letter-spacing: 1px;
}

/* Do this to links in the menu when they are hovered over. */
#centeredmenu ul li a:hover {
   color: #feb369;
}

/* Now we want to define a class (active) that only applies when called within the centered menu id.
   It styles the active link -- the page we are currently on -- in both regular and hovered states. */
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   /* color:#000;*/
}




/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* Style various html elements like h1, p, etc.
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
	
#title h1 {
/*
	font-size: 1.8em;
	letter-spacing: 0.075em;
*/
	text-align: center;
	padding-bottom: 0.5em;
	margin: 0;
/* 	color: #666666; */
/* 	color: #777777; */
	color: #888888;
/* 	color: #82a0c7; */
/* 	color: #feb369;	 */
	font-variant: small-caps; 
	font-size: 1.6em; 
	letter-spacing:2px; 
	font-family: 'Libre Baskerville', serif;
	/*font-family:sans-serif;*/
}

h2 {
	font-size: 1.25em;
	letter-spacing: 0.075em;
	text-align: center;
	padding-top: 1em;
	padding-bottom: 0em;
	margin: 0;
	color: #666666;
}

p {
	/*Justify paragraph text.*/
	text-align:justify;
/* 	line-height: 1.35em; */
	letter-spacing: normal;
	line-height: 1.4em;
}

/* Indent paragraphs that follow another paragraph. */
p + p {
	text-indent: 1em;
}

a {
	/* Set the color for links.*/
	color: #82a0c7;
	/* Do not underline links. */
	text-decoration: none;
	outline: none;
}

a.journal {
	/* Set the color for links.*/
	color: #c66868;
	/* Do not underline links. */
	text-decoration: none;
	outline: none;
}

a:hover{
	/* This is the color when the link is hovered over. */
	color: #feb369;
}

/* An img should be centered on the page. */
img.custom {
	margin-left: auto;
	margin-right: auto;
	display: block;
}


/* This is a div that we wrap around images and image captions to ensure
   some vertical space above and below. */
.centerimg {
	margin-top: 2em;
	margin-bottom: 2em;
}

/* Paragraphs that occur within a div with class 'centerimg' are captions
   that are centered, italicized, and rendered slightly smaller than the 
   regular text.*/
.centerimg p {
	font-size: 90%;
	font-style: italic; 
	width: 24em;
	margin-left: auto; 
	margin-right: auto; 
}


/* Make sure that entries in ordered lists have a reasonable line height,
   and don't let them extend the full width. */
ol {
	margin-left:0em;
	margin-right: 2em;
	line-height: 1.35em;
}

ol a {
	font-size: 1em;
}

/* Add some padding to all list items. */
li {
	padding-top: 0.25em;
	padding-bottom: 0.35em;
	padding-left: 0.25em;
/* 	margin-top: 1em; */
}

/* Style the background of every other list item. */
li.even {
	border-bottom-color: #d2e4f8;
	border-top-color: #d2e4f8;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-top-style: solid;
	border-top-width: 1px;
	background-color: #edf5fa; 
}

/* Make the Math font a little bigger. */

/*
.MathJax {
font-size: 1.1em !important;
}
*/

#mathstuff ul {
	margin-left:0em;
	margin-right: 0em;
	padding-left: 2em;
}

#mathstuff li {
/* 	padding-top: 0.25em; */
	padding-bottom: 0.0em;
	padding-left: 0.0em;
	margin-left:0em;
/* 	margin-top:1em; */
}

#mathstuff h3 {
/* 	text-align: center; */
	font-size: medium;
/*
	margin-top: 0em;
	margin-bottom: 0em;
	padding-top: 0em;
	padding-bottom: 0em;
	border: 0;
*/
}


/*
#mathstuff h3, p{
margin-top:0.0em;
}
*/


#mathstuff p {
	margin-bottom:: 0.0em;
	margin-top: : 0.0em;
	margin-left: : 0.0em;
	padding-bottom: 0.0em;
/* 	padding-top: 0.0em; */
}

#mathstuff a.anchors {
	color: #c66868;
	font-family: 'Libre Baskerville', serif;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* Other divs that we use.
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

/* Use this in place of <sub>, for a little more typographic control of
   subscripts. */
.lowered {
	vertical-align: baseline;
	font-size: 0.7em; 
	position: relative; 
	top: 0.4em;
	padding-left: 0.07em;	
	padding-right: 0.07em;	
}

/* Style the ampersand, using the most pleasing variant available to us. */
span.amp {
  font-family: Baskerville, Palatino, "Book Antiqua", serif;
  font-style: italic;
}
 
  

/* ------------------------------------------------------------ */
/* A horizontal divider to set apart different sections on the
/* page. 
/* ------------------------------------------------------------ */

/* Our horizontal dividers contain an image, but we wrap it in this div to style the spacing above and below
   the divider. The result looks very nice, but the image does not scale well. Perhaps this can be fixed with
   something like SVG? */
.hordiv {
	display:block;
	margin-top: 2.5em;
	margin-bottom: 2.5em;
	text-align: center;
}


/* A light, horizontal divider. This can be used for a simple line, without image. It's width
   is a percentage of the content area, so it scales properly.  */
.horiz {
	display: block;
	border-top: 1px solid #cccccc;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2em;
	margin-bottom: 1em;
}


a.anchors {
	color: #666666;
}