/* div "body" (outside page frame) common to ALL pages */
body{
margin: 0;
padding: 0;
/* experiment>>> variant from original here
background-color: white; 
*/
/*background-color: #d4ecfb;*/
font: 1em Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}


/* div id="page" (page frame) elements common to ALL pages
except background-color (see next definition) */
#page {
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 25px/*50px*/;
text-align: center;
/* experiment> this was original
border: 2px solid #fab746;

background-color: #d4ecfb;
*/
background-color: #ebf5ff/*white*/;
}


/* darker background for index page only  */
#index #page {
background-color: #aed6cd;
}


/* styling for of paragraph spacing THROUGHOUT website*/
p {
margin-top: 5px;
margin-bottom: 15px;
}

/* styling for links to external websites */
a.website-link {
text-decoration: none;
font-weight: bold;
color: navy;
}
a.website-link:hover {
text-decoration: none;
font-weight: bold;
color: black;
background-color: white;
}




/* internal links elements common to ALL pages 
except background-color (see next definition) */
#top-links {
margin-left: auto;
margin-right: auto;
width: 750px;
margin-top: 15px;
/*margin-left: 15px;*/
/*border: 1px solid #fab746;*/
/*background-color: white;*/
}


#index #top-links {
/*background-color: #d4ecfb;*/
}

#top-links ul {
float: left;
/*width: ESSENTIAL ESSENTIAL*/
list-style: none;
}

#top-links ul li {
float: left;
/*width: ESSENTIAL ESSENTIAL*/
}

#top-links ul li.thispage {
/* a style denoting current page, i e list item without link*/ 

display: block;  /* otherwise they function as inline elements */
width: 110px;
padding: 8px;
margin: 3px;
border: 1px solid #fab746;
font-size: .8em;
font-weight: bold;
font-variant: small-caps;
background-color: blue;
/* note risk of conflict with bg-col blue in #page a.page-link*/
color: #d4ecfb;
text-decoration: none;
}





/* these detailed styles for links are common to ALL pages */
#top-links a {
display: block;  /* otherwise they function as inline elements */
width: 110px;
padding: 8px;
margin: 3px;
border: 1px solid #fab746;
font-size: .75em;
font-weight: bold;
font-variant: small-caps;
background-color: #d4ecfb; /* visible difference from .thispage */
color: blue; 		  /* visible difference from .thispage */
text-decoration: none;
}
 

#top-links a:hover { /* LOUD- consider changing all colours here */
color: #d4ecfb/*#fab746/red*/; 
border: 1px solid #fab746/*red*/;
background-color: #000; /* black - but why doesn't this work in IE with white??? */
}



/* part of table specification intended for index page only
pagename - this ID should be index - to be inserted here */
/*#pagename */table {
clear: both;
margin: 50px 40px 50px 40px;
width: 700px;
background-color: #fab746;
}
/* part of table specification intended for index page only*/
#index table th.title {
font: bold 2em "Times New Roman", Times, serif;
text-align: center;
letter-spacing: .1em;
}
/* part of table styling intended for index page only*/
#index td, th {
width: 140px;
font-size: .75em;
background-color: white;
text-align: center;
padding: 10px;
}
/* part of table specification intended for index page only*/
#index td img {
width: 120px;
height: 80px;
border: 2px solid #fab746;
}

#index td img.pp-logo { 	/* corrected from "image"!! */
width: 700px;
height: 80px;
border: 0px;
}



/* relates only to logo .jpg */
img.x117x78 {
width: 117px;
height: 78px;
}


/* banner styling applies to ALL pages except index page
(which has no banner) */
#banner {
width: 700px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 25px /*40px*/;
}
/* this is to float the banner image only */
#banner .float-image {
text-align: left;
clear: both; /* ?? */
float: left;
width: 130px;
}

/* this style applies to all portraits used as banner images -
- in practice, on individual members' pages - -
and enables these to be differently styled (if desired) */
#banner img.banner-portrait {
width: 100px;
height: 133px;
border: 2px solid #fab746;
}

#banner img.x117x78 {
width: 117px;
height: 78px;
/*border: none;*/
/*margin-right: 40px;*/
}


#banner #banner-wording {
float: right;
width: 550px;
text-align: left;
}

#banner h1 {
float: left;
width: 550px;
margin-top: -.2em;
margin-bottom: .3em;
font: 1.35em "Times New Roman", Times, serif;
font-weight: bold;
font-variant: small-caps; /* surely this can be condensed!!!*/
letter-spacing: .05em;
}

#banner p {
width: 550px;
}

#page .blue-text {
color: #00f/*(blue)*/;
}

.middle .blue-text {
font-weight: bold;
}

.navy-text {
color: #000080/*navy*/;
font-weight: bold;
}


.middle {
clear: both;
/*float: left;*/
text-align: left;
width: 800px;
}

.middle .left-col {
clear: both;
float: left;
margin-left: 35px;
width: 350px;
}

.middle .right-col {
float: right;
margin-right: 35px;
width: 350px;
}

.middle img {
float: left;
}

#page-bottom {
clear: both;
float: left;
width: 795px;
text-align: center;
}

#page-bottom .contents {
width: 650px;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
padding: 10px 15px 10px 15px;
border: 1px solid #fab746;
background-color: #d4ecfb;
color: blue; 
font-size: .7em;
font-weight: bold;
text-align: center;

}


/* now for some generally applicable styles */



/* font sizes for banner and centre paras*/
#banner-wording p, .middle p {
font-size: .8em;
}

p {
/*margin-top: 0;*/
margin-bottom: .6em;
}



.info {
color: white;
font:  bold .8em "Times New Roman", Times, serif;
background-color: blue;
text-decoration: none;
letter-spacing: .05em;
}

/*
#page a .blue-text {
color: white;
font:  bold .9em "Times New Roman", Times, serif;
background-color: blue;
text-decoration: none;
letter-spacing: .05em;
}
*/

/* styling common to all link "icons" below header */
#page a .email-link, #page a .page-link, #page a .site-link {
text-decoration: none;
letter-spacing: .05em;
}


#page a.email-link {
color: yellow/*#fab746/*white*/;
/*font:  bold .9em "Times New Roman", Times, serif;*/
font-size: .8em;
text-decoration: none;
background-color: #000080/*navy*/;
font-weight: bold;
}

#page a.page-link {

color: yellow/*white*/;
/*font-size: .7em;*/
/*font:  bold .9em "Times New Roman", Times, serif;*/
/*background-color: blue;*/
color: blue;
text-decoration: none;
letter-spacing: .03em;
font-weight: bold;
}

#page a.othersite-link {
color: white;
font-size: .7em;
/*font:  bold .9em "Times New Roman", Times, serif;*/
background-color: blue;
text-decoration: none;
letter-spacing: 1.05em;
}




/* general format for "narrative" images - ???border needed*/

.middle img  {
clear: both;
float: left;
border: 2px solid #fab746;
margin: 5px 20px 10px 0px;
}


/* image (large) in landscape format */
img.ls {
float: left;
width: 200px;
height: 134px;
}


/* image (portrait-type) in portrait format */
img.portrait {
/*float: left;*/
width: 100px;
height: 133px;
/*border: 2px solid blue;*/
/*margin: 5px 20px 10px 0px;*/
/*margin-right: 20px;
margin-bottom: 10px;*/
}

/* square (medium-sized) formatted images */
img.square {
width: 150px;
height: 150px;
}