/* commented backslash hack to block this from IE5/Mac - see http://www.quirksmode.org/css/100percheight.html for the reason \*/ 
html, body {
	height: 100%;
} 
/* end hack */

body, td { /* td is for IE5/Win */
	font-family: Verdana, sans-serif;
	font-size: 11px;
}

body {
	margin: 0;
	padding: 0;
	background-color: #f1bc0c;
	text-align: center; /* for IE 5.5 */
	background-image: url(yellowPlaster.jpg);
	background-repeat: repeat;
	background-position: top center;
}

.spacer { /* this is only used for IE5/Mac issues */
	clear: both;
	padding-top: 1px; /* sometimes, clearing divs don't work in IE5/Mac without taking up space */
	margin-top: -1px; /* to counter the above */
}

a:hover { color: #D79B07; }
a img { border: none; }

sup a { text-decoration: none; }

#contentArea {
	position: relative;
	margin-left: auto;  /* left and right margins are explicitly declared because        */
	margin-right: auto; /* "margin: 0 auto" doesn't work for centering tables in IE5/Mac */
	width: 722px;
	text-align: center; /* for IE 5.5 */
	background-image: url(grassBG.jpg);
	background-repeat: repeat-y;
	xbackground-position: 30px top;
	height: 100%;
}

	#contentArea td {
		vertical-align: top;
	}

	div.panelBox {
		position: relative;
		width: 676px;
		text-align: left; /* for IE 5.5 */
		background-color: #e7e9f1;
		padding-bottom: 1px; /* to enforce minimum height w/bg in Mozilla */
	}
	
		div.wide {
			background-image: none;
			background-color: #e7e9f1;
		}
		
		div.split {
			background-image: url(panelSplitBG.gif);
			background-color: transparent;
		}
		
		div.offset {
			background-image: url(panelSplitOffsetBG.gif);
			background-color: transparent;
		}
	
		#contentArea div.panelJSBox {
			position: relative;
			width: 704px;
			width: 676px;
			text-align: left; /* for IE 5.5 */
			background-color: transparent;
			background-image: none;
			padding: 1px 0; /* to enforce minimum height w/bg in Mozilla */
			padding: 14px;
			xpadding-top: 50px;
			xpadding-bottom: 10px;
			xborder: 1px solid red;
		}

			/* stuff to handle auto-clearing of elements with floats without the need for a clearing div */				
			/* thanks to: http://www.positioniseverything.net/easyclearing.html */	
			div.panelBox:after,			
			div.panelJSBox:after {
				content: ".";
				display: block;
				visibility: hidden;
				clear: both;
				height: 0;
				font-size: 0.1em;
				line-height: 0;
			}
			div.panelBox { /* for IE/Mac */
				xdisplay: inline-table; 
				xdisplay: inline-block;
				display: block;
				margin: 8px 23px;
				xfloat:left;
				xclear: left;
			}
			div.panelJSBox { /* for IE/Mac */
				xdisplay: inline-table; 
				display: block;
				xdisplay: inline-block;
				xmargin: 0 7px;
				xmargin: 0 0 -80px 9px;
				margin: 0 0 0px 9px;
				xoverflow: hidden;
				xfloat:left;
				xclear: left;
				xfloat: none;
			}
			
			/* hide from IE/Mac \*/
			* html div.panelBox,
			* html div.panelJSBox { height: 1%; }
			div.panelBox { 
				display: block;
				margin: 15px auto;
			}
			div.panelJSBox { 
				display: block;
				margin: 0 auto;
			}
			/* end hide from IE/Mac */		
	
		div.split {
			/* overflow: hidden; */
			/* display: block; */
			/* for Float(nearly)Everything hack - http://orderedlist.com/articles/clearing-floats-fne/ */
			/* float: left; */
			/* clear: left; */
			/* display: inline; /* for IE/Win double-margin float bug */
		}
		
		/* body div.split { background-color: transparent; } */
		/* body div.split div.panelContent { background-color: #e7e9f1; } */
		
		div.wedge {
			float: left;
			width: 1px;
			/* background-color: yellow; */
			margin-left: -1px; /* for IE */
			display: inline;
		}		

		img.panelTop,
		img.panelMiddle,
		img.panelBottom {	
			position: relative;
			z-index: 1;
			left: 0;
			width: 704px;
			margin: 0;
			display: block;
			/* border: 1px solid red; */
		}
		
		div.panelImages {
			position: absolute;
			top: 0;
			left: 0; /* for IE/Win, to keep floated content from the split boxes from pushing this over */
			/* border: 1px solid cyan; */
			z-index: -1; /* for Opera, to avoid z-index issues with a floated div.panelContent */
		}

		img.panelTop,
		img.panelBottom {
			height: 86px;
		}
		
		
		img.panelBottom {
			position: aboslute;
			bottom: 0;
		}

		img.panelMiddle {
			xtop: 86px;
			xbottom: 86px; /* setting height implicitly (by using 'top' and 'bottom' values) only seems to work */
			height: auto; /* in Mozilla, so JavaScript is used inline to set a height in other browsers        */
			xborder: 1px solid red;
		}

		img.grassOverlay {
			xposition: absolute;
			xbottom: -80px;
			xleft: -9px;
			z-index: 5;
			width: 722px;
			height: 130px;
			xoverflow: hidden;
			
			/* for IE/Mac only */
			clear: left;
			xposition: relative;
			xmargin: -50px 0 -80px -9px;
			
			position: absolute;
			bottom: -80px;
			left: -9px;
			xleft:0; /* for inline-block config */
			margin: 0;
		}
		/* hide from IE/Mac \*/
		img.grassOverlay {
			position: absolute;
			bottom: -80px;
			left: -9px;
			margin: 0;
		}
		/* end hide from IE/Mac */	

		div.panelContent {
			position: relative;
			z-index: 2;
			padding: 1px 0; /* padding is here to force the computed size of this block to start from it's edges, regardless of whether it has contents that reach it's edges */
						  /* (i.e., if a sole inner element had a left-margin of 10px, then this block's computed  width would be 10px less, */
						  /* which affects background rendering and JavaScript that needs the computed dimensions of this block)             */
			xborder: 1px solid cyan;
		}
		
			div.panelJSBox div.panelContent {
				/* 
				margin: 14px;
				margin-bottom: 0;
				padding-bottom: 14px;
				*/
			}
		
			div.split div.panelContent {
				/* border: 1px solid red; */
				/* margin: 0 -1px; /* to make room for testing border */
				width: 327px;
				display: inline; /* for IE/Win double-margin float bug */
			}
		
			div.offset div.panelContent {
				display: inline; /* for IE/Win double-margin float bug */
			}
			
			div.offset div.panelContent.left { width: 474px; }
			div.offset div.panelContent.right { width: 180px; }
			
			/*
			div.split { height: 1%; }
			div.split div.panelContent { height: 1%; }
			*/


				div.panelJSBox.split div.left,
				div.panelJSBox.split div.right {
					/* width: 350px; */
					width: 322px;
					
					/* margin-top: 0; */
					/* padding-top: 14px; */
				}
				
				div.panelJSBox.offset div.left { width: 474px; }
				div.panelJSBox.offset div.right { width: 175px; }
				
				div.split div.left { float: left; }	
				div.split div.right { float: right; }
				
				div.offset div.left { float: left; }	
				div.offset div.right { float: right; }
				
					
			div.panelText {
				margin: 15px;
				margin: 14px;
				/* background-color:red; */
			}
			
				div.panelJSBox div.panelText {
					/* margin: 30px; */
					/* margin: 14px; */
					margin: 0 14px;
					margin: 0 16px;
					padding: 0 0 14px 0;
					/* margin-bottom: 0; /* ************************ */
					/* border:1px solid green; */
					/* http://www.l-c-n.com/IE5tests/misc/index.shtml#gap */
						/*
						margin-bottom: 0;
						margin-top: 0;
						border: 1px solid magenta;
						height: 200px;
						width: 644px;
						overflow: hidden;
						margin: 0;
						*/
				}
				
				div.panelText h4 {
					padding-top: 15px;
					font-size: 11px;
					font-weight: bold;
				}				

				div.panelText p {
					/* margin: 1em 0; */
					/* margin: 14px 0; */
					margin: 0;
					margin-top: 14px;
					/* padding: 14px 0; */
					/* margin-bottom: 0; /* ************************ */
				}
			
			div.menu {
				margin: 14px 0;
				margin-bottom: 35px;
			}
			
				div.menu h2 {
					font-size: 11px;
					font-weight: bold;
					margin: 14px 14px 5px 14px;
				}
			
				div.menu a {
					display: block;
					padding: 2px 14px;
					margin: 2px 0;
					padding-top: 3px;
					padding-left: 44px;
					text-decoration: none;
					color: black;
					line-height: 1.3em;
				}
				
					div.menu a.selected {
						background-color: #D7D8DE;
						xcolor: white;
					}
				
					div.menu a:hover {
						background-color: white;
						color: black;
					}									
					
					div.menu a img {
						width: 24px;
						height: 18px;
						float:left;
						border: none;
						background-color: #777;
						margin-top: -1px;
						margin-left: -29px;
						margin-right: 5px;
						vertical-align: top;
					}
					
					/* stuff to handle auto-clearing of elements with floats without the need for a clearing div */				
					/* thanks to: http://www.positioniseverything.net/easyclearing.html */	
					div.menu a:after  {
						content: ".";
						display: block;
						visibility: hidden;
						clear: left;
						height: 0;
						font-size: 0.1em;
						line-height: 0;
					}			
					/* hide from IE/Mac \*/
					* html div.menu a { height: 1%; }

			div.thumbnails {
				/* margin: 1px 14px; */
				margin: 1px 0;
				margin-right: 0; /* for IE/Win */
				padding: 8px 0;
				/*
				margin: 1px auto;
				padding: 8px 14px;
				*/
			}
			
				div.feature div.thumbnails {
					padding: 0 0 8px 0;
					margin-left: -2px;
				}
			
				div.thumbnails a {
					width: 80px;
					height: 112px;
					padding: 10px 10px 5px 10px;
					display: inline;  /* for IE/Win double-margin float bug */
					float: left;
					margin: 0 4px;
					text-align: center;
					text-decoration: none;
					color: black;
				}
				
					div.thumbnails a:hover {
						background-color: white;
						color: black;
					}

					div.thumbnails a img {
						width: 80px;
						height: 80px;
						float: left;
						border: none;
						margin-bottom: 5px;					
					}
					
				/* stuff to handle auto-clearing of elements with floats without the need for a clearing div */				
				/* thanks to: http://www.positioniseverything.net/easyclearing.html */	
				div.thumbnails:after  {
					content: ".";
					display: block;
					visibility: hidden;
					clear: left;
					height: 0;
					font-size: 0.1em;
					line-height: 0;
				}			
				/* hide from IE/Mac \*/
				* html div.thumbnails { height: 1%; }	
			
				/* patch to make easyclearing hack work in IE7 */
				/* thanks to: http://www.tanfa.co.uk/archives/show.asp?var=300 */
				div.thumbnails { display: inline-block; }
				div.thumbnails { display: block; }					
			
			
		div.panelJSBox div.panelContent {
			/* min-height: 172px; */
			min-height: 144px;
			/* margin-bottom: 0; /* ************************ */
		}
	
		div.panelJSBox div.feature {
			/* padding: 14px; */
			/* min-height: 144px; */
			/* min-height: 116px; */
		}
			
			
		div.panelJSBox {			
		}
		
			div.panelContent div.wedge {
				float: right;
				margin-right: -1px; /* for IE */
				margin-left: 1px; /* for Mozilla, so that it still pushes content down, despite its negative right margin (declared at the top of this stylesheet) */
			}
			
			div.panelTitle {
				position: relative; /* for IE/Win, causes slight problem in IE5/Mac, see h3 declaration below */ /* is this now for IE/Mac? */
				display: inline; /* for IE/Win double-margin float bug */
				padding: 9px 10px;
				
				background-repeat: no-repeat;
				background-color: #dcdde4;
				
				font-family: Arial, sans-serif;
				font-weight: bold;
				font-size: 11px;
			}
			
				div.panelTitle a {
					color: black;
					text-decoration: none;
				}
				
					div.panelTitle a:hover { color: black; }				
					div.panelTitle a:hover h2 { text-decoration: underline; }
					
			
			div.panelJSBox.offset div.left { margin-bottom: 20px; } /* to keep grassOverlay from interfering with links */
			
			div.offset div.left div.panelTitle {
				float: right;
				margin-left: 77px;
				padding-right: 82px;
				margin-bottom: 14px;
				width: 301px;
				
				background-image: url(panelOffsetLeftTab.gif);
				background-position: bottom left;
				
				text-align: center;
			}
			
				/* stuff to handle auto-clearing of elements with floats without the need for a clearing div */				
				/* thanks to: http://www.positioniseverything.net/easyclearing.html */	
				div.offset div.left div.panelText:after  {
					content: ".";
					display: block;
					visibility: hidden;
					clear: both;
					height: 0;
					font-size: 0.1em;
					line-height: 0;
				}			
				/* hide from IE/Mac \*/
				* html div.offset div.left div.panelText { height: 1%; }				
			
			div.offset div.right div.panelTitle {
				float: left;
				height: 36px;
				/* margin-right: 21px; */
				margin-bottom: 14px;
				width: 133px;
				
				background-image: url(panelOffsetRightTab.gif);
				background-position: bottom right;
				
				text-align: left;
			}
			
			div.feature div.panelTitle {
				float: left;
				width: 290px;
				
				margin-left: 0; 
				margin-right: 16px;
				
				background-image: url(panelWideTab.gif);
				background-position: bottom left;
				
				text-align: center;
			}
			
			
			
			/* for some reason, the margin-bottom value in IE5/Mac seems to jump in multiples of 13px 	*/
			/* 		e.g., 0px = 0px, 1px-13px = 13px, 14px-26px = 26px, etc. 							*/
			/* to keep it closer to the desired value, we'll set it to 13px								*/
			div.feature div.panelTitle { margin-bottom: 13px; } /* for IE/Mac */
			/* commented backslash hack to block the following from IE5/Mac \*/
			div.feature div.panelTitle { margin-bottom: 14px; }
			/* end hack */	

				div.panelTitle h2 {
					font-size: 18px;
					margin: 0;
				}

				div.panelTitle h3 { 	/* subtitles in .panelTitle are wrapped in an h3 tag to workaround an IE5/Mac margin	*/
					font-size: 11px;	/* problem with "raw text" in a relatively positioned box (panelTitle).					*/
					margin: 0;			/* see: http://www.macedition.com/cb/ie5macbugs/#doubleline								*/
				}
				
			div.split div.panelTitle {
				display: block;
				padding: 4px 0 5px 16px;
				text-align: left;	
				margin-bottom: 14px;		
			}
			
				div.right div.panelTitle {
					background-image: url(panelSplitRightTab.gif);
					background-position: bottom right;
					margin-right: 22px;
				}

				div.left div.panelTitle {
					background-image: none;
				}
			
				div.split div.panelTitle h2 {
					font-size: 12px;
					font-size: 15px;
					margin: 0;
				}
				
				
			div.split div.panelText img {
				float: left;
				position: relative; /* for IE/Mac */
				display: inline; /* for IE/Win double-margin float bug */
				margin: 0px 18px 10px 0;
				margin-right: 16px; /* for IE/Win: http://www.positioniseverything.net/explorer/dup-characters.html */
			}			
				
			div.feature div.panelText {
				margin: 0 16px;
				margin: 0 16px 0 0;
				/* margin: 0 14px; */
				padding: 0 0 1px 0;	/* 1px bottom for Opera */
				padding: 0 0 14px 0;	/* 1px bottom for Opera */
			}
			
			div.feature div.panelText { position: relative; } /* for IE/Mac */
			/* commented backslash hack to block the following from IE5/Mac \*/
			div.feature div.panelText { position: static; }
			/* end hack */			

			
			div.panelMore {
				position: relative;	
				/* margin-bottom: 10px; */
				margin-bottom: 11px;
				/* margin-top: 10px; /* ************************ */
				/* margin-bottom: 14px; /* ************************ */
				padding: 1px 20px 2px 17px;
				background-color: #d7d9e1;
				text-align: right;
				font-size: 9px;			
			}
			
				div.panelOverlayMore {
					position: absolute;
					padding: 1px 20px 2px 17px;
					background: none;
					/* border-left: 1px solid red; */
					/* border-right: 1px solid red; */
					/* margin-top: -27px; */
					bottom: 27px;
					text-align: right;
					font-size: 9px;	
					clear: right;
				}
				
				div.panelJSBox div.panelMore {
					clear: right;
					background-image: url(panelBottomBar.gif);
					background-repeat: no-repeat;
					background-position: bottom right;
				}
			
				div.split div.left div.panelMore,
				div.offset div.left div.panelMore {
					background-image: none;
				}
			
				div.feature div.panelMore {
					margin-left: -16px;
					margin-bottom: 12px;
				}
				
				div.panelMore a,
				div.panelOverlayMore a {
					color: Black;
					text-decoration: none;
				}

					div.panelMore a:hover,
					div.panelOverlayMore a:hover {
						color: White;
					}
					
					div.panelJSBox div.panelMore a {
						/*
						opacity: .5;
						filter: alpha(opacity=50);
						visibility: hidden;
						*/
					}
					
					div.panelJSBox div.panelMore {
						color: #d7d9e1; /* for IE */
					}
					div.panelJSBox div.panelMore * {
						visibility: hidden;
					}
					
					div.panelOverlayMore {
						/*
						color: #d7d9e1;
						visibility: hidden;
						*/
					}
					
					div.panelOverlayMore a {
						/* visibility: visible; */
					}
					
				img.smallScreenShotLeft,
				img.smallScreenShotRight {
					width: 210px;
					height: 150px;
				}
					
				img.smallScreenShotLeft {
					margin-right: 18px;
					margin-top: 16px;
				}
					
				img.largeScreenShot {
					width: 442px;
					margin-top: 16px;
				}
					
				img.fullWidthScreenShot {
					width: 644px;
					margin-top: 16px;
					margin-right: -3px; /* for IE6 */
				}

			
			div.feature {
				padding-left: 16px;
			}					

				div.feature img.feature {
					float: left;
					position: relative; /* for IE/Mac */
					display: inline; /* for IE/Win double-margin float bug */
					/* margin: 16px 18px 10px 16px; */
					width: 310px;
					/* margin-right: 16px; /* for IE/Win: http://www.positioniseverything.net/explorer/dup-characters.html */

					margin: 16px 16px 10px 0;
				}
			
	h1.sectionHeader {
		position: relative;
		/* text-align: left; */
		text-align: center;
		z-index: 100;
		font-family: 'Arial Black',Arial;
		font-size: 15px;
		font-weight: normal;
		color: White;
		margin: 0;
		width: 100%; /* for IE6/Win */
		clear: both;
	}
	
		.sectionHeaderShadowedType {
			 text-align: center;
			 position: relative;
			 z-index: 2;
		}
	
		.sectionHeaderShadow {
			 text-align: center;
			 position: absolute;
			 left: -1px;
			 top: 2px;
			 width: 100%;
			 color: #777;
			 z-index: 1;
		}
		
	#contentArea #pageFooter {
		vertical-align: bottom;
	}

		#grassFade {
			position: relative;
			width: 722px;
			height: 35px;
			margin-bottom: -7px;
			z-index:300;
		}

		#footerContent {
			position: relative;
			color: White;
			background-image: url(dirt.jpg);
			background-repeat: no-repeat;
			background-color: #504328;
			padding: 10px;
			text-align: center;
		}

			#footerContent p {
				margin: 10px 10px 0 10px;
			}

			#footerContent a {
				color: White;
				text-decoration: none;
			}

			#footerContent a:hover {
				color: White;
				text-decoration: underline;
			}
			
pre {
	white-space: pre;
	border: 1px solid black;
	overflow: scroll;
	font-size: 11px;
	display: block;
	padding: 5px;
	margin: auto;
	background-color: #f8f8f8;
	width:600px;
}
pre .comment { color: green; }


.linkOverlay {
	position: absolute;
	background-color: red;
	color: white;
	font-weight: bold;
	z-index: 1000;
	filter:alpha(opacity=50);
	opacity: 0.5;
	-moz-opacity:0.5;	
}