/* xxx rules apply throughout web site pages xxx */
body /* xxx red letters preceeding {} braces are xHTML tag names directly referenced by the rule xxx */
{
	margin: 0;
	padding: 0;
	background: rgb(80,0,0) url(../images/BGFade.png) repeat-x;
	font: 15px arial, helvetica, verdana, tahoma;
	border-radius: 0.5em;
	color: rgb(20,20,20);
}
 /* xxx rules that reference positioning and size of all pages xxx */
.container /* xxx dot-prefixed green letter rules directly reference class attributes in the xHTML xxx */
{
	background-color: rgb(240,230,220);
	margin: 1em 6em 3em 6em;
	padding: 10px;
	border-radius: 0.5em;
	max-width: 80em; /* xxx this rule may not be required xxx */
}

/* xxx rules for logo image. Helps display on mobiles xxx */
.log
{
	width: 100%;
	/*background-image: url(../images/IMGlogo.jpg);
	height: 10em;
	background-repeat: no-repeat;
	background-size: 100% 10em;
	border-radius: 0.5em;
	margin-bottom: 0.5em;*/
}

/* xxx setting the size of text within the site unless more specifically modified xxx*/
.size
{
	font-size: 0.8em;
}
/* xxx end logo construction rules xxx */

/* xxx primary navigation construction rules xxx */
#top /* xxx ensures navigation appears within container during construction xxx */
{
	margin-bottom: 2em;
}

#top ul /* xxx removes all list bullets xxx */
{
	padding: 0;
	margin: 0;
	list-style-type: none;
	max-width: 80em;	
}

#top li /* xxx horizontal alignment and always top page layer xxx */
{
	float: left;
	z-index: 1000;
}

#top .bg /* xxx sets background color, width, corner radius and left position of drop box xxx */
{
	background-color: rgb(100,100,0);
	width: 75em;
	border-radius: 0.5em;
	left: 6.6em;
	z-index: 1300;
}

#top .pg /* xxx sets heading text and position of drop box xxx */
{
	text-align: center;
	color: rgb(255,255,255);
	font-weight: bold;
	font-size: 1.5em;
	margin-top: 0.5em;
	margin-bottom: -0.5em;
}

#top .big /* xxx horizontal position and spacing of multiple links within the drop box xxx */
{
	float: left;
	line-height: 1.2em;
	max-width: 10em;
	padding-left: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
}

#top ul ul /* xxx ensures all navigation construction is 
 until required by user xxx */
{
	display: none;
	position: absolute;
	padding: 0;
}
/* xxx end navigation construction rules xxx */
/* xxx navigation animation rules including pseudo (:) rules xxx */
#top li a:link, #top li a:visited /* xxx appearance of primary navigation links xxx */
{
	display: block;
	width: 6em;
	text-decoration: none;
	background: rgb(100,0,0);
	line-height: 2em;
	border: solid 1px rgb(0,0,0);
	padding-left: 1em;
	font-size: 0.8em;
	font-weight: bold;
	letter-spacing: 0.1em;
	border-radius: 0.5em;								
	color: rgb(255,255,255);
}

#top div a:link, #top div a:visited /* xxx appearance of drop box navigation links xxx */
{
	line-height: 1.2em;
	color: rgb(0,0,0);
	border: 1px solid rgb(0,0,0);
	width: 100%;
	font-size: 0.8em;
	font-weight: normal;
	padding-left: 1em;
	border-radius: 0.5em;
	margin-bottom: 1px;
	color: rgb(255,255,255);
}

#top ul a:hover /* xxx mouseover navigation link appearance xxx */
{
	background-color: rgb(0,100,0);
	color: rgb(255,255,255);
}

#top li:hover ul /* xxx retrieves hidden sub-menus xxx */
{
	display: block;
}
/* xxx end navigation animation rules including pseudo rules xxx */

/* xxx rules that can be used anywhere in the website xxx */
i  /* xxx italics rules xxx */
{
	color: rgb(255,0,0); /* xxx red xxx */
}

i.blu /* xxx where the tag and attribute are continuous the rules apply specifically to tag xxx */
{
	color: rgb(0,0,255);
}

i.red
{
	font-weight: bolder;
}

i.grey
{
	color: rgb(100,100,100);
}

/* xxx styles for WE1995 invite xxx */
i.black
{
	font-weight: bolder;
	font-size: 3em;
	color: black;
}

i.tx
{
	font-size: 2em;
	color: rgb(100,100,100); 
}

