/****************************************************
  RESET - DO NOT ALTER!!!!!
****************************************************/
html,body,div,span,object,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,small,strike,strong,sub,sup,tt
dd,dl,dt,li,ol,ul,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  line-height: 1;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol,ul {
	list-style: none;
}
q:before,q:after,a blockquote:before,blockquote:after {
	content: "";
}

/*****************************************************
 FOUNDATIONS: 
****************************************************/
html {
 	margin: 0; padding: 0;
 	font-family: Arial, Verdana, Sans-Serif;
}
body {
	margin: 0; padding: 0;
	text-align: center;
	background: #e2efff url('../images/bg-rpt.gif') repeat-x;
}
#wrapper {
  margin: 0 auto;
  position: relative;
	text-align: left;
	width: 978px;
	min-height: 500px;
	background: url('../images/bg-top-main.jpg') top right no-repeat;
}

body.picket #wrapper {
  height: 769px;
  background: url('../images/bg-top-vegie.jpg') 18px 0 no-repeat;
}
body.vege-patch #wrapper {
  height: 769px;
  background: url('../images/bg-top-vegie.jpg') 18px 0 no-repeat;
}
body.in-the-garden #wrapper {
  height: 767px;
  background: url('../images/bg-in-garden.jpg') 16px 0 no-repeat;
}
body.project-list-games #wrapper {
  height: 767px;
  background: url('../images/bg-project-menu.jpg') 16px 0 no-repeat;
}
body.project-list #wrapper {
  height: 767px;
  background: url('../images/bg-project-menu2.jpg') 16px 0 no-repeat;
}
body.games #wrapper {
  height: 767px;
  background: url('../images/bg-games.jpg') 16px 0 no-repeat;
}
body.stuff #wrapper {
  height: 769px;
  background: url('../images/bg-top-school.jpg') 18px 0 no-repeat;
}

/* FOUNDATIONS: Headings, Parragraphs, Lists, etc
-------------------------------------------------- */
h1 {
	font-size: 30px;
	color: #005500;
	margin: 5px 0 20px 0;
	font-weight: bold;
}

h2 {
	font-size: 20px;
	color: #D31145;
	margin: 5px 0 20px 0;
	font-weight: bold;
}
h3 {
	font-size: 17px;
	color: #D31145;
	margin: 5px 0 20px 0;
	font-weight: bold;
}
h4 {
	font-size: 15px;
	color: #D31145;
	margin: 5px 0 20px 0;
	font-weight: bold;
}

p, li {
	font-size: 14px;
	color: #333;
	line-height: 18px;
		margin: 5px 0 10px 0;
}

strong {
  color: #d31145;
  font-weight: bold;
}

em {
  color: #d31145;
  font-style: italic;
}

strong em,
em strong {
  color: #d31145;
  font-weight: bold;
  font-style: italic;
}

a {
  color: #D31145;
}
a:hover {
  text-decoration: underline;
}

#picket ul, ol      { margin: 1.1em 0.5em 0.5em 1.1em; font-size: 12px; }
#picket ul          { list-style-type: disc; }
#picket ol          { list-style-type: decimal; }
#picket li          { line-height: 1.25; }


/*****************************************************
 HEADER: 
****************************************************/
#header {
  height: 190px;
}
#logo {
  position: absolute;
  width: 358px; height: 200px;
  left: 25px; 
}
#logo a {
  display: block;
  width: 358px; height: 200px;
  overflow: hidden;
  text-indent: -999em;
}
#main-nav-container {
  position: absolute;
  top: 0; right: 34px;
  height: 32px;
  background: url('../images/nav-bg-slide-main.gif') right no-repeat;
}
body.project-list #main-nav-container,
body.games #main-nav-container,
body.creatures #main-nav-container {
  position: absolute;
  top: 0; right: 34px;
  height: 32px;
  background: url('../images/nav-bg-slide-plain.gif') right no-repeat;
}
#main-nav-container ul {  
  float: right;
  height: 27px;
  padding: 5px 15px 0 15px;
  background: url('../images/nav-bg-corner.gif') top left no-repeat;
}
#main-nav-container li {
 display: inline;
 /*float: left;*/
 font-size: 12px;
 padding: 0 10px 0 11px;
 background: url('../images/nav-divider.gif') right no-repeat;
}
#main-nav-container li.last {
  background: none;
}
#main-nav-container li a {
  color: #fff;
}
#main-nav-container li a:hover {
  text-decoration: underline;
}

