/*********Colours Used***********/
/* Green - About us = #7eb197            */
/* Blue - Research Projects = #7ba6b5   */
/* Red - Complexity Theory = #d4635c   */
/* Orange - c2 = #ff9900                  */
/* Purple - contact = #a279b6             */
/* Ggreen - link = #76b984                */
/* --- DEFAULT ELEMENTS ----     */

@media screen {
	body {
		margin: 0;
		padding: 0;
		background-color: #FFFFFF;
		color:#333333;
		color:#7c7c7c;
		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-size: 0.7em;
		font-size:  12px;
	}
	html,
	body,
	#container {
		min-height: 100%;
		width: 100%;
		height: 100%;
	}
	
	html>body,
	html>body #container {
		height: auto;
	}
	img{
		border:none;
	}
	/* ---- CONTAINER ---- */
	#container {
		position: absolute;
		top: 0;
		left: 50%;				/* required for centering*/			
		margin-left:-393px;    	/* required for centering*/
		background-image:url('../images/bg_main.gif');
		width:786px;
		
	}
	/* ---- HEADER ---- */
	#header {
		height: 180px;
		background-color: #FFFFFF;
		margin-right:11px;
		margin-left:11px;
		padding-bottom:0px;
		background-image:url(../images/bg_header.jpg);
		background-repeat:no-repeat;
	}
	
	#title img {
		float: right;
		padding: 0 10px 0 0;
		border:0;
	}
	#breadcrumb{
	 float:left;
	 clear:both;
		background-color:#ecedec;
		height:24px;
		width:764px;
	}
	#breadcrumb p{
		margin:0;
		padding: 5px 0 0 7px;
		font-size:90%;
	}
	
	#breadcrumb a:link, #breadcrumb a:visited{
		text-decoration: none;
		color: #000000;
	}
	#breadcrumb a:hover{
		text-decoration: underline;
		color: #000000;
	}
	
	/* ---- CONTENT ---- */
	
	#content {
		margin: 0 163px 10px 16px;
		padding:0px 0px 0px 0px;
	}
	#right {
		float:right;
		width: 141px;
		margin-right:18px;
		margin-bottom:3em;
		display: inline; /*ie fix to prevent double the float value set in margin right*/
	}
	
	#right .box {
		float:left;
		margin:5px 0 10px 0;
		padding:3px 2px 10px 2px;
		border:1px #CCCCCC solid;
		width:135px;
	}
	#right .box h2{
		text-decoration:underline;
		font-size: 100%;
		font-weight:100;
		padding:0;
		margin:0;
	}
	#right .box p{
		margin: 2px 0 0 0;
		padding: 0 4px 0 2px;
	}
	#right ul{
		margin:0;
		padding: 0 0 0 2px; 
		list-style:none;
	}
	
	#right li{
		margin:4px 0 0 0;
		padding:0;
		list-style:none;
		display:block;
	}
	
	#maintext{
		margin:10px 0 3em 0;
		float:right;
		width:454px;
	/*  margin-bottom:3em;*/
	}
}

