body {
width: 2048px;
margin: 0;
padding: 0;
color: #888398;
background-color: #fff;
background-image: url(thplogobkg4.jpg);
background-position: 850px 0;
background-repeat: no-repeat;
font: 11px/1.5 Arial, Verdana, sans-serif;

}

/* Different behaviour of the lady. Just a compromise for IE */

div#extraDiv2 {
background-image: url(bkg10ie.jpg);
background-repeat: no-repeat;
background-position: left bottom;
position: absolute;
left: 0;
bottom: 0;
height: 1000px;
width: 265px;
z-index: 1;
}

/* And now the cool stuff, hiding from IE with child-selectors */

body#theharmonyproject>div#extraDiv2 {
background-image: url(girltest.gif);
background-repeat: no-repeat;
background-position: left bottom;
position: fixed;
left: 0;
bottom: 0;
height: 1168px;
width: 205px;
z-index: 2;
} 

/* Using Geckos capability of PNG transparency to create the smooth scrolling border,
when the screen is scrolled and the content vanishes to the left */

body#theharmonyproject>div#extraDiv3 {
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 1;
background-image: url(nonebkg_whitenopic.png);
width: 225px;
}

/* The Header, using the "old":)) FIR-method */

div#pageHeader {
position: absolute;
left: 225px;
width: 1828px;
}

div#pageHeader h1 {
width: 600px;
height: 83px;
margin: 20px 0 0;
background-image: url(title13.jpg);
}

div#pageHeader h1 span {
display: none;
}

div#pageHeader h2 {
width: 1815px;
height: 66px;
background-image: url(header7.jpg);
background-position: right;
background-repeat: no-repeat;
margin-top: -31px;
}

div#pageHeader h2 span {
display: none;
}

div#quickSummary {
position: absolute;
width: 1300px;
left: 228px;
top: 98px;
letter-spacing: 0.1em;
font-size: 12px;
color: #A5A3B5;
background-color: transparent;
}

/* Have the summary displayed in a single line */

div#quickSummary p.p2, div#quickSummary p.p1 {
display: inline;
margin: 0;
}

div#extraDiv1 { /*adding a border */
position: absolute;
left: 225px; 
top: 90px;
height: 1px;
width: 1823px;
background-color: #A5A3B5;
color: inherit;
}

div#tipDiv ul { margin:.5em .4em .5em 1em; padding:0 }
div#tipDiv ul li { margin: 0 0 .4em 1em }

/* Style spec's for tooltip  */
div#tipDiv {
  position:absolute; visibility:hidden; left:0; top:0; z-index:10000;
  background-color:#D2F8C6; border:1px solid #336; 
  width:180px; padding:6px;
  color:#000; font-size:11px; line-height:1.3;
}

div#tipDiv a:link { color:#A52A2A }
div#tipDiv a:visited { color:#A52A2A }


/* The main content. All positioned absolutely
-----------------------------------------------
 The text-links */

a:link, a:visited {
color: #A52A2A;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}

a:hover {
text-decoration: none;
color: #000;
}

p:hover {
color: #114b0e;
background: transparent;
}

/* The Preamble */

div#preamble {
position: absolute;
left: 300px;
top: 160px;
width: 200px;
text-align: justify;
}

div#preamble h3 {
width: 200px;
height: 25px;
background-image: url(history8.jpg);
margin: 0 0 0.5em;
}

div#preamble h3 span {
display: none;
}

div#preamble p {
margin: 0 0.5em 0.5em;
}

/* Supporting Text
--------------------------------------*/

div#explanation {
position: absolute;
left: 550px;
top: 160px;
width: 200px;
text-align: justify;
}

div#explanation h3 {
width: 200px;
height: 25px;
background-image: url(whatis6.jpg);
margin: 0 0 0.5em;
}

div#explanation h3 span {
display: none;
}

div#explanation p {
margin: 0 0.5em 0.5em;
}

div#inspiration {
position: absolute;
left: 800px;
top: 160px;
width: 200px;
text-align: justify;
}