.dropdown {
  padding: 8px;
  width: 130px;
  background: #018122;
  position: absolute;
  top: 27px;
  z-index: 999;
}
.dropdown ul li {
  font-size: 12px;
  line-height: 15px;
  display: block;
}
.dropdown ul a {
  color:#fff;
}
.dropdown ul a:hover {
  color:#fff;
  text-decoration: underline;
}
#nav-in-the-garden-dropdown {
  position: absolute;
  top: 26px;
  right: 380px;
}
#nav-vege-patch-dropdown {
  position: absolute;
  top: 26px;
  right: 280px;
}
#nav-cool-projects-dropdown {
  position: absolute;
  top: 26px;
  right: 190px;
}
#nav-fun-and-games-dropdown {
  position: absolute;
  top: 26px;
  right: 90px;
}
#nav-school-stuff-dropdown {
  position: absolute;
  top: 26px;
  right: 50px;
}
#nav-garden-greenies-dropdown {
  position: absolute;
  top: 26px;
  right: 500px;
}

#search {
  position: absolute;
  top: 35px; right: 70px;
  width: 165px;
}
#search input.text {
  background: none;
  width: 118px;
  border: 0;
  padding: 0px 0 0 3px;
}
#search input.submit {
  width: 39px; height: 20px;
  border: 0;
  background: none;
  cursor: pointer;
}

/*****************************************************
 MAIN: 
****************************************************/
#main {
  text-align: center;
}
#creaturesflash {
  width: 926px; 
  height: 585px;
  margin: 0 auto;
  background: url('../images/creature-placeholder.jpg') center no-repeat;
}
#picket {
  position: absolute;
  top: 115px; right: 125px;
  width: 395px;
  height: 495px;
  overflow: hidden;
}
#picket .picket-content {
  height: 400px;
  overflow: auto;
}
#picket .picket-content-full {
  height: 495px;
  overflow: auto;
  padding-right: 5px;
}
#picket .step-nav {
  height: 90px;
  width: 385px;
 /* background: url('../images/veggie-step-nav.png') -17px 0 no-repeat;*/
}
#picket .step-nav ul {
  list-style: none;
}
/*body.in-the-garden #picket .step-nav {
  background: url('../images/garden-step-nav.png') -17px 0 no-repeat;(
}*/

body.in-the-garden #picket a {
  color: #fff;
}
#picket .step-nav li {
  float: left;
  text-indent: -999em;
  height: 78px; width: 85px;
  /*margin-left: 22px;*/
}
#picket .step-nav li a {
  display: block;  
  overflow: hidden;
  height: 78px; width: 85px;
}
#picket .step-nav li#picket-step-1 {
  margin-left: 5px;
  background: url('../images/vege-steps.png') -21px -2px no-repeat;
}
body.in-the-garden #picket .step-nav li#picket-step-1 {
  background: url('../images/garden-steps.png') -21px -2px no-repeat;
}
#picket .step-nav li#picket-step-1 a.active,
#picket .step-nav li#picket-step-1 a:hover {
  margin-left: 5px;
  background: url('../images/vege-steps.png') -26px -87px no-repeat;
}
body.in-the-garden #picket .step-nav li#picket-step-1 a.active,
body.in-the-garden #picket .step-nav li#picket-step-1 a:hover {
  background: url('../images/garden-steps.png') -26px -87px no-repeat;
}
#picket .step-nav li#picket-step-2 {
  margin-left: 8px;
  background: url('../images/vege-steps.png') -114px -2px no-repeat;
}
body.in-the-garden #picket .step-nav li#picket-step-2 {
  background: url('../images/garden-steps.png') -114px -2px no-repeat;
}
#picket .step-nav li#picket-step-2 a.active,
#picket .step-nav li#picket-step-2 a:hover {
  margin-left: 5px;
  background: url('../images/vege-steps.png') -119px -87px no-repeat;
}
body.in-the-garden #picket .step-nav li#picket-step-2 a.active,
body.in-the-garden #picket .step-nav li#picket-step-2 a:hover {
  background: url('../images/garden-steps.png') -119px -87px no-repeat;
}
#picket .step-nav li#picket-step-3 {
  margin-left: 8px; 
  background: url('../images/vege-steps.png') -206px -2px no-repeat;
}
body.in-the-garden #picket .step-nav li#picket-step-3 {
  background: url('../images/garden-steps.png') -206px -2px no-repeat;
}
#picket .step-nav li#picket-step-3 a.active,
#picket .step-nav li#picket-step-3 a:hover {
  margin-left: 5px;
  background: url('../images/vege-steps.png') -211px -87px no-repeat;
}
body.in-the-garden #picket .step-nav li#picket-step-3 a.active,
body.in-the-garden #picket .step-nav li#picket-step-3 a:hover {
  background: url('../images/garden-steps.png') -211px -87px no-repeat;
}
#picket .step-nav li#picket-step-4 {
  position: absolute;
  right: 13px;
  margin-left: 8px; 
  background: url('../images/vege-steps.png') -299px -2px no-repeat;
}
body.in-the-garden #picket .step-nav li#picket-step-4 {
  background: url('../images/garden-steps.png') -299px -2px no-repeat;
}
#picket .step-nav li#picket-step-4 a.active,
#picket .step-nav li#picket-step-4 a:hover {
  margin-left: 5px;
  background: url('../images/vege-steps.png') -304px -87px no-repeat;
}
body.in-the-garden #picket .step-nav li#picket-step-4 a.active,
body.in-the-garden #picket .step-nav li#picket-step-4 a:hover {
  background: url('../images/garden-steps.png') -304px -87px no-repeat;
}

