@charset "UTF-8";
/* BATES COLLEGE SERVER
DRAFTED TO ADD SPECIAL STYLE FEATURES TO THE EVENTS/EXCURSIONS PAGE TO ACCOMODATE REIJO OKSANEN'S PHOTO

Abbreviations Used in The Notes:
	SSI: server-side-includes document

TO DO LIST:
finish developing an independent, separate CSS sheet for the footpaths section.  currently it draws from this stylesheet.

PAGE-WIDTH SETTINGS:
	Container Width:  953px
	Logo Header 148 px + Image Header 805 px = 953 px
	NavBar: 953 (9x105 = 945 + 8x1px rt mgs = 953 px
	Content 754 px + Sidebar 133 px = 887 px (sidebar floats rt)
		(leaves open space between of 66 px)
	Footer:
		Address (315 px) + AltNav unspecified width (can be up to 638)
	

ORGANIZATION OF DIVS:
PAGE-CONTAINER
	sets parameters for the web pages
HEADERS
	LOGO-HEADER (the FoMA logo and section title below it, on the left) 
			and 
	IMAGE-HEADER-[section-name] (right, image background with title)
		every section has its own image, specified in this image-header division
		examples: "image-header-home", "image-header-footpaths", etc.
			and
	IMAGE-HEADER-TEXT a subdivision of the above image header, 
		for header text (text is the same for all sections). 
NAVBAR
	navigtion tabs on all website pages: white labels (gray for current page)
	on a slightly variegated garnet background
	On 2nd level pages, there is no grey label; label for curent section goes to index page.
INFOBAR
	Identifies the subject of the page on a light gray background
CONTENT
	for main page content (left side of web page)
SIDEBAR 
	for special notices & links (right side of web page)
FOOTER
	contains 4 includes docs, first three have their own divs by same name; URL is pre-formatted text:
		ADDRESS contact and web-site maintenance infvormation
		ALTNAV (set of simple links duplicating links in Navbar
		SEALS (for W3C & other seals (floats right)
		URL (pre-formatted display of the current page's URL)

(Separate divs for Footpath Descriptions listed below)
*/



/*------------------------------------------------------------------------
/*ORGANIZATION OF DIVS & CLASSES FOR FOOTPATH DESCR PAGES

Footpath Descriptions Plan: Navbar link will go to external website.
Organization of Divs in current website for Footpath Descriptions:
Asterisked items in this list are special divs for Footpaths section;
otherwise, the divs in this list are universal for entire FoMA website.

PAGE-CONTAINER
	sets parameters for the web pages
HEADERS
	LOGO-HEADER (the FoMA logo and section title below it, on the left) 
			and 
	*IMAGE-HEADER-FOOTPATHS (right, image background with title)
		every section has its own header backgroundimage, and thus 
		its own image-header-[section-name] division which specifies
		that division's particular header (background) image
		examples: "image-header-home", "image-header-footpaths", etc.
			and
	IMAGE-HEADER-TEXT a subdivision of the above image header, 
		for header text (text is the same for upper-level pages in all sections). 
NAVBAR
	navigtion tabs on all website pages: white labels (gray for current page)
	on a slightly variegated garnet background
	On 2nd level pages, there is no grey label; label for curent section goes to 
	the index page for that section.
INFOBAR
	This div appears on the master doc for the footpath descr, but the SSI doc included in it
	uses the following div...
*FOOTPATHINFOBAR
	Used for the SSI doc which holds the content of the Footpaths Infobar.
	Is needed because of special formatting needs for the Footpaths infobar
	which includes a header (footpath name  plus time & distance info) + prose footpath descr.
CONTENT
	for main page content (left side of web page)
	In footpaths: a container for SSI docs that comprise the whole content
SIDEBAR 
	for special notices & links (right side of web page)
	In footpaths: a container for SSI doc which gives links to related footpath docs
*FOOTPATHPOSTSCRIPT
	Special to Footpaths: located between content/sidebar & footer
	Contains footpath project credits & disclaimers
FOOTER
	contains 3 sub-divisions, all of them for universal use:
		ADDRESS contact and web-site maintenance information
		ALT-NAVBAR (set of simple links duplicating links in Navbar
		SEALS (for W3C & other seals (floats right)
*/

