/* header */
body {
	background-image: url("headerpiece.png");
	background-color: #ead9cb;
	background-repeat: repeat-x;
	margin:0px 0px; padding:0px;
	text-align:center;
	color: #574c42;
	font-family: Arial;
	font-size: 11.5pt;
}

b {
	color: #ff8b63;
}

/* link style */
a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #d2bead;
	text-decoration: none;
}

a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #d2bead;
	text-decoration: none;
}

a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ff8b63;
	text-decoration: underline;
}



/* This is the class for the title at the top */
#headerimage {
	top: 0px;
	z-index: 3;
	align: center;
}

/* This is the main content box */
#main {
	padding: 10px;
	top: 120px; 
	width: 850px;
	overflow: hidden;
	margin:0px auto;
	text-align:left;
	border: none;
	background-color: #fff8f2;
	z-index: 3;
}

/* making the header image relative position to center of page */
.outer {
    width: 1px; /* Or zero, or something very small */
    margin: auto;
    overflow: visible;
    z-index: -1;
}
.inner {
    margin-left: -430px;
    width: 100px; /* Depending on the desired effect, width might be needed */
    z-index: -1;
}

/* making the navigation links position relative to center of page */
.outside {
	top: 20px;
	left: 600px;
	width: 1px; /* Or zero, or something very small */
    margin: auto;
    overflow: visible;
    z-index: 6;
}

.inside {
	top: 20px;
	left: 600px;
	width: 1px; /* Or zero, or something very small */
    margin: auto;
    overflow: visible;
    z-index: 6;
}


/* NAVIGATION SPRITES */
      
#homebutton {
    background:url(homebutton.png) no-repeat;
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    width: 65px;
    height: 65px;
    background-position: 0px 0px;
}

#homebutton span {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;  background:url(homebutton.png) no-repeat;
    background-position: 0px -65px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}

#homebutton:hover span {
    opacity: 1;
}

#aboutbutton {
    background:url(aboutbutton.png) no-repeat;
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    width: 65px;
    height: 65px;
    background-position: 0px 0px;
}

#aboutbutton span {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;  background:url(aboutbutton.png) no-repeat;
    background-position: 0px -65px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}

#aboutbutton:hover span {
    opacity: 1;
}

#gallerybutton {
    background:url(gallerybutton.png) no-repeat;
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    width: 65px;
    height: 65px;
    background-position: 0px 0px;
}

#gallerybutton span {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;  background:url(gallerybutton.png) no-repeat;
    background-position: 0px -65px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}

#gallerybutton:hover span {
    opacity: 1;
}

#contactbutton {
    background:url(contactbutton.png) no-repeat;
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    width: 65px;
    height: 65px;
    background-position: 0px 0px;
}

#contactbutton span {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;  background:url(contactbutton.png) no-repeat;
    background-position: 0px -65px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}

#contactbutton:hover span {
    opacity: 1;
}

#fbbutton {
    background:url(fbbutton.png) no-repeat;
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    width: 65px;
    height: 65px;
    background-position: 0px 0px;
}

#fbbutton span {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;  background:url(fbbutton.png) no-repeat;
    background-position: 0px -65px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}

#fbbutton:hover span {
    opacity: 1;
}

#libutton {
    background:url(libutton.png) no-repeat;
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    width: 65px;
    height: 65px;
    background-position: 0px 0px;
}

#libutton span {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;  background:url(libutton.png) no-repeat;
    background-position: 0px -65px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}

#libutton:hover span {
    opacity: 1;
}

#tbbutton {
    background:url(tbbutton.png) no-repeat;
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    width: 65px;
    height: 65px;
    background-position: 0px 0px;
}

#tbbutton span {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;  background:url(tbbutton.png) no-repeat;
    background-position: 0px -65px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}

#tbbutton:hover span {
    opacity: 1;
}

#s6button {
    background:url(s6button.png) no-repeat;
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    width: 65px;
    height: 65px;
    background-position: 0px 0px;
}

#s6button span {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;  background:url(s6button.png) no-repeat;
    background-position: 0px -65px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}

#s6button:hover span {
    opacity: 1;
}


#rbbutton {
    background:url(rbbutton.png) no-repeat;
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    width: 65px;
    height: 65px;
    background-position: 0px 0px;
}

#rbbutton span {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;  background:url(rbbutton.png) no-repeat;
    background-position: 0px -65px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}

#rbbutton:hover span {
    opacity: 1;
}