/* 
style.css is the style sheet that works with old browsers as well as new browsers. It is linked to the Home page and the secondary pages via <link rel="stylesheet" href="../includes/style.css" type="text/css" media="screen" />
*/

/*
Some style attributes that are not supported by older browsers will be found in "style2.css". "Style2.css" is imported into the pages via the "@import" tag which is not supported by older browsers. In this way the site should degrade to, at least a readable site, if not a well styled site in older browsers (at least as far back as Netscape 4.7 on the Mac).  
*/

/* The "body" attribute can also be found in the style2.ccs file.  */
body 
{ 
	background: black; 
	font-size: 95%; 
	color: #CCC;
	font-family: arial, helvetica, san-serif;
	font-size: 1.1em;
	line-height: 1.4em;
	font-weight: normal;
}

body a {font-family: arial, helvetica, san-serif; font-size: 92%; font-weight: bold; }
body a:link {background: none; color: #FFECC9; text-decoration: none; }
body a:visited {background: none; color: #FFECC9; text-decoration: none; }
body a:focus {background: none; color: #FC9; text-decoration: underline; }
body a:hover {background: none; color: #FC9; text-decoration: underline; }
body a:active {background: none; color: #FC9; text-decoration: underline; }


	
/* MENU STYLES and other navigational aids (see footer menu at end of style sheet) */

/* The following class, "menu", is used in conjunction with "headmenu" div and "sidemenu" div. These are found in the "style2.ccs" file. The "menu" class sets the style for the first level menu items in the "sidemenu" and the links in the "headmenu". */
.menu {font-family: arial, helvetica, san-serif; font-size: 1em; line-height: 150%; }
.menu a:link {background: none; color: #BFB197; text-decoration: none; }
.menu a:visited {background: none; color: #BFB197; text-decoration: none; }
.menu a:focus {background: none; color: #FC9; text-decoration: none; }
.menu a:hover {background: none; color: #FC9; text-decoration: none; }
.menu a:active {background: none; color: #FC9; text-decoration: none; }

/* The side menu div is used to set a hairline between menu sections.  */
#sidemenu img
{
	width: 2em;
	height: 1px;
	margin: .5em 0 .5em 0;
}

/* The "current" class is used in a span around the main "sidemenu" item  that is associated with the current page. It should be all caps and the lighter color of the "submenu" links. This class is associated with "sidemenu" div listed in "style2.ccs".  */
.current {font-family: arial, helvetica, san-serif; font-size: 1em; line-height: 150%; text-transform: uppercase; } 
.current a:link {background: none; color: #FFECC9; text-decoration: none; }
.current a:visited {background: none; color: #FFECC9; text-decoration: none; }
.current a:focus {background: none; color: #FC9; text-decoration: none; }
.current a:hover {background: none; color: #FC9; text-decoration: none; }
.current a:active {background: none; color: #FC9; text-decoration: none; }


/* The "submenu" div items are the indented, lighter menu listings in the main left side navitation menu ("#sidemenu" in "style2.css"). They are visible only for items that fall under the main topic that associates all those pages together. Sometimes these items will be internal links as the main topic will be contained on one page. Some times the "submenu" items will link to different pages within the scope of the main topic. For example under Research there are "projects" and "publications" on separate pages. The "submenu" should only show the second level choices. Third level choices are handled in a different way if they are needed at all.  */

/* this sets the "submenu" indent */
#submenu
{
	margin-left: 10px;
	line-height: 100%;
}

/* this sets the font and link attributes of the "submenu" */
.submenu {font-family: arial, helvetica, san-serif; font-size: .9em; }
.submenu a:link {background: none; color: #FFECC9; text-decoration: none; }
.submenu a:visited {background: none; color: #FFECC9; text-decoration: none; }
.submenu a:focus {background: none; color: #FC9; text-decoration: none; }
.submenu a:hover {background: none; color: #FC9; text-decoration: none; }
.submenu a:active {background: none; color: #FC9; text-decoration: none; }

/* this helps define the spacing between "submenu" items */
.submenu p {margin:.6em; }


/* The third level menu resides under the main content heading of a page. It is placed in a horizontal format. Apply the "thirdmenu" class to a paragraph. Menu items are separated by a bullet (&bull;). It is used when there is a need to provide links from a secondary level page that extend beyond the scope of the "submenu" available in the "sidemenu". */
.thirdmenu {font-family: arial, helvetica, san-serif; background: none; color: #FC9; font-size: .9em; margin-top: 0em; margin-bottom: 3em; }
.thirdmenu a:link {background: none; color: #FFECC9; text-decoration: none; }
.thirdmenu a:visited {background: none; color: #FFECC9; text-decoration: none; }
.thirdmenu a:focus {background: none; color: #FC9; text-decoration: none; }
.thirdmenu a:hover {background: none; color: #FC9; text-decoration: none; }
.thirdmenu a:active {background: none; color: #FC9; text-decoration: none; }

/* class "top" is used to set the style for the "top" link on the right side of long pages. This is a link to the top of the page. "Style2.css" holds the float:right command for this style. */
.top {font-family: arial, helvetica, san-serif; font-size: .9em; background: none; color: #B2A48B; text-decoration: none; margin-left: 2em; margin-right: .2em; padding-top: .5em; vertical-align: top; }
.top a:link {background: none; color: #B2A48B; text-decoration: none; }
.top a:visited {background: none; color: #B2A48B; text-decoration: none; }
.top a:focus {background: none; color: #FFECC9; text-decoration: underline; }
.top a:hover {background: none; color: #FFECC9; text-decoration: underline; }
.top a:active {background: none; color: #FFECC9; text-decoration: underline; }


/* SPECIAL EXTRA MENU ELEMENT FOR EXTRA NAVIGATION IN INTERNAL COMPLEX PAGE SETS The "back" class is used for the deeper pages in "sites within the site". A paragraph tag with the "back" class applied to it exists under the "headmenu" div and just under the "contentholder" div on the right side of the page. It contains a link back to the "internal main page" and a javasript back link for those who came to the page from some other page. There is placement information for this class in "style2.css". */
.back {margin-top: 9px; margin-right: 4%; padding: 4px 4px 9px 4px; background: none; font-family: arial, helvetica, san-serif; font-size: .9em; }
.back a:link {background: none; color: #BFB197; text-decoration: none; }
.back a:visited {background: none; color: #BFB197; text-decoration: none; }
.back a:focus {background: none; color: #FC9; text-decoration: none; }
.back a:hover {background: none; color: #FC9; text-decoration: none; }
.back a:active {background: none; color: #FC9; text-decoration: none; }




/* HOME PAGE STYLES */
/* The "maingraphic" div is supplied from a library of images that will be accessed in a random manner each time the home page is reloaded. Each image must occupy the same size (width="350" height="350"). Placement commands are found in "style2.css". */

/* The "annoucement" div should fit under the "headmenu" on the right side of the page. This is an area on the home page to direct people to any current hot topic. Placement, width and margin styles for this div are found in "style2.css". */
#announcement
{
	background: none; color: #FC9;
	font-family: arial, helvetica, san-serif;
	font-size: .8em;
	line-height: 1.1em;
	font-weight: normal;
	margin:.3em 0 .3em 0;
}
/* SPECIAL HOME PAGE SETTING based on "viewimage" found below in the Content section. On the home page this sets the style and size for the warning to turn on javascript and be prepared for large files. */
#viewImageHome
{
	font-family: arial, helvetica, san-serif;
	padding: 6px;
	background: none;
	color: #AAA;
	font-size: .8em;
	line-height: 1.6em;
	font-weight: normal;
	border-top: 1px solid #363636;
	border-bottom: 1px solid #363636;
}

/* The "introtext" class describes the main block of explanatory text on the home page. This class's placement commands are in the "style2.css" file */
.introtext {background: none; width:75%; color: #C2C2C2; font-family: arial, helvetica, san-serif; font-size: 1em; }




/* CONTENT */
/* The "contentholder" div holds the main content of each page. Information for "contentholder" is found in "style2.css". */

/* heading styles throughout site */
h1, h2, h3, h4, h5
{
	background: none; color: #FC9;
	font-family: arial, helvetica, san-serif; 
	font-weight: normal;
}
h1 {font-size: 2.2em; }
h2 {font-size: 1.5em; }
h2 a:link {background: none; color: #FFECC9; text-decoration: none; }
h2 a:visited {background: none; color: #FFECC9; text-decoration: none; }
h2 a:focus {background: none; color: #FC9; text-decoration: underline; }
h2 a:hover {background: none; color: #FC9; text-decoration: underline; }
h2 a:active {background: none; color: #FC9; text-decoration: underline; }
/* The "nameheader" class is used on each persons name on their personal page. */
h2.nameheader {margin-top: 2em; }

h3 {font-size: 1.3em; }
h3 a:link {background: none; color: #FFECC9; text-decoration: none; }
h3 a:visited {background: none; color: #FFECC9; text-decoration: none; }
h3 a:focus {background: none; color: #FC9; text-decoration: underline; }
h3 a:hover {background: none; color: #FC9; text-decoration: underline; }
h3 a:active {background: none; color: #FC9; text-decoration: underline; }

h4 {font-size: 1.1em; font-weight:bold; }
h4 a:link {background: none; color: #FFECC9; text-decoration: none; }
h4 a:visited {background: none; color: #FFECC9; text-decoration: none; }
h4 a:focus {background: none; color: #FC9; text-decoration: underline; }
h4 a:hover {background: none; color: #FC9; text-decoration: underline; }
h4 a:active {background: none; color: #FC9; text-decoration: underline; }

h5 {font-size: 1em; font-weight:bold; }
h5 a:link {background: none; color: #FFECC9; text-decoration: none; }
h5 a:visited {background: none; color: #FFECC9; text-decoration: none; }
h5 a:focus {background: none; color: #FC9; text-decoration: underline; }
h5 a:hover {background: none; color: #FC9; text-decoration: underline; }
h5 a:active {background: none; color: #FC9; text-decoration: underline; }

/* The paragraph tag <p> without any specific class holds the style attributes of the main content. It is the same style as the "content" class below.  */
p
{
	background: none; color: #CCC;
	font-family: arial, helvetica, san-serif;
	font-size: 1.1em;
	line-height: 1.4em;
	font-weight: normal;
}

/* This sets the style for links within the main content of each page. */
p a {font-family: arial, helvetica, san-serif; font-size: 92%; font-weight: bold; }
p a:link {background: none; color: #FFECC9; text-decoration: none; }
p a:visited {background: none; color: #FFECC9; text-decoration: none; }
p a:focus {background: none; color: #FC9; text-decoration: underline; }
p a:hover {background: none; color: #FC9; text-decoration: underline; }
p a:active {background: none; color: #FC9; text-decoration: underline; }
	
/* The "content" class describes the style of the main content. Use the class "content" in any tag (ie lists and tables) to give the text the same attributes as the rest of the main content.  */
.content
{
	background: none; color: #CCC;
	font-family: arial, helvetica, san-serif;
	font-size: 1.1em;
	line-height: 1.4em;
	font-weight: normal;
}

/* This sets the style for links within the main content of each page. */
.content a {font-family: arial, helvetica, san-serif; font-size: 92%; font-weight: bold; }
.content a:link {background: none; color: #FFECC9; text-decoration: none; }
.content a:visited {background: none; color: #FFECC9; text-decoration: none; }
.content a:focus {background: none; color: #FC9; text-decoration: underline; }
.content a:hover {background: none; color: #FC9; text-decoration: underline; }
.content a:active {background: none; color: #FC9; text-decoration: underline; }


/* IMAGE CONTAINMENT SYSTEMS within the "#contentholder" */

/* "photoBlock" is a class to hold a series of images across the page. It has been used in a div that contains a table. The images are centered in the cells of a row thereby allowing them to keep their relative positons in a small window and expand with equal spacing in a larger window */
.photoBlock {margin: 1em 3% 1em 3%; width: 92%; }

/* RIGHT or LEFT: Apply the following classes ("photoBlockRight" and "photBlockLeft") to set the margins for divs that hold one or more images either to the right or left side of the page. The margins are set in this style sheet and the placement commands are set in "style2.css". To use the "photoBlockRight" and "photoBlockLeft" effectively the div tag and the <p class="photoLabel" > tag must contain "style="width: XXXunit;"" (do not include the outer set of "") where "XXXunit" is the appropriate width and unit designation. */
.photoBlockRight {margin: 1em 3% 1em 3%; }
.photoBlockLeft {margin: 1em 3% 1em 0%; }

/* These classes ("photoLeft" and "photoright") can be applied to individual photos to provide appropriate margins and placement. The placement commands are in "style2.css". */
.photoLeft {margin: 1em 1em 0 0;  }
.photoRight {margin: 1em 0 0 1em; }


/* The class "photoLabel" is used for the captions of photos in any main page. (EXCEPTION: In auxillary windows that hold only the blow-up of a photo or a movie and it's caption use the content class for the caption.) When placing a caption for a set of photos contained in a table DO NOT PLACE THE CAPTION IN THE TABLE. If the caption is placed in the table it is then forced to be the width of the row of pictures which may be wider that some peoples browser windows. It is very difficult to read something that has to be scrolled horizontally. */
.photoLabel
{
	font-family: arial, helvetica, san-serif;
	padding: 6px;
	background: none; 
	color: #FC9;
	font-size: 1em;
	line-height: 1.6em;
	font-weight: normal;
}
/* The following styles the links found in a caption or "photoLabel" class. */
.photoLabel a {font-size: 92%; }
.photoLabel a:link {background: none; color: #FFECC9; text-decoration: none; font-weight: bold; }
.photoLabel a:visited {background: none; color: #FFECC9; text-decoration: none; font-weight: bold; }
.photoLabel a:focus {background: none; color: #FC9; text-decoration: underline; font-weight: bold;}
.photoLabel a:hover {background: none; color: #FC9; text-decoration: underline; font-weight: bold;}
.photoLabel a:active {background: none; color: #FC9; text-decoration: underline; font-weight: bold; }

/* SPECIAL SETTING for "research/index" page. This may be useful for other similar pages if they develop. The main difference between this style and "content" is that the link isn't bold and there is a width set to match the "research button" image. */
.imageLabel
{
	width: 200px;
	display: block;
	margin-top: .3em;
	color: #CCC;
	font-family: arial, helvetica, san-serif;
	font-size: 1.0em;
	line-height: 1.3em;
	font-weight: normal;
}

.imageLabel a:link {color: #FFECC9; text-decoration: none; }
.imageLabel a:visited {color: #FFECC9; text-decoration: none; }
.imageLabel a:focus {color: #FC9; text-decoration: none; }
.imageLabel a:hover {color: #FC9; text-decoration: none; }
.imageLabel a:active {color: #FC9; text-decoration: none; }



/* SPECIAL SETTING for the "view a larger version of this image" statement found in the caption area of pictures (particularly on pages that are basically a collection of smaller images linking to various image viewing options like the main page of the "Down the Tubes" project). Apply this class to a paragraph following the informational caption. */
.viewimage
{
	font-family: arial, helvetica, san-serif;
	padding: 6px;
	background: none; 
	color: #CCC;
	font-size: .8em;
	line-height: 1.6em;
	font-weight: normal;
}
/* The following styles the links found in a caption or "viewimage" class. */
.viewimage a {font-size: 92%; }
.viewimage a:link {background: none; color: #FFECC9; text-decoration: none; font-weight: bold; }
.viewimage a:visited {background: none; color: #FFECC9; text-decoration: none; font-weight: bold; }
.viewimage a:focus {background: none; color: #FC9; text-decoration: underline; font-weight: bold;}
.viewimage a:hover {background: none; color: #FC9; text-decoration: underline; font-weight: bold;}
.viewimage a:active {background: none; color: #FC9; text-decoration: underline; font-weight: bold; }

.galleryText
{
	clear:left; width:200px; margin: 0; text-align: left;
}

.galleryLabel
{
	font-family: arial, helvetica, san-serif;
	padding: .2em .2em .2em .2em;
	background: none;
	color: #FC9;
	font-size: .9em;
	line-height: 1.3em;
	font-weight: normal;
	margin: .1em 0 .1em 0;
}

.galleryAuthor
{
	font-family: arial, helvetica, san-serif;
	padding: .2em .2em .2em .2em;
	background: none; 
	color: #ccc;
	font-size: .9em;
	line-height: 1.3em;
	font-weight: normal;
	margin: .1em 0 .1em 0;  
}

.galleryLink
{
	font-family: arial, helvetica, san-serif;
	padding: .2em .2em .2em .2em;
	background: none; 
	color: #ccc;
	font-size: .9em;
	line-height: 1.3em;
	font-weight: normal;
	margin: .1em 0 .1em 0;  
}


.galleryLink a {font-size: 85%; }
.galleryLink a:link {background: none; color: #FFECC9; text-decoration: none; font-weight: bold; }
.galleryLink a:visited {background: none; color: #FFECC9; text-decoration: none; font-weight: bold; }
.galleryLink a:focus {background: none; color: #FC9; text-decoration: underline; font-weight: bold;}
.galleryLink a:hover {background: none; color: #FC9; text-decoration: underline; font-weight: bold;}
.galleryLink a:active {background: none; color: #FC9; text-decoration: underline; font-weight: bold; }

/* VISIBLE TABLES used in the "contentholder" div */
/* The "visibleTable" class sets the style for general tables that need to have visible borders */
.visibleTable {border-style: solid; border-width: 1px; border-color: #555; }

/* FOR HORIZONTAL TABLES: Horizontally read data should be displayed in a table with the "visibleTableH" class. This sets thicker horizontal row borders and thinner vertical column borders. I found that this class needed to be applied to each table cell as well as to the table itself. */
.visibleTableH {border-style: solid; border-width: 1px; border-top-width: 2px; border-bottom-width: 2px; border-color: #555; }

/* The following sets the style for table headers in visible tables. */
th {font-family: arial, helvetica, san-serif; font-size: 1em; font-weight: bold; background: none; color: #CCC; margin-bottom: .3em; }


/* VARIOUS MISCELLANEOUS TAG STYLES */

/* superscripts */
sup
{
	font-size: .65em;
	line-height: 1.2em;
}

sub
{
	font-size: .65em;
	line-height: 1.2em;
}

/* linespacing in lists */
li { margin: 0 0 .7em 0; }

/* controlling the small tag */
small {font-size: 85%; }

/* controlling the big tag */
big {font-size: 120%; }
	
/* DOWN AT THE BOTTOM OF THE PAGE */
/*The "auther" class is used if there is an author or authors for an individual page. It is assigned to a paragraph in the "contentholder" div. It will probably be the last thing in the "contentholder". It has a float:right positioning element in "style2.css". */
.author {font-family: arial, helvetica, san-serif; font-size: .7em; background: none; color: #399; line-height: 1.3em; text-decoration: none; }
.author a:link {background: none; color: #B2A48B; text-decoration: none; }
.author a:visited {background: none; color: #B2A48B; text-decoration: none; }
.author a:focus {background: none; color: #FC9; text-decoration: none; }
.author a:hover {background: none; color: #FC9; text-decoration: none; }
.author a:active {background: none; color: #FC9; text-decoration: none; }

/* The "footer" div is outside of the "contentholder" div. It holds a horizontal menu with a bottom border followed by an internal div titled "lastUpdate" and finally the copyright statement. 
*/
/*Both the "footer" div and and it's child "lastUpdate" are served to the page through a BBedit feature called a "PERSISTENT INCLUDE". This means these items are held in a separate file titled "lastUpdate.html" and if the file is altered all files pointed to that particular "Persistant Include" file and that are updated will receive the change. (Update is found under the Markup menu in BBedit.) It is important to be careful with this updating proceedure. DON'T UPDATE THE WHOLE SITE AT ONCE. The "lastUpdate.html" "Persistent Include" is composed of another BBedit feature called a placeholder(specifically #abbrevdate#). When a page is updated it will automatically receive the current date as determined by the computer through this placeholder. */

/* The "footer" div styles. */
#footer
{
	font-family: arial, helvetica, san-serif; font-size: .7em; background: none; color: #399; text-align: center; line-height: 1.3em; text-decoration: none; 
	width: 95%;
	margin-top: 5%;
	margin-left: 32px;
	margin-right: 2%;
}

/* The "foot" class sets the styles for the horizontal menu at the bottom of the page. It is the thing in the "footer" div. It is applied to a paragraph and has a bottom border. */	
.foot {font-family: arial, helvetica, san-serif; background: none; color: #399; text-align: center; line-height: 1.3em; text-decoration: none; 
	padding-bottom: 9px; 
	border-bottom: #005e5a;
	border-width: 0 0 1px 0;
	border-style: none none solid none;
	background: none; color: #FC9;  
}
/* The following "foot" class statements set the style for the linked items within the horizontal bottom menu. */
.foot a:link {background: none; color: #B2A48B; text-decoration: none; }
.foot a:visited {background: none; color: #B2A48B; text-decoration: none; }
.foot a:focus {background: none; color: #FC9; text-decoration: none; }
.foot a:hover {background: none; color: #FC9; text-decoration: none; }
.foot a:active {background: none; color: #FC9; text-decoration: none; }

/* SPECIAL */
/*The windows IE browser can't seem to figure out what to do with the gallery type pages (multiple photo blocks floating left) and page breaks. In an effort to help this browser of little brain I have placed a "pagebreak" class in the line up of photo blocks that is active in the print.css style sheet but not on the screen. */

.pagebreak {display:none;}