/* ---------->>> GLOBAL <<<-----------*/

* { margin: 0; padding: 0; }

body {
	background: #88944A url(tile.jpg);
	color:#684F40;
 	font: .8em Verdana, Helvetica, sans-serif;
   }

h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { 
	padding:0;
	margin:0; 
	}

li, dd { margin-left:5%; }
fieldset { padding: .5em; }

a { text-decoration: none; color: #fff; }

/* ---------->>> DIVS <<<-----------*/

#wrapper { 
 margin: 0 auto;
 width: 800px;
 background-color: #fff;
}

#header {
 background: #76842D url(topbar.jpg) top left no-repeat;
 width: 800px;
 height: 110px !important;
}

#navarea {
 width: 798px;
 height: 25px;
 background-color: #B0C7E3;
 border: 1px solid #81A2A4;
}

#indexcontent {
 background: #fff url(index_bg.jpg) top left no-repeat;
 width: 800px; 
 height: 462px;
}
#content { 
  width: 450px;
  margin: 0 auto;
  margin-top: 50px;
}
#curve {
 background: #fff url(curve.jpg) bottom left no-repeat;
 width: 800px; 
 height: 133px;
}

#footer {
 background: url(greenbar_btm.gif);
 width: 800px; 
 height: 22px;
}

/* ---------->>> HEADER ITEMS <<<-----------*/

h1 { }

	#header h1 {
	height:60px; /* height of logo */
	width:254px; /* width of logo */
	background: url(pf_logo.gif) bottom left no-repeat;
	text-indent:-9000px;
	padding-top: 30px;
	float: right;
	}
	
	#content h1, #indexcontent h1, #formmatted h1 {
	font: italic 17px "Verdana";
	color: #679AC9;
	}
	
	#indexcontent h1 {
	color: #fff;
	}

h2 { }
	#indexcontent h2, #indexcontent h2 a {
	font: 16px "Verdana";
	color: #679AC9;
	padding-top: 10px;
	}
	
	#content h2, #formmatted h2 {
	font: 16px "Verdana";
	color: #679AC9;
	}

p { }
	
	#content p, #indexcontent p, #formmatted p {
	margin-bottom: 20px;
	}
	
	#curve p { 
	font: italic 15px "Verdana";
	color: #fff;
	text-align: right;
	padding-top: 90px;
	margin-right: 20px;
	}

a { }
	#header a {
	display:block;
	width:100%;
	height:98%;
	outline:none;
	}
	
	#content a { color: #679AC9; }

ul { }
	#navarea ul { float: right; }
	
/* ---------->>> Global Navigation <<<-----------*/

#nav {
  width:650px;
  padding:0; 
  list-style-type:none;
  z-index: 400;
  }
#nav li {
  float:left;
  width:120px;
  border-left:1px solid #90B0CD; 
  padding: 0; margin: 0;
  }
#nav a {
  display:block;
  width:120px;
  color:#fff; 
  background-color:#B0C7E3; 
  text-align:center; 
  padding:4px 0; 
  padding-top: 5px;
  text-decoration:none; 
  float:left; 
  }
#nav a:hover {
  color:#fff; 
  background-color:#8E9A52;
  }

#sub {  
	margin-top: 5px;
	margin-left: 185px;
	font-size: 11px;
}
#sub a  { 
 color: #684F40;
 padding-left: 0px;
}
#sub a.on  { 
 color: #679AC9;
}
#sub a:hover { 
 color: #679AC9;
}

#about .about, #pieces .pieces, #picture .picture, #assessment .assessment, #contact .contact {
  background-color:#8E9A52;
}
/* ---------->>> INDEX Tags <<<-----------*/

.box {
/*background: url(box.png) top left no-repeat;*/
height: 114px;
width: 220px;
margin: 12px;
margin-top: 50px;
padding-left: 10px;
color: #687818;
float: left;
}

.title, .title a {
	font: 16px "Verdana";
	color: #679AC9;
	}
	
.body, .body a { font-size: 10px; line-height: 16px; color:#684F40; }

a.thepieces, a.thepicture, a.theassessment {  
	width:220px; height:114px; 
	display: block;
	float: left;
	margin-top: 50px;
	margin-left: 20px;
	}
	
.first	{ margin-left: 30px;}
	
a.thepieces:hover { width:220px; height:114px; background-image: url(../images/tthepieces_on.png) }
a.thepicture:hover { width:220px; height:114px; background-image: url(../images/thepicture_on.png) }
a.theassessment:hover { width:220px; height:114px; background-image: url(../images/theassessment_on.png) }

.puzzle { height: 107px; background: url(../images/puzzle.png) bottom right no-repeat; }
.puzzlepieces { height: 107px; background: url(../images/pieces.png) center right no-repeat; }
.puzzlehouse { height: 107px; background: url(../images/puzzlehouse.png) center right no-repeat; }

.intro { font-style: italic; }
/* ---------->>> FOOTER Tags <<<-----------*/

#footer p { padding-left: 100px; padding-top: 50px; text-align: left; color:#fff;  }
.small { font-size: 10px; color: #999;}
.clear { clear: both; background: none; }