/*------------------------------------------------------------------------
BEGINNING OF NEW & EXPERIMENTAL STUFF
This stuff is moved down to an appropriate permanent place
if it works.
NOW TESTING HOW TO DO CHANGEABLE BACKGROUND IMAGES IN DIFF WEB PAGES
*/

/* BEGINNING OF RESET*/



/*END OF RESET*/

#home-image
{
    background-image: url('HTTP://www.athosfriends.org/images/domeandpeakhdr804px.jpg');
}


.tableheader
	{
	padding-left: 27px;
	padding-top: 15px;
	padding-bottom: 0;
	font-weight: bold;
	text-align:left
	}
	
	
/*END of NEW & EXPERIMENTAL STUFF*/


/*------------------------------------------------------------------------
BEGINNING OF MAIN DIVISIONS*/

#page-container {
	width: 953px;
	margin: 3px;
	}


html, body {
	/*This rule is needed because the html and body tags have default margins and/or padding on nearly all browsers.
	the comma between the 2 CSS selectors means "and/or" so it will apply to both if both occur on the html page.*/
	margin: 0;
	padding: 0;
	}
	
body {
    font-family: Arial, Helvetica, Verdana, Sans-serif;
    font-size: 12px;
    color: #333333;
	background-image: url("images/parchmnt.jpg");
	/*ELIMINATED: 
	background: #ffffff;*/
}

/*------------------------------------------------------------------------
BEGINNING OF UNIVERSAL CLASSES*/

/*The class, hidden, enables any element to be set
to have the class, hidden, and it won't show on the page.
for use during development of web pages & stylesheet*/
.hidden 
	{
    display: none;
	}


.BU {/*bold, underlined. universal class.
	Originally developed for use in FOOTPATHS division: used in 
		(1) subheadings in footpath descriptions, 
		(2) "Notes" and "Abbreviations" in Prelims SSI doc.*/
	text-decoration: underline;  
	font-weight: bold;
	}

.padding 
	{
	padding: 7px;
	padding-right: 15px;
	padding-left: 15px;
	}

.picture
	{
/*
	background-color: transparent #F9F9F9;
	border: 1px solid #CCCCCC; 
	*/
	padding: 3px;
	font: 11px/1.4em Arial, sans-serif;
	}

.picture img 
	{
	border: 1px solid #CCCCCC;
	vertical-align:middle; margin-bottom: 3px; 
	} 

.right 
	{ 
	margin: 0.5em 0pt 0.5em 0.8em; float:right; 
	} 

.left {
	margin: 0.5em 0.8em 0.5em 0; float:left;
	}

/*
Blockindent Class is intended for use with the <P> tag to format
block-indented text. 
blockindent_sidebar uses a reduced indention because sidebar is narrow.
It is also used to indent approximate time notes in path descriptions.
*/
.blockindent
	{
	position: relative; left: 25px;
	}

.blockindent_sidebar
	{
	position: relative; left: 15px;
	}

/*END OF UNIVERSAL CLASSES

------------------------------------------------------------------------

BEGINNING OF LOGO HEADER*/

/*
THE HEADER FOR TOP-LEVEL & 2nd-LEVEL PAGES IN EACH SECTION OF 
THE WEBSITE IS IN TWO PARTS:
THE LOGO HEADER (left) AND THE IMAGE HEADER (right)
*/


#logo-header {
	float: left; 
	height: 215px;
	width: 148px;
	margin: 0;
	padding: 0;
	background-color:rgb(204,204,204);
	font-weight: bold;
	}

#logo-header a {
	/*
	For pages where this logo is a link to the FoMA home page
	(i.e., all pages except the FoMA home page)
	*/
	margin: 0;
	padding: 0;
	border: 0;
	padding-top: 25px;
	}

#logo-header h1  {
	margin: 0;
	padding: 0;
	border: 0;
	padding-top: 25px;
	}

#logo-header p  {
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
	color: #660000;
	}
	
/*
END OF LOGO HEADER

------------------------------------------------------------------------

BEGINNING OF IMAGE HEADER
Nested divisions for image header:
(1) #Image-header-[pagename] (different for each section of the website) is to enable different background images.
(2) #image-header-text (the same for all pages) is a sub-division container for text components of the image header.
(3) Text formatting & spacing are defined in tags <h1>, <h2>, <h3>, <h4> used within #image-header.
(4) Text color is set in the above tags, but when the image header background image is dark, 
    the text color is over-rideden by style attributes added to the <h1> - <h4> tags in the index.html doc.
*/

