* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Helvetica, "MgOpen Moderna", Arial, sans-serif;
	background-color: #c4c3b8; /*#F4F4F2;*/
	color: #3b3737;
	
	font-size: 100%;
	line-height: 1.2em; /* Convert from pixels to em with 16px / 18px = 1.125em */
}



h1, h2, h3 {
	line-height: 1.0em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.2em;

}

p {
	padding-bottom: 1em;
}

pre {
	line-height: 0.8em;
}

p.published {
	font-size: 0.8em;
	color: gray;
	padding-top: 0.5em;
}

#wrapper {
	width: 887px;/* was 1007 */
	position: relative;
	left: 50%;
	margin-left: -443px; /* was -503px */

	
		
}

#branding {
/*background: url(/images/header.png) no-repeat;	*/

/*
height: 156px;

	width: 1007px;
*/
	width: 887px;
	height: 175px;
	 


}



#branding p a:hover, #branding p a:active {
	background-color: white;
	color: #ff712c;
	text-decoration: none;
}

#branding h1 {
/*
	width: 1006px;	
	height: 66px;
*/
	width: 887px;
	height: 72px;
	position: relative;
}

/* Employing the Gilder/Levin method to cover text with an image. */
#branding h1 span {
	background: url(/images/new/header_top.gif) no-repeat;
	
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
}

#content {
	/*float: right;
	width: 540px;*/
	float: left;
	width: 646px; /*667px;*/
	

	
	background-color: #F0FFFF;
	
	/*** NEW ***/
	background: url(/images/new/wide_box_middle.gif) repeat-y; 
	
	font-size 0.875em; /* Convert from pixels to em with 16px / 14px = 0.875em */
}

/*** NEW ***/
#content h2 {
	background: url(/images/new/wide_box_top.gif) no-repeat left top;
	padding-top: 21px; /*20px;*/
	padding-bottom: 0.5em;
}
#content h3 {

	padding-top: 21px; /*20px;*/
	padding-bottom: 0.5em;
}

#content p.last {
	background: url(/images/new/wide_box_bottom.gif) no-repeat left bottom;
	padding-bottom: 22px; /*20px;*/
}

#content h2, #content h3, #content p, #content pre {
	padding-left: 20px;
	padding-right: 20px;
}

#content ul {
	padding-left: 40px;
	padding-bottom: 0.5em;
}


/*** END of NEW ***/

#sideContent {
	/*float: left;
	width: 160px;*/
	
	float: right;
	width: 227px;	 /* 336px */
	
	/*width: 23%;*/
	background-color: #F0FFFF;	
	
	/*** NEW ***/
	background: url(/images/new/short_box_middle.gif) repeat-y;

	font-size 0.75em; /* Convert from pixels to em with 16px / 12px = 0.75em */
}

/*** NEW ***/
#sideContent h2 {
	background: url(/images/new/short_box_top.gif) no-repeat left top;
	padding-top: 20px;
	
	/*height: 21px;*/ /* 91px; */
	/*width: 227px;*/ /*336px;*/
	
	/*position: relative;*/
padding-bottom: 0.5em;
}
/* Added 08/05/09 */
#sideContent h3 {
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
}

/* Employing the Gilder/Levin method to cover text with an image. */
/*#sideContent h2 span {
	background: url(/images/new/short_box_top.png) no-repeat left top;
	
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
}*/

#sideContent .last {
	background: url(/images/new/short_box_bottom.gif) no-repeat left bottom;
	padding-bottom: 20px;
}

#sideContent h2, #sideContent p {
	padding-left: 20px;
	padding-right: 20px;
}

#sideContent li a {
	margin-left: 10px;
	padding-left: 10px;
	padding-right: 10px;
	
}

#sideContent h2.label {
	height: 88px;
	width: 336px;
	
	position: relative;
	
	margin-top: 2px;

}
#sideContent h2.label span {
	background: url(/images/small_box_archives.gif) no-repeat left top;
	
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
}

