body {
  background: #000000;
  margin: 14px;
}

body, p, td {
	line-height: normal;
	font-family: Papyrus;
	font-size: 97%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Mistral;
}

#main_wrapper {
  width: 860px;
  margin: 0 auto;
  border: 7px solid #FFD700;
  border-right-color: #FFD700;
  border-bottom-color: #FFD700;
  padding: 20px;
  background: #000000;
}

#masthead {
	text-align: center;
	border-bottom-width: 3px;
	border-bottom-style: none;
}

#masthead h1, #masthead h2 {
  letter-spacing: .3em;
  margin: 0;
}

#masthead h2 {
  font-size: 70%;
  font-style: italic;
}

#masthead p {
  margin: 10px 0 20px;
}

#masthead a {
	text-decoration: none;
	border: 3px solid #FFD700;
	padding: 10px;
	color: #7FFFD4;
	background: #000000;
	font-family: geneva, arial, helvetica, sans-serif;
	font-size: 80%;
	font-weight: bold;
	font-variant: small-caps;
}


#masthead a:hover, #masthead a:active {
	color: #000000;
	background-color: #7FFFD4;
}

#content h1 {
  background: #000000;
  padding: 5px;
  border: 3px solid #FFD700;
  border-right-color: #FFD700;
  border-bottom-color: #FFD700;
}

#content h2 {
  padding-top: 10px;
}

a:link, a:visited {
  color: #FFD700;
}

a:hover, a:active {
  color: #FFF;
}

form {
  width: 600px;
  margin: 15px auto;
  border: 3px solid #FFD700;
  padding: 10px;
}

form td {
  padding: 5px;
  width: 50%
}

#contact-left {
  text-align: right;
}

#buttons {
  text-align: center;
}

input, textarea {
  font: bold 90% geneva, arial, helvetica, sans-serif;
  color: #777;
}


/*I would like to know how to do something more interesting with the images on the portfolio page - for future, I will look into hovering text as a possibility */

.centeredimage
{
    text-align:center;
    margin-top:10px;

}


#footer {
  color: #7FFFD4;
  text-align: center;
  font-size: 75%;
  font-style: italic;
border-top: 1px solid #999;
padding-top: 10px;
margin-top: 15px;
}