/* CSS Document */
/*In this css file I have set up all the instructions for this website with regard to font styles, fornt types font weight, colors and alignment of items*/

/*Body is the container for the entire site. The main background color is set with this tag. for the pages and the color of the font (set at white), I have no margin or padding for this tag so it goes to the edges of the screen*/
body {
	background-color:#222;/*background color of body of webpages*/
	color:#FFFFFF;/*color of font on body of webpages*/
	font-family:Verdana, Arial, Helvetica, sans-serif;/*font family used in body of webpages*/
	margin:0;/*There is no margin outside this container*/
	padding:0;/*There is no padding on the inside of this container. NB By setting the usable space on the screen(body) to zero you are controling the body to behave the same way on all web browsers*/
	}
td	/*td means Table Data!!! and defines a cell*/
{
	vertical-align:top; /*This aligns the contents of the cell at the top*/
	padding:5px 0 0 5px;/*The gives a 5 pixel margin at the top of the cell and on the left of the cell*/
	margin:0;/*I have no margin set outside this cell so it butts up tight to the next cell*/
	}
#pedigree 	/*This is the instructions for the pedigree div*/
	{
	margin:0;/*I have no margin outside the div*/
	padding:5px;/*I have a 5 pixel padding inside div on all sides (When only one px measurement is given it applies to all 4 sides*/
	}
#pedigree td	/*This is targeted at any changes of information inside the div named pedigree, it doesn't effect anything outside 						this div*/
		{
	background-color:#555;/*Background color for the pedigree div*/
	vertical-align:middle;/*all text information in this table is vertically aligned to the centre of each cell*/
	}
#pedigree a /*This is targeted at any changes of information inside the div named pedigree and it applies to any words which have a   	link (<a href) attached to them*/ 	
	{
	color:#c9a021;/*This is the color of the text inside this cell*/
	text-decoration:none;/*This forces the link to have no line underneath it*/
	font-weight:bold;/*The weight of the link font is bold*/
	}
#ancestors a /*This is targeted at any changes of information inside the div named ancestors and it applies to any words which have  	a link (<a href) attached to them*/ 
	{
	color: #c9a021;/*This is the colour of the text*/
	text-decoration:none;/*This means their is no line underneath the link*/
	}
h1	/*This is the instruction for all font given style h1*/
	{
	font-size:50px;/*The height of the font is 50 pixels, wherever font-size appears again the px is controlling the height of the 		 	font*/
	font-weight:normal;/*The weight of the font is normal*/
	}
h2	/*The is the instruction for all font given style h2*/
	{
	background-color:#555;/*This is the background colour of the heading container, which is a rectangular box*/
	font-size:large;/*This instruction allows the browser setting to dictate the size of the font*/
	text-align:right;/*This aligns the text to the right of the container*/
	padding-top:10px;/*This gives the text a padding of 10 pixels from the top edge inside the container*/
	padding-right:20px;/*This gives the text a padding of 20 pixels from the right hand end of the container*/
	font-weight:normal;
	}
.pedigreeurl/*This is the style applied to any text in class pedigreeurl*/	
	{
	color:#c9a021;
	text-decoration:none;
	font-weight:bold;
	}
.imagetable /*This is the styling of the containers classed as imagetable*/
	{
	background-color:#555;
	width: 520px;/*This forces any container classed as imagetable to have the width of 520 pixels*/
	margin-bottom:5px;/*This gives any container classed as imagetable to have a margin of 5 pixels outside the bottom edge of the 	 	container*/
	}
.imagetable a /*This is the styling of the containers classed as imagetable and it applies to any words which have a link (<a href) 	 	attached to them*/ 
	{
	color:#c9a021;
	text-decoration:none;
	}
.imagetable img /*Any imagetag(Image) in the containers classed as imagetable has no border around it*/
	{
	border-width:0;
	}
#smallmenu a /*This is the styling for the smallmenu div and it applies to any words which have a link (<a href) attached to them*/	
	{
	color: #c9a021;
	text-decoration:none;
	font-size:x-small;
	text-align:center;
	}
#smallmenu a:hover /*This is the styling when you put the cursor over the smallmenu div and it applies to any words which have a 	 	link (<a href) attached to them*/
	{
	color:#FFFFFF;
	}
#contact /*This is the styling for the contact div*/
	{
	/*clear:left;
	float:left;*/
	margin-top:30px;
	/*width:213px;*/
	padding:0;
	}
#contact img /*This is the styling for contact image inside the contact div*/
	{
	padding:0;/*It has no padding around it*/
	}
#video /*This is the styling for the div named video*/
	{
	font-weight:bold;
	background-color:#555;
	text-align:left;
	}
#image /*This is the styling for the div named image*/
	{
	text-align:center;
		}
#header /*This is the styling for the div named header*/
	{
	background-color:#000;
	margin-bottom:0;
	}
#header h1 /*This is the styling for the div named header h1*/
	{
	margin-bottom:0;
	padding-bottom:0;
	}
#menu /*This is the styling for the div named menu*/
	{
	float:left;/*It floats to the left hand side of the page*/
	border-top:solid 1px #999;/*It has a white border 1 pixel wide at the top out side the container*/
	border-bottom:solid 1px #999;/*It has a white border 1 pixel wide at the bottom out side the container*/
	padding-top:5px;/*It has padding of 5 pixels above the font inside the container at the top*/
	margin-right:5px;/*It has a margin outside the container on the right hand side of 5 pixels*/
	width:220px;/*The width of this div is set and 220 pixels*/  
	}

#menu ul {
	margin:0;
	padding:0;
	/*width: 12em;*/
	list-style-type: none;
	}
/*#menu li {
	padding-right:0px;
	border-bottom:solid 1px #999;
	border-top:solid 1px #999;
	margin-bottom:5px;
	width:12em;
	}*/
#menu a {
	display:block;
	color:#fff;
	width:200px;
	padding: 3px 12px 3px 8px;
	text-decoration:none;
	font-weight:bold;
	border-bottom:solid 1px #999;
	border-top:solid 1px #999;
	margin-bottom:5px;
}

#menu a:hover {
	background-color:#FFFFFE;
	color:#222;
	border-bottom:solid 1px #999;
	border-top:solid 1px #999;
	margin-bottom:5px;
}

	
#content {
	float:left;
	margin-left:10px;
	}
#collage {
	margin:0 0 20px 0;
	padding:0;
	}

	
	#hand {
	cursor: hand;
}
/*Set up layers*/
#a148 {
	position:absolute;
	width:197px;
	height:253px;
	z-index:1;
	

}
#a138 {
position:absolute;
	width:197px;
	height:253px;
	z-index:2;
	
}
#a128 {
	position:absolute;
	width:197px;
	height:253px;
	z-index:3;
	
}

#intro {
	position:absolute;
	width:197px;
	/*height:253px;*/
	z-index:3;
	
}