div.one
{
	background-color: rgb(150,255,150);
	border: 2px solid;
	border-radius: 2em;
	padding: 1em; 
	margin-top: -2em;
	margin-left: auto;
	margin-right: auto;
	width: 30em;
}

div.two
{
	margin: 1em;
	width: 20em;
	border: 2px solid;
	border-radius: 3em;
	padding: 1em;
	background-color: yellow;
	float: left;
}

div.three
{
	margin: 1em;
	margin-top: 2em;
	width: 10em;
	border: 2px solid;
	border-radius: 2em;
	padding: 1em;
	background-color: pink;
	float: right;
}

div.four, p.four
{
	background-color: rgb(200,200,200);
	border: 2px solid;
	border-radius: 3em;
	padding: 2em; 
	margin-top: 12em;
	margin-left: auto;
	margin-right: auto;
	width: 20em;
}

/* xxx end styles for WE1995 invite xxx */

.space /* xxx styles a blank spacing column between container columns xxx */
{
	display: table-col;
	width: 1em;
}

.row
{
	display: table-row;
	height: 15em;
}

.cell
{
	display: table-cell;
	height: 15em;
}

.txtctr
{
	text-align: center;
}

a /* xxx general appearance of navigation tags xxx */
{
	color: rgb(0,120,0);
	padding: 0.3em;
	text-decoration: none;
	background-color: rgb(150,150,150);
	font-weight: bold;
	border-radius: 0.5em;
	line-height: 2em;
}

a:hover
{
	background-color: rgb(100,0,0)
}
/* xxx end rules that can be used anywhere in the website xxx */

/* xxx specific subnavtop navigation rules for Pike weekends xxx */
#subnavTop /* xxx position the navigation xxx */
{
	margin-top: 3em;
	margin-bottom: -2.5em;
}

#subnavTop ul /* xxx removes bullets xxx */
{
	padding: 0;
	margin-left: 1em;
	list-style-type: none;
}

#subnavTop li /* xxx horizontal navigation xxx */
{
	float: left;
	position: relative;
	width: 6em;
	border-radius: 0.5em;
	z-index: 900;
}

#subnavTop ul ul /* xxx hides drop downs xxx */
{
	display: none;
	position: absolute;
	padding: 0;
}

#subnavTop li a:link, #subnavTop li a:visited /* xxx comma separated */
{
	display: block;
	text-decoration: none;
	line-height: 1.2em;
	border: dotted 1px rgb(0,0,0);
	padding-left: 1em;
	font-size: 0.8em;
	font-weight: bold;
	letter-spacing: 0.1em;
	border-radius: 0.5em;
	color: rgb(255,255,255);
	background-color: rgb(0,100,100); 
}

#subnavTop ul a:hover /* xxx mouseover xxx */
{
	background-color: rgb(100,200,255);
	color: rgb(0,0,255);
}

#subnavTop li:hover ul /* xxx retrieval xxx */
{
	display: block;
	margin-left: 0;
}
/* xxx  end specific subnavtop navigation rules for Pike weekends xxx */

/* xxx specific subnavbop navigation rules for Pike weekends xxx */
#subnavBot
{
	margin-top: -0.5em;
	margin-bottom: 0;
}

#subnavBot ul
{
	padding: 0;
	margin-left: 1em;
	list-style-type: none;
}

#subnavBot li
{
	float: left;
	position: relative;
	width: 6em;
	border-radius: 0.5em;
	z-index: 900;
}

#subnavBot ul ul
{
	display: none;
	position: absolute;
	padding: 0;
}

#subnavBot li a:link, #subnavBot li a:visited
{
	display: block;
	text-decoration: none;
	line-height: 1.2em;
	border: dotted 1px rgb(0,0,0);
	padding-left: 1em;
	font-size: 0.8em;
	font-weight: bold;
	letter-spacing: 0.1em;
	border-radius: 0.5em;								
	color: rgb(255,255,255);
	background-color: rgb(0,100,100); 
}

#subnavBot ul a:hover
{
	background-color: rgb(100,200,255);
	color: rgb(0,0,255);
}

#subnavBot li:hover ul /* xxx retrieves and positions hidden sub-menus above xxx */
{
	display: block;
	margin-left: 0;
	margin-top: -15.1em;
}

#subnavABT li:hover ul /* xxx specifically alters one block */
{
	display: block;
	margin-left: 0;
	margin-top: -6.1em;
}
/* xxx end specific subnavtop navigation rules for Pike weekends xxx */