/*---------------------------------------------------
BEGINNING OF IMAGE HEADER FOR HOME PAGE*/
#image-header-home 
	{ /*Contains image header attributes. This division contains (1)
	the header image for FoMA Home Page as a background image, and (2) SSI doc for header text.*/
	float: right;
	height: 215px;
	width: 805px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	background-color: blue;
	background: url('images/domeandpeakhdr808px.jpg'); 
	background-repeat: no-repeat;
	}


/*Following is for the image-header text; THIS IS FOR UNIVERSAL USE:
*/
#image-header-texthome {
	height: 215px;
	width: 805px;
	margin: 0;
	padding: 0;
	}


#image-header-texthome h1  {
/*header text for line 1: the words, "The Friends of Mount Athos"*/
	margin: 0;
	padding-top: 15px; 
	text-align: center;
	font-family: "Times New Roman", Times, serif;
	font-size: 25px;
	color: #666699;
	}

#image-header-texthome h2  {
/*header text for line 2: the word, "President:"*/
	margin-left: 0;
	padding-top: 45px;
	padding-bottom: 0;
	padding-left: 145px; 
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 20px;
	color: #666699;
	line-height: 0;
	}

#image-header-texthome h3  {
/*header test for line 3: the name, "Metropolitan Kallistos of Diokleia "*/
	margin-left: 0;
	padding-top: 0px;
	padding-left: 145px; 
	line-height: 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 20px;
	color: #666699;
	}

#image-header-texthome h4  {
/*header test for copyright declaration "*/
	margin-left: 0;
	padding-top: 50px;
	padding-left: 100px; 
	line-height: 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	color: #333366;
	}

/* END OF IMAGE HEADER FOR FOMA HOME PAGE */


/*--------------------------------------------
BEGINNING OF IMAGE HEADER FOR CHRISTMAS CARDS PAGE*/

#image-header-christmascards 
	{ /*Contains image header attributes. This division contains (1)
	the header image for FoMA Home Page as a background image, and (2) SSI doc for header text.*/
	float: right;
	height: 215px;
	width: 805px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	background-color: blue;
	background: url('images/card3hdr808px.jpg'); 
	background-repeat: no-repeat;
	vertical-align:baseline;
	}

/*Following is for the image-header text; is for Christmas Cards pages:*/

#image-header-christmascards {
	height: 215px;
	width: 805px;
	margin: 0;
	padding: 0;
	}


#image-header-christmascards h1  {
/*header text for line 1: the words, "The Friends of Mount Athos"*/
	margin: 0;
	padding-top: 15px; 
	text-align: center;
	font-family: "Times New Roman", Times, serif;
	font-size: 25px;
	color: #666699;
	}

#image-header-christmascards h2  {
/*header text for line 2: the word, "President:"*/
	margin-left: 0;
	padding-top: 35px;  /*reduced by 10 from orig 45px*/
	padding-bottom: 0;
	padding-left: 145px; 
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 20px;
	color: #666699;
	line-height: 0;
	}

#image-header-christmascards h3  {
/*header test for line 3: the name, "Metropolitan Kallistos of Diokleia "*/
	margin-left: 0;
	padding-top: 0px;
	padding-left: 145px; 
	line-height: 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 20px;
	color: #666699;
	}

#image-header-christmascards h4  {
/*header test for copyright declaration "*/
	margin-left: 0;
	padding-top: 65px;  /*increased by 15 from 50 to compensate for padding reduction in h2*/
	padding-left: 100px; 
	line-height: 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	color: #CC0099 ;/*tried also:violet, blue; #AA0000*/
	}

/* END OF CHRISTMAS CARDS HEADER */



/*-----------------------------------------------------------------------
BEGINNING OF IMAGE HEADER FOR EVENTS/EXCURSIONS SECTION with IMAGE OF METROPOLITAN KALLISTOS IN GEORGIA
In the Events/excursions pages, the image header colors require mix of colors in the text.
*/

