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

body 
{
color: #000;
font-family: arial,helvetica,sans-serif;
font-size: 1em;
line-height: 1.1em;
}

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

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
{
display: none;
}

.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;
}


/* ~~~~~~~~~~~~~~~~~ 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
{ 
display: none;
width: 0;
height: 0;
}


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

.main
{ 
text-align: left;
}

.cont
{
text-align: left;
}



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

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

.homepicright
{
float: right;
}

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

.row1
{
position: relative;
clear: both;
}

.row2
{
position: relative;
clear: both;
}

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

.row1 .text,
.row2 .text
{
padding: 9px 0 18px 232px;
font-size: 0.75em;
font-weight: bold;
}

.row1 .text
{
color: #009194;
}

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

.row1 .arrow,
.row2 .arrow
{
display: none;
}


/* ~~~~~~~~~~~~~~~~~ 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;
font-size: 0.65em;
color: #bababa;
}