/* CSS for print version of Coastal Spirit FC's webpages 2008 */
/* if two styles are specified for an element and there are conflicting properties, then the latter specified is the one used */
/* font colour is specified by the property "color" */
/* all CSS properties must end with a semi-colon */
/* margin is the amount of space between  the element and what it is contained in */
/* padding is the amount of space between the element and what it contains */
/* margin and padding use the order: top, right, bottom, left */
/* for an illustration of CSS box model, padding, margin etc see: http://www.yourhtmlsource.com/stylesheets/cssspacing.html */



body { /* this sets default text colour and back ground colour and puts a border around the page */
    color: #000000; /* black text*/
	background-color: #ffffff; /* white */
	
	}

 p, li, label, legend, #slideshow{ /* this sets the properties for body text */
	font-family: "Times New Roman", serif;
	padding-right:0.5em;
	padding-left:0.5em;
    font-size: smaller;
	font-weight: normal;
	}
	
	
#slideshow{ /* this sets the properties for the slideshow */
	font-family: Verdana, Arial, sans-serif;
	font-size: smaller;
	font-weight: normal;
	background-color: #ffff99; /* yellow */
	color: #000000;
		}	
	
 fieldset{ border:none;} /*ensures no border around form fields */

 legend{ /* this is here in advance of forms of other pages */
	color: #000000; /*black*/
	background-color: #ffffff;  /*white*/
	border: 1px solid #000000;	/*skyblue*/
	padding: 2px 6px;
	}	
	
 label{ /* this is here in advance of using forms on other pages */
	width: 7em;
	float: left;
	text-align: right;
	margin-right: 0.5em;
	display: block;
	}
	
 input, textarea{ /* this is here in advance of using forms on other pages */
	color: #000000; /*black*/
	background-color: #ffff99; /*yellow*/
	border: 1px solid #000000;  /*solid black border 1 pixel wide */
	}	
	
	
textarea{margin-left: 6.5em;}	/* this is here in advance of using forms on other pages */
	
input.submit{ /* this is here in advance of using forms on other pages */
 	margin-left: 6.5em;
	color: #ffff00; /*gold*/ 
	background-color: #000000; /*black*/
	border: 2px outset; /* outset gives it a 3d effect */
	font-weight: bolder;
	} 
	
	
h1{	 
	 vertical-align: middle;
	 white-space: nowrap; /*the text will not wrap but continue on same line unless an html line break is explicit in the code */
	 font-style: italic;
	 font-weight: bolder;
	 text-align: center;
	 font-size: xx-large;
	 margin: 0 160px 0 160px; /*forces top heading between logos */
	 padding: 0 0.5em 0 0.5em;
	 height: 123px; /*these absolute values are determined by image size */
	}

img.leftlogo{ /*this formats the position of the eft hand logo in the header */
	float: left; 
	padding: 0.5em; 
	display:inline;
	position: absolute;
	}

	
img.floatleft  { /*positions the image to left of other elements */
	float: left; 
	padding: 0.5em; 
	display:inline;
	} 

img.floatright  { /*positions the image to right of other elements */
	float: right; 
	padding: 0.5em; 
	display: inline;
	}

.subhead { /* this class is for the second line of our h1 banner headline - it makes the font size smaller */
	font-size: smaller; 
	font-style: italic;
	}
	
.headline {font-size: 300%;} /* this enlarges the h1 headline text 'Coastal Spirit FC' */


.crumbs { /*formats breadcrumbs, the string of links back to home page */
	font-size: 70%;
	font-style: italic;
	}

/*#mainbody {padding-top: 0.5em; */ /*puts whitespace between mainbody (middle column) contents and top border of column */
		/*}*/ 

#mainbody h2{margin-bottom: 0;
margin-top: 1%;
} /*removes space at of mainbody headlines */

#mainbody h2.notopmargin{margin-top: 0;} /*removes top margin from h2 */

#mainbody h2, #mainbody p, .newsdate{
	padding: 0 0 0 0.5em; /* puts a 0.5em space between element and left hand border of mainbody */
	}

#mainbody p {
	margin: 0 0 0.5em 0; /* puts a space between paragraphs in mainbody */
	} 	
	
.newsdate { /* formats the text of the date  for news and feature items */
	font-size: 70%; 
	color: #000000; /*black*/
	background-color: #ffffff; /*white */
	margin: 0;
	}	
	
#headpara { /*formats the paragraph in top banner below headline */
		color: #ffffff; /*white*/ 
		background-color: #000000; /*black*/ 
		border-bottom: 1px solid #000000; /*thin black border*/
		/*margin: 0 160px 0 160px; forces paragraph between logos */
		margin: 0 19% 0 19%;
	 	padding: 0 0.5em 0 0.5em;
		width: 60%; /*matches main body column width*/
		}
	
#headpara a:link{
		background-color: #000000; /*black*/
		color:  #99ccff; /*blue*/
		}		

#headpara a:visited{
		background-color: #000000; /*black*/
		color:  #ffffff; /*white*/
		}		

			
#mainbody h2 img{float: right;
				margin: 0.5em 0.25em 0.5em 1em;
				} /*floats images in mainbody headlines to right, margin pushes it to far right */