#picket-line {
  position: absolute;
  top: 130px; right: 285px;
  width: 190px;
  height: 600px;
  overflow: hidden;
}
#picket-line .picket {
  width: 190px;
  height: 145px;
  margin-left: 4px;
}
#p1.picket {
  margin-top: 0;
}
#p2 {
  margin-top: 45px;
}
#p3 {
  margin-top: 40px;
}
#p4 {
  margin-top: 25px;
}
#p5 {
  margin-top: 25px;
}
#p6 {
  margin-top: 25px;
}
#picket-line .picket h2 {
  text-align: left;
  color: #4aaaf3;
  font-size: 18px;
  margin: 8px 0 0 3px;
  font-weight: bold;
}
#picket-line .picket h2 a  {
  color: #4aaaf3;
  font-weight: bold;
  text-decoration: none;
}
#picket-line .picket h2 a:hover {
  text-decoration: underline;
} 
#picket-line .picket p {
  font-size: 12px;
  line-height: 15px;
  color: #91001f;
  margin: 4px 5px 0 5px;
}


/*****************************************************
 Footer: 
****************************************************/
#footer-wrapper {
  background: url('../images/bg-footer.gif') repeat-x;
}
#footer {
  margin: 0 auto;
  position: relative;
	text-align: left;
	width: 978px;  
}
#footer ul {
  height: 54px;
  text-align: center;
}
#footer li {
  display: inline;
  font-size: 11px;
  padding: 0 8px 0 3px;
  background: url('../images/footer-divider.gif') right no-repeat;
}
#footer li.last {
  background: none;
}
#footer li a {
  color: #fff;
}
#footer li a:hover {
  text-decoration: underline;
}