#image-header-EXCURSIONS
	{ /*Contains image header attributes. This division contains (1)
	the header image for FoMA Events/Excursions Page as a background image, and (2) SSI doc for header text.*/
	float: right;
	height: 215px;
	width: 805px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-family: "Times New Roman", Times, serif;
	background-color: blue;
	background: url('/images/KallistosInGeorgia.jpg'); 
	background-repeat: no-repeat;
	}


#image-header-text-excursionscolor {
	height: 215px;
	width: 805px;
	margin: 0;
	padding: 0;
	}


#image-header-text-excursionscolor h1  {
/*header text for line 1: the words, "The Friends of Mount Athos"*/
	margin: 0;
	padding-top: 15px; 
	text-align: center;
	font-family: "Times New Roman", Times, serif;
	font-size: 25px;
	color: #660000;

	}

#image-header-text-excursionscolor h2  {
/*header text for line 2: the word, "President:"*/
	margin-left: 0;
	padding-top: 45px;
	padding-bottom: 0;
	padding-left: 90px; /*was 145*/
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 20px;
	color: #660000;
	line-height: 0;
	}

#image-header-text-excursionscolor h3  {
/*header test for line 3: the name, "Metropolitan Kallistos of Diokleia "*/
	margin-left: 0;
	padding-top: 0px;
	padding-left: 90px;  /*was 145*/
	line-height: 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 20px;
	color: #660000;
	}

#image-header-text-excursionscolor h4  {
/*header test for copyright declaration " */
	margin-left: 0;
	padding-top: 50px;
	padding-left: 90px;  /*was 100*/
	line-height: 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	color: #FFFFFF;
	}

/*End of header text specs for Events/Excursions
-----------------------------------------------------------------------*/



/*-----------------------------------------------------------------------
BEGINNING OF IMAGE HEADER FOR PILGRIM'S GUIDE SECTION with PROSKYNETARION IMAGE
*/

#image-header-PG 
	{ /*Contains image header attributes. This division contains (1)
	the header image for FoMA Home Page as a background image, and (2) SSI doc for header text.*/
	float: right;
	height: 215px;
	width: 805px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-family: "Times New Roman", Times, serif;
	background-color: blue;
	background: url('/images/pilgrimshdr-808x300.jpg'); 
	background-repeat: no-repeat;
	}



/*-----------------------------------------------------------------------
BEGINNING OF IMAGE HEADER FOR ABOUT SECTION with IMAGE OF MOUNT ATHOS
*/

#image-header-about 
	{ /*Contains image header attributes. This division contains (1)
	the header image for FoMA Home Page as a background image, and (2) SSI doc for header text.*/
	float: right;
	height: 215px;
	width: 805px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-family: "Times New Roman", Times, serif;
	background-color: blue;
	background: url('/images/abouthdr-808x223.jpg'); 
	background-repeat: no-repeat;
	}

/*
colors tried;
light green #557074;
pastel chartreuse 666700. = very good, needs a litle more contrast with the image. 
green #669933
home p. color #666699; a little too bright.
changed to 667700, which remained through 2012. 
Jan 2013 W3: not a legit color; changed to 999333 in H1 and CC3# in others.
*/

#image-header-about h1  {
/*header text for line 1: the words, "The Friends of Mount Athos"*/
	margin: 0;
	padding-top: 15px; 
	text-align: center;
	font-family: "Times New Roman", Times, serif;
	font-size: 25px;
	color: #999933;
	}
/* color was 666700 but W3C showed up as error ==> 999933 similar*/

#image-header-about h2  {
/*header text for line 2: the word, "President:"*/
	margin-left: 0;
	padding-top: 45px;
	padding-bottom: 0;
	padding-left: 145px; 
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 20px;
	color: #CC3;
	line-height: 0;
	}


#image-header-about h3  {
/*header test for line 3: the name, "Metropolitan Kallistos of Diokleia "*/
	margin-left: 0;
	padding-top: 0px;
	padding-left: 145px;
	line-height: 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 20px;
	color: #CC3;
	}

#image-header-about h4  {
/*header test for copyright declaration " */
	margin-left: 0;
	padding-top: 50px;
	padding-left: 90px;  /*was 100*/
	line-height: 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	color: #CC3;
	}



/*-----------------------------------------------------------------------
BEGINNING OF IMAGE HEADER FOR MEMBERSHIP SECTION with image OF METROPOLITAN KALLISTOS IN GEORGIA
*/

