/* BASIC */

/* Define the main body characteristics */
body {
	margin: 0px;											/* fix IE issues by defining margin */
	padding: 0px;											/* fix IE issues by defining padding */
	font: 82% Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;											/* set text color to White */
	background: #E4E4E4;									/* set background colour to silver */
}

/* LAYOUT */
#wrapper {									/* Define the wrapper background to hold everything in shape */
	width: 1000px;							/* set maximum width to 1000pixels to fit in the menu bar */
	margin-right: auto;						/* if the website is resized then all content in this shape */
	margin-left: auto;						/* will also move accordingly */
	border-right: 5px solid #3F3F3F;			/* set right outside border to slight black and 5pixels wide*/
	border-left: 5px solid #3F3F3F;			/* set left outside border to slight black and 5pixels wide */
	background: #C40000;					/* set the background colour to a shade of red */
	text-align: left;							/* set all text to align to the left */
}

p {	
	margin: 0px;							/* Set no padding and no margin as default for every paragraph */
	padding: 0px;
}

#banner {																				/* define the Banner Image with no repeat */
	height: 130px;																		/* Banner image is 120 pixels high - add 10 pixels to provide space between image and menu bar */
	background: url('images/Banners/Bulldogs-Top-Banner.gif') no-repeat top center;		/* Load banner image, dont repeat, place center top of banner placeholder */
}

#menuspacer{																/* Used to insert a space between the menu bar and the content */
	height: 1px;																/* Need to set the basic height, otherwise nothing shows */
	background: url('images/banners/menu-line.jpg') repeat-x left top;    		/* Need to use an image to underline */
}

#copyright {									/* Define the Copyright area at the bottom of each page */
	border-top: 1px dashed #999999;		/* set top border to a dashed line */							
	margin-right: 0px;						/* need to force the text left */
	font-weight: bold;						/* set the font to bold */
	color: #FFFF66;							/* set the font color to a yellowish */
	padding: 5px 5px 5px 15px;  				/* top, right, bottom, left padding */ 
	clear: both;								/* clear all floating to left and right */
}

#flashcontent {								/* Define the width and height for the Gallery Simpleviewer */
		width: 99%;
		height: 480px;
}

#main {										/* Define the Main body of text */
	width: 980px;
	float: left;								/* Will be held by the wrapper */
	margin-right: 20px;						/* set every right margin to 20 pixels */
	margin-left: 10px;						/* set every left margin to 20 pixels */
	margin-top: 30px;						/* set the margin between the menu bar and the text body */
	display: inline;							/* keep as a block */
}

#main a {									/* Define the Main anchor links */
	text-decoration: none;					/* set no anchor lines to be show */
	color: #152D6A;							/* set the color to a Blueish color */
}

#main h1, #GameRules_Section1 h1, #GameRules_Section2 h1 { 			/* Define the settings for every HEADING 1 on these Div id sections*/
	font: normal 2.5em Impact, "Arial Narrow", Helvetica, sans-serif;		/* set the HEADING 1 to 2.5 emphasised and use Impact font group */
	color: #152D6A;														/* set the font color to a Blueish color */
	margin-top: 15px;													/* make a 15 pixel space between the other items and the heading */
	margin-bottom: 5px;													/* make a 5 pixel space between heading and other items */
	border-bottom: 2px solid #B2F511;									/* display a 2 pixel solid line */
	text-transform: uppercase;											/* transform test to Uppercase */
	letter-spacing: 1px;													/* use 1 pixel spacing between letters */
	word-spacing: 5px;													/* use 5 pixels spacing between words */
}

#main h2, #GameRules_Section1 h2, #GameRules_Section2 h2, 			/* Define the settings for every HEADING 2 on these Div id sections*/
#RefSignals h2, #Sponsor_info h2, #Game_Heading h2, 
#Player_Positions h2, #Field_Heading h2, #Sponsor_Info h2, 
#Roster_Info h2{

	font: normal 2.5 em Georgia, "Times New Roman", Times, serif;		/* set the HEADING 2 to 2.5 emphasised and use Georgia font group */
	color:  #152D6A;													/* set the font color to a Blueish color */
	margin-top: 15px;													/* make a 15 pixel space between the other items and the heading */
	margin-bottom: 3px;													/* make a 3 pixel space between heading and other items */
}

#main ul, #GameRules_Section1 ul, #GameRules_Section2 ul{				/* for all Unordered Lists in these Div ids */
	padding-left: 60px;           											/* Indent the list using padding */
	
}

#news {																/* Define the Quick News Box Area */
	float: right;															/* send the box to the right hand side of the screen */
	width: 170px;														/* set the width of the box */
	padding-bottom: 1px;												/* add padding to the bottom of the box */
	margin-top: 50px;													/* set where the box starts to display on the screen */
	border-bottom: 2px solid #000000;											/* show a 2 pixel black solid line at the bottom */
	border-left: 2px solid #000000;												/* show a 2 pixel black solid line at the left */
	border-top: 2px solid #000000;												/* show a 2 pixel black solid line at the top */
	border-right: 2px solid #000000;												/* show a 2 pixel black solid line at the right */
	background: url('images/Banners/bg_newshead.png') no-repeat left top;		/* Display the news Clock background */
}