div#inspiration h3 {
width: 200px;
height: 25px;
background-image: url(inspiration3.jpg);
margin: 0 0 0.5em;
}

div#inspiration h3 span {
display: none;
}

div#inspiration p {
margin: 0 0.5em 0.5em;
}

div#bio {
position: absolute;
left: 1050px;
top: 160px;
width: 200px;
text-align: justify;
}

div#bio h3 {
width: 200px;
height: 25px;
background-image: url(whoarewe3.jpg);
margin: 0 0 0.5em;
}

div#bio h3 span {
display: none;
}

div#bio p {
margin: 0 0.5em 0.5em;
}

div#name {
position: absolute;
left: 1300px;
top: 160px;
width: 400px;
text-align: justify;
}

div#name h3 {
width: 400px;
height: 25px;
background-image: url(name8.jpg);
margin: 0 0 0.5em;
}

div#name h3 span {
display: none;
}

div#name p {
margin: 0 0.5em 0.5em;
}

/* The Navigation
---------------------------------------*/

div#linkList {
position: absolute;
left: 1828px;
top: 160px;
width: 220px;
height: 474px;
background-color: transparent;
color: inherit;
background-image: url(linklist20.jpg);
background-repeat: repeat-y;
text-transform: lowercase;
}


div#linkList div#lselect li a:link, div#linkList div#lselect li a:visited {
display: block;
margin-left: -10px;
padding-left: 26px;
color: #8B879E;
background-color: transparent;
line-height: 2;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}


div#linkList li a:link, div#linkList div#lselect li a.c:link, div#linkList li a:visited, div#linkList div#lselect li a.c:visited {
display: inline;
background-image: none;
color: #A52A2A;
background-color: transparent;
padding-left: 0;
padding-top: 0;
margin-left: 0;
margin-top: 0;
border: none;
}


div#linkList ul {
list-style: none;
margin: 0 0 0 25px;
padding-left: 0;
}


div#linkList li {
padding-left: 10px;
}

div#linkList div#lselect li a:hover {
background-color: #cff3c0;
color: #000;
background-image: url(linklistsun4.gif);
background-repeat: no-repeat;
}

div#linkList li a:hover {
color: #000;
}


div#lselect h3 {
float:left;
margin-top: 0;
width: 25px;
height: 200px;
background-image: url(thppages4.jpg);
background-repeat: no-repeat;
}

div#lselect h3 span {
display: none;
}

div#larchives {
clear:left;
margin-top: 0;
border-top: 10px solid #20956b;
}

div#larchives h3 {
float:left;
margin-top: 0;
width: 25px;
height: 81px;
background-image: url(contact3.jpg);
background-repeat: no-repeat;
}

div#larchives h3 span {
display: none;
}

div#lresources {
clear:left;
margin-top: 0;
}

div#lresources h3 {
float:left;
margin-top: 0;
width: 25px;
height: 95px;
background-image: url(resources3.jpg);
background-repeat: no-repeat;
}

div#lresources h3 span {
display: none;
}

/* ...and the footer
--------------------------------------*/
div#footer {
position: absolute;
left: 1828px;
top: 3px;
width: 220px;
height: 20px;
text-align: center;
word-spacing: 0.1em;
overflow: hidden;
}

div#footer a:link, div#footer a:visited {
color: #B2AFC0;
background-color: transparent;
}

div#footer a:hover {
color: #000;
}


/* and extra artwork */

div#extraDiv4 {
position: absolute;
left: 1835px;
top: 20px;
width: 204px;
height: 65px;
color: inherit;
background-color: #D9D6E7;
background-image: url(footer3.jpg);
background-repeat: no-repeat;
}

body#theharmonyproject>div#extraDiv5 {
position: absolute;
background-position: left bottom;
left: 185px;
bottom: 0;
height: 1168px;
width: 25px;
background-color: #D9D6E7;
background-image: url(verticalthp5.jpg);
background-repeat: no-repeat;
}