/*
  General reset
*/
/*html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;*/
/*	font: inherit;*/
/*	vertical-align: baseline;
}*/
/* HTML5 display-role reset for older browsers */
/*article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}*/

/*
  Set a default for things which might cause differences between browsers.
  Make all pages take up the whole window.
*/
* {
  margin: 0;
  border: 0;
  padding: 0;
}
html, body {
  top: 0;
  left: 0;
}

/*
  Set basic font stuff at the top level to avoid 80% of 80% font sizing later (for a 
  td within a td, for example).
*/
body {
  font-family : Verdana, Arial, Helvetica, sans-serif;
  font-size : 80%;
  font-style : normal;
  color : rgb(30,30,30);
  background-color : rgb(230,230,230);
}
/*
  Basic element characteristics
*/
p {
  margin-bottom: 0.5em;
}
.belowhr {  /*  instead of hr  */
  margin: 2em 0 1.5em 0;
  border-top: 2px solid rgb(158,53,70);
  padding-top: 1em;
  text-indent: 0;
}
hr {
  color: rgb(158,53,70);
  width: 50%;
  height: 3px;
}

beachbody {
  background-image: url(pictures/ew_st_beach_background);
}
/*
  Basic page elements
*/
.pageheader {
  position: relative;
  width: 800px;
  height: 76px;
  margin: 0px auto;
  background-image: url(pictures/stolena.jpg);
  background-repeat: repeat-x;
  background-position: 0px bottom;
}
.pageheaderbackhome {
  padding: 0.2em 0px;
  width: 800px;
  margin: 0px auto;
}
.pageheader1 {
  float: left;
  top: 20px;
  width: 580px;
}
.header1 {
  margin: 8px 5px 0px 5px;
  font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 200%;
  font-weight: bold;
  color: rgb(0,51,102);
}
.pageheader2 {
  float: left;
  top: 20px;
  left: 580px;
  width: 220px;
}
.header2 {
  margin: 12px 5px 0px 5px;
  font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 150%;
  font-weight: bold;
  color: rgb(102,0,51);
}
.pagebody {
  position: relative;
  width: 800px;
  margin: 0px auto;
  padding-bottom: 1em;
  background-color: rgb(245,245,245);
  overflow: hidden;
}
.pagemenu {
  float: left;
  top: 66px;
  width: 130px;
  margin-bottom: -1000px;
  padding: 0px 5px 1000px 0px;
  padding-bottom: 1000px;
  background-color: rgb(245,245,245);
}
.pagebodysupp {
  float: left;
  width: 660px;
  text-align: right;
}
.pagebodybody {
  float: left;
  width: 660px;
  margin: 1em 0 0 0;
}
.storytext {
text-indent: 5em;
}
.pagebody1 {
  float: left;
  width: 410px;
  margin-bottom: -1000px;
  padding-bottom: 1000px;
  padding-left: 5px;
  padding-right: 5px;
/*  top: 66px;
  left: 140px;*/
  background-color: rgb(245,245,245);
}
.pagebody2 {
  display: block;
  float: left; 
  width: 250px;
  margin-right: -5px;
/*  left: 410px;*/
/*  border: 5px solid rgb(232,240,243);*/
/*  padding: 0px 5px 0px 5px;*/
/*  margin-bottom: -1000px;
  padding-bottom: 1000px;*/
  background-color: rgb(232,240,243);
}
.pagebody2 p h4 {
  margin: 0px 5px 0px 5px;
  padding-right: 5px;
}
.pagebody2para {
  margin: 0px 8px 0.5em 5px;
}
.pagefooter {
  width: 800px;
  margin: 0px auto;
  border-top: 1px solid rgb(30,30,30);
  padding: 5px 0px;
  font-size: 70%;
}
.pagefooterspan1 {
  width: 5%;
  margin: 1px;
  border-right: 1px solid rgb(30,30,30);
  padding: 10px 5px;
  text-align: center;
}
.pagefooterspan2 {
  width: 5%;
  margin: 1px;
  border-right: 1px solid rgb(30,30,30);
  padding: 10px 5px;
  text-align: center;
}
.pagefooterspan3 {
  width: 70%;
  margin: 1px;
  border-right: 1px solid rgb(30,30,30);
  padding: 10px 5px;
  text-align: center;
}
.pagefooterspan4 {
  width: 20%;
  margin: 1px;
  border-right: 1px solid rgb(30,30,30);
  padding: 10px 5px;
  text-align: center;
}
#maskoverlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 5;
  background-color: rgb(247,228,211);
  opacity: 0.4;
  filter:alpha(opacity=40);
  visibility: hidden;
}
.splashtext {
  position: absolute;
  top: 130px;
/*  margin-left: auto;
  margin-right: auto;*/
  left: 25%;
  width: 560px;
  z-index: 10;
  padding: 8px;
  background-color: rgb(102,131,154);
  visibility: hidden;
}
.splashtext2 {
  padding: 8px;
  background-color: rgb(232,240,243);
}
/*
	MENU
*/
.navsite {
width: 10em;
margin-bottom: 1em;
border-left: 1px solid rgb(102,102,102);
padding: 0;
font-weight: bold;
background-color: rgb(153,204,204);
}
/*
  Any p element within a navsite div will not be displayed unless CSS is switched 
  off.  This allows a failsafe heading (and alternative menu) to be included.
*/
.navsite p {
display: none;
}
.navsite ul {
list-style: none;
}
.navsite ul li a {
display: block;
padding: 2px 2px 2px 0.5em;
border-right: 10px solid rgb(51,102,153);
border-left: 1px solid rgb(102,153,204);
border-bottom: 1px solid rgb(51,102,153);
background-color: rgb(0,51,102);
color: rgb(255,255,255);
text-decoration: none;
}
.navsite ul li.border-left {
padding-left: 7px;
padding-top: 2px;
padding-bottom: 2px;
}
/*.navsite ul li.border-left-blank {
background-color: rgb(255, 255, 255);
color: rgb(51, 102, 153);
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : normal;
padding-left: 7px;
padding-top: 2px;
padding-bottom: 2px;
}*/
.navsite ul li a:hover {
border-right: 10px solid rgb(0,51,102);
border-left: 1px solid rgb(102,153,204);
border-bottom: 1px solid rgb(51,102,153);
background-color: rgb(102,153,255);
color: rgb(255,255,255);
}
.belownav {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 100%;
font-weight: bold;
width: 10em;
/* border-left: 1px solid rgb(102,102,102); */
padding: 5px;
margin-bottom: 1em;
color: rgb(51,51,51);
}
/*
  I'm not sure whether that's really enough to specify the belownav area, but
  nothing else seems to be involved.
*/

