/* STYLES FOR THE ENTIRE DOCUMENT */
BODY { background-image: url(images/spirulaback01.jpg);
	background-color: #cccccc;
	color: #000000;
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px }
.bccontents { background-image: none;
	background-color: #cccccc;
	color: #000000;
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px }
.entry { background-image: none;
	background-color: #000000;
	color: #ffffff;
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px }


/* STYLES FOR CERTAIN TAGS */

dl { margin: 10px; 
	text-align: left }
dt { font-weight: bold}

	/* I'm redoing all heading with css classes so they can be controlled better. */
	/* W3C Validator inconsistency: sometimes it tells me text-align is only for block-level elements and sometimes it says it's valid...what??? It works my way, so I'll leave it for now. */
H1, H2, H3, H4, H5, H6 {text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif }
.pagetitle { margin: 4px;					/* not used, since I changed to banner images for all the pages. */
	text-align: center;
	font-size: 30px;	
	font-family: Verdana, Arial, Helvetica, sans-serif } 		
.mainheading { margin: 10px;
	text-align: center;
	font-size: 20px;	
	font-family: Verdana, Arial, Helvetica, sans-serif }
.subheading { margin: 10px;
	font-size: 15px;	
	font-family: Verdana, Arial, Helvetica, sans-serif }


/* LINK STYLES. */
	/* A bit touchy due to my use of both gray and black backgrounds. */
