html { height: 100%; }

body {
	height: 100%;
	}


* {
	margin: 0;
	padding: 0;
	}

#siteWrapper {
	width: 750px;
	margin: 0 auto;
	padding: 0;

	/* Footer Clearing Code */
	
	position: relative;
	min-height: 100%;
	overflow: visible;
	
	/* Appearance */
	
	background: white center bottom no-repeat url(../images/structure/body/bg.gif);
	
	}

* html #siteWrapper {
	height: 100%;
	overflow: visible;
	}

/* Top Pane
------------------------------------------------------------------------------------------------------ */

div#topPane {
	position: relative; display: block;
	top: 0; left: 0;
	width: 750px;
	
	background: white top left no-repeat url(../images/structure/topPane/bg.jpg);
	
	}

	div#navWrapper {
		position: absolute; display: block; z-index: 10;
		top: 107px; left: 0;
		width: 154px; height: 203px;
		background: transparent top left no-repeat url(../images/structure/topPane/navbg.jpg);
		}
		
	div#loginWrapper {
		position: absolute; display: block; z-index: 9;
		top: 309px; left: 0;
		width: 154px;
		font-size: 9px;
		color: #669900;
		}
	
	div#topPane div#loginWrapper div.contentWrapper {
		position: relative;
		top: 0px; left: 18px;
		width: 136px;
		background: transparent left bottom no-repeat url(../images/structure/topPane/loginbg.png);
		padding: 4px 0;
		text-align: center;
		}
	
	div#loginWrapper input {
		font-size: 9px;
		width: 120px;
		color: #669900;
		}

	div#loginWrapper div.userLinks {
		width: 134px;
		padding: 4px 0 8px 0;
		text-align: center;
		font-size: 9px;
		font-weight: bold;
		}

	div#loginWrapper div.userLinks a {
		color: #669900;
		text-decoration: none;
		}

	div#loginWrapper div.userLinks a:hover {
		color:  #be2f01;
		text-decoration: none;
		}

	div#loginWrapper div.genLinks {
		width: 131px;
		text-align: center;
		margin: 0.5em 0 0 20px;
		}
	
	div#loginWrapper div.genLinks a {
		color: #669900;
		display: block;
		padding: 3px 0 0 0;
		text-decoration: none;
		}
		
	div#loginWrapper div.loginButton {
		display: block;
		margin: 3px auto;
		height: 13px; line-height: 13px;
		}		
	
	
	div#loginWrapper input#loginSubmit {
		width: 13px; height: 13px;
		vertical-align: middle;
		}		
		
	/* imageWrapper contains microscope image and search block
	------------------------------------------------------------------------------------------------------ */

	div#imageWrapper {
		position: absolute; display: block; z-index: 7;
		bottom: 57px; right: 0;
		width: 195px; height: 185px;
		overflow: hidden;
		background: transparent top right no-repeat url(../images/structure/topPane/microscope.jpg);
		}
		
		div#searchBlock {
			position: absolute; z-index: 2;
			bottom: 0; right: 0;
			width: 195px; height: 26px;
			background: transparent top right no-repeat url(../images/forms/search_bg.png);
			}
			
		* html div#searchBlock {
			background: transparent 1px top no-repeat url(../images/forms/search_bg.png);
			}
			
		div#searchBlock input {
			font-size: 9px;
			width: 110px;
			color: #669900;
			margin-top: 4px;
			margin-left: 50px;
			}

		* html div#searchBlock input {
			margin-top: 3px;
			}	
			
		div#searchBlock input#searchSubmit {
			position: absolute; z-index: 3;
			top: 6px; right: 12px;
			width: 13px; height: 13px;
			margin: 0 !important;
			padding: 0 !important;
			}			
								
		
	/* topRow contains home link and is used for relative vertical sizing
	------------------------------------------------------------------------------------------------------ */
	
	div#topRow {
		position: relative; display: block;
		top: 0; left: 0;
		width: 750px; height: 137px;
		}
	
	div#topRow a#homeLink {
		position: absolute; display: block; z-index: 12;
		top: 16px; left: 21px;
		width: 66px;
		height: 84px;
		}
		
	div#topRow a#homeLink img {
		display: block;
		width: 100%; height: 100%;
		border: none;
		}

	/* listWrapper contains table with fruit sublinks and is used for relative vertical sizing
	------------------------------------------------------------------------------------------------------ */

	div#listWrapper {
		position: relative; display: block; z-index: 8;
		top: 0; left: 160px;
		width: 568px; height: 183px;
		}

	div#listWrapper table td ul {
		color: #333333;
		text-transform: capitalize;
		margin: 0 0 0 -7px;
		}

	div#listWrapper table td ul li {
		list-style-type: none;
		margin: 8px 0 0 0;
		padding: 0;
		}

	div#listWrapper table td {
		width: 153px;
		padding: 0 0 0 15px;
		}
		
	div#listWrapper table td.midCol {
		width: 158px;
		border-left: 1px solid #479e18;
		border-right: 1px solid #479e18;
		}		

	/*	topPane contentWrapper contains the first paragraph of introduction text.
		Note that the contentWrapper class is used in many places but styled specifically by it's
		parent ID e.g div#topPane div.contentWrapper, this targets the class "contentWrapper" with
		div with ID "topPane"
	------------------------------------------------------------------------------------------------------ */

	div#topPane div.contentWrapper {
		position: relative; display: block;
		top: 0; left: 0;
		width: 750px;
		background: transparent top left repeat-y url(../images/structure/topPane/contentbg.jpg);
		}
		
		div#topPane div.contentWrapper div.bgImage {	
			position: relative; display: block;
			top: 0; left: 0;
			width: 750px;
			background: transparent bottom left no-repeat url(../images/structure/topPane/test.jpg);
			}
				
		div#topPane div.contentWrapper div.content {
			position: relative; display: block;
			top: 0; left: 177px;
			width: 370px;
			padding: 10px 0 10px 15px;
			}	
		
	/* tpFooter contains the green rounded corner rectangle which expands or contracts to accomodate content
	------------------------------------------------------------------------------------------------------ */

	div#tpFooter {	
		position: relative; display: block;
		left: 0;
		width: 750px; height: 40px;
		background: transparent top left no-repeat url(../images/structure/topPane/tpFooterbg.jpg);
		}
		
		div#tpFooter table {	
			position: relative;
			top: 0; left: 0;
			height: 40px;
			background: transparent left top no-repeat url(../images/structure/topPane/tpFootertile.jpg);
			}
			
		div#tpFooter table td.content {
			padding: 0 5px 4px 20px;
			vertical-align: middle;
			}

		div#tpFooter table td.endcap {
			width: 21px;
			height: 40px;
			background: transparent left top no-repeat url(../images/structure/topPane/tpFootercap.jpg);
			}