/*
Time to lose the type1 type2 stuff.
*/
.backhomeimage {
border: 0;
}
img {
  margin: 0px 8px 8px 0px;
  border: 0;
}
.type1image {
border: 4px solid rgb(255,255,255);
}
h1 {
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 200%;
color: rgb(0,51,102);
width: 100%;
margin: 0;
}
h2 {
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 150%;
color: rgb(102,0,51);
margin: 0.3em 0em 0.8em 0em;
}
h3 {
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 120%;
color: rgb(0,0,0);
margin: 0.2em 0 0.8em 0;
}
h4 {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: rgb(158,53,70);
margin: 0.8em 0 0.8em 0;
}
.h42 {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: rgb(158,53,70);
margin: -0.5em 0 0.8em 0;
}
.type2h4 {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: rgb(158,53,70);
padding: 1em 0 0.1em 0;
margin-bottom: 0.8em;
}
.type1backhome {
background-color : rgb(230,230,230);
border: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
padding-left: 0px;
margin: 0;
}
.type2backhome {
background-color : rgb(230,230,230);
border: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
padding-left: 4px;
margin: 0;
}
.new {
color: rgb(102,0,51);
font-style : italic;
}
.ew_writings {
background-image: url(pictures/ew_washing_477x361.gif);
background-repeat: no-repeat;
background-position: 100px 70px;
}
/*
Change the body fragment system to a div id=bodyfragment system, so that these attributes can be attached to that container rather than every paragraph.
*/
#bodyfragment {
padding-top: 1em;
padding-left: 4px;
padding-right: 4px;
}
.topbitout {
}
.topbit {
margin: 1em;
//background-color: rgb(245, 245, 245);
background-color: rgb(102,131,154);
}
.topbit2 {
margin: 1em;
}
.topbitsbl {
background-color: rgb(237,237,237);
background: url('pictures/topbit_bl.gif') bottom left no-repeat rgb(237,237,237);
/*width: 30%;*/
text-align: center;
min-width: 100px;
}
.topbitsbr {
background: url('pictures/topbit_br.gif') bottom right no-repeat;
}
.topbitstl {
background: url('pictures/topbit_tl.gif') top left no-repeat; 
}
.topbitstr {
background: url('pictures/topbit_tr.gif') top right no-repeat; padding: 10px;
} 
.topbitsb {
padding: 2px 0px 10px 50px; background: url('pictures/topbit_b.gif') 30px top no-repeat;
}
.topbitin {
}
p.signature {
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size : 100%;
font-style : italic;
}
.foot {
background-image: url(pictures/stolenb.jpg);
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 70%;
font-style : normal;
color : black;
}
.foottext {
background-color: rgb(230,230,230);
background-image: url(pictures/stolenb.jpg);
background-repeat: repeat-x;
background-position: 0px top;
border-top: 1px solid rgb(0,51,102);
padding-left: 4px;
}
td {
margin-left : 0px;
margin-right : 0px;
margin-top : 0px;
margin-bottom : 0px;
}
/*
This is new.
*/
/*td.right {
border-top: 1px solid rgb(0,0,51);
}*/
a:visited {
color: rgb(102,0,51);
}
a[href]:hover {
color : red;
}
/*  Form elements
    =============
*/
.formlabel {
  float: left;
  width: 80px;
}
.formtext {
  width: 300px;
  margin-bottom: 10px;
  border: 1px solid rgb(150,150,150);
  padding: 4px;
  background-color: rgb(230,230,230);
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
}
.formtextarea {
  width: 300px;
  height: 150px;
  margin-bottom: 10px;
  border: 1px solid rgb(150,150,150);
  padding: 4px;
  background-color: rgb(230,230,230);
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
}
.formbutton {
  margin: 10px 0px 10px 0px;
  padding: 4px;
  background-color: rgb(150,150,150);
}
.textinput {
width: 300px;
background-color: rgb(230,230,230);
font-size: 1em;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid black;
}
/*textarea {
width: 300px;
height: 150px;
background-color: rgb(230,230,230);
font-size: 1em;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid black;
}*/
#navsite p {
display: none;
}