/* xxx left navigation, construction & interactivity rules xxx */
#navLeft
{
	display: table-cell;
	max-width: 6em;
	background-color: rgb(0,120,0);
	padding-left: 0.5em;
	padding-right: 0.5em;
	border-radius: 0.5em;
}

#navLeft h2
{
	text-align: center; 
	margin-bottom: -0.5em;
	color: rgb(0,0,0);
}

#navLeft ul
{
	padding: 0;
	margin-: 0;
	list-style-type: none;
}

#navLeft li a
{
	display: block;
	color: rgb(255,255,255);
	text-decoration: none;
	background-color: rgb(0,100,100);
	padding-left: 1em;
	font-size: 0.8em;
	font-weight: bold;
	line-height: 1.2em;
	border-radius: 0.5em;
	margin-bottom: 0.2em;
}

#navLeft ul a:hover
{
	background-color: rgb(0,150,0);
	color: rgb(255,255,255);
}
/* xxx end left navigation, construction & interactivity rules xxx */

/* xxx slide navigation rules xxx */
.slideNavR /* xxx position the slide navigation container relative to the page construction xxx */
{
	position: absolute;
	left: 70em;
	top: 20em;
	font-size: 0.8em;
	z-index: 1000;
}

.slideNavR ul
{
	list-style-type: none;
	position: fixed;
}

.slideNavR ul ul
{
	display: none;
	position: absolute;
	padding: 0;
}

.slideNavR li a:link, .slideNavR li a:visited
{
	text-decoration: none;
	line-height: 1.8em;
	font-weight: bold;
	border-radius: 0.5em;
	color: rgb(255,255,255);
	background-color: rgb(204,102,0);
}

.slideNavR ul a:hover
{
	background-color: rgb(100,200,255);
	color: rgb(0,0,255);
}

.slideNavR li:hover ul
{
	display: block;
}
/* xxx end slide navigation rules xxx */

/* xxx reveal rules xxx */
.rev
{
	margin-top: -2em;
}

.rev ul
{
	list-style-type: none;
}

.rev ul ul
{
	display: none;
}

.rev li:hover ul
{
	display: block;
	float: right;
}

.rev div
{
	margin-top: -3em;
}

.rev ul li
{
	margin-left: 15em;
}
/* xxx end reveal rules xxx */

/* XXXXXXXXXX MAIN CONTENT RULES XXXXXXXXXX */
/* xxx rules governing the container contents xxx */
#content /* xxx surround of main content container and its inner text control xxx */
{
	display: table-cell;
	border: 0.3em solid rgb(204,102,0);
	border-radius: 0.5em;
	padding-left: 1em;
	padding-top: -1em;
	padding-right: 1em;
	padding-bottom: 1em;
}

.box /* xxx main container sizing xxx */
{
	display: table;
	margin-top: 3.5em;
	margin-right: 1em;
	ax-idth: 80em; /* xxx?????? may not require this rule?????? see above .container xxx */
}

/* xxx headings rules within the main container xxx */
h1
{
	text-align: center;
}

h2
{
	color: rgb(0,0,0);
}

h3 /* xxx used for blue sub headings xxx */
{
	color: rgb(0,0,255);
	font-style: italic;
	font-size: 1em;
	margin-top: 0.5em;
	margin-left: 3em;
}

h5
{
	color: black;
}
/* xxx end rules governing the container contents xxx */

p /* xxx text line and paragraph spacing within the main container xxx */
{
	line-height: 1.7em;
	margin-bottom: 2em;
	margin-left: 1em;
}

.indent
{
	text-indent: 1em;
}

.line /* xxx horizontal divider line within the main container xxx */
{
	background-color: rgb(200,100,0);
	width: 50em;
	height: 0.5em;
	margin-top: 0.5em;
	margin-left: 1em;
	margin-bottom: 0.5em;
}

.innerbox /* xxx inner box sizing within main container xxx */
{
	display: table;
	margin-top: 0.2em;
	max-width: 54em;
}

.intext /* xxx class in span tag rules for black bold appearances in p tags xxx */
{
	font-weight: bold;
	color: rgb(0,0,0);
}

.strike
{
	text-decoration: line-through;
}

.note
{
	border: 0.1em solid rgb(0,0,255);
	width: 13em;
	height: 10em;
	border-radius: 0.5em;
	float: left;
	margin-left: 3em;
	margin-bottom: 1em;
	padding-left: 1em;
	padding-top: 1em;
}

.vspc
{
	margin-top: 2em;
}

.it
{
	font-family: Lucida Handwriting;
}

