/* CSS Document for all pages */
/* left side navigation bar is from www.projectseven.com/tutorials/navigation/swapclassmenu/index.htm */
/* I split the CSS into two documents, to make it easier (I hope) to make site-wide formatting changes;
the document-specific CSS page contains the color information for that folder. For example, atlas.css
contains the color information for all the Component Projects pages. */
/* body settings */

body {
	background-color: #ffffff;
	font-size: 1em;
	padding: 10px;
	margin: 0 0 0 5px;
	color: #000000;
}
/* NOTE regarding ems: Ems can be used in CSS to create typographic systems that enable users to adjust overall type size while retaining the relationships within the system. */
/* FONTS: Verdana (sans serif) and Georgia (serif screen font) were designed to use on computers */

/* notes should be removed before the site is made public! */
.note {color: #0033FF; font-weight: bold; font-family: "Courier New", Courier, mono; background-color: #ffffff;}

/* formatting for theme include pages */
#include	{
	font-family: Arial, Helvetica, sans-serif;
	background-color: transparent;
	padding: 10px 10px;
	min-width: 25em;
	max-width: 65em;
	margin: 0 0 0 5px;
	font-size: 100%;
}

#include h1	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
}

/* this forces a right side scroll bar, so that the page doesn't "jump" when going
from a shorter page (like the glossary) to a longer page */
/*html {min-height: 100%; margin-bottom: 1px; }*/

/* holds the navbar and maincontent columns */
/* using min/max-width in em units allows the page to be liquid within limits; using the fixed width
in pixels allows the page to be centered */
.container {
	position: relative;
	/*width: 700px;*/
	/*min-width: 40em;
	max-width: 3000em;*/
	/*margin-left: auto;
	margin-right: auto;*/
	margin: 5px;
	background-color: transparent;
	color: #000000;
}

.container img	{border: none;}

.maincontent a	{background-color: transparent; text-decoration: underline;}
.maincontent a:visited	{font-weight: normal; background-color: transparent; text-decoration: none;}
.maincontent a:hover	{font-style: italic; background-color: transparent; text-decoration: none;}

