html, body, #container {
  min-height: 90%; /* wrap to fit footer to contents */ 
  height: 91%;     /* liquid. Will stretch to content */
  background-color: #99cc99;
  font-size: x-small;  /* for IE5/WIN */ 
  voice-family: "\"}\"";
  voice-family: inherit;
  font-family: "Helvetica", sans-serif; 
  font-size: small; /* for compliant browsers */
  }
  html>body { /* be nice to Opera */
  font-size: small; 
  }

#landingpage p img{
position: relative;
float: left;
left: 33%;
width: 360px;
top: 180px; 
align: center;
background: #FFFFFF;
border-top: 20px solid #e4f4f3;  
border-bottom: 20px solid #e4f4f3;
}

#container {
width: 750px;  /* setting width here, (not the top) assures it is aligned for green border */
margin: auto;
background: #FFFFFF;
padding: 0px; /* need nav to stretch 100% */ 
border-top: 40px solid #e4f4f3;   /* light blue*/
border-bottom: 30px solid #e4f4f3;
}
#container.cont {
height: 108%;  /* extra length on contacts page */ 
padding-bottom: 1em;
}
#container.con {
height: 108%;   /* extra length on consultancy page */ 
padding-bottom: 1em;
}
#container.foo {
height: 660px;  /* extra length on food & drink page */ 
padding-bottom:1em;
}
#container.cli {
height: 80em;  /* extra length on clients page */ 
}
#container.ste {
height: 84em;  /* extra length on sunday telegraph page */ 
}
#container.gua {
height: 94em;  /* extra length on guardian page */ 
}
#container.oth {
height: 112em;  /* extra length on guardian page */ 
}
#container.jou {
height: 2090px;  /* extra length on journalism page */ 
}
#logo {
float: left;
}

#nav {
float: left;
padding: 8px 0px 0px 0px;  /* top margin, bottom margin */
width: 750px;
background: #e4f4f3;
text-align: right;
}
#nav dt {
position: relative;
color: #99cc99;
font-size: 18px;
float: right;
right: 28px;        /* margin from heading to edge of nav */
}
#nav dt a{
position: relative;
color: #99cc99;
text-decoration: none;

}
#nav dt a:hover {
position: relative;
color: #99cc99;
text-decoration: none;
background: url(images/starlil.jpg) left no-repeat;
}
#nav dt.star {
position: relative;
float: right;
right: 28px; /* 28px from edge of heading */
}

#nav dd a{
position: relative;
clear: both;
top: 0px;
font-size: 12px;
color: #99cc99;
float: left;
text-decoration: none;
background: none;
}

#nav dd a:hover {
color: #ff3399;
background: none;
}
#subnav {
position: relative;
clear: both;
float: left;
left: 146px;
top: -8px;
}
#subnav dl.j{   /* start of float fix due to image above size */
position: relative;
top: -3px;
text-decoration: none;
background: none;
}
#subnav dd.jo a{
line-height: 12px;
}		 /* end of float fix  */

#subnav dd a{
position: relative;
font-size: 12px;
color: #99cc99;
float: left;
text-decoration: none;
background: none;
}

#subnav dd a:hover {
color: #ff3399;
background: none;
}

#contents {
float: left;
width: 100%;
padding: 0;
background: none;
text-align: left;
}
#contents dt {
position: relative;
top: 20px; 
color: #99cc99;
font-size: 24px;
float: left;
left: 205px;
}
#contents dt.img img{ 
position: relative;
float: left; 
top: -10px; /*  compensate for margin */
margin: 10px; /* spacing between star and heading */ 
}

#contents dd.photo img{  
position: relative;
top: 60px;
float: left;
left: -65px; /*drag back photo dt */
margin: 0px;  
}
#contents dd.sketch img{  
position: relative;
top: 50px;
float: left;
left: -145px; /*drag back photo dt */
margin: 0px;  
}

#contents dd.foodsketch img{  
position: relative;
top: 50px;
float: left;
left: -280px; /*drag back photo dt */
margin: 0px;  
}

#contents dd.phom {
clear: both;
float: right;
right: 85px;
position: relative;
width: 410px; 
top: -80px;
color: slategray;
font-size: 0.9em; 
}
#contents dd.phom a {
color: slategray;
}
#contents dd.phom a:hover {
color: #ff3399; 
text-decoration: none;
}

#contents dd.pjou {
clear: both;
float: right;
right: 34px;
position: relative;
width: 460px; 
top: -20px;
color: slategray;
font-size: 0.9em; 
}
#contents dd.pjou a {
color: #99cc99;
text-decoration: none;
}
#contents dd.pjou a:hover {
color: #ff3399; 
text-decoration: none;
}

#contents dd.ptel {
clear: both;
float: right;
right: 34px;
position: relative;
width: 460px; 
top: -30px;
color: slategray;
font-size: 0.9em;
}
#contents dd.ptel a { /*compensate for img size of dtel*/
color: #99cc99;
text-decoration: none;
}
#contents dd.ptel a:hover {
color: #ff3399; 
text-decoration: none;
}
#contents dd.pfoo {
clear: both;
float: right;
right: 34px;
position: relative;
width: 460px; 
top: -46px;
color: #99cc99;
font-size: 0.9em;
}
#contents dd.pfoo a { /*compensate for img size of dtel*/
color: #99cc99;
text-decoration: none;
}
#contents dd.pfoo a:hover {
color: #ff3399; 
text-decoration: none;
}

#contents dd.poth {
clear: both;
float: right;
right: 34px;
position: relative;
width: 460px; 
top: -40px;
color: slategray;
font-size: 0.9em;
}
#contents dd.poth a {
color: #99cc99;
text-decoration: none;
}
#contents dd.poth a:hover {
color: #ff3399; 
text-decoration: none;
}
h1 {
color: #99cc99; 
font-size: 1.4em;
font-weight: 300; /* 600-900 = bold */
}
h2 {
color: #99cc99; 
font-size: 16px;
font-weight: 100; /* 600-900 = bold */
}
h3 {
color: #99cc99;
font-size: 12px;
line-height: -10px;
}

#contents dd.pcon {
clear: both;
float: right;
right: 34px;
position: relative;
width: 460px; 
top: -56px;
color: slategray;
font-size: 0.9em; 
}
#contents dd.pcon a {
color: slategray;
}
#contents dd.pcon a:hover {
color: #ff3399; 
text-decoration: none;
}
#contents dd.pcli {
clear: both;
float: right;
right: 34px;
position: relative;
width: 460px; 
top: -50px;
color: slategray;
font-size: 0.9em; 
}
#contents dd.pcli a {
color: slategray;
}
#contents dd.pcli a:hover {
color: #ff3399; 
text-decoration: none;
}
#contents dd.pbottom {
clear: both;
position: relative;
float: left;
left: 214px;
width: 460px; 
bottom: -40px;
color: slategray;
font-size: 0.9em; 
}
#contents dd.pbottom a {
color: slategray;
}
#contents dd.pbottom a:hover {
color: #ff3399; 
text-decoration: none;
}

#contents dd.para img{  
position: relative;
top: 80px;
float: left;
left: -10px; /*drag back photo dt */
margin: 0px;  
}