#trophy /* xxx the Pikehand style rules xxx */
{
	display: table-cell;
	width: 60em;
	border: 0.3em solid rgb(204,102,0);
	border-radius: 0.5em;
	text-align: center;
	margin-top: 1em;
}

#trophy img
{
	margin-top: 1em;
	border-radius: 0.5em;
}

/* xxx common rules with specific overrides xxx */
.pikePage, #newsArchive, .songPage, .aboutPage, .all /* xxx common rules that style these pages xxx */
{
	display: table-cell;
	border: 0.3em solid rgb(0,120,0);
	border-radius: 0.5em;
	width: 50em;
	padding-left:  1em;
	padding-right: 1em;
	padding-bottom: 1em;
}

.aboutPage ul, .pikePage ul
{
	list-style-type: none;
}
/* xxx end common rules with specific overrides xxx */

/* xxx rules defining xHTML tables tr, th, td, content, etc. xxx */
#scroll, #wes, #rot
{
	margin: 1em auto 1em auto;
	border: 0.3em solid rgb(100,255,100);
	border-radius: 1em;
}

#scroll th, #rot th, .beer th
{
	color: black;
	padding-top: 1em;
	width: 20em;
}

#scroll th, #scroll td, #wes th, #wes td, #rot th, #rot td, #scores th, #scores td, .beer td
{
	padding-left: 1em;
	padding-right: 1em;
	text-align: center;
}

#wes th
{
	color:black;
	width: 12em;
}

#rot .a, #rot .b
{
	margin: 1em auto 2em auto;
}

table
{
	margin-top: 1em;
}

.horis /* xxx positions and sizes birthday xHTML table column headings xxx */
{
	float: left;
	font-size: 1.5em;
	margin-top: 0.5em;
	margin-bottom: -0.5em;
}

#h /* xxx centres xHTML table when required xxx */
{
	margin: 0 auto 0 auto;
}

#hdrit /* xxx right xHTML table box xxx */
{
	margin-left: 14em;
}

#hdlef /* xxx left xHTML table box xxx */
{
	margin-left: 5em;
}

#scores /* xxx scores xHTML table in WE2015 xxx */
{
	margin-top: -2em;
	width: 50em;
}

.all ul /* xxx positions columns in xHTML birthday table xxx */
{
	width: 4.5em;
	list-style-type: none;
	text-align: center;
}
/* xxx end rules defining xHTML tables tr, th, td, content, etc. xxx */

/* xxx Family Tree Rules xxx */
#tree
{
	color: rgb(0,0,0);
	background-color: rgb(150,150,150);
	margin: 1em;
	border-radius: 0.5em;
	font-size: 1em;
	padding-top: 1em;
	padding-bottom: 1em;
	text-align: center;
	border: 0.3em solid rgb(204,102,0);
}

#willfam, #billfam, #jackfam, #dotfam, #evefam, #jeanfam, #maifam, #henfam, #harfam, #johnfam, #jackfam2, #hildafam, #lilfam
{
	background-color: rgb(180,180,180);
	padding-top: 1em;
	padding-bottom: 1em;
	border: 0.3em solid rgb(204,102,0);
	margin: 1em;
	border-radius: 0.5em;
}

#billfam, #jackfam, #dotfam, #evefam, #jeanfam, #maifam, #harfam, #jackfam2, #hildafam, #lilfam
{
	background-color: rgb(100,200,200);
}

.sib
{
	background-color: rgb(200,255,200);
	padding-top: 1em;
	padding-bottom: 1em;
	border: 0.3em solid rgb(204,102,0);
	margin: 1em;
	border-radius: 0.5em;
}

.sibfam
{
	background-color: rgb(150,255,150);
	padding-top: 1em;
	padding-bottom: 1em;
	border: 0.3em solid rgb(204,102,0);
	margin: 1em;
	border-radius: 0.5em;
}

.sibmor
{
	background-color: rgb(200,200,255);
	padding-top: 1em;
	padding-bottom: 1em;
	border: 0.3em solid rgb(204,102,0);
	margin: 1em;
	border-radius: 0.5em;
}

#tree div
{
	margin: 1em;
}

.famcell
{
	background-color: rgb(255,0,0);
	border: 1px solid rgb(0,0,0);
	border-radius: 0.5em;
	padding: 0.4em;
}

.equals
{
	padding: 0.4em 1em;
}

.assim
{
	background-color: rgb(255,150,150);
	border: 1px solid rgb(0,0,0);
	border-radius: 0.5em;
	padding: 0.4em;
	text-align: center;
}

