/*
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 thes 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*/



/* ---------------------------------------------------------------------------
FOOTPATHS CLASSES*/

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

.footpathscol1
	{ /* specs for col 1 of the tabular footpath description*/
	width: 80px; 
	padding-right: 15px; 
	
	}



/*------------------------------------------------------------------------
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;
	}


.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. 
It is also used to indent approximate time notes in path descriptions.
*/
.blockindent
	{
	position: relative; left: 25px;
	}


/*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; 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: 40px;
	padding-left: 100px; 
	line-height: 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	color: #333366;
	}

/*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: 40px;
	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: 40px;
	padding-left: 100px; 
	line-height: 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	color: #660000;
	}

/*-----------------------------------------------------------------------
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;
	}


/*------------------------------------------------------------------------
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 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 px
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
	font-size:smaller;
------------------------------------------------------------------------
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;
	}