body
{
	text-align: center;
	font-size: 12px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	margin: 0px;
}

h1,h2,h3,h4,h5 
{
color : #666666;
font-family : Arial, Verdana, Helvetica, sans-serif;
font-weight : bold;
text-decoration : none;
text-transform:lowercase;
clear: left;
}

h1
{
font-size: 16px;
}

h2
{
font-size: 14px;
}

h3 
{
font-size: 13px;
}


#box {
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background-color:#FFFFFF;
}

#header
	{
	width: 600px;
	margin-bottom: 10px;
	}
	
.content {
	margin: 0px;
	padding: 0px;
	text-align: left;
	clear: left;
	float: left;
	width: 100%;
}

/* 
	i don't know why I'm having to declare these values seperately
	when it would be much easier with a comma list eg p,h1,h2...
	but it seems to break when I do this
*/

.content p {
margin-top: 0;
margin-left: 150px;
}

.content h1 {
margin-top: 0;
margin-left: 150px;
}

.content h2 {
margin-top: 0;
margin-left: 150px;
}

.content h3 {
margin-top: 0;
margin-left: 150px;
}

.content table {
margin-left: 150px;
}

.content td
{
font-size: 12px;
text-align:left;
padding-left: 0px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
}

.picturecol {
float: left;
width: 135px;
}

.piccolright {
float: left;
width: 445px;
padding: 0px 10px 10px 10px;
}

/*.content h2 
{
margin-left: 150px;
}*/

.navigation {
clear: left;
width: 600px;
overflow: hidden;
/*border-bottom: 1px dashed #ddd;*/ /*bottom horizontal line that runs beneath tabs*/
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
padding: 0px;
}
	
.navigation ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.navigation li{
display: inline;
margin: 0;
}

.navigation li a{
float: left;
display: block;
width: 100px;
text-align: center;
text-decoration: none;
margin: 0;
padding: 10px; /*padding inside each tab*/
}

.navigation li a:hover, .navigation li.here a{
background: #cccccc; 
/*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

#footernavigation {
	margin-left: 0px;
}
	
.twocolcontainer {
	margin: 0px;
	padding: 0px;
	text-align: left;
	clear: left;
	float: left;
	width: 100%;
	border-top: thin dashed #cccccc;
}

	/* 
	this was made for the new project page but is also
	useful for pages that don't have the 150px margin
	like the where.htm page
	*/
.twocolcontainer p,h1,h2,h3,h4,h5{
	margin: 0px 0px 6px 0px;
}

/*this is for the table on the where.htm page*/
.twocolcontainer td {
font-size: 14px;
text-align: left;
padding: 5px;
}

/*the inner containers for the new projects page*/
.twocols {
	margin: 0px;
	padding: 10px;
	width: 280px;
	float: left;
}

/* like twocolcontainer without border */

.simplecontainer {
	margin: 0px 0px 10px 0px;
	padding: 0px;
	text-align: left;
	clear: left;
	float: left;
	width: 100%;
}

.simplecontainer p,h1,h2,h3,h4,h5{
	margin: 0px 0px 6px 0px;
}

#menu {
	/*float: none;*/
	margin-left: 150px;
	/*background: #999999;*/
}

#menu ul {
	margin: 0px;
}

#menu li a {
	/*display: block;*/
	padding: 0px;
	/* next two lines for IE, to stop extra whitespace being added*/
	float: left;
	clear: left;
}

#menu li>a {
	/* undoes extra line in IE version for Firefox (IE ignores the child tag li>a) */
	float: none;
}

#menu li a:hover {
	/*display: block;*/
	text-decoration: none;
	/* next two lines for IE, to stop extra whitespace being added on hover*/
	float: left;
	clear: left;
}

#menu li>a:hover {
	/* undoes extra line in IE version for Firefox (IE ignores the child tag li>a) */
	float: none;
}

#menulinkspage {
	margin-left: 0px;
	padding: 2px;
	list-style: none;
}

#menulinkspage h1 {
	margin-left: 10px;
}

#menulinkspage ul {
	margin-left: 30px;
}

#menulinkspage li a{
	padding: 2px; 
}

#menu2 {
	margin-left: 0px;
	padding: 2px;
	list-style: none;
	float: left;
}

#menu2 li a {
	/*display: block;*/
	padding: 0px;
	/* next two lines for IE, to stop extra whitespace being added*/
	float: left;
	clear: left;
}

#menu2 li>a {
	/* undoes extra line in IE version for Firefox (IE ignores the child tag li>a) */
	float: none;
}

#menu2 li a:hover {
	/*display: block;*/
	text-decoration: none;
	/* next two lines for IE, to stop extra whitespace being added on hover*/
	float: left;
	clear: left;
}

#menu2 li>a:hover {
	/* undoes extra line in IE version for Firefox (IE ignores the child tag li>a) */
	float: none;
}

	
ul {
	list-style-type: none;
	margin-left: 150px;
	padding: 0px;
	}

li.here {
	background-color: #bbb;
	}

li a {
	color: #000000;
	text-decoration: none;	
	display: block;
	padding: 10px;
	}

li a:hover {
	background: #999999;
	color: #ffffff;
	text-decoration: none;	
	}

.quote 
{
font-style : italic;
margin-left : 10px;
}

a:link 
{
color: #CC0000;
Text-Decoration : none;
}

a:visited
{
color: #AA0000;
text-decoration: none;
}

a:hover 
{
color: #FF0000;
Text-Decoration : underline;
}

.small 
{  
font-size: 8pt;
}

.tiny 
{  
font-size: 7pt;
}

.notjustify {
text-align : left;
}

.centre {
text-align : center;
}

.rightalign
{
text-align: right;
}

.float {
	float: left;
	clear: left;
	margin-bottom: 10px;
}

	/*
	this is a layout designed for the larger pictures
	on the meandyou.htm page
	see comments in content above for why I'm having
	to write the p,h1,h2,h3 etc separately (pain)
	*/
.largepicturelayout {
	margin: 0px;
	padding: 0px;
	text-align: left;
	clear: left;
	float: left;
	width: 100%;
	}
	
.largepicturelayout p {
	margin-left: 120px;
	margin-right: 120px;
	}
	
.largepicturelayout h1 {
	margin-left: 120px;
	margin-right: 120px;
	}
	
.largepicturelayout h2 {
	margin-left: 120px;
	margin-right: 120px;
	}
	
.largepicturelayout h3 {
	margin-left: 120px;
	margin-right: 120px;
	}

.largepicturelayout_image {
	margin-bottom: 10px;
	}

.mediacontent {
	margin-left: 150px;
}

.mediacontent p {
	margin-left: 0px;
}