@charset "utf-8";
/* CSS Document */

body {
	margin:0; /*Margin and Padding set to zero- will remove any page margins*/
	padding: 0; /*See above*/
	font-family: Arial, Helvetica, sans-serif; /*the basic font for the whole site*/
	background-color:#0099D8;	/*the bright blue color of the club, outside the wrapper*/
	text-align:center; /*A1. to align the website in the centre of the page, place this code here*/
}
/*********THE WRAPPER HOLDS THE ENTIRE SITE, EXCEPT FOR THE BODY *****************/
.wrapper { /*this is the white frame and blue gradient holding the site within it*/
	text-align:left; /*A2 not sure if this is also supposed to make the page align in the middle - but it is definately needed! */
	position:relative; /*this is only creating a reference point for the position:absolute (for the colLeft, colRight, colCenter)-does it make a difference if I delete it though? */
	margin-left:auto; /*A2. to align the website in the centre of the page, put this code in */
	margin-right:auto; /*A2. to align the website in the centre of the page, put this code in */
	/* It didn't make a difference to the site whether I deleted margin-left:auto; or margin-right:auto; or both of these properties all together.  I will leave it just in case*/
	background-image:url(../images/bgImage.jpg); /*the blue linear gradient, and white rectangle. The site sits inside this image. */
	background-repeat:repeat-y; /* to repeat down the page, not across */
	width: 1024px; /*the width of the background image*/
	/*height:768px; /**********IS THIS NECESSARY??*******/
}

/*************THE TOP OF THE SITE, INCLUDING THE NAVIGATION MENU****************/
.banner {
	background-image:url(../images/bannerWOwhite.jpg); /*the club banner*/
	width:900px; /*width of the banner*/
	height:326px; /* height of the banner*/
	background-repeat:no-repeat; 
	margin:0 0 0 62px; /*top, right, bottom, left - this aligns the #banner to sit correctly within the #wrapper */
	padding:0;
}

/*********THE FOLLOWING HOLDS THE CONTENT BELOW THE BANNER & ABOVE THE FOOTER **********/
.contentBox {
	/*position:relative; DONT THINK THIS IS NEEDED*/
	width:900px; /*this box is holding colLeft, colCenter, and colRight */
	height:396px; /*this is affecting the colLeft, colCenter, colRight divs */
	margin:0 0 0 52px; /*this aligns the #contentBox to sit correctly within the #wrapper */
	padding: 0 10px; /*the padding is inside the contentBox - pushing the colLeft etc away from the edge. */
/*	background-color:#CCCCCC; /*THIS BG IS A GUIDE BOX, REMOVE IT WHEN SITE IS COMPLETE */
}
.contentBoxClubs { /*THIS IS FOR THE INTERNAL CLUB PAGES AND DINING*/
	width:900px; /*as above*/
	height:300px; /*this reduces the height of the colLeft, colCenter, and colRight divs - nothing to do with the footer*/
	margin:0 0 0 52px; /*as above*/
	padding:0 10px; /*as above*/
	}

.colLeft
{
	position:absolute; /*this code is absolutely required*/
	width: 150px;
	height:267px; /*not necessarily required*/
	margin:0; /*around the outside of this 150x393 box*/
	float: left; /*this code doesn't seem to make a difference*/
	left: 67px;
	top: 331px;
/*	background-color:#00FF00;  /* THIS BG IS A GUIDE BOX, REMOVE IT WHEN SITE IS COMPLETE */
}
.colCenter {
	position:absolute; /*this code is absolutely required*/
	width:560px;
	height:393px; /*not necessarily required*/
	margin:0 0 0 160px; /*left margin is needed to position the box*/
	float:left;
	padding:0 10px; /*right and left padding*/
	top: 330px;
/*	background-color:#CC9900;  /* THIS BG IS A GUIDE BOX, REMOVE IT WHEN SITE IS COMPLETE*/
}

.colRight
{
	position:absolute; /*this code is absolutely required*/
	width: 150px;
	height:393px; /*not necessarily required*/
	margin:0 0 0 750px; /*left margin is needed to position the box*/
	float: left;
	left: 59px;
	top: 329px;
/*	background-color:#00FF00; /* THIS BG IS A GUIDE BOX, REMOVE IT WHEN SITE IS COMPLETE*/
}
.colSingle { /*this div is used in the What's On page it is keeping the Firefox browser happy*/
	position:absolute; 
	width:900px;
	height:393px;
	margin:0;
	float:left;
}

.colSingle p {
	font-size:12px;
	}

.footer {
	clear:both; /* should clear the 3 columns above it but when I delete this property, the footer remains where it should be */
	height:46px; 
	width:900px;
	margin:0 0 0 62px; /*this aligns the #footer to sit correctly within the #wrapper */
}
.footerClubs {/***THIS IS FOR THE INTERNAL CLUBS AND DINING PAGES*****/
	clear:both;
	height:182px;
	width:900px;
	margin:0 0 0 62px;
	}