a { color: #5a5ac1 } 
a:visited { color: #5a5ac1 } 
a:hover { color: #b36262 }
.entry a { color: #ffffff } 
.entry a:visited { color: #ffffff } 
.entry a:hover { color: #b36262 }
.imageandcaption a { color: #ffffff } 
.imageandcaption a:visited { color: #ffffff } 
.imageandcaption a:hover { color: #b36262 }

/* STYLES FOR TEXT AND PARAGRAPHS */
.mainintropara { margin: 10px;
	font-weight: bold;
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif }
.firstpara { margin: 10px;					/* The first paragraph on each page. */
	font-weight: bold;
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif }
.normalpara { margin: 10px;					/* All paragraphs except the first paragraph on each page. */
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif }
.speciesdescription { margin: 10px;				/* The species description list. */
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif }	
.references { margin-left: 50px;					/* For lists of references. */
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif }		
.bopnav { text-align: center;					/* The B-O-P navigation section for each page. */
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif }


/* STYLES FOR LAYOUT TABLES */	
	/* I SHOULD CHANGE ALL TABLES TO DIVS...THAT WILL BE THE NEXT BIG UPDATE! THIS IS STILL DEFINITELY A TABLES-BASED LAYOUT! */
	/* FOR NOW, I HAVE LEFT TABLES WITH CELLPADDING(MOST) AND CELLSPACING IN THE HTML DUE TO BROWSER INCONSISTENCY BUT AM STARTING TO MOVE OTHER ATRIBUTES, SUCH AS BORDERS, WIDTHS, ALIGNMENT, HERE. A WORK IN PROGRESS... */
.outertable { background-color: #cccccc;
	color: #000000;			
	border-style: solid;
	border-width: 4px;      	
	border-color: #ffffff;  	/* or maybe change this to a nice color instead...the site could use a bit more color. */
	border-spacing: 0px;
	padding: 2px;		
	width: 750px;
	margin-right: auto;
	margin-left: auto;
	text-align: center }
.bccontentsoutertable { background-color: #cccccc;
	color: #000000;			
	border-style: solid;
	border-top-width: 0px;		/* This gets rid of the extra white border at the top...making it look like the other pages. */
	border-right-width: 0px;	/* Do I want a border on that side or not? Unnecessary. */
	border-bottom-width: 4px; 
	border-left-width: 4px;  
	border-color: #ffffff;  	/* Maybe change this to a nice color instead...the site could use a bit more color. */
	border-spacing: 0px;
	padding: 0px 2px 2px 2px;	/* This gets rid of the extra grey border at the top...making it look like the other pages. */				
	width: 190px;			/* I had this in the outer table of the page, but having it only here got rid of the horizontal scrollbar...looks great! */
	margin-right: auto;
	margin-left: auto;
	text-align: left }		/* Had this in the outer table of the page too, but looks like it's not needed there. */
.speciesoutertable { background-color: #cccccc;
	color: #000000;			
	border-style: solid;
	border-top-width: 0px;		/* This gets rid of the extra white border at the top...making it look like the other pages. */
	border-right-width: 4px; 
	border-bottom-width: 4px; 
	border-left-width: 4px;		/* do I want a border on that side or not? Yes, looks more complete that way for small pages. */
	border-color: #ffffff; 		 /* or maybe change this to a nice color instead...my site could use a bit more color. */
	border-spacing: 0px;
	padding: 0px 2px 2px 2px;	/* This gets rid of the extra grey border at the top...making it look like the other pages. */	
	width: 530px;			/* I had this in the outer and inner tables of the pages, but having them only here got rid of the horizontal scrollbars...looks great! */
	margin-right: auto;
	margin-left: auto;
	text-align: center }		/* Had this in the outer and inner tables of the pages too, but looks like it's not needed there. */
.speciesinnertable { width: 520px;
	border-spacing: 0px;		/* I had this in the inner table of the pages, but having them only here got rid of the horizontal scrollbars...looks great! */
	text-align: center }
.titlebar { background-color: #cccccc; 	/* The container for the title banner for each page. */
	color: #000000;			
	border-style: solid; 
	border-width: 0px; 
	border-color: #cccccc;
	border-spacing: 0px; 
	padding: 1px }
.topnav { background-color: #ffffff; 	/* The container for row of navigation buttons at the top of every page. */
	color: #000000;			
	border-style: solid; 
	border-width: 0px;
	border-color: #ffffff;
	border-spacing: 0px; 
	padding: 1px }
.textcontent { background-color: #cccccc;	/* The container for all basic textual content areas. */
	color: #000000;			
	border-style: solid;
	border-width: 1px; 
	border-color: #000000; 
	padding: 10px }
.speciestextcontent { background-color: #cccccc; /* Not used yet...used speciesdescription in "text and paragraphs" section above. */
	color: #000000;			
	border-style: solid;
	border-width: 0px; 
	border-color: #000000; 
	padding: 10px }
.imageandcaption { background-color: #000000; 	/* The container for all image-and-caption areas. */
	border-style: solid;
	border-width: 0px;
	border-color: #000000;		/* W3C gives me a warning: Same colors for background-color and border-top-color. Fix? */
	padding: 0px;
	color: #ffffff;
	text-align: center;
	font-size: 75% }
.gallerylist { background-color: #cccccc;	/* This will be changed to look like the BC Contents frame during the next update. */
	color: #000000;			
	border-style: solid;
	border-width: 1px; 
	border-color: #000000; 
	padding: 10px }
.gallerythumbnails { background-color: #cccccc;
	color: #000000;			
	border-style: solid;
	border-width: 1px; 
	border-color: #000000; 
	padding: 10px;
	vertical-align: text-top }
.gallerycaptions { font-size: 75%; 
	text-align: center;
	vertical-align: text-top }

/* GENERAL PURPOSE STYLES -- NOT NECESSARILY USED */
.center { text-align: center }
.selected { color: #9999cc;		/* Was used to denote the current page in the b-o-p navigation...but not used now? */
	background-color: #cccccc }		
.left { text-align: left }
.nav { font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif } 	/* What would I have this for anymore? */ 
.smaller { font-size: 75% }					/* Used in the BC Contents species list...where else? */
.larger { font-size: 150% }
.caption { font-size: 75%; 					/* Encorporated into the imageandcaption and gallerycaptions classes above. */
	text-align: center }