@import url("reset.css");



/* Layout
---------------------------------------------------------------------- */

body
{
	width: 100%;
	height: 100%;
	background: #117685 url("../images/page-gradient.png") top repeat-x;
}

body > .background
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("../images/page-texture.jpg") top center no-repeat;
}

#header, #main, #footer
{
	position: relative;
	width: 870px;
	margin: 0 auto;
}

#header, #footer
{
	z-index: 2;
}

#header
{
	height: 240px;
}

#main
{
	z-index: 1;
	height: 370px;
	background: #f6db93 none;
}



/* Header
---------------------------------------------------------------------- */

#header .logo
{
	position: absolute;
	left: 48px;
	top: 133px;
}

#header .nav
{
	position: absolute;
	right: 5px;
	top: 166px;
	width: 422px;
	height: 47px;
	background: url("../images/nav/background.png") no-repeat;
}

#header .nav li
{
	position: relative;
	float: left;
	height: 39px;
	padding: 0 10px;
}

#header .nav li:first-child
{
	margin-left: 18px;
}

#header .nav li a
{
	display: block;
	height: 100%;
	text-indent: -9999px;
}

#header .nav li a.home
{
	width: 62px;
	background: url("../images/nav/home.png") no-repeat;
}

#header .nav li a.services
{
	width: 81px;
	background: url("../images/nav/services.png") no-repeat;
}

#header .nav li a.location
{
	width: 89px;
	background: url("../images/nav/location.png") no-repeat;
}

#header .nav li a.contact
{
	width: 76px;
	background: url("../images/nav/contact.png") no-repeat;
}

#header .nav li:hover
{
	background: url("../images/nav/highlight.png") center no-repeat;
}



/* Main Border
---------------------------------------------------------------------- */

#main > .border
{
	position: absolute;
	z-index: 3;
	left: -15px;
	top: -15px;
}

#main > .border *
{
	position: absolute;
	left: 0;
	top: 0;
	width: 35px;
	height: 35px;
}

#main > .border .n,
#main > .border .s
{
	left: 35px;
	width: 830px;
}

#main > .border .e,
#main > .border .w
{
	top: 35px;
	height: 330px;
}

#main > .border .s,
#main > .border .se,
#main > .border .sw
{
	top: 365px;
}

#main > .border .e,
#main > .border .ne,
#main > .border .se
{
	left: 865px;
}

#main > .border .n   { background: url("../images/main-border/n.png") top no-repeat; }
#main > .border .s   { background: url("../images/main-border/s.png") bottom no-repeat; }
#main > .border .e   { background: url("../images/main-border/e.png") right no-repeat; }
#main > .border .w   { background: url("../images/main-border/w.png") left no-repeat; }
#main > .border .ne  { background: url("../images/main-border/ne.png") top right no-repeat; }
#main > .border .nw  { background: url("../images/main-border/nw.png") top left no-repeat; }
#main > .border .se  { background: url("../images/main-border/se.png") bottom right no-repeat; }
#main > .border .sw  { background: url("../images/main-border/sw.png") bottom left no-repeat; }



/* Curve
---------------------------------------------------------------------- */

#photo, #curve
{
	position: absolute;
	width: 100%;
	height: 100%;
}

#photo
{
	left: 10px;
	top: 10px;
}

#curve
{
	top: 10px;
	overflow: hidden;
}

#curve .edge
{
	position: absolute;
	left: 0;
	top: 0;
	width: 77px;
	height: 100%;
}

#curve .fill
{
	display: none;
	position: absolute;
	left: 481px;             /*  (#home #curve .edge) + (#curve .edge) = (404) + (77)  */
	top: 0;
	width: 100%;
	height: 100%;
	background: #f6db93 none;
}

#home #curve .edge,
#location #curve .edge
{
	left: 404px;
	background: url("../../_common/images/main-curve-right.png") no-repeat;
}

#services #curve .edge,
#contact #curve .edge
{
	left: 370px;
	background: url("../../_common/images/main-curve-left.png") no-repeat;
}



/* Content
---------------------------------------------------------------------- */

#content
{
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	width: 300px;
	height: 295px;
	overflow: auto;
	margin-top: 10px;
	padding: 40px 50px 15px;
	color: #3f2f03;
	font: normal 1em arial, sans-serif;
	background: #f6db93 none;
}

#home #content,
#location #content
{
	left: 453px;
	margin-left: 20px;
	padding-left: 30px;
}

#services #content,
#contact #content
{
	left: 0px;
	margin-right: 20px;
	padding-right: 30px;
}

#content h1
{
	font: italic normal 1.7em georgia, serif;
}

#content h2,
#content p,
#content ul
{
	font: normal 0.84em/1.5em arial, sans-serif;
	padding-top: 1.5em;
}

#content h2
{
	position: relative;
	clear: both;
	font-weight: bold;
}

#content h2.inline
{
	position: relative;
	float: left;
	clear: both;
	width: 5em;
}

#content h2 + ul
{
	padding-top: 0.5em;
}

#content h2 + p
{
	padding-top: 0;
}

#content h2.inline + p
{
	margin-left: 5em;
	padding-top: 1.5em;
}

#content p em
{
	font-weight: bold;
	font-style: italic;
}

#content a
{
	color: #007485;
	text-decoration: none;
}

#content a:hover
{
	border-bottom: 1px solid #007485;
}

#content a:active
{
	color: #004f5b;
	border-bottom-color: #004f5b;
}



/* Footer
---------------------------------------------------------------------- */

#footer
{
	overflow: hidden;
	padding: 10px 5px;
	font: normal 0.7em arial, sans-serif;
	color: #0a627f;
}

#footer .copyright
{
	float: left;
	margin-left: 20px;
}

#footer .credits
{
	float: right;
	margin-right: 20px;
	padding-bottom: 5px;
}

#footer .credits a
{
	text-decoration: none;
	color: #0a627f;
}

#footer .credits a:hover
{
	text-decoration: none;
	color: #085771;
}

#footer .credits a em
{
	font-style: normal;
	font-weight: normal;
	border-bottom: 1px dotted #0a627f;
}

#footer .credits a:hover em
{
	border-bottom: 1px solid #085771;
}