#sideContent ul {
	margin: 0;
	/*padding: 0px 0px 0px 20px;*/
padding: 0;
		
	/* Remove the bullets: */
	list-style: none;


}

/* Links in side area */
#sideContent a:link, #sideContent a:visited {
	text-decoration: underline;
	color: gray;
}
#sideContent a:hover, #sideContent a:active {
	text-decoration: underline;
	color: #ef3e3f;
	background-color: #ecead9;
}










/*** END of NEW ***/



#branding p {
	/*float: right;*/
	position: absolute;
	right: 0px;
	top: 0px;
	

}

/*#mainNav {
	width: 720px;
}*/

#footer {
	clear: both;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	background-color: #FAFAD2;
}

#branding ul {
	margin: 0;
	/*padding: 0px 0px 0px 180px;*/
	padding: 0px 0px 0px 274px;
		
	/* Remove the bullets: */
	list-style: none;

	/*width: 613px;*/ /* 887px (branding total width) - 274px (list left-hand padding) */
	width: 616px;	
	/* new */
	/*
height: 111px;
*/	
	height: 103px;
	
	/*float: right;*/
	float: left;
	background-color: white;
	background: url(/images/new/header_bottom.gif) no-repeat;
}

#branding li {

	
	float: left;
	position: relative;
	
	
}
#branding a span {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px; /* NO IDEA WHY I NEEDED TO SPECIFY THE LEFT DISTANCE !!! */
	cursor: hand;
}

#branding a.menu1test span {
	background: url(/images/new/main_nav_blog.gif) no-repeat;
	top: 0px;
	min-width: 0;

}
#branding a.menu1testselected span {
	background: url(/images/new/main_nav_blog_sel.gif) no-repeat;
	top: 0px;
	min-width: 0;

}
#branding a.menu2test span {
	background: url(/images/new/main_nav_projects.gif) no-repeat;
	top: 0px;
	min-width: 0;

}
#branding a.menu2testselected span {
	background: url(/images/new/main_nav_projects_sel.gif) no-repeat;
	top: 0px;
}
#branding a.menu3test span {
	background: url(/images/new/main_nav_news.gif) no-repeat;
	top: 0px;
	min-width: 0;

}
#branding a.menu3testselected span {
	background: url(/images/new/main_nav_news_sel.gif) no-repeat;
	top: 0px;

}
#branding a.menu4test span {
	background: url(/images/new/main_nav_about.gif) no-repeat;
	top: 0px;

}
#branding a.menu4testselected span {
	background: url(/images/new/main_nav_about_sel.gif) no-repeat;
	top: 0px;

}
#branding li a {
	/* Ensure that the links take up the whoel parent area, i.e. the li: */	
	display: block;
	
	background-color: black;
	

	
	color: white;
	/* Line height should be same as height of containing box: */
	line-height: 103px; /* was 111 */
	text-align: center;
	


	height: 103px;
	


	
	text-decoration: none;
}

#branding li a.menu1test {
	width: 113px;

}
#branding li a.menu1testselected {
	width: 113px;

}

#branding li a.menu2test {

	width: 191px;


}
#branding li a.menu2testselected {

	width: 191px;


}
#branding li a.menu3test {

	width: 130px;


}
#branding li a.menu3testselected {

	width: 130px;


}
#branding li a.menu4test {

	width: 179px;


}
#branding li a.menu4testselected {

	width: 179px;


}
/* Styling for any link elements in the header that do not form the
navigation bar. */
#branding p a:link, #branding p a:visited {
	background-color: white;
	color: black;
}





/* Experimental */
/*
#content a, #sideContent a {
	border-bottom: 1px solid black;

}*/

/* ****************************************************************************** */
/* Form Styling                                                                   */
/* ****************************************************************************** */

form {
	margin-left: 2em;
	
	
}