/*****************************************************
 LEAVES: 
****************************************************/
#leaves {
  position: absolute;
  top: 205px; left: 60px;
  height: 268px; width: 317px;
}
#leaves li {  
  text-indent: -999em;
}
#leaves li a {
  overflow: hidden;
}
#leaves li.growing-tomatoes {
  position: absolute;
  top: 0px; left: -10px;
}
#leaves li.growing-tomatoes a {
  display: block;
  width: 218px;
  height: 139px;
  background: url('../images/leaves-growing-tomatoes.png') 0 0 no-repeat;
}
#leaves li.growing-tomatoes a.active,
#leaves li.growing-tomatoes a:hover {
  background: url('../images/leaves-growing-tomatoes.png') -2px -144px no-repeat;
}
#leaves li.growing-strawberries {
  position: absolute;
  top: 140px; left: 40px;
}
#leaves li.growing-strawberries a {
  display: block;
  width: 212px;
  height: 103px;
  background: url('../images/leaves-growing-strawberries.png') 0 0 no-repeat;
}
#leaves li.growing-strawberries a.active,
#leaves li.growing-strawberries a:hover {
  background: url('../images/leaves-growing-strawberries.png') 0 -104px no-repeat;
}
#leaves li.growing-carrots {
  position: absolute;
  top: 255px; left: -20px;
}
#leaves li.growing-carrots a {
  display: block;
  width: 210px;
  height: 90px;
  background: url('../images/leaves-growing-carrots.png') 0 0 no-repeat;
}
#leaves li.growing-carrots a.active,
#leaves li.growing-carrots a:hover {
  background: url('../images/leaves-growing-carrots.png') 0 -90px no-repeat;
}
#leaves li.grow-a-giant-sunflower {
  position: absolute;
  top: 0px; left: -10px;
}
#leaves li.grow-a-giant-sunflower a {
  display: block;
  width: 218px;
  height: 121px;
  background: url('../images/leaves-grow-sunflower.png') 0 0 no-repeat;
}
#leaves li.grow-a-giant-sunflower a.active,
#leaves li.grow-a-giant-sunflower a:hover {
  background: url('../images/leaves-grow-sunflower.png') 0 -121px no-repeat;
}
#leaves li.build-a-worm-farm {
  position: absolute;
  top: 128px; left: -30px;
}
#leaves li.build-a-worm-farm a {
  display: block;
  width: 212px;
  height: 113px;
  background: url('../images/leaves-build-worm.png') 0 0 no-repeat;
}
#leaves li.build-a-worm-farm a.active,
#leaves li.build-a-worm-farm a:hover {
  background: url('../images/leaves-build-worm.png') 2px -113px no-repeat;
}
#leaves li.how-to-make-compost {
  position: absolute;
  top: 255px; left: -10px;
}
#leaves li.how-to-make-compost a {
  display: block;
  width: 210px;
  height: 127px;
  background: url('../images/leaves-how-compost.png') 0 0 no-repeat;
}
#leaves li.how-to-make-compost a.active,
#leaves li.how-to-make-compost a:hover {
  background: url('../images/leaves-how-compost.png') 0 -134px no-repeat;
}
#leaves li.beat-the-meanies {
  position: absolute;
  top: 40px; left: -50px;
}
#leaves li.beat-the-meanies a {
  display: block;
  width: 185px;
  height: 108px;
  background: url('../images/leaves-meanies.png') 0 0 no-repeat;
}
#leaves li.beat-the-meanies a.active,
#leaves li.beat-the-meanies a:hover {
  background: url('../images/leaves-meanies.png') 0 -108px no-repeat;
}
#leaves li.garden-greenie-quiz {
  position: absolute;
  top: 148px; left: -40px;
}
#leaves li.garden-greenie-quiz a {
  display: block;
  width: 152px; height: 104px;
  background: url('../images/leaves-quiz.png') 0 0 no-repeat;
}
#leaves li.garden-greenie-quiz a.active,
#leaves li.garden-greenie-quiz a:hover {
  background: url('../images/leaves-quiz.png') 0 -104px no-repeat;
}
#leaves li.colouring-in-sheets {
  position: absolute; 
  top: 251px; left: -40px;
}
#leaves li.colouring-in-sheets a {
  display: block;
  width: 177px; height: 106px;
  background: url('../images/leaves-colouring-sheets.png') 0 0 no-repeat;
}
#leaves li.colouring-in-sheets a.active,
#leaves li.colouring-in-sheets a:hover {
  background: url('../images/leaves-colouring-sheets.png') 0 -105px no-repeat;
}

#leaves li.build-a-garden-scarecrow {
  position: absolute;
  top: -5px; left: 15px;
}
#leaves li.build-a-garden-scarecrow a {
  display: block;
  width: 208px; height: 104px;
  background: url('../images/leaves-build-a-scarecrow.png') 0 0 no-repeat;
}
#leaves li.build-a-garden-scarecrow a.active,
#leaves li.build-a-garden-scarecrow a:hover {
  background: url('../images/leaves-build-a-scarecrow.png') 0 -107px no-repeat;
}
#leaves li.make-a-fairy-garden {
  position: absolute;
  top: 105px; left: -40px;
}
#leaves li.make-a-fairy-garden a {
  display: block;
  width: 208px; height: 118px;
  background: url('../images/leaves-build-a-fairy-garden.png') 0 0 no-repeat;
}
#leaves li.make-a-fairy-garden a.active,
#leaves li.make-a-fairy-garden a:hover {
  display: block;
  width: 208px; height: 118px;
  background: url('../images/leaves-build-a-fairy-garden.png') 0 -119px no-repeat;
}
#leaves li.grow-seedlings-for-your-school-fete {
  position: absolute;
  top: 230px; left: -40px; 
}
#leaves li.grow-seedlings-for-your-school-fete a {
  display: block;
  width: 178px; height: 104px;
  background: url('../images/leaves-grow-seedlings.png') 0 0 no-repeat;
}
#leaves li.grow-seedlings-for-your-school-fete a.active,
#leaves li.grow-seedlings-for-your-school-fete a:hover {
  background: url('../images/leaves-grow-seedlings.png') 0 -104px no-repeat;
}

