/* 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 100% verdana, arial, georgia, serif;
	color: #000;
}

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: #EDE9E7; /*  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 -------------------------------------------------------------*/
			
div.UpperRight			{
		position:absolute;
		left:100%;
		top:0px;
		overflow:visible;
		height:100px;
		width:100px;
		/*background-image:url(images/whiteright.gif);*/
		background-repeat:no-repeat;
		background-position:0px 0px;
		background-color:transparent;
		margin:0 0 0 -100px;
		padding:0;
		/*color:#000;*/
		font-family:helvetica,verdana,arial,tahoma,sans-serif;
		z-index:1000000000;
		border:0px none;
		float:none;
			}
			
#pagecontainer /* pagecontainer div is the div that holds all the other divs.
we have set the width to 750 pixels*/
 {width: 750px;
 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 { /* header div in which we have placed our header.jpg image*/
	position: absolute;
	left: 0; /*positions our header div zero space left*/
	margin-top: 23px; /*sets a margin from the top of the page, gives the header a bit of room as we think it will look a bit silly glued to the top of the page*/
 	} 
 	
#navwrapper { /*see bottom of style sheet for the link styles*/
	width: 750px;/* 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: 750px; /*sets the width to 750 pixels*/
	left: 0; /* positions the div zero left*/
}

 
#contentwrapper {
	width: 750px;/* 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: 433px;/* 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: 700px;} /* sets the width of our left column*/


#content h1, h2, h3, h4 {
	color: #333333;
	font-weight: bold;
	margin: 0 0 5px 33px;
	padding: 0;
	font-size: 20px;
	}
#content h2	{
	font-size: 17px;
	font-weight:bold;
	color: #333333;
	margin: 0 0 5px 36px;
}
#content h3	{
	font-size:15px;
	color: #333333;
	margin: 0 0 5px 36px;
}


#content p { /*this styles our content p element*/
	margin: 0 35px 15px 35px; /*sets the margins, top right bottom left*/
    font:12px/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*/
	}


#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: #333333; /*sets the font colour to dark brown*/
	text-decoration: none; /*removes the default underline from our links*/
	border-bottom: 1px solid #000; /*sets a solid 1px black bottom border */
	
	}
	
#content p a:visited { /*here we are styling the visited links*/
	color: #333333;
	border-bottom: 1px dotted #000;
	text-decoration: none;
	}

#content p a:hover {
	border-bottom: 1px solid #FFF;
	}
	
/* Table content*/

#content tbl { /*this styles our content p element*/
	
    font:12px/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*/
	}


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

#content tbl a:hover {
	border-bottom: 1px solid #FFF;
	}
	
	

#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*/
	
	}
	

	
#rightside h1, h2 {
	color: #EDEB9E; /*sets the font colour*/
	font: normal 17px arial, verdana, georgia, 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: 750px;/*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: #ffffff; /*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 150px;}/*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:#ffffff 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: #ffffff; /*sets the hover state font colour to light blue*/
	background: 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;
}


/*This template is intended to give you a basic understanding of how you can create a simple, yet effective css layout website. We have explained all there is to explain here and we have ommitted some comments which just repeat
themselves please do not contact us for any answers that you are able 
to obtain from here http://www.w3schools.com/css/default.asp  we cannot possibly reply to questions
that are available elsewhere. Here is a link to get you started, remember to read, and then read again.
http://www.w3schools.com/css/default.asp  Have fun and we wish you the best of luck*/