a:link.cite, a:visited.cite, a:hover.cite	{color: #cc9933; background-color: transparent;}
a:link.maps, a:visited.maps, a:hover.maps	{color: #003366; background-color: transparent;}
a:link.atlas, a:visited.atlas, a:hover.atlas	{color: #006633; background-color: transparent;}
a:link.photos,  a:visited.photos, a:hover.photos 	{color: #993333; background-color: transparent;}
a:link.glossary, a:visited.glossary, a:hover.glossary	{color: #660099; background-color: transparent;}
a:link.offsite, a:visited.offsite, a:hover.offsite	{color: #0033ff; background-color: transparent;}
a:link.about, a:visited.about, a:hover.about	{color: #cc6600; background-color: transparent;}
a:link.support, a:visited.support, a:hover.support	{color: #666600; background-color: transparent;}
a:link.home, a:visited.home, a:hover.home	{color: #666666; background-color: transparent;}
/* this hides the glossary links */
a:link.black, a:visited.black, a:hover.black	{color: #000; background-color: transparent; text-decoration: none; font-style: normal;}

/* for ordered lists within the page (not the navigation links on left side)*/
.ol2, .ol3, .ol4, .ol5, .ol6	{
	float: none;
	position: relative;
	width: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 1.10em;
	background-color: transparent;
	color: #000000;
	margin-bottom: 0em;
}

.ol2 li, .ol3 li, .ol4 li, .ol5 li, .ol6 li	{line-height: 1.10em; margin-bottom: 0em}

/* level 2, A. */
.ol2	{list-style-type: upper-alpha;}
/* level 3, 1. */
.ol3	{list-style-type: decimal;}
/* level 4, i. */
.ol4	{list-style-type: lower-alpha;}
/* level 5, a. */
.ol5	{list-style-type: lower-roman;}
/* level 6, 01. The leading zero doesn't show up in Safari or IE */
.ol6	{list-style-type: decimal-leading-zero;}

.olplain	{list-style-type: none; line-height: 1.10em; margin-bottom: 0em; font-family: Arial, Helvetica, sans-serif}

.ul2 li, .ul3 li, .ul4 li, .ul5 li, .ul6 li	{line-height: 1.10em; margin-bottom: 5px;}
.ul2, .ul3, .ul4, .ul5, .ul6	{
	float: none;
	position: relative;
	/*width: 400px;*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 1.10em;
	background-color: transparent;
	color: #000000;
	margin-bottom: 10px;
	width: auto
}

/* level 2, A. */
.ul2	{list-style-type: upper-alpha;}
/* level 3, 1. */
.ul3	{list-style-type: decimal; left: .2em;}
/* level 4, i. */
.ul4	{list-style-type: lower-alpha;}
/* level 5, a. */
.ul5	{list-style-type: lower-roman;}
/* level 6, 01. The leading zero doesn't show up in Safari or IE */
.ul6	{list-style-type: decimal-leading-zero;}

.maincontent {
	background-color: transparent;
	color: #000000;
	padding: 10px 10px;
	min-width: 25em;
	max-width: 1500em;
	margin: 0 0 0 160px;
	font-size: 80%;
	border-left: 2px dotted #333333;
}

.maincontent ul	{
	background-color: transparent;
	color: #000000;
	padding: 0em;
	margin: 0 0 0em 3em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: inherit;
}
.maincontent ul li, ul li ul li	{margin-bottom: 0em}

.maincontent p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-style: normal;
	line-height: 1.10em;
	margin: 0 0 1em 1.5em;
	background-color: transparent;
	color: #000000;
	margin-bottom: 0.7em
}

 ol	{list-style-type: none}

/* AGA logo in upper lefthand corner */
#logo {
	position: absolute;
	top: 10px;
	left: 21px;
	margin: 1px 1px 1px 1px;
}

/* image on folder's home page; on the first page of a folder, it's an image, on subsequent pages, it's just the title of the folder */
#topimage {
	position: relative;
	padding: 0 0 5px 0;
}
/* use h1 for page title only; remember that headings denote hierarchy */
h1, h2, h3, h4, h5, h6 {
	background-color: transparent;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	position: relative;
	margin-bottom: 0.1em
}

/* heading font sizes */
h2	{font-size: 165%;}
h3	{font-size: 145%;}
h4	{font-size: 125%;}
h5	{font-size: 110%;}
h6	{font-size: 110%; font-style: italic;}	

/* footer: www.arcticatlas.org/structuralunits/footer.inc */
.footer {
	background-color: transparent;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 85%;
	position: relative;
	text-align: center;
	padding: 0em;
	margin: 0em;
	z-index: 0;
}

.footer p	{margin-bottom: 0em}

/* use .glossary to make words in the glossary stand out */
/* use .cite to make citations/references stand out */
.glossary, .cite, .offsite, .atlas, .maps, .photos, .about, .support	{
	background-color: transparent;
	text-decoration: none;
}

/* to identify each folder by it's color */
.atlas	{color: #006633;}
.maps	{color: #003366;}
.photos	{color: #993333;}
.cite	{color: #cc9933;}
.biblio	{color: #cc9933;}
.glossary	{color: #660099;}
.offsite	{color: #0033FF;}
.about	{color: #cc6600;}
.support	{color: #666600;}

/* this clears the "float: right" for images */
.pright	{
	clear: both;
	display: inline;
}

/* for text underneath a 150 pixel-wide image on the right side of the page */
.ptextright150	{
	float: right;
	margin: -10px 20px 20px 20px;
	clear: right;
	width: 150px;
	display: inline;
}

/* for text underneath a 200 pixel-wide image on the right side of the page */
.ptextright200	{
	float: right;
	margin: -10px 20px 20px 20px;
	clear: right;
	width: 200px;
	display: inline;
}

/* for text underneath a 300 pixel-wide image on the right side of the page */
.ptextright300	{
	float: right;
	margin: -10px 20px 20px 20px;
	clear: right;
	width: 300px;
	display: inline;
}

/* for text underneath a 400 pixel-wide image on the right side of the page */
.ptextright400	{
	float: right;
	margin: -10px 20px 20px 20px;
	clear: right;
	width: 400px;
	display: inline;
}

/* to position images on the right side of the page */
.photo4d	{
	float: right;
	margin: 0 20px 20px 20px;
	clear: right;
	/*display: inline;*/
	width: auto
}

/* Container for the Menu */
.p7swapmenu {
	background-color: transparent;
	color: #000000;
	padding: 3px;
	position: absolute;
	top: 120px;
	width: 150px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	text-indent: -.5em;
	}
	
.p7swapmenu	#currentpage a, a#current, a#subcurrent {font-weight: bold; background-color: #CCCCCC;}
	
/* Turns off Margin, Padding, and Bullets for the Menu List */
.p7swapmenu ul {margin: 0px; padding: 0px;}
.p7swapmenu li {margin: 0px; padding: 0px; list-style-type: none;}

/* controls padding around the li lines */
.p7swapmenu li li, #p7swapmenu li li li {margin: 1px 1px 1px 20px;}

/* background-position controls where the triangle is; 1st number is left/right (where 0%=left and 100%=right), 2nd number is up/down (where 0%=top and 100%=bottom)*/
/* padding-left controls the distance between the triangle and the text */
.p7swapmenu a {
	background-repeat: no-repeat;
	background-position:  0% 20%;
	padding: 2px 0px 2px 20px;
	text-decoration: none;
	background-color: transparent;
	display: block;
	font-size: 80%;
}

/* closed = down.jpg, triangle point is at top /*
/* open = up.jpg, triangle point is at bottom */
.closed a:hover, .closed a:active  {
	color: #000000;
	 background-color: transparent;
}

.open a  {
	font-size: 100%;
	 background-color: transparent;
}

/* Link Styles for the Submenus */
/* background-position controls where the circle and the diamond are; 1st number is left/right (where 0%=left and 100%=right), 2nd number is up/down (where 0%=top and 100%=bottom)*/
/* padding (last attribute, 15px) controls the distance between the circle or diamond and the text, but the rest of the padding (t, r, b) needs to be set to 0 so that there is no padding on the top, right, or bottom of each li */
.closed ul a, .open ul a, .open ul a:hover {
	background-repeat: no-repeat;
	background-position: 0% 20%;
	background-color: transparent;
	font-size: 80%;
	font-style: italic;
	padding: 0 0 0 15px;
} 

/* background colors (tr.dark and .tr.light) for the table are in the folder css file, so that tables in the maps folder will be two shades of blue, tables in the atlas (Component Projects) folder will be two shades of green, etc. */
.catalog caption	{
	margin-left: 30px;
	/*width: 600px;*/
	text-align: center;
	}

catalog table	{width: 70%; margin-left: 0}	
.catalog tr, .catalog th, .catalog td, .catalog caption {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	vertical-align: top;
}
.catalog td {border-left: thin; border-left-color: #000000}
.catalog ol {font-family: Arial, Helvetica, sans-serif; list-style: none}
.catalog ol ol	{float: left; width: auto}
.catalog ol	{float: none; width: auto}
.catalog  hr	{
	width: 100%;
	margin: 0;
	clear: left;
	}

.catalog h2 {left: 2em}
th.one	{
	font-size: 115%;
	padding: 3px;
}

th.two	{
	font-size: 105%;
	padding: 3px;
}

.google p	{font-size: 110%; font-style: italic; margin: 0em 0em .5em 11em}
.google img	{margin: 0em}
.google	{background-color: transparent; color: #000;}
#glogo	{margin: -2em 0 0 1.5em}
#map_canvas	{
	width: 46em;
	height: 46em;
	margin-left: 1em;
	margin-bottom: 0em;
	position: relative;
}

.mapImg	{margin-left: 48em; position: absolute; float: right; width: auto}
.mapImg h1	{color: #036; margin: 0em; padding: 0em}
.mapImg h2	{color: #036; margin: .3em 0em 0em .5em; padding: 0em}

/* left hand navigation */
.links	{
	font-size: 80%;
	width: 12em;
	position: absolute;
	top: 12em;
	font-family: Arial, Helvetica, sans-serif;
	background-color: transparent
}

/* alternate menu style */
.links a	{display: block;}
.links ul	{margin: 0em; padding-top: 0em; padding-left: .7em; list-style-type: none}
.links ul ul	{padding-left: .5em;}
.links ul ul ul	{padding-left: .5em;}
.links a:active	{text-decoration: underline;}
.links a:hover {text-decoration: none; font-style: italic;}
.links a:visited {text-decoration: none; font-style: italic;}
.links hr	{padding: 0em; margin: 0em}
.links p	{margin: .2em 0em 0em .2em; border-bottom-style: dotted; border-color: #000; border-width: thin}
.links	#currentpage a, a#current, a#subcurrent {font-weight: bold; background-color: #CCCCCC;}


/* GoogleMap links */
/* left hand navigation */
.googleLinks	{
	font-size: 80%;
	width: 12em;
	position: absolute;
	top: 10em;
	font-family: Arial, Helvetica, sans-serif;
	background-color: transparent
}

/* on index2 & index3 */
.googleLinks a	{display: block;}
.googleLinks ul	{padding-left: .7em; list-style-type: none}
.googleLinks ul li	{padding-bottom: .5em; border-bottom: dotted #036 thin}
.googleLinks ul li ul li	{padding-bottom: 0em; border-bottom: none}
.googleLinks ul ul	{padding-left: 1em;}
.googleLinks ul ul ul	{padding-left: 1em;}
.googleLinks a:active	{text-decoration: underline;}
.googleLinks a:hover {text-decoration: none; font-style: italic;}
.googleLinks a:visited {text-decoration: none; font-style: italic;}
.googleLinks p	{color: #036; font-weight: bold; margin-left: .2em; margin-bottom: .3em; margin-top: .5em;}
.googleLinks	#currentpage a, a#current, a#subcurrent {font-weight: bold; background-color: #CCCCCC;}
.googleLinks hr	{border: dotted #063 thin; height: .1em; padding: 0em;}

.mapIcon	{padding-right: .5em;}

/* on index4 */
.googleLinks2 a:active	{text-decoration: underline;}
.googleLinks2 a:hover {text-decoration: none; font-style: italic;}
.googleLinks2 a:visited {text-decoration: none; font-style: italic;}
.googleLinks2 p	{}
.googleLinks2	#currentpage a, a#current, a#subcurrent {font-weight: bold; background-color: #CCCCCC;}
.googleLinks2 p	{color: #036; font-weight: bold}

#breadcrumb	{font-size: 70%}
#breadcrumb a	{text-decoration: underline}