#leaves li.school-of-the-month {
  position: absolute;
  top: -20px; left: 10px; 
}
#leaves li.school-of-the-month a {
  display: block;
  width: 178px; height: 104px;
  background: url('../images/leaves-school-of-the-month.png') 0 0 no-repeat;
}
#leaves li.school-of-the-month a.active,
#leaves li.school-of-the-month a:hover {
  background: url('../images/leaves-school-of-the-month.png') 0 -103px no-repeat;
}


#leaves li.interactive-lessons {
  position: absolute;
  top: 100px; left:  -20px; 
}
#leaves li.interactive-lessons a {
  display: block;
  width: 201px; height: 118px;
  background: url('../images/leaves-interactive-lessons.png') 0 0 no-repeat;
}
#leaves li.interactive-lessons a.active,
#leaves li.interactive-lessons a:hover {
  background: url('../images/leaves-interactive-lessons.png') 0 -119px no-repeat;
}

#leaves li.school-grants {
  position: absolute;
  top: 240px; left:  -20px; 
}
#leaves li.school-grants a {
  display: block;
  width: 201px; height: 106px;
  background: url('../images/leaves-school-grants.png') 0 0 no-repeat;
}
#leaves li.school-grants a.active,
#leaves li.school-grants a:hover {
  background: url('../images/leaves-school-grants.png') 0 -106px no-repeat;
}


#leaves li.previous {
  position: absolute;
  top: -10px; left: -25px; 
}
#leaves li.previous a {
  display: block;
  width: 178px; height: 104px;
  background: url('../images/leaves-previous.png') 0 0 no-repeat;
}
#leaves li.previous a.active,
#leaves li.previous a:hover {
  background: url('../images/leaves-previous.png') 0 -107px no-repeat;
}

#leaves li.next {
  position: absolute;
  top: 55px; left: 170px; 
}
#leaves li.next a {
  display: block;
  width: 178px; height: 90px;
  background: url('../images/leaves-next.png') 0 0 no-repeat;
}
#leaves li.next a.active,
#leaves li.next a:hover {
  background: url('../images/leaves-next.png') 0 -93px no-repeat;
}

#gameflash {
  position: absolute;
  top: 222px; left: 222px;
  width: 700px; height: 500px;
}
#gametitle {
  position: absolute;
  width: 318px;
  height: 70px;
  left: 415px;
  top: 80px;
}
#gametitle h1 {
  margin-top: 20px;
  font-size: 30px;
  color: #de0000;
  font-weight: bold;
  text-align: center;
}

body.games #more-projects-link a {
  left: 0;
  bottom: 0;
  height: 195px;
}

body.project-list #more-projects-link a {
  height: 200px;
  width: 250px;
  bottom: 180px;
}


/*****************************************************
 Forms: 
****************************************************/
#picket form {
  overflow: auto;
  height: 475px;
}
#picket form p {
  display: block;
  clear: both;
}
#picket form label {
  width: 140px;
  padding-bottom: 10px;
  font-size: 13px;
  font-weight: bold;
  display: block;
}
#picket form input.text {
  display: block;
  width: 210px;
}
#picket form textarea {
  clear: both;
  float: none;
  display: block;
  width: 350px;
  height: 140px;
}
#picket form input.submit {
  cursor: pointer;
}

#more-projects-link a {
  display: block;
  position: absolute;
  bottom: 5px;
  height: 280px;
  width: 200px;
  left: 200px;
  text-indent: -999em;
  overflow: hidden;
}