@media print, screen {
	#maintext img.right { 
		float: right; 
		padding:6px 4px 6px 8px;
		vertical-align:middle;
	}
	#maintext p {
		text-align:justify;
		padding:2px 28px 4px 22px;
		margin:0 0 0 0;
	}
	#maintext p img.right { 
		float: right; 
		padding:7px;
		border: 1px #fb7702 solid;
		margin:6px 4px 6px 8px;
	}
	#maintext p img.left { 
		float: left;
		padding:7px;
		border: 1px #fb7702 solid;
		margin:6px 8px 6px 0px;

	}
	#maintext p img.rightnoborder { 
		float: right; 
		/*padding:7px;*/
		border: none;
		margin:6px 4px 6px 8px;
	}
	#maintext p img.leftnoborder { 
		float: left;
		/*padding:7px;*/
		border: none;
		margin:6px 8px 6px 0px;

	}
	#maintext .imgcenter {
		text-align:center;
	}
	#maintext .quote{
		text-align:center;
		padding:10px 10px 20px 10px;
	}
	#maintext .quote p{
		font-style:italic;
		width:400px;
		font-size:110%;
		text-align:center;
		padding:10px 0 0 0;
		margin:0;
	}
	#maintext .quote .comma{
		font-size:110%;
	}
	#maintext .quote .right{
		float:right;
		text-align:right;
	}
	#maintext .box {
		float:left;
		margin:5px 4px 5px 4px;
		padding:3px 1px 10px 1px;
		border:1px #CCCCCC solid;
		width:130px;
		text-align:left;
		min-height:70px;
	}
	#maintext .box h1{
		font-size: 1.1em;
		color:#ffffff;
		padding:1px 3px 1px 3px;
		margin:0 2px 0 2px;
	}
	#maintext .box h2{
		font-size: 1em;
		padding:0;
		margin:0;
		text-decoration:underline;
	}
	#maintext .box p{
		margin: 2px 0 0 0;
		padding: 0 4px 0 2px;
		text-align:left;
	}
	#maintext ul{
		list-style-image: url('../images/bullet.gif');
		padding:2px 16px 4px 26px;
		margin:2px 16px 4px 26px;
		text-align:justify;
	}
	#maintext #quote{
		list-style-image: url('../images/bullet.gif');
		padding:2px 16px 4px 26px;
		margin:2px 16px 4px 26px;
		text-align:justify;
	}	
	
	#maintext .penpicscontainer{
		padding:2px 28px 4px 22px;
	}
	#maintext .penpics {
	 border:1px solid #cccccc; 
	 /*background-color:#7eb197; */
	 padding:2px 4px 2px 2px;
	 min-height:200px;
	 text-align:left;
	
	}
	#maintext .penpics img{
	 float:left;
	 padding:2px 6px 2px 3px;
	}
	#maintext img{
		border:none;
		padding:0;
		margin:0;
	}
	
	#maintext fieldset{
		margin: 1.5em 0 0 0;
		padding:0;
		border:none;
	}
	#maintext legend {
		margin: 0;
		padding:0;
		color: #000000;
		font-weight:bold;
	}
	#maintext fieldset ol{
		padding:1em 1em 0 1em;
		list-style: none;
	}
	#maintext fieldset li{
		padding-bottom: 1em;
	}
	#maintext fieldset.noborder {
		border-style:none;
	}
	#maintext label{
		display:block;
	}
	#maintext label.inline{
		display:inline;
	}
	#maintext .errormessage{
		color: #FF0000;
		font-size: 11px;
	}
	#maintext .example{
		font-size: 11px;
	}
	#maintext .required{
		color:#FF0000;
		font-weight:bold;
	}
}

@media screen {
/* LeftBar Navigation
------------------------------------ */
#navleft{
   width:134px;
	 font-weight:normal;
   /*font-family:Verdana, Arial, Helvetica, sans-serif;
	 letter-spacing:-0.5px;*/
	 
}
#navleft h1{
  text-decoration:underline;
  font-size: 100%;
  font-weight:100;
  padding:0;
  margin:0;
}
#navleft ul{
  margin:0;
  padding: 0.5em 0em 0em 0em; /*fiddle with the left padding to get the background to cover the menu images so that you can click on them to open the menu in IE6*/
  list-style:none;
	
}
#navleft li{
  margin:5px 0 0 0;
  padding:0px 0 5px 0;
  list-style:none;
  display:block;

}
#navleft a:link, #navleft a:visited{
  text-decoration: none;
  display:block;
  margin:0;
  padding: 0 0 0 8px;
  color:#666666;
}


/* ---- FOOTER ---- */
#footer {
  text-align: right;
  position: absolute;
  bottom: 0px;
  width:764px;
  height: 21px;
  background-image: url('../images/bg_footer.gif');
  background-repeat: no-repeat;
  background-position: top;
  color:white;
  clear: both;
  margin-left:11px;
}
#footer .footertext {
  padding: 4px 20px 0px 0px;
  font-weight:bold;
  color: #7eb197;
  text-align: right;
}

#footer a:link, #footer a:visited{
  text-decoration: none;
  color: #ffffff;
  font-weight:bold;
 
}
#footer a:hover{
  text-decoration: underline;
  color: #ffffff;
  font-weight:bold;
  
}


}


@media print {
 body {
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
	color:#7c7c7c;
  font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size:  12px;
	}
	
 img{
 border:0;
 
 }
 #right{
 display:none;
 }
 
 #navleft{
  display:none;
 }
 
 #title img{
	border:0;	
	float:right; 
 }
 
 #maintext{
  margin:10px 0 3em 0;

	}
}