form p {
	margin-top: 1em;
	

	padding-bottom: 0;

}

label {
	display: block;
	padding-left: 14px;
	/*padding-top: 0.5em;*/
}

/*input {*/
	/*width: 290px;*/ /*314px;*/
	/*height: 16px;*/ /* 44px - 28px (padding) */
	
	/*border: none;
	font-size: 14px;
	margin: 0px;
	padding: 14px 14px 14px 10px;*/
	
	/* Would like a neater solution for the font spacing/sizing. */
/*	
}*/

input.textfield, .textarea {
	width: 500px; /*290px;*/
	height: 16px;
	border: 1px solid ;
	font-size: 14px;
	margin: 0px;
	padding: 14px 14px 14px 10px;	

}

.textarea {
	height: 119px; 
}

label.checkbox {
display: inline;
	padding-left: 14px;




}
input.checkbox {
/*	float: left;*/
	margin-right: 1em;
	/*padding-top: 0.5em;*/
}

input[type="submit"] {
	margin-left: 14px;

}

p.checkbox {
	
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}



/*
input[type="text"] {
	background: url(/images/form_field.png) no-repeat;
}*/

input#tester {
	width: 290px;
	height: 1.5em;
	border: 1px solid black;
	margin: 0px;
	padding: 44px 1em 1em 1em;

	/*background: url(/images/form_field.png) no-repeat;*/
}


/* ********************************************** */
/* Tables                                         */
/* ********************************************** */
table {
	font-size: 0.75em; /* Convert from pixels to em with 12px / 16px = 0.75em */
	border-collapse: collapse;
	margin-left: 20px;
	table-layout: fixed;
	/*overflow: hidden;*/
	width: 600px;

}

th, td {
	padding: 4px 10px;
	line-height: 0.875em; /* Convert from pixels to em with 16px / 14px = 0.875em */
	
	border: 1px solid #bbbbbb;


	
}

td {
	width: 10px;
	
}
/*
tr {
	width: 600px;
}*/
.title {
	width: 100px;
}





/* ********************************************** */
/* Links
/* ********************************************** */
/* Links in main content area */
#content a:link, #content a:visited {
	text-decoration: underline;
	color: #ef3e3f;
}
/*#content a:hover, #content a:active {
	text-decoration: none;
	color: black;
}*/
#content a:hover, #content a:active {
	/*text-decoration: none;*/
	text-decoration: underline;
	/*border-top: 1px solid gray;
	border-bottom: 1px  solid gray;*/
	color: #ef3e3f;
	background-color: #ecead9;
}




p.ruler {
	margin-left: 20px;
	margin-right: 20px;


	border-bottom: 1px dashed #ef3e3f;
}

/* Styling of messages and feedback */
p.info {
	/*border: 1px solid #f95151;*/
	background-color: #dfebad;
	margin: 20px;
	padding: 1em 2em;
	color: #3b3737;
}

#content p.warning {
	border: 1px solid #f9bcbc; /*#f95151;*/
	background-color: #f9bcbc; /*#f9bcbc; eeb9d5 */
	color: #3b3737;
	margin: 20px;
	padding: 1em 2em;	
}

/*div.warning {*/
.errorExplanation {
	border: 1px solid #f9bcbc; /*#f95151;*/
	background-color: #f9bcbc; /*#f9bcbc; eeb9d5 */
	color: #3b3737;
	margin: 20px;
	padding: 1em 2em;	
}

#content .errorExplanation h2 {
	font-size: 1em;
	margin-left: 0em;
	padding-left: 0em;
	
	padding-top: 0;
	background-image: none;	
}

/* Styling for a box to surround a form field which has an error. */
.fieldWithErrors {
	padding: 2px;
	background-color: #f9bcbc;
	display: table;
	margin-left: 20px;


}

#content .errorExplanation li {
	/* Remove the bullets: */
	list-style: none;	
	
	margin: 0;
	padding: 0;
}