#image-header-membership
	{ /*Contains image header attributes. This division contains (1)
	the header image for FoMA Events/Excursions Page as a background image, and (2) SSI doc for header text.*/
	float: right;
	height: 215px;
	width: 805px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-family: "Times New Roman", Times, serif;
	background-color: blue;
	background: url('/images/membershiphdr-808x230.jpg'); 
	background-repeat: no-repeat;
	}


/* OTHER TEXT COLORS FOR HEADER IMAGE DIVISIONS */


/*image-header-textwhite divisions are for image headers with dark colors
that require white text, as in the Footpaths image header.
BUT -- note that the Footpaths section has its own styles, above.
*/
#image-header-textwhite {
	height: 215px;
	width: 805px;
	margin: 0;
	padding: 0;
	}


#image-header-textwhite h1  {
/*header text for line 1: the words, "The Friends of Mount Athos"*/
	margin: 0;
	padding-top: 15px; 
	text-align: center;
	font-family: "Times New Roman", Times, serif;
	font-size: 25px;
	color: #FFFFFF;
	}

#image-header-textwhite h2  {
/*header text for line 2: the word, "President:"*/
	margin-left: 0;
	padding-top: 45px;
	padding-bottom: 0;
	padding-left: 145px; 
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 20px;
	color: white;
	line-height: 0;
	}

#image-header-textwhite h3  {
/*header test for line 3: the name, "Metropolitan Kallistos of Diokleia "*/
	margin-left: 0;
	padding-top: 0px;
	padding-left: 145px; 
	line-height: 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 20px;
	color: #FFFFFF;
	}

#image-header-textwhite h4  {
/*header test for copyright declaration "*/
	margin-left: 0;
	padding-top: 50px;
	padding-left: 100px; 
	line-height: 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	color: #FFFFFF;
	}


/*image-header-text-newcolor divisions are for image headers with dark colors that require a different color text.
*/
#image-header-text-newcolor {
	height: 215px;
	width: 805px;
	margin: 0;
	padding: 0;
	}
/*
Colors tried include:
	med blue: 00B0FA, #990033 (sidebar); BC1E28 (too orangy), #96171A (brownish, like sidebar)
	RGB sliders: 352, 100, 67 = #96171A
	RGB sliders 161,0,0 = A20000 ==> still too orangy
	CMYK sliders 25,92,64,0 = 9A273D
	from internet-safe colors: #CC3333 ==> too orangy
	from internet safe colors: #990000 ==> like sidebar
	from internet safe colors: #660000 ==> good. deeper than navbar but ok.
	
*/

#image-header-text-newcolor h1  {
/*header text for line 1: the words, "The Friends of Mount Athos"*/
	margin: 0;
	padding-top: 15px; 
	text-align: center;
	font-family: "Times New Roman", Times, serif;
	font-size: 25px;
	color: #660000;

	}

#image-header-text-newcolor h2  {
/*header text for line 2: the word, "President:"*/
	margin-left: 0;
	padding-top: 45px;
	padding-bottom: 0;
	padding-left: 145px; 
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 20px;
	color: #660000;
	line-height: 0;
	}

#image-header-text-newcolor h3  {
/*header test for line 3: the name, "Metropolitan Kallistos of Diokleia "*/
	margin-left: 0;
	padding-top: 0px;
	padding-left: 145px; 
	line-height: 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 20px;
	color: #660000;
	}

#image-header-text-newcolor h4  {
/*header test for copyright declaration "*/
	margin-left: 0;
	padding-top: 50px;
	padding-left: 100px; 
	line-height: 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	color: #660000;
	}


/*------------------------------------------------------------------------
END OF HEADERS
*/



/*------------------------------------------------------------------------
BEGINNING OF NAVBAR

text color set for the Navbar division is a medium gray: rgb(204,204,204);
Navbar tabs have links set to white in the anchor class, 
so the tab for current page, since it is not a link, 
reverts to the grey color.
*/

#navbar {
	clear: both;
	margin-bottom: 0px;
	width: 953px;
	height: 15px;
	color:rgb(204,204,204);
	}
/*Hardware store template did this with ul and li tags*/

#navbar a { 
	color: white;
	text-decoration: none;
}