/*********************** MAIN NAVIGATION***********************/
.navigation { 
	font-family: Arial, Helvetica, sans-serif; 
	position:absolute; /*If I remove this, the #banner drops 300px from the top of the screen, when viewed in Firefox. The #wrapper is position:relative*/
	margin:0; /*required?*/
	width: 900px; /*not sure if this is needed*/
	padding:0; /*required?*/
	}
.navigation ul {
	list-style-type:none; /*removes the dot points*/
	margin:290px 0 0 0; /*this is to move the nav buttons as a whole, down the screen*/
	padding:0 20px 0 20px; /*this places padding around the nav buttons as a whole*/
	border:0; /*no border around the navigation menu*/
	height:40px; /*not sure if this is needed, it has no impact to IE or FF.*/
	}
.navigation li {
	padding: 0 10px 0 15px; /*this places padding around each nav button (trbl)*/
	font-size: 12px;
	display:inline; /*this is where to put this statement. The nav buttons will sit horizontally on the screen*/
}
.navigation a {
	text-decoration:none; /*removes the underline from the text links*/
	margin:0;
	background-repeat:no-repeat; /*ram will only appear once during hover and active*/
	color:#fff;
	padding-left:22px; /*moves the text to the right of the ram*/	
	}
.navigation a:hover {
	color:#fff;
	background-image:url(../artwork/homePage/ram_head.png);
	background-position:left;
	}
.navigation li a.current {
	background-image:url(../artwork/homePage/ram_head.png);
	color:#fff;	
	}	
.navigation a.current:hover {
	cursor:default; /*this will not change the cursor to a hand when you hover over the current active link*/
	}	
/*************************** END OF NAVIGATION***************************/

/*******************HEADINGS AND CONTENT INFO*****************/
h1 { /*this will be the header text for each of the pages*/
	font-size:20px;
	color:#0f3C69;
	border-bottom:1px solid #0f3c69;
	margin-bottom:10px; /*I AM GUESSING WITH THIS AT THE MOMENT, IT IS TO REMOVE THE SPACE BELOW THE FONT*/
	margin-top:10px; /*I AM GUESSING WITH THIS AT THE MOMENT, IT IS TO REMOVE THE SPACE ABOVE THE FONT*/
	font-weight:normal;
}
h2 {
	font-size:14px;
	color:#0f3c69;
	margin-top:14px; /*I AM GUESSING WITH THIS AT THE MOMENT, IT IS TO REMOVE THE SPACE BELOW THE FONT*/
	margin-bottom:5px; /*I AM GUESSING WITH THIS AT THE MOMENT, IT IS TO REMOVE THE SPACE BELOW THE FONT*/
	padding-left:10px;
	font-weight:normal;
}
img {
	border:none;
	}
.tradinginfo p {
	font-size:11px;
	padding-left:10px;
	margin-top: 0;
	margin-bottom: 2px;
	}
.tradinginfo a {
	font-size:9px;
	color:0099d8;
}
.tradinginfobold {
	font-weight:bold;
	}
.colCenter p, ul {
	font-size:12px;
	list-style-type:none;
}
.colCenter ul {
	margin-top:0px;
	text-indent:20px;
}
.colRight img {
	float:left; 
	margin-bottom:7px; 
	border:none;
}
/******************************END OF HEADINGS AND CONTENT INFO****************************/

/***************SUB NAVIGATION MENU******************************/
.subnav { 
	width:150px; /*width of the bg image and the content for this column*/
	border:0;  /*no border required*/
	margin:0; 
	padding:0;
	}
.subnav ul {
	list-style-type:none; /*removes the dot points*/
	border:0; /*no border around the subnav menu*/
	margin:0; /*margin values will move the whole menu, not individual buttons*/
	padding:0; /*padding values will move the whole menu (text, ram, and bg)*/
	}
.subnav li a {
	display:block; /*this enabled me to move the text down without moving the bg image*/
	text-decoration:none; /*no underline on the links*/
	color:#FFFFFF; /*text*/
	margin:0; /*a margin value puts a margin around each bg image*/
	padding:0; /*irrelevant*/
	background-image:url(../artwork/internalclubs/intClubsBg2.png); /*the bg image*/
	background-repeat:no-repeat; /*self explanatory*/
	height:22px; /* this included with the padding creates the height for the bg image*/
	padding: 7px 0; /*this included with the height creates the height for the bg image*/
	text-indent: 35px; /*moves the text right so it doesnt cover the ram head*/
	font-size:12px; /*not needed for font to be 12px, but might be needed for validation*/
	}
.subnav li a:hover {
	background-position: -150px; /*this shifts the bg image to show the ram head bg image*/
	}
.subnav li a.current {
	background-position: -150px; /*this shifts the bg image to show the ram head bg image*/
	}
.subnav li a.current:hover {
	cursor:default; /*this will not change the cursor to a hand when you hover over the current link*/
	}