.notfamcell
{
	background-color: rgb(255,255,255);
	border: 1px solid rgb(0,0,0);
	border-radius: 0.5em;
	padding: 0.4em;
	text-align: center;
}

.inpageNav, .inpagePos /* xxx navigation within a page rules xxx */
{
	background: none;
	color: rgb(0,0,0);
}

.inpageNav:hover /* xxx hover xxx */
{
	background: none;/*rgb(255,0,0);*/
	color: rgb(255,255,255);
}

.inpagePos:hover
{
	background: none;
}
/* xxx End Family Tree Rules xxx */

/* xxx specific rules for pictures within pages xxx */
.ing
{
	width: 10em;
}

img
{
	border-radius: 0.5em;
}

img.hi
{
	height: 6em:;
}

.let
{
	width: 100%;
}

.imctr
{
	width: 52em;
}

.fltl /* xxx float left of inpage pictures at Pike Weekends */
{
	float: left;
	margin: 1em;
}

.fltr /* xxx float right of inpage pictures at Pike Weekends */
{
	float: right;
	margin: 1em;
}

.WEpics /* xxx size of group pictures in Gallery pages xxx */
{
	width: 44em;
}

.pikes /* xxx size of Pike Pictures in Pikehands pages xxx */
{
	height: 12em;
}

.caponly
{
	width: 10em;
	float: right;
	margin-right: 4em;
}
/* xxx end specific rules for pictures xxx */

/* xxx Pike scrolls and slide show rules xxx */
.scroll /*xxx sizing of all PoY scrolls xxx */
{
	width: 44em; /* xxx height not required xxx */
}

/* xxx sets position and size of background images of slide shows xxx */
#slideholder
{
	position: relative;
	margin-bottom: 1em;
	width: 44em;
	height: 33em;
	border-radius: 0.5em;
	background-size: 44em 33em;
	background-repeat: no-repeat;
	background-color: none;
}

/* xxx sets the slide show captions/transparency appearances xxx */
#slideholder p
{
	color: rgb(255,255,255);
	font-weight: bold;
	font-size: 1.3em;
	background: rgba(100,100,100,0.4);
	margin-right: 1em;
	margin-top: 0em;
	border-radius: 0.5em;
	text-indent: 1em;
}

#slideholder img
{
	width: 44em;
}

button /* xxx button rules for slide shows xxx */
{
	border-radius: 0.5em;
	margin-left: 9em;/*12em;*/
}

/* xxx end scrolling and slide show rules xxx */
/* XXXXXXXXXX END MAIN CONTENT RULES XXXXXXXXXX */

/* xxx news box and news archive rules xxx */
#news /* xxx current year container for news items appears beside main container xxx */
{
	display: table-cell;
	width: 16em;
	background-color: rgb(50,100,150);
	border-radius: 0.5em;
}

#news h2 /* xxx news heading xxx */
{
	margin-left: 0.4em;
	font-size: 1.5em;
}

#news div /* xxx news divisions xxx */
{
	color: rgb(0,255,255);
	width: 16em;
	margin-left: 1em;
	margin-bottom: 1em;
	padding-right: 1em;
}

#yearnews /* xxx archived year container for old news items XXX */
{
	line-height: 2em;
	background-color: rgb(50,100,150);
	color: rgb(0,255,255);
	margin: 0px;
}

#newsArchive div
{
	line-height: 2em;
	padding-right: 1em;
}

div i /* xxx newsArchive rules xxx */
{
	line-height: 2em;
}
/* xxx end news box and news archive rules xxx */

/* xxx xhtml table used as grid xxx */
#grid
{
	background-color: rgb(200,200,200);
	text-align: center;
	font-weight: bold;
	max-width: 54em;
	border-radius: 0.5em;
}

#grid table
{
	max-width: 56em;
}

#grid img
{
	height: 13em;
	border-radius: 0.5em;
}

#grid a
{
	background: none;
}

#grid a:hover
{
	color: rgb(255,0,0);
}

/* xxx end xhtml table used as grid xxx */

/* xxx disclaimers, policies & privacy rules xxx */
.rites /* xxx appears at the bottom of each page xxx */
{
	margin-top: 1em;
	margin-bottom: 1em;
	text-align: center;
} 
/* xxx end disclaimers, policies & privacy rules xxx */

/* xxx displays text as mirror image xxx */
.mirror
{
	transform: rotate(180deg);
	transform: scaleX(-1);
	margin-right: 5em;
}