/*
Set styles for the links to inherit properties of the navsite div.  Width, border-right, padding and margin-bottom are set to keep the menu from bunching up.  The background-color here covers the list item which is not a link because it is the current page.  We may want to shift the font stuff to a more inclusive level.
*/	
/*#navsite {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 100%;
font-weight: bold;
width: 10em;
border-left: 1px solid rgb(102,102,102);
padding: 0;
margin-bottom: 1em;
background-color: rgb(153,204,204);
color: rgb(40,40,40);
}*/
/*
Again, this is the whole list - no bullets for any of the list items, no margins or padding around the whole list (apparently this is to avoid problems with unwanted indentation of lists).
*/
#navsite ul {
list-style: none;
margin: 0;
padding: 0;
}
/*
Make sure margins aren't applied to each list item and put a one-pixel border at the bottom of each list item to help reinforce the separation of the list items.
*/
#navsite ul li {
margin: 0;
/*border-top: 1px solid rgb(0,0,51);*/
}
/*
Set styles for the links (investigate how to make the one entry which is not a link take the same depth).  Links must be rendered as block elements so it's the rectangle not the text which is clickable.  Also appearance of borders and text, plus the width of the rectangle within the 12em above.  This again is due to a problem with one browser...
*/

#navsite ul li a {
display: block;
padding: 2px 2px 2px 0.5em;
border-right: 10px solid rgb(51,102,153);
border-left: 1px solid rgb(102,153,204);
border-bottom: 1px solid rgb(51,102,153);
background-color: rgb(0,51,102);
color: rgb(255,255,255);
text-decoration: none;
width: 100%;
}
/*
...which is then covered for problems with other browsers by this one, whose syntax I don't understand.
*/
html>body #navsite ul li a {
width: auto;
}
/*
!!!!Just see if you can get a few pixels to the left of the one that isn't a link.  And because that seemed to work I'll try a bit of extra padding vertically.  But this seemed to disable the rollovers, so remove it.  But then even having removed it the rollovers don't function.  Have I tried it since moving the menu to the left?  In fact, I think it was a missing close-quote.
*/
#navsite ul li.border-left {
padding-left: 7px;
padding-top: 2px;
padding-bottom: 2px;
}
#navsite ul li.border-left-blank {
background-color: rgb(255, 255, 255);
color: rgb(51, 102, 153);
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : normal;
padding-left: 7px;
padding-top: 2px;
padding-bottom: 2px;
}
/*text-decoration: none;

And finally, cover the rollover effects.  The a:hover inherits from the li which inherits from the ul which inherits from the navsite div.
*/
#navsite ul li a:hover {
border-right: 10px solid rgb(0,51,102);
border-left: 1px solid rgb(102,153,204);
border-bottom: 1px solid rgb(51,102,153);
background-color: rgb(102,153,255);
color: rgb(255,255,255);
}