#navbar a:hover {
	color: #e1e1e1;
}

#navbar dl {
	margin: 0px auto;
	list-style-type: none;
	overflow: hidden;
	}

#navbar dt {
	margin-right: 1px;
	width: 105px;
	height: 15px;
	float: left;	
/*[float left is needed for background image to work correctly otherwise, they stack up vertically]*/
	background: url('images/navbar_background.gif') repeat-x 0px 0px;
	overflow: hidden;
	text-align: center; /*aligns the text horizontally in the tabs*/
	font-size: 11px;
	font-weight: bold;
	line-height: 15px; /*aligns the text vertically in the tabs*/
	}

#navbar dt.last {
/*	eliminated the margin-right: 1px;*/
	margin-right: 0;
}


/*END OF NAVBAR

/*------------------------------------------------------------------------



/*------------------------------------------------------------------------
BEGINNING OF NAVBARGR

Different widths needed for Greek tab titles
text color set for the Navbar division is a medium gray: rgb(204,204,204);
Navbar tabs have links set to white in the anchor class, 
so the tab for current page, since it is not a link, 
reverts to the grey color.
*/

#navbarGR {
	clear: both;
	margin-bottom: 0px;
	width: 953px;
	height: 15px;
	color:rgb(204,204,204);
	}
/*Hardware store template did this with ul and li tags*/

#navbarGR a { 
	color: white;
	text-decoration: none;
}

#navbarGR a:hover {
	color: #e1e1e1;
}

#navbarGR dl {
	margin: 0px auto;
	list-style-type: none;
	overflow: hidden;
	}

#navbarGR dt {
	margin-right: 1px;
	width: 105px;
	height: 15px;
	float: left;	
/*[float left is needed for background image to work correctly otherwise, they stack up vertically]*/
	background: url('images/navbar_background.gif') repeat-x 0px 0px;
	overflow: hidden;
	text-align: center; /*aligns the text horizontally in the tabs*/
	font-size: 10px; /*reduced from 11px (used in English pages) to accommodate longer Greek tab titles*/
	font-weight: bold;
	line-height: 15px; /*aligns the text vertically in the tabs*/
	}

#navbarGR dt.last {
/*	eliminated the margin-right: 1px;*/
	margin-right: 0;
}


/*END OF NAVBARGR

/*------------------------------------------------------------------------


BEGINNING OF NAVBAR-PilgrimsGuide
This is for the small navbar for navigating within the Pilgrims Guide section that appears within the infobar.
*/

#navbar-PilgrimsGuide {
	clear: both;
		/*margin: 0 auto;
		margin auto is supposed to center the navbar, but it didnt work here.*/
	width: 953px;
	height: 10px; /*governs vertical (gray) space below the navbar line within the infobar. orig: 5px*/
	color: #333333;
	padding-bottom: 7px;
	}

#navbar-PilgrimsGuide a { 
	color: black;
}

#navbar-PilgrimsGuide a:hover {
	color: blue;
}

#navbar-PilgrimsGuide dl {
	margin: 0px auto;
	padding-left: 120px;
				/*padding-right: 130px;*/
	list-style-type: none;
	overflow: hidden;
	}

#navbar-PilgrimsGuide dt {
	padding-left: 15px;
	padding-right: 17px;
/*		height: 15px;
*/

	float: left;	
/*	[float left is needed for background image to work correctly otherwise, the links stack up vertically]
*/

	overflow: hidden;
	text-align: center; /*aligns the text horizontally in the tabs*/
	font-size: 11px;
	line-height: 15px; /*aligns the text vertically in the tabs*/
	}


/*END OF NAVBAR-PilgrimsGuide
------------------------------------------------------------------------




------------------------------------------------------------------------
BEGINNING OF INFOBAR
*/

/*Infobar has no height in order to expand as needed for changing content*/
#infobar 
	{
	background-color:rgb(204,204,204);
	vertical-align: top; 
	color: #660000;
	padding-bottom: 7px;
	padding-top: 1px;
	font-family: "Times New Roman", Times, serif;
	}



#infobar p
	{
    font-size: 14px;
	text-align: justify;
	padding-left: 15px; 
	padding-right: 15px;
	}
	

	