/*	Bottom Pane
	specific bottomPane layouts are accomplished using a class name on the body tag, this additional
	selector gives us some flexibilty within the cascading inheritance of css
------------------------------------------------------------------------------------------------------ */

div#bottomPane {
	position: relative; display: block;
	width: 750px;
	padding-bottom: 50px;
	}

	/* Layout for home page
	------------------------------------------------------------------------------------------------------ */

	body.home div#bottomPane {
		background: transparent left top no-repeat url(../images/home/bg.jpg);
		margin-top: -4px;
		height: 150px;
		}
		
	body.home div#bottomPane div.contentWrapper {
		width: 500px;
		margin-left: 215px;
		padding-top: 15px;
		padding-left: 15px;
	}
	
	/* Layout for pages without a green fold
	------------------------------------------------------------------------------------------------------ */

	body.white div#bottomPane {
		margin-top: -4px;
		}
		
	body.white div#bottomPane div.contentWrapper {
		width: 680px;
		margin-left: 22px;
		padding-top: 15px;
		padding-left: 15px;
	}
	
	/* Layout for pages with green fold
	------------------------------------------------------------------------------------------------------ */

	body.green div#bottomPane {
		position: relative; display: block;
		width: 705px;
		}

	body.green div#bottomPane div.greenBlock {
		width: 705px;
		margin-left: 15px;
		padding: 10px;
		background: #edf5ea;
	}
		
	body.green div#bottomPane div.contentWrapper {
		position: relative; display: block;
		width: 705px;
		margin-left: 22px;
		padding-top: 15px;
		padding-left: 15px;
		padding-bottom: 30px;
	}