/*	BELOW THE MENU  */
/*
Set styles for the links to inherit properties of the navsite div.  Width, border-right, padding and margin-bottom are set to keep the menu from bunching up.  The background-color here covers the list item which is not a link because it is the current page.  We may want to shift the font stuff to a more inclusive level.
*/	
/*#belownav {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 100%;
font-weight: bold;
width: 10em;
 border-left: 1px solid rgb(102,102,102);
padding: 0;
margin-bottom: 1em;
color: rgb(51,51,51);
}*/
/*
Again, this is the whole list - no bullets for any of the list items (though there may be only one), no margins or padding around the whole list (apparently this is to avoid problems with unwanted indentation of lists).
*/
#belownav ul {
list-style: none;
margin: 0;
padding: 0;
}
/*
Make sure margins aren't applied to each list item and put a one-pixel border at the bottom of each list item to help reinforce the separation of the list items.
*/
#belownav ul li {
margin: 0;
/*border-top: 1px solid rgb(0,0,51);*/
}
/*
Set styles for the links (investigate how to make the one entry which is not a link take the same depth).  Links must be rendered as block elements so it's the rectangle not the text which is clickable.  Also appearance of borders and text, plus the width of the rectangle within the 12em above.  This again is due to a problem with one browser...
*/
#belownav ul li {
display: block;
padding: 2px 2px 2px 0.5em;
/*border-right: 10px solid rgb(51,102,153);*/
/*border-left: 1px solid rgb(102,153,204);*/
border-bottom: 1px solid rgb(51,102,153);
/*background-color: rgb(255,255,255);*/
color: rgb(51,51,51);
text-decoration: none;
width: 100%;
}
/*
...which is then covered for problems with other browsers by this one, whose syntax I don't understand.
*/
html>body #belownav ul li a {
width: auto;
}
/*
!!!!Just see if you can get a few pixels to the left of the one that isn't a link.  And because that seemed to work I'll try a bit of extra padding vertically.  But this seemed to disable the rollovers, so remove it.  But then even having removed it the rollovers don't function.  Have I tried it since moving the menu to the left?  In fact, I think it was a missing close-quote.
*/
/*#belownav ul li.border-left {
padding-left: 7px;
padding-top: 2px;
padding-bottom: 2px;
}*/
/*#belownav ul li.border-left-blank {
background-color: rgb(255, 255, 255);
color: rgb(51, 102, 153);
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : normal;
padding-left: 7px;
padding-top: 2px;
padding-bottom: 2px;
}*/
/*
And finally, cover the rollover effects.  The a:hover inherits from the li which inherits from the ul which inherits from the navsite div.
*/
/*#belownav ul li a:hover {
border-right: 10px solid rgb(0,51,102);
border-left: 1px solid rgb(102,153,204);
border-bottom: 1px solid rgb(51,102,153);
background-color: rgb(102,153,255);
color: rgb(255,255,255);
}*/

.introbox {
/*border: 1px solid rgb(51, 102, 153);*/
border: 0px;
margin: 0px;
padding: 4px;
background-color: rgb(232,240,243)
}