#mainbody h2.nofloat, #mainbody img.nofloat{float: none;} /*defines non-floating elements in mainbody */


#slideshowbg{ /*formats the container for the background to the slideshow section*/
	width: 100%; /*container takes up all of the mainbody width*/
	color: #000000; /*black*/
	background-color: #ffff99; /*yellow*/
	border-bottom: none;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	}	

#slideshow{ /*formats the container for the slideshow*/
	/*width: 443px; width absolute defined by image size = image width */
	border: none; /*amended */
	padding: 0 0 1em 0;
	margin: 0.5em 10% 1em 10%;
	height: auto; /*height defined by image height */
	background-color: #ffff99; /* yellow amended */
	color: #000000;
	overflow: hidden; 
	}

#SLIDESIMG{
	 /*width: 443px; width absolute defined by image size = image width */
	border: none; 
	padding: 0 0 0 0;
	margin: 0.5em 10% 0 10%;
	/*height: 244px; height defined by image height */
	background-color: #ffff99; /* yellow */
	color: #000000;
}

#SLIDESTEXT{/*added amended*/
	/* width: 443px; width absolute defined by image size = image width */
	border: none; 
	padding: 0 0 0 0;
	margin: 0 10% 0 10%;
	background-color: #ffff99; /* yellow */
	color: #000000;
}	
	
img {border: none;} /*removes images from borders */

.strongtext {font-weight:bolder; } /*strong text, italics, smalltext classes are here due to my using them in lots of other sites and I'm bound to accidentally use them on this site, they do 'what it says they do on the tin' */

.italics {font-style: italic;}

.smalltext {font-size: 67%;}

#navigation .smalltext {font-size: smaller;} /*further shrinks the small text in navigation column */


a:link { /*formats text of hyperlinks */
	color: #3399ff; /*blue*/
	background-color: #ffffff; /*white*/
	font-size: smaller;
	font-weight: normal;
	}

a:visited { /*formats text of hyperlinks that the user has already visited */
  	color: #000000; /*black*/
	background-color: #ffffff; /*white*/
	font-size: smaller;
	font-weight: normal;
	}

a:hover { /*formats text of hyperlinks on mouseover */
	color: #ffff00; /*gold*/
	background-color: #000000; /*black*/
	}

	.titlelink{font-size: 300%;}
	
.titlelink a:link, .titlelink a:visited, .titlelink a:hover{ /*formats text of hyperlink when banner headline is used on other pages to link to homepage */
	color: #ffff00; /*gold*/
	background-color: #000000;  /*black*/
	text-decoration: none; /*removes underline */
	font-weight: bolder;
	font-size: 100%;
		}		
	
	
#header{ /*formats the container for banner headline and top paragraph */
	clear:both; /*nothing floats around this container */
	width:100%; 
	color: #ffff00; /*gold*/
	background-color: #000000;  /*black*/
	padding-top: 0; 
	margin-top: 0; 
	padding-bottom: 0; 
	margin-bottom: 0;
	
	
	}
	
#navigation{ /*sets width and position of navigation column */
 
	float:left; /*puts navigation column on left hand side */
	/* width: 15%; */
		}

#navigation, #rhcolumn { /*formats left and right hand columns */
display: none;
	padding-top:0.5em; 
	background-color:#ffff99; /*yellow*/
	color:#000000; /*black*/
	overflow: visible;
	}


* html #navigation, * html #rhcolumn {	overflow: auto;}
	
#button { /*formats the container for list of navigation buttons */
	width: auto; 
	padding: 0;
	font-weight: bolder;
	margin-left: 10%;
	margin-right: 2%;
	}
	
#button ul{
	padding: 0 0 0 0;
	margin: 0;
}	
	
#button li { /*formats each navigation button */
	list-style-type: none; /*removes bullet from list element */
	padding-right: 0;
	font-weight: bolder;
	padding-left: 0;
	text-indent: 0;
	margin-bottom: 0;
	margin-top: 0;
	}

#navigation a:link, #navigation a:visited { /* formats link text for navigation buttons */
	font-size: 100%; 
	font-weight: bolder;
	color: #3399ff; /*blue*/ 
	background-color: #000000;  /*black*/ 
	}


#button li.currentbutton {/*formats navigation button for current page*/
	display: block;
	padding: 0 0 0 0.5em;
	border: 2px solid #3399ff; /*blue*/
	background-color: #ffff99; /*yellow*/
	color: #000000; /*black*/
	width:auto;
	margin-bottom: 0.5em;
	}
	
#button li a { /* formats navigation button */
	display: block;
	padding:0 0 0.5em 0.5em;
	border: 2px solid;
	background-color: #000000; /*black*/
	color: #3399ff; /*blue*/
	width:auto;
	margin-bottom: -0.5em;
	}

* html #button li a { /* formats navigation button for IE */
	margin-bottom: -1.25em;
	}
	
#button li a:hover { /*formats navigation button on mouseover*/
	background-color: #ffff00; /*gold*/
	color: #000000; /*black*/
	}	
	