#infobar h2 
	{
/*	the title of the current page
*/
	font-size:18px;
	line-height: 110%;
	text-align: center;
	margin-bottom: 5px;
	}


#infobar h3 
	{
/*	the sub-title of the current page
*/
	font-size:14px;
	line-height: 50%;
	text-align: center;
	margin-top: 7px;
	}


/*
Infobar padding: aiming for 15 px. 
since padding for paragraphs adds to outside padding,
it is set at zero AND ...
Infobar internal class .padding is set to 7px all around.  THEN --
since P padding top & bottomn doubles between paragraphs,  
P top & bottom padding is set at 7px
*/


/*
END OF INFOBAR

------------------------------------------------------------------------

BEGINNING OF CONTENT
*/


#content {
/*Content has no height in order to expand as needed for changing content
original width: 815 pxdecreased it to 754 to create a gutter between sidebar & content.
January 21 2013: restored width to 815 to increase space for text in PilgrimsGuide/map beside the map image.
margin-right: 133px; to allow for sidebar*/

	width: 754px;
	font-size: 14px
	}

/*child elements (P and h2) of the content div have their own default margins & padding
must reduce them to 0 to avoid white areas between divisions*/
#content p {
	margin: 0;
	padding: 0;
	padding-bottom: 7px;
	padding-top: 7px;
	}
	
#content a {
    color: #007FFF;
/*    text-decoration: none;*/}

#content a:visited {
    color: #CC3299;
/*    text-decoration: none;*/
}

#content a:active {
    color: #856363;
/*    text-decoration: none;*/}


#content a:hover {
    color: #db6d16;
}


#content h2 {
    margin: 0;
    padding: 0;
	padding-top: 15px;
}


#content li {
	padding-bottom: 5px;
	}


/*
END OF CONTENT
------------------------------------------------------------------------
BEGINNING OF SIDEBAR
*/


#sidebar {
	float: right;
	width: 133px;
	margin: 0;
	padding-bottom: 7px;
	padding-top: 21px;
	color: #990033;
	}

#sidebar a {
	color: #990033;
	font-size: 14px; 
	font-weight: bold;
    /*text-decoration: none;*/
	}
	
#sidebar p {
	margin: 0;
	padding: 0;
	padding-bottom: 5px;
	font-size: 14px;
	color: #990033;
	font-weight: bold;

	}


#sidebar li {
	padding-bottom: 5px;
	}


/*
END OF SIDEBAR
------------------------------------------------------------------------
BEGINNING OF CREDITS (= credits and/or explanations for header images)
*/


#credits {
	margin: 0;
	padding: 0;
	padding-bottom: 7px;
	padding-top: 7px;
	font-size: 12px;
	}

/*
END OF CREDITS

------------------------------------------------------------------------
BEGINNING OF FOOTER (CONTAINS ALTNAV, ADDRESS, SEALS)
*/


#footer {
	/*background-color:rgb(204,204,204);*/
	clear: both;
	width: 953px;
	margin-left: 6px;
	border-top: 1px solid rgb(204,204,204);
    padding: 10px 0px; /*1st one = top; 2nd one = right*/
	}



#altnav {
	float: right;
	padding-right: 5px;
	padding-bottom: 15px;
			/*text-align: right;
			this was in tutorial example.
			reason for text-align right is not clear to me 
			because it makes no change in this page
			ref: tutorial section 10*/
	}

#altnav a {
    color: #333333;
}

#altnav a:visited {
    color: #333333;
}

#altnav a:active {
    color: #333333;
}


#altnav a:hover {
    color: #db6d16;
}



#address {
	margin-right: 638px;
	/*margin-right = width of the altnav division
	purpose: to prevent address from wrapping around altnav
	the margin holds back the edge of address so it wont reach
	to the left edge of the altnav.*/
	padding-right: 15px;
	width: 315px;
	}

#address a {
	margin-left: 15px;
	}

#seals {
	clear: right;
	/*clear property causes it to clear the bottom of the floated element above it;
	it will leave a clear space beside the floated element if the element beside the floated element
	is not extend as low on the page*/
	float: right;
	padding-top: 0px;
	padding-bottom: 15px;
	}

/*
Styles for seals (stye data defined as classes for individual seals):
*/
.imgw3c { /*W3C Approval seal*/
	border:0;
	width:88px;
	height:31px;
	}