html, body {
height: 100%;
}

body{
margin: 0px; padding: 0px; border: 0px;

/* this is a kludge to get around the fact that repeatable background images don't work in
	more than one div.  I can get the left div background image to stretch and repeat properly,
	(the sandtrap), but not the right (the fairway).  So, the kludge is to setup the
	fairway as the overall body background image, and the sandtrap as the div background image.
	Modify the sandtrap so that it looks ok with the merge against the fw (use sandtrap-wider.jpg). */
 background-image: url(https://penpushers.us/images/golfFW-BG.jpg);
 background-repeat: repeat; 


font-family: Times, "Times New Roman", serif;
font-size: 1.0em;
line-height: 1.4em;
text-align: left;

}



/* left side of each screen, showing the sandtrap image repeated */
#left
{
 float: left;   
position: absolute; left: 0; top: 0; 
 min-height: 100%; 
/* KLUDGE ALERT - to put the start of the year newsletter in, set height to 875px (or whatever)
   rather than 100%.  Hard-coding height to pixels so that will extend length of page alongside newsletter.
	When newsletter goes, set back to height: 100%  This is because div backgrounds do not repeat beyond
	initial visible page for some lovely reason. */
 height: 3400px;
/* background-attachment:fixed; */ /* has curious effect of making fairway (other image) scroll when go down page */
 background-image: url(../images/sandtrap-wider.jpg);
background-repeat: repeat-y;
width: 200px; 
margin: 0px;
padding: 0px;
border: 0px;
}

/* middle of the screen,and down 240, really for the first page to fit under penpusher gif. basically starts to the right of the left side */
#middle
{ 
position: absolute; left:198px; top: 240px;



/* min-height: 100%; */
/* comment out height below as when inspect main page, 
cant use newsletter image as link for some reason when height or min-height = 100 
*/
/* height: 100%; */
width: 600px;
margin: 0px;
padding: 0px;
border: 0px;
}

/* middle of the screen,and at the top, really for the non first pages to fit to the right of the left side */
#middle-top
{ 
position: absolute; left:198px; top: 20px;
/* min-height: 100%; */
height: 100%;
width: 600px;
margin: 0px;
padding: 0px;
border: 0px;
}


/* specify the web default color for link, so can specify it for visited
	also.  Don't like the color to change after visited */
a:link {color: #150083;
text-decoration: none;}

a:visited {color: #150083;
text-decoration: none;}

a:active {color: #150083;
text-decoration: none;}

a:hover {color: #66ebe4;
text-decoration: none;}


#homeLink {
margin-left:7px;
margin-top: 7px;
}

#importantLinks1 { 
margin-left: 7px;
/* padding: 10px; 
margin-top: 150px; 
width: 130px; 
*/
}


 /* define a style for my buttons */
 /* dont you love fece02 as a color? */
 input.mybutt{
   background-color: #fece02;
}
 
 h1,h2,h3,h4,h5 {color: #fece02} 

 
 /* cannot get anything more than table color to work as well as doing it inline, so just background color */
 /* border-spacing allegedly equals cellspacing */
 /* table  { background-color:#699562; } */ 



/**************** try this out, see css generator at http://www.somacon.com/p141.php ************/
table.sample {
	empty-cells:show;	/* doesn't work in IE, so must use &nbsp anyhow */
	border-width: 1px;
	border-spacing: 0px;
	border-style: outset;
	border-color: gray; 
	border-collapse: separate;
	background-color: #699562;
}
table.sample th {
	font-size: 12pt;
	border-width: 1px;
	padding: 3px;
	border-style: inset;
	border-color: gray;
/*	background-color: #699562; */
	
}
table.sample td {
	font-size: 10pt;
	border-width: 1px;
	padding: 4px;
	border-style: inset;
	border-color: gray; 
/*	background-color: #699562; */
	
}