/*
 * General styles
 */
body {
	font-family: Times New Roman, Times, serif;
	
	/* These styles will change the "primary" foreground/background colours of the site (RRGGBB) */
	color: #663333;
	background-color: #D4BFAA;
	
	/* 
     * Margin measurements are specified as follows: top right bottom left, and in this case we're specifying
     * in pixels (px). So if you want more margin (i.e. whitespace) at the top of the page, make the first number 
	 * larger; less margin, make it smaller.
     */
    margin: 85px 0 0 9px;
    
    font-size: 14px;
}
img {
	display: block;
	border: 0;
}

/*
 * This is setting up the default colours for the hyperlinks.
 */
a {
	text-decoration: none;
}
/* Use these to represent the "normal" colour for a link */
a:link, a:visited, a:active {
	color: #2A3F55;
}
/* This will change the colour of the link when the mouse hovers over it */
a:hover {
	color: #7F9F55;
}


/*
 * Different styles for text blocks (paragraphs)
 */
p.center {
	text-align: center;
}
p.left {
	text-align: left;
}
p.full {
	text-align: justify;
}


/*
 * These is for the navigation block, where the links are. So change this if you want to change
 * how your navigation links look.
 */
.nav {
	text-align: center;
	margin-bottom: 2em;
	font-size: 1.2em;
	font-weight: normal;
	font-family: Georgia, Times New Roman, Verdana;
	font-style: italic;
}
.nav a:link, .nav a:visited, .nav a:active {
	color: #981307;
	margin: 0 7px;
}
.nav a:hover {
	color: #a40;
}


/* 
 * This is an outer container to center the whole site, including the "Sweet Olive Press" image
 */
#container {
	/* This is the trick to making something center properly: giving it a fixed width, then
       telling it to make the left and right margin's "auto" (i.e. automatically calculate them evenly.
       This width is the main image, plus the twice the width of the "Sweet Olive Press" (to allow for an
       "empty" version of the image on the right) */
	width: 680px;
	margin: 0 auto;
}

/*
 * This is the inner container which has the main image, the text, and the navigation links in it
 */
#content {
	/* Notice this is the same width as the main image */
	width: 600px;
	
	/* This allows space for the "Sweet Olive Press" image */
	margin-left: 40px;
}

/* These are styles to control the image layout */
img.mainImage {
	margin: 0 auto 20px;
}
img.left {
	float: left;
}
img.right {
	float: right;
}
div.gap {
	margin-top: 4em;
}

/* This is a holding class for the flash animation on the portfolio page */
div.flash {
	margin: 0 auto 20px;
}