html, body { height: 100%; 
}

body {
	
	font-family: Palatino, "Times New Roman", serif;
font-weight: 100;
	color: #472519;
	padding: 0;
margin: 0 0 1px 0;
font-size: 76%;

}

.container {
margin: 0;
width: 760px;
_height: 0; /* hasLayout for IE < 7 */
min-height: 100%; /* hasLayout for IE 7 */
background: transparent;
padding: 0px;
}


.container#home { border-top: solid 5px rgb(101,0,15); }
.container#counselling { border-top: solid 5px rgb(170,0,63); }
.container#supervision { border-top: solid 5px rgb(177,44,1); }
.container#divorce { border-top: solid 5px rgb(111,111,0); }
.container#training { border-top: solid 5px rgb(70,125,0); }
.container#rooms { border-top: solid 5px rgb(0,95,46); }
.container#fees { border-top: solid 5px rgb(0,48,138); } /* 0,94,138 */
.container#contact { border-top: solid 5px rgb(16,12,92); } /* 22,18,122 */
.container#history { border-top: solid 5px rgb(56,0,57); }

/*
.container#home[border] { border-color: rgb(101,0,15); }
.container#home [border] { border-color: rgb(255,0,0); }
*/


#logo {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 560px;

}



#home #logo { background: url(smalldeepredlogo.png); }
#counselling #logo { background: url(smallpinklogo.png); }
#supervision #logo { background: url(smallterralogo.png); }
#divorce #logo { background: url(smallmustardlogo.png); }
#training #logo { background: url(smalllimelogo.png); }
#rooms #logo { background: url(smallgreenlogo.png); }
#fees #logo { background: url(smallmidbluelogo.png); }
#contact #logo { background: url(smallnavylogo.png); }
#history #logo { background: url(smallpurplelogo.png); }



li a#deepred { border-top: solid 3px rgb(101,0,15); }
li a#red { border-top: solid 3px rgb(170,0,63); }
li a#terra { border-top: solid 3px rgb(177,44,1); }
li a#brown { border-top: solid 3px rgb(111,111,0); }
li a#lime { border-top: solid 3px rgb(70,125,0); }
li a#green { border-top: solid 3px rgb(0,95,46); }
li a#aqua { border-top: solid 3px rgb(0,48,138); }
li a#blue { border-top: solid 3px rgb(16,12,92); }
li a#purple { border-top: solid 3px rgb(56,0,57); }


.container#home img { border-color: rgb(101,0,15); }
.container#counselling img { border-color: rgb(170,0,63); }
.container#supervision img { border-color: rgb(177,44,1); }
.container#divorce img { border-color: rgb(111,111,0); }
.container#training img { border-color: rgb(70,125,0); }
.container#rooms img { border-color: rgb(0,95,46); }
.container#fees img { border-color: rgb(0,48,138); }
.container#contact img { border-color: rgb(16,12,92); }
.container#history img { border-color: rgb(56,0,57); }


/* 
   how about elements bearing a class of "thiscolour" and pages an id of "thispage"
   then treat like an abstracted variable?
*/


h1, h2, h3, h4 {
font-family: "Trebuchet MS","Gill Sans","Helvetica Neue", Helvetica, Geneva, Arial, Tahoma, Verdana, sans-serif;
font-weight: 100;
}
/*
h1 {font-size: 4em;
margin: 0;
padding: 0; 
line-height: 1;
}
*/

h1 {font-size: 1.8em;
margin: 0.7em 0 0.7em -9em;
position: relative; 
_height: 0; /* hasLayout for IE < 7 */
min-height: 100%; /* hasLayout for IE 7 */
}

/* Add layout to avoid truncation */

h2 {font-size: 1.2em;}



#content { 
line-height: 1.5;
margin: 0 0 0 19em;
padding: 0 1em 50px 0;
font-size: 1.1em;

_height: 0; /* hasLayout for IE < 7 */
min-height: 100%; /* hasLayout for IE 7 */
}

#content p { margin: 1em 0; }

br { clear:both; }


ul {
list-style-type: none;
margin: 0;
padding: 0 10px 0 0;

}







/* 
   The floated nav expands its containers in IE, of course, including IE 7 (should it?)
   Probably need to add hacks to expand containers in all browsers.  Could move the h2
   into the header divs to do this but that is non-semantic.
*/

#navwrap { background: #f8f8e0;
background: rgb(177,159,84) url(painting4.jpg) left bottom no-repeat; 
padding: 0 200px 100px 0;
color: #b52c00;
}

#navigation {
font-family: "Trebuchet MS", "Gill Sans","Helvetica Neue", Helvetica, Geneva, Arial, Tahoma, Verdana, sans-serif;
font-weight: 100;
width: 560px;
padding: 1em 0.9em 0 1em;
font-size: 1em;
font-weight: 100;
margin: 0;
background: transparent;
}

#navigation li {
display: inline;
float: left;
}

#navigation a {
color: white;
white-space: nowrap;
}

#navigation li a { display: block;
padding: 0.1em 1px;
margin: 0 1em 1em 1em;
text-decoration: none;
border-top: solid 3px red;
}

/*\*//*/
#navigation li a { display: inline-block; }
/**/

/* IE Mac displays a vertical list without this */


a {color: #472519;}

li a:link {
color: #472519;
}

li a:visited {

}

li a:hover {

}

li a:active {

}

#navigation:after {
content: ".";
clear: both;
height: 0;
visibility: hidden;
display: block;
}

.right { float: right; 
text-align: right;
margin: 0 0 0 3em;
}

.left_img {
float: left;
clear: left;
border: 2px solid;
margin: 1px 0 1px -16em;
position: relative; /* for IE to show image when dragged out of container by -ve margin */
}


#footer {
font-family: "Times New Roman", serif;

margin: 20px 0 0 19em; 
text-align: center;
clear: both;
position: absolute;
bottom: 0;
}

#footer a { text-decoration: none; }