/* © Lee Dingain 2008 */

/* ----- Page structure (divs) and main styles ----- */

* {
	font-family: Arial, Verdana, Helvetica;
}

body {
	text-align: center; /* Centers page on older browsers where auto margins are ignored */
	margin: 0 0 15px 0;
	font-size: 0.75em;
	color: #000;
	direction: ltr; /* Text reads left to right */
	background-color: #75674C;
}

#container, #nav, #header, #mainmenu, #content, #footer, h1, h2, p {
	border: 0;
	margin: 0;
	padding: 0;
}

#container {
	display: block;
	margin: auto; /* Top and bottom 0, right and left auto (equal width) to center container on page */
	text-align: left; /* Moves all text within the container to the left to counter the text-align: center; in the body */
	width: 680px;
}

#header {
	position: relative;
	display: block;
	width: 100%;
	height: 107px;
	text-align: left;
	background-color: #5D4B33;
	background-image: url(../images/header-bg-2.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}

.home #header { /* Different bg image for home page - works with class="home" in container div in index.html */
	background-color: #5D4B33;
	background-image: url(../images/header-bg-home.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}

#nav {
	padding-top: 5px;
	text-align: left;
	width: 100%;
	height: 22px;
	/* background-color: #5D4B33; */
	color: #FFF;
	font-weight: bold;
}

#content {
	position: relative;
	float: left;
	display: block;
	margin: 0;
	width: 680px;
	background-color: #9D8967;
}

#footer {
	display: block;
	position: relative;
	clear: both;
	padding: 5px 0;
	height: 0;
	text-align: right;
}

/* ------------------------- */

/* ----- Font styles ----- */

#header h1 {
	font-size: 2.4em;
	color: #FFF;
	padding: 10px 0 0 20px; 
}

#header h2 {
	font-size: 1.2em;
	color: #FFF;
	padding: 0 0 20px 20px; 
}

#content h1 {
	font-size: 1.5em;
	color: #5D4B33;
	padding: 20px 15px 10px 20px; 
}

#content h2 {
	font-size: 1.3em;
	color: #5D4B33;
	padding: 10px 0 0 20px; 
}

#content p {
	padding: 5px 20px 15px 20px;
	line-height: 1.4em;
	font-size: 1.1em;
	color: #FFF;
}

.thankyou-error {
	font-weight: bold;
	text-align: center;
	margin: 180px 0;
}

#footer p {
	font-size: 0.9em;
	color: #FFF;
	font-style: italic;
}

/* ------------------------- */

/* ----- Navigation styles ----- */

#nav a {
	font-family: Arial, Verdana, Helvetica;
	font-size: 9pt;
	text-decoration: none;
	color: #FFF;
	font-weight: bold;
	padding: 4px 0 4px 20px;
}

#nav a:hover {
	text-decoration: underline;
}

/* I cannot get the commented out code below to work with the a.title class, so I used the a.content class as a workaround */

/* #content a {
	font-size: 1em;
	color: #FFF;
	text-decoration: underline;
}

#content a:hover {
	text-decoration: underline;
} */

a.content {
	font-size: 1em;
	color: #FFF;
	text-decoration: underline;
}

a.content:hover {
	text-decoration: none;
	color: #D1C6B5;
}

a.title {
	color: #FFF;
	text-decoration: underline;
	font-weight: bold;
}

a.title:hover {
	text-decoration: none;
}

/* ------------------------- */

/* ----- Image styles ----- */

.image-home {
	border: 0px;
	margin: 0px;
	width: 680px;
	height: 510px;
}

.image-aboutme {
	float: right;
	border: solid 1px #D1C6B5;
	margin: 4px 0 4px 14px;
	width: 350px;
	height: 263px;
}

.image-naturejournalism {
	float: right;
	border: solid 1px #D1C6B5;
	margin: 4px 0 15px 14px;
	width: 350px;
	height: 263px;
}

/* ----- Contact me form ----- */

#table-contactform {
	border: 0;
	margin-left: 20px;
	padding: 0;
	font-size: 0.85em;
	color: #EEE7DE;
}

#table-contactform td {
	vertical-align: top;
	padding: 0 10px 5px 0;
}

.table-buttonrow {
	text-align: right;
}

input,textarea {
	color: #75674C; 
	font-weight: normal; 
	text-decoration: none; 
	background-color: #EEE7DE;
	border: solid 1px #75674C;
}

/* -------------------- */