other.css

body
{
    /*Tiles the image to fill the whole background*/
    background-image:url("images/tiled.png");
    background-repeat: repeat;  
    background-attachment:fixed;
}
#wrapper
{
	/*Changes the background colour to white*/
	background:#FFF;
}

/*For each area of the website the border colour changes*/
div.purplePage
{
	/*Sets the witdth to the size of the image so there is no white space as a border*/
	width:870px;

	/*Adds a 10px padding so all of the text inside of the wrapper does not toutch the sides*/
	padding:10px;

	/*Changes the border of the wrapper to a colour (in this case purple)*/
	border: 5px solid #330066;

	/*Sets the ouside margin to 0 and auto so it stays in the middle of the sceen even if it is scaled*/
	margin:0px auto;
}
/*Sets the colour of the border in the seperate parts of the website*/
div.redPage
{
	width:870px;
	padding:10px;
	border: 5px solid #990000;
	margin:0px auto;
}
div.silverPage
{
	width:870px;
	padding:10px;
	border: 5px solid #636363;
	margin:0px auto;
}
div.lightpurplePage
{
	width:870px;
	padding:10px;
	border: 5px solid #463C5D;
	margin:0px auto;
}

	/*The following indents are part of the menu system*/
	/*Sets the container properties as a vertical menu*/
	#menuContainer 
	{
		background-color: #FFF;
		font-family:sans-serif;
		font-size:16px;
		
		/*Makes the menu float to the left so the content wraps arround it*/
		float: left;
		height:380px;

	}
	
	.menuList 
	{
		/*This stops the list from displaying the bullet points*/
		list-style-type: none;
		height: 28px;
		margin: 0;
		padding: 0;
		text-align:center;
		border:1px solid #CCC;
	}	

			/*This changes the colour of the backgound on the menu depending on waht area the link is going to*/
			.menuList li.purple 
			{
				width: 216px;
				background:#330066;
				color:#000;
				border-right:1px solid #CCC;
				border-bottom:1px solid #CCC;
			}
			
			.menuList li.red 
			{
				width: 216px;
				background:#990000;
				color:#FF0;
				border-right:1px solid #CCC;
				border-bottom:1px solid #CCC;
			}
			
			.menuList li.silver 
			{
				width: 216px;
				background:#636363;
				color:#FF0;
				border-right:1px solid #CCC;
				border-bottom:1px solid #CCC;
			}
			
			.menuList li.lightpurple 
			{
				width: 216px;
				background:#463C5D;
				color:#FF0;
				border-right:1px solid #CCC;
				border-bottom:1px solid #CCC;
			}
			
			.menuList a 
			{
				display: block; /* This ensures that the whole element is clickable, not just the link*/
				text-decoration:none; /* Removes the default underline on links */
				color: #eee;
				padding:5px 0; /* Sets top&bottom padding to 5 pixels */
			}
			
			.menuList a:hover 
			{
				/*When the user hovers over the menu item it changes to black so the user knows when they are able to click*/
				color:#000;
			}
			.indentUl
			{
				/*Sets the indented menu items (that show a bullet point) to show blue suqares which fits in with the theme more*/
				list-style-type:square;
				color:#309;
			}

				#listsHidden
				{
					/*This stops the other unordered lines from showwing as it is only used in the other style sheet*/
					display:none;
				}
				
				#listsHidden2
				{
					display:none;
				}

#breadCrumbs
{
	/*Reduces the size of the bread crumbs so they do not distract the user*/
	font-size:9px;
}

#breadCrumbs a:hover
{
	/*Changes the colour of the text when the user hovers over it so they can tell which item they are 
	going to select*/
	color:#F0F;
}

/*The folowing indent is all related to the content part of the pages*/
#content
{
	font-size:18px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	padding:10px;
	background:#FFF;
}


	.profilePic
	{
		float:right;
	}
	
	.com100-Pic
	{
		float:left;
		border:1px solid #000;
	}
	
	/*Sets the properties for the different tables in the website*/
	.homeTable td
	{
		width:50%;
	}
	
	td.left
	{
		width:20%
	}
	
	td.details
	{
		width:100%;
	}
	
	th.tblHead
	{
		background:#990000;
		text-align:left;
		color:#FFF;
		width:870px;
	}
	
	td.personalLeft
	{
		width:15%;
	}
	td.personalDetails
	{
		width:85%;
	}
	ul.Qualifications
	{
		margin-top:0px;
	}

	/*This is a class used to prevent floated picutes from moving everything to the left of them including the footer*/
	.clear
	{
		clear:both;
	}
	
	/*This resizes the pdf so it can be viewed better*/
	.embed
	{
		width:625px;
		height:600px;
		border:1px solid #463C5D;
	}
	td.design
	{
		width:50%;
	}
	.design
	{
		text-align:left;
	}

#footer
{
	/*Clears the footer so it will always be displayed at the bottom of the page even if there is a float item above it*/
	clear:both;

	/*Adds a thin line at the top of the footer to seperate it from the body*/
	border-top:1px solid #666;
	text-align:center;
}

/*Makes the W3 images smaller and with no border so they do not stand out as much*/
.w3Valid
{
	border:0px;
	width:40px;
	height:15px;
}

/*Sets the Accessibility link at the bottom of the page to a smaler font*/
a.Accessible
{
	font-size:9px;
}