/* force right scrollbar in non-ie browsers to prevent horizontal jumping */
html {
height: 100%;
margin-bottom: 1px;
}

/* ~~~~~~~~~~~~~~~~~ GENERAL ~~~~~~~~~~~~~~~~~*/

body 
{
background: #9dd7f5 url("../images/background.gif") bottom left no-repeat fixed;
text-align: center;
margin: 0;
padding: 0;
color: #000;
font-family: arial,helvetica,sans-serif;
font-size: 1em;
line-height: 1.1em;
}

a:link,
a:visited
{
color: #e98214;
text-decoration: none;
}

a:hover,
a:active
{
color: #e98214;
text-decoration: underline;
}

img
{
border: 0;
}

.clear
{
clear: both;
}


/* ~~~~~~~~~~~~~~~~~ TYPOGRAPHY~~~~~~~~~~~~~~~~~*/


h1
{
font-size: 1.2em;
color: #126295;
font-weight: normal;
margin: 0 0 15px 0;
line-height: 1.3em;
}

h2
{
font-size: 1em;
color: #049296;
font-weight: bold;
margin: 0 0 15px 0;
}

.trail
{
text-align: center;
margin-top: 2em;
}

.trail a
{
color: #84837a;
}

.trail a.on
{
font-weight: bold;
color: #049296;
}

ul
{
list-style-image: url('../images/bullet.gif');
line-height: 1.2em;
}

.note
{
color: #84837a;
font-size: 0.8em;
font-style: italic;
margin-top: 2em;
}


/* ~~~~~~~~~~~~~~~~~ STRUCTURAL ~~~~~~~~~~~~~~~~~*/

#stage
{
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 744px;
	background: #fff;
}


/* ~~~~~~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~~~~~~*/

body#home .header
{ 
height: 147px;
text-align: right;
background: url("../images/hp-hands.jpg") top left no-repeat;
}

body#how .header
{ 
height: 147px;
text-align: right;
background: url("../images/hp-pool.jpg") top left no-repeat;
}

body#contact .header
{ 
height: 147px;
text-align: right;
background: url("../images/hp-stairs.jpg") top left no-repeat;
}


/* ~~~~~~~~~~~~~~~~~ NAV ~~~~~~~~~~~~~~~~~*/

.nav
{ 
width: 744px;
height: 36px;
background: #9a998f url("../images/bg_nav.gif") 0 0 repeat-x;
}


/* ~~~~~~~~~~~~~~~~~ MAIN ~~~~~~~~~~~~~~~~~*/

.main
{ 
width: 744px;
margin-top: 29px;
}

.cont
{
margin: 0 29px;
}



/* ~~~~~~~~~~~~~~~~~ HOME ~~~~~~~~~~~~~~~~~*/

p.home
{
font-size: 0.8em;
line-height: 1.35em;
}

.homepicright
{
float: right;
}

/* ~~~~~~~~~~~~~~~~~ ROWS ~~~~~~~~~~~~~~~~~*/

.rowtop
{
width: 744px;
height: 16px;
background: url("../images/bg_top.gif") 0 0 repeat-x;
}

.rowbot
{
width: 744px;
height: 21px;
background: url("../images/bg_bot.gif") 0 0 repeat-x;
}

.row1
{
position: relative;
clear: both;
background: url("../images/bg_row1.gif") top left repeat-y;
}

.row2
{
position: relative;
clear: both;
background: url("../images/bg_row2.gif") top right repeat-y;
}

.row1 .step,
.row2 .step
{
position: absolute;
width: 222px;
height: 62px;
top: 0;
left: 0;
}

.row1 .text,
.row2 .text
{
width: 460px;
margin-right: 52px;
padding: 18px 0 18px 232px;
font-size: 0.75em;
font-weight: bold;
}

.row1 .text
{
color: #009194;
}

.row2 .text
{
color: #5f81a8;
}

/*




.row1 .step,
.row2 .step
{
position: absolute;
width: 222px;
height: 62px;
top: 0;
left: 0;
}

.row1 .text,
.row2 .text
{
width: 470px;
margin-left: 228px;
margin-right: 52px;
padding: 18px 0;
font-size: 0.75em;
font-weight: bold;
}



*/

.row1 .arrow,
.row2 .arrow
{
position: absolute;
width: 27px;
height: 42px;
top: 0;
right: 0;
text-align: left;
padding-top: 20px;
}


/* ~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~*/

.footer
{
border-top: 2px #9dd7f5 solid;
margin-top: 31px;
font-size: 0.7em;
color: #126295;
text-align: left;
padding: 14px 0;
}

.footer .left
{
margin-right: 303px;
padding-left: 27px;
font-weight: bold;
}

.footer .right
{
float: right;
padding-right: 18px;
width: 293px;
text-align: right;
}

/* ~~~~~~~~~~~~~~~~~ BELOW FOOT ~~~~~~~~~~~~~~~~~*/

.belowfoot
{
text-align: left;
margin: 7px auto;
padding: 0px 0px 2em 0px;
border:0;
width: 744px;
font-size: 0.65em;
color: #fff;
}

.belowfoot .left
{
margin-right: 521px;
}

.belowfoot .left a
{
color: #fff;
}

.belowfoot .right
{
float: right;
width: 520px;
text-align: right;
line-height: 1em;
}