/* This style sheet was written by Paul Dell and was distributed  with the Golfer Template available at http://www.dellwebsites.com 
- This comment should remain intact though you are free to edit the style sheet as you see fit. Please delete all below comments before uploading to the web */

/* WE STONGLY RECOMMEND THAT YOU OPEN THIS STYLE SHEET TOGETHER WITH THE HTML FILE TO GET A BETTER UNDERSTANDING */



html, body, div { /* sets default font size, family and font color to black*/
	font: normal 12pt Arial, Helvetica, sans-serif;
	color: #000000;
}

body {
	margin: 0;  /* sets body margin to zero*/
	padding: 0;/* sets body padding to zero*/
	text-align: center; /* this is a hack so ie5 understands that centred layouts are cool :)*/
	background: #fff url(images/bgpiano.jpg) fixed; /* sets background colour to white, path to the background image and sets the background image to be fixed*/
}

acronym {
	cursor: help; /* sets the cursor type to help*/
	font-style: normal; /* sets font style to normal, do this to prevent silly browsers doing silly things*/
	border-bottom: dashed #000 1px; /* places a dashed border under our acronym */
	}
	
img {border: none;} /* kills any borders around our images*/

/* --------------------DIV IDs -------------------------------------------------------------*/
 
#pagecontainer /* pagecontainer div is the div that holds all the other divs.
we have set the width to 750 pixels*/
 {width: 1000px;
 margin: 0 auto; /* centers the pagecontainer, first value O determines top and bottom  margins, auto sets the space on the view port evenly left and right*/
 position: relative;/*position relative so that we can place child divs positioned absolute within the pagecontainer div */
} 
 
#header {
	position: absolute;
	left: 0;
	margin-top: 23px;
	background-image: url(images/header.jpg);
	width: 1000px;
	height: 179px;
 	} 
 	
#navwrapper { /*see bottom of style sheet for the link styles*/
	width: 1000px;/* sets the width to 750 pixels*/
	height: 50px; /* sets the height of the navwrapper div*/
	background: url(images/topnavbg.jpg) no-repeat; /* sets the path to the background image*/
	position: absolute; /* positions the div absolute*/
	top: 202px; /*positions the div 202 pixels from the top*/
	left: 0; /* positions the div zero left*/
 	}
	
#topcontentbg { /* this div holds the contentbgtop.jpg image */
	background: url(images/contentbg_top.jpg); /* sets the path to the background image */
	height: 35px; /* sets the height of our div */
	position: absolute; /* positions the div absolute, well really its positioned relative to navwrapper, confused? Me too:) */
	top: 48px; /*positions the div 50px top from navwrapper*/
	width: 1000px; /*sets the width to 750 pixels*/
	left: 0; /* positions the div zero left*/
}

 
#contentwrapper {
	width: 1000px;/* positions the div zero left*/
	position: absolute;/* positions the div absolute*/
	top: 80px;/* positions the div 80pixels from top*/
	left: 0;/* positions the div zero left*/
	text-align: left;/* Puts the content where it should be, see body for ie5 hack*/
	background:#E2DBD1 url(images/contentbg_middle.jpg);/* sets the path to the background image and sets the bg colour*/
	}
 
#leftcolumn { /* this is our left column, we have floated the div left, err confused? Don't be because obviously we want the left column to be placed to the left*/
	float: left; 
	width: 683px;/* sets the width*/
	padding: 20px 0 0 25px; /* now we are basically giving some padding, top right bottom left*/
	}
	
/* ok, below styles all the content stuff*/
 
#content {width: 720px;} /* sets the width of our left column*/


#content h1, h2, h3, h4 {
	color: #54814A;
	font-weight: bold;
	margin: 0 0 5px 5px;
	padding: 0;
	font-size: 20px;
	}
#content h2	{
	color: #54814A;
	margin: 0 0 5px 5px;
	font-size: 18px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
#content h3	{
	font-size:15px;
	color: #54814A; margin: 0 0 5px 5px;
}


#content p {
	margin: 0 5px 15px;
	line-height: 140%;
	}

#content p a, /*this sets our link styles within the p element within the content div*/
#content p a:link, 
#content p a:active {
	color: #FFFFFF; /*sets the font colour to black*/
	text-decoration: none; /*removes the default underline from our links*/
	border-bottom: 1px solid #000; /*sets a solid 1px black bottom border */
	background: #A5BD4E; /*sets the background colour*/
	}
	
#content p a:visited { /*here we are styling the visited links*/
	color: #FFFFFF; 
	border-bottom: 1px dotted #000; 
	text-decoration: none;
	}

#content p a:hover { /*styles the link hover states*/
	color: #386900; /*font colour*/
	background: #A8BB52; /*background colour*/
	border-bottom: 1px solid #FFF;/*sets a solid 1px bottom border*/
	}
	

#golfimage { /*ok here is the div that holds the golf image*/
		margin: 0; padding: 0 0 5px 35px; /*padding top right bottom left*/
		}
		
/*below we position and style the rightside*/
		
#rightside {/*we float the div right*/
	float: right; 
	width: 180px; /*sets the width*/
	margin: 0; /*zero margin*/
	padding: 30px 25px 0 0; /*okay, padding top right bottom left*/ 
	}



#rightside p { /*styles the p element within rightside div*/
	color: #fff; /*sets the font colour to white*/
	margin: 0 20px 10px 6px; /*margin top right bottom left*/
	font:11px arial, verdana, georgia, serif; /*sets the font size and family*/
	}
	
/*below we are styling our rightside list and links*/
#rightside ul {
	list-style-type: none; /*removes the bullet image*/
	padding:0; /*sets the padding to zero*/
	margin: 0 0 12px 0; /*top right bottom left margins*/
	font: 11px arial, verdana, sans-serif;/*sets font size and family*/
	color: #787870; /*sets the font colour*/
	}

#rightside li {
	line-height: 20px; /*line height set to 20 pixels*/
	color: #386900; /*sets the font colour*/
	}

/*links styling starts here*/
#rightside li a, 
#rightside li a:link, 
#rightside li a:active {
	color: #FFF; /*sets the font colour to white*/
	text-decoration: none;/*removes the default link underline*/
	display: block; /*sets the display to block*/
	border-bottom: 1px dotted #FFF; /*sets the bottom border styles*/
	padding: 2px; /*sets the padding to 2 pixels*/
	background: #54814A; /*sets the background colour*/
	height: 1%; /*this is a hack for ie, its a silly browser and we need to place this in our style sheet so ie will understand the "display: block;*/
	}
	
#rightside li a:visited {
	color: #FFF; /*sets the font colour to white*/
	border-bottom: 1px dashed #BE8585; /*sets a bottom border*/
	}

#rightside li a:hover { /*styles the link hover state*/
	color: #FFF;/*sets the font colour to white*/
	border-bottom: 1px solid #B7E810;/*sets a bottom border*/
	background: #A8BB52; /*sets the background colour*/
	}
	

	
#rightside h1, h2 {
	color: #EDEB9E; /*sets the font colour*/
	font: normal 17px georgia, arial, verdana, sans-serif; /*sets the font weight size and family*/
	margin: 0; padding: 0;/*sets the margins and padding to zero*/
	}
	
#rightside h2 { /*styles h2 within rightside*/
	font-size: 14px;
	color: #54814A;
	}
	
#contentbottom{/*this div displays the contentbgbottom.jpg image*/
	width: 1000px;/*sets the width*/
	height: 43px; /*sets the height*/
	clear: left; /*clears any floats to the left*/
	background: url(images/contentbg_bottom.jpg) no-repeat;/*sets the background image path and image to not tile*/
	}	
	
#footer {
	height: 43px; /*sets the height of the footer div*/
	background: url(images/footer.jpg) no-repeat; /*sets the path to the footer background image*/
	}
	
#footer p { /*here we style the P element within footer div*/
	font:12px arial, verdana, georgia, serif;
	text-align: center; /*aligns the footer p element centre*/ 
	color: #555A54; /*sets the font colour*/
	margin: 0;/*sets the margin to zero*/
	padding: 11px 0; /*here we are basically positioning the p element within the footer we have given the p element top padding to position the text*/
	}
/*below we are styling the footer links*/
#footer a, 
#footer a:link, 
#footer a:active { 
	color: #54814A; 
	text-decoration: none;
	}

#footer a:hover {
	color: #FFF;
	background: #7B0A0A;
	background-color: #3C6A07;
	}
	

		
/* ------------- Navigation ------------------------------------------------------------------------------------------------------------------*/

#navcontainer {	margin: 2px 0; 
padding: 0 0 0 175px;}/*positions our links 100px left*/

#navcontainer ul {
	list-style: none; /*removes the bullet*/
	padding: 0; /*sets the padding to zero*/
	margin: 0; /*sets the margin to zero*/
	}

#navcontainer li { /*here we are positions and sizing our links*/
	float: left; /*this floats the li left*/
	width: 102px; /*sets the width for our nav links*/
	height: 32px;/*sets the height*/
	margin-left: 3px; /*sets a left margin*/
	padding: 3px;/*sets the padding to 3pixels*/
	}

	
#navcontainer li a, #navcontainer li a:link, #navcontainer li a:active, #navcontainer li a:visited {
	display: block;/*display block as to create a button efect*/
	height: 40px;/*sets the height*/
	padding: 10px 0;/*padding top set to 10px*/
	margin: 0;/*zero margins*/
	color: #FCFCFC;/*sets the link font colour*/
	text-decoration: none;/*removes the underline*/
	text-align: center;/*centers the text*/
	font: bold 12px/18px arial, sans-serif;/*sets the font weight, size, line height and family*/
	background:#8FAA7D url(images/topnavbglink.jpg) no-repeat;/*sets the bg colour and path to the bg image*/
	} 
	
#navcontainer li a:hover { /*sets the hover states*/
	color: #000; /*sets the hover state font colour to black*/
	background:#7FAD64 url(images/topnavbghover.jpg)  no-repeat;
	}
	
/* ------------- images class, this does not work in IE, also don't go mad with this just use it when needed or suited --------------------------------------------------------------------------------------------*/

.images {

}
.images:hover {
opacity: 0.7;
}

.textnav { 
	margin: 0 5px 15px; /*sets the margins, top right bottom left*/
    font:9px/140% arial, verdana, georgia, serif;/*this sets the font size, line height to 140%, gives our text room to breath and sets the font family*/
	}

.textnav a, 
.textnav a:link, 
.textnav a:active {
	color: #FFFFFF; /*sets the font colour to black*/
	text-decoration: none; /*removes the default underline from our links*/
	border-bottom: 1px solid #000; /*sets a solid 1px black bottom border */
	background: #A5BD4E; /*sets the background colour*/
	}
	
.textnav a:visited { /*here we are styling the visited links*/
	color: #FFFFFF; 
	border-bottom: 1px dotted #000; 
	text-decoration: none;
	}

.textnav a:hover { /*styles the link hover states*/
	color: #386900; /*font colour*/
	background: #A8BB52; /*background colour*/
	border-bottom: 1px solid #FFF;/*sets a solid 1px bottom border*/
	}
.ImageTitle {
	margin: 0 5px 15px;
	font:bold 14px/140% arial, verdana, georgia, serif;
	color: #54814A;
}