#search input{ /*sets properties for search form input fields*/
	color:  #000000; /*black*/
	background-color: #ffffff; /*white*/
	}
		
form {padding: 0.5em 0.5em 0 0.5em;} /*spaces the form*/

#search input.butt { /*formats the button for the search*/
	background-color: #000000; /*black*/
	color: #3399ff; /*blue*/
	text-align: center;
	font-weight: bolder;
	}
	
#rhcolumn{ /*sets position and width of right hand column*/
	float:right; 
	width:20%;
	}
	
#rhcolumn h4{margin: 0;}	

table{ /*formats tables*/
	border: 1px solid #000000; /*black*/
	margin: 0.5em;
	}	

th, td, tr, caption { /*formats text within tables */
	font-family: Verdana, Arial, sans-serif;
	font-size: small;
	font-weight: normal;
	}
	
tr.tablecoast  { /*formats text for Coastal Spirit rows of tables */
	color: #ffff00; /*gold*/
	background-color: #000000; /*black*/
	}	

tr:hover{ /*formats table rows on mouseover, doesn't work in IE */
	background-color: #ffff00;
	color: #000000;
	}

tr.playoffrelegation td{border-top: 1px dashed #000000;} /* dashed black border on top of table row for relegation playoff position */
	
tr.autorelegation td{border-top: 1px solid #000000;}	/* solid black border on top of table row for relegation playoff position */
			
#mainbodycol{ /* formats container for middle column*/
	float:right;
	position: relative;
	width: 98%; 
	background-color: #ffffff; /*white*/
	color:#000000; /*black*/
	overflow: auto;
	}
	
#mainbody{
	border: none;
	}	

#technical{ /*formats container for bottom footer*/
	clear:both; /*pushes container to bottom*/
	border: 1px solid #000000; /*black*/
	width: 100%; 
	font-size:smaller;
	}

h1, h2, h3, h4 { /*formats headings*/
	font-family: Georgia, Verdana, Arial, sans-serif;
	padding-left:0.5em;
	padding-right:0.5em;
	}

#rhcolumn a:link, #technical a:link  { /*formats links in technical container */
	color: #3399ff; /*blue*/
	background-color: #ffffff; /*white*/
	}	
	
#rhcolumn a:visited,  #technical a:visited { /*formats visited links in technical container */
	background-color:#ffffff; /*white*/
	color:#000000; /*black*/
	}
	
#technical a:link,  #technical a:visited {font-size: 100%;} /*formats links in technical container */

#sponsor a:link { /*formats links in sponsor container*/
	background-color:#ffffff; /*white*/	
	color:#3399ff; /*blue*/
	}

#sponsor a:visited { /*formats visited links in sponsor container*/
	background-color:#ffffff; /*white*/
	color:#000000; /*black*/
	}

#newsrss, #teamtalkrss{ /*formats rss reader containers*/
	padding-left: 0.5em;
	padding-right: 0.5em;
	}

	
#techpic{float: right; } /*pushes the rh content of the footer to the right*/

#technical a:hover, #rhcolumn a:hover, #navigation a:hover { /*formats  link mouseover*/
	background-color: #ffff00; /*gold*/
	color: #000000; /*black*/
	}	

#techtext{ /*sets position of left hand content of technical container*/
	position: relative; 
	float:left;
	}	
	
.floatright { /*used to position site map link to right of search form and slideshow in right of mainbody column*/
	float:right;
	font-family: Verdana, Arial, sans-serif;
	}	

img.validcss { /*formats validcss image*/
	border:0;
	width:88px;
	height:31px;
	}
	
.prefinaltable td {vertical-align: top;} /*tournament table layouts */
table.pretables, table.prematch, table.prefinaltable, .pretables tr, .pretables td, .pretables th{border: 1px solid #ffff00;} /*gold border*/
tr.pretablecoastal  { /*colours for table rows featuring Coastal Spirit */
	color: #000000; /*black */
	background-color: #ffff00; /*gold */
	}	
.pretables caption, .prematch caption, .prefinaltable caption{
font-size: 67%;
font-weight: bolder;
	}
	
.normallink a:link, .normallink a:visited{font-size: 100%;}

.code{color: #000000; 
background-color:#ffffff;
font-family: Courier, "Times New Roman", serif;
}


	
#slideshow a:link{ /*formats the container for the slideshow*/
	background-color: #ffff99; /* yellow */
	color: #3399ff; /*blue*/
	}
	
#slideshow a:visited{ /*formats the container for the slideshow*/
	background-color: #ffff99; /* yellow  */
	color: #000000;
	}	
	
#cleartech{position:relative;clear: both;}	

#yahooweather{font-size: 75%;}

#yahooweather a:link {
			background-color: #ffff99; /*yellow*/
			color: #3399ff; /*blue*/
			font-weight: lighter;
			}
			
#yahooweather a:visited {
			background-color: #ffff99; /*yellow*/
			color: #000000; /*black*/
			}
			
.urgent { color: #ff0000; /*red*/
			background-color: #ffffff; /*white*/
			}
			
.bodybox{ /*this class is for putting a box quarter of the width in the main page body*/
		float: right;
		border: 1px dashed #000000; /*black*/
		width: 25%;
		}