#tbl_Roster_Varsity th {									/* Roster Table Headings */
	font-weight: bold;									/* set the default font to bold for all Table headings */
}
#tbl_Roster_Varsity td{									/* Roster Table text */
	margin-left: 5px;									/* set the left margins */
	border-style: none;									/* do not shown any lines in between the cells */
	font: 82% Verdana, Arial, Helvetica, sans-serif;		/* set the default font to Verdana group */
}

.tbl_row_No, .tbl_row_Pos, .tbl_row_Class, .tbl_row_Height, .tbl_row_Weight {			/* Roster Table Columns - No, Pos, Class, Height, Weight */
	text-align: center;																/* center the text */
	font: 82% Verdana, Arial, Helvetica, sans-serif;									/* set the default font to Verdana group */
}
.tbl_row_Surname, .tbl_row_Forename, .tbl_row_School {							/* Roster Table Columns - Surname, Forename, School */
	text-align: left;																	/* align the text to the left of the cells*/
	font: 82% Verdana, Arial, Helvetica, sans-serif;									/* set the default font to Verdana group */
}

#Game_LeftCol{											/* Define the Games History Left Column Area */
	float: left;											/* send the box to the left of the screen */
	width: 250px;										/* set the default width of the left column */
	padding-bottom: 5px;								/* place padding at the bottom */
	margin-left: 20px;									/* set the left margin */
	margin-right: 20px;									/* set the right margin */
}
#Game_RightCol {										/* Define the Games History Right Column Area */
	float: right;											/* send the box to the right of the screen */
	width: 270px;										/* set the default width of the left column */
	margin-right: 20px;									/* set the right margin, padding comes from the Landmarks column */
}
#Game_Landmarks {									/* Define the Key Landmarks Column */
	float: left;											/* send the box to the left of the Right Column */
	width: 400px;										/* set the default width of the center column , to show picture*/
	padding-right: 5px;									/* place padding at right hand side of the center column, forces spacing between center, right columns*/
	margin-bottom: 20px;								/* set the bottom margin */
}
#Game_Landmarks p {									/*Define the Key Landmark paragraph p settings*/
	font-size: 74%;										/* overiding the main body setting */	
	margin-left: 5px;									/* set the left margin for every paragraph p */
	line-height: 15px;									/* set the line height to place spacing between the smaller text */
}

#GameRules_Section1{
	float: left;
	width: 80%;
	margin-left:10px;
	margin-top:30px;
}
#GameRules_Section2 {
	float: left;
	width: 98%; 
	margin-left: 10px;
	margin-right: 10px;
}

#Field_Diagram {
 	width: 390px; 
 	float: left;
 	margin-left: 20px;
 	margin-right: 20px; 
	margin-top: 30px;
}
#Field_Text  {
	width: 530px; 
	float: right; 
	margin-left: 10px;
	margin-right: 10px; 
	margin-top: 30px;
}
#Field_Text b, #Field_Text i  {					/* Define the font size for Bold in each column */
	color: #FFFF00;
}

#Directions  {
 	width: 47%; 
 	float: left;
 	height: 160px;
 	margin-right: 20px; 
 	margin-bottom: 30px;
}
#Contact_Us {
	width: 47%;
	float: right;
	height: 160px;
	margin-right: 20px;
	margin-bottom: 30px;
}


/* Headlines  */
.topic {
	padding-top: 2px;
	padding-left: 10px;
	border-bottom: 1px dotted #CCCCCC
}

/* NEWS */
#news .story {
	background: url('images/Banners/bg_story.png') repeat-y;
	color: #FFFFFF;
	padding: 5px;
	border-bottom: 1px dashed #AAEB11;
	display: block;
	text-decoration: none;

}
#news span.title {
	font-size: 1.1em;
	font-weight: bold;
	display: block;
	text-decoration: underline;
	color: #FFCC00;
}
#news h2 {                                       			 /*Quick News Title */
	color: #333333;
	font-size: 1.3em;
	text-transform: uppercase;
	padding-top: 5px;
	padding-left: 5px;
}
#news h2 span  {
	position: absolute;
	right: 10px;
	height: 48px;
	width: 48px;
	top: 4px;
	z-index: 10
}


/* Photogallery Sections */
/* Code provided by DynamicDrive.com */

.gallerycontainer{                         /* possibly delete **/
	background: white ;
}

.thumbnail img{
	border: 1px solid white;
	margin: 0px;
}

.thumbnail:hover{
	background-color: transparent;
}

.thumbnail:hover img{
	border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
	position: absolute; 
	left: 450px;
	background: yellow;
	padding: 2px;
	border: 1px dashed gray;
	visibility: hidden;
	color: black;
	text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
	border-width: 0;
	padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
	visibility: visible;
	top: 360px;
	left: 450px; /*position where enlarged image should offset horizontally */
	z-index: 50;
}