/* 

	Core Structure for ArcGIS Server Pages 
	Please keep this file clean and reuse as much of it as possible.
	Do not put styles unrelated to ArcGIS Server pages in this stylesheet

	Before adding a style, please ensure that one does not already exist.
	
*/
BODY{
	margin:0px;
}

/* Server Header Images */
	IMG.serverHeader{
		margin-left: -3px;
		padding:0px;
		vertical-align:top;
		border:none;
	}
	html>body IMG.serverHeader{
		margin-left: 0px;
	}

/* Left Side Content */
	DIV#leftSideContent{
		float:left;
		clear:none;
		width: 209px;
		padding:0px;
		margin:0px;
	}

/* Floating Server Menu */
	DIV#serverMenu{
		width: 209px;
		margin:0px;
		padding:28px 0 0 0;
		background: transparent url(../graphics/general_menu_bg.jpg) top left no-repeat;
	}
	DIV#serverMenu.overview{
		background: transparent url(../graphics/overview_menu_bg.jpg) top left no-repeat;
	}

	/* Sever Menu List Formatting */
		DIV#serverMenu UL{
			width: 209px;
			margin: 0;
			padding-left: 0px;
			padding-bottom:15px;
			font-size:.7em;
			font-stretch:ultra-condensed;
			letter-spacing:-.05em;
			background: transparent url(../graphics/menu_bottom_bg.jpg) no-repeat bottom left;
		}
		DIV#serverMenu UL LI{
			padding: 0 0 0 10px;
			margin-left:18px;
			list-style:none;
			list-style-type:none;
			list-style-image:none;
			background: transparent url(../graphics/menu_item_bg.gif) no-repeat bottom center;
		}
		DIV#serverMenu UL LI A{
			display:block;
			width: 160px;
			padding: 5px 10px;
			color:#666;
			font-weight:bold;
			text-decoration:none;
		}
		DIV#serverMenu UL LI A:hover{
			color:#fc8a06;
			background: url(/graphics/sidenavarrow_orange.gif) no-repeat -5px 9px;
		}
		DIV#serverMenu UL LI A.selected{
			color:#0060A7;
			background: url(/graphics/sidenavarrow_orange.gif) no-repeat -5px 9px;
		}
		
		
		/* Sever Menu Button */
			DIV#serverMenu UL LI.button{
				height:34px;
				margin-top: 10px;
				margin-bottom:0px;
				background: transparent url(../graphics/menu_button_bg.jpg) no-repeat bottom center;
			}
			DIV#serverMenu UL LI.button A{
				padding-top: 7px;
				color:#FFF;
				text-align:right;
				width: 145px;
			}
			html>body DIV#serverMenu UL LI.button A{
				width: 125px;
			}
			DIV#serverMenu UL LI.button A:hover{
				background: none;
				color:#FFF;
			}
		/* END Sever Menu Button */
		
	/* Sever Menu List Formatting */
	
/* END Floating Server Menu */

/* Information Boxes */
	DIV.infoBox{
		position:relative;
		float:left;
		width: 209px;
		margin:10px 0 0 0;
		padding-top:20px;
		background: transparent url(../graphics/infobox_bg.jpg) top left no-repeat;
		color:#333;
	}
	DIV.infoBox H3{
		width:160px;
		margin:0 0 0 30px;
		padding:0px;
		font-size:.8em;
		font-weight:bold;
		color:inherit;
	}
	DIV.infoBox H4{
		width:160px;
		margin:0 0 0 30px;
		padding:0px;
		font-size:.75em;
		font-weight:bold;
		color:inherit;
	}
	DIV.infoBox P{
		display:block;
		width: 209px;
		margin:10px 0px;
		padding-left:30px;
		padding-right: 9px;
		font-size:.7em;
	}
	html>body DIV.infoBox P{
		width:170px;
	}
	DIV.infoBox P.infoBoxBottom{
		margin-bottom:0px;
		padding-bottom: 15px;
		background: transparent url(../graphics/infobox_bottom_bg.jpg) bottom left no-repeat;
	}
/* END Information Boxes */

/* 
	Wrapper for the main content section 
	ensures proper left margin and sets content width so that elements inside it
	dont flow past the tabbed Esri navigation. Elements within this can use their
	default width (100% for block elements).
*/
	DIV#contentWrapper{
		width: 488px;
		margin-left: 230px;
	}
	DIV#contentWrapper H1{
		margin: 10px 0;
		color: #fc8a06;
		font-size:1.3em;
	}
	DIV#contentWrapper H2{
	margin: 0px 0;
	font-size: 1.2em;
	background: none;
	padding-top: 5px;
}
	DIV#contentWrapper H3{
	margin: 0px 0;
	color: #000;
	font-size: 1.1em;
	padding-top: 5px;
}
	/* OVERIDE for styles.css which sets it to "x-small" */
	DIV#contentWrapper H4{
		font-size:1em;
	}
	DIV#contentWrapper .orangeText{
		color: #fc8a06;
	}
	DIV#contentWrapper .underlined{
		background:transparent url(/graphics/dotTile.gif) repeat-x scroll left bottom;
	}
	
	/* Screenshot and Caption Styles */
	DIV#contentWrapper .screenShot{
		padding:8px;
		border: 1px solid #999;
		background: #F5F5F5;
		font-size:.8em;
		color:#666666;
	}
	DIV#contentWrapper .screenShotCaption{
		font-size:.8em;
		color:#666666;
		}
	DIV#contentWrapper .screenShotMid{
		width:300px;
		margin:0 0 5px 0px;
		padding:8px;
		border: 1px solid #999;
		background: #F5F5F5;
	}
	DIV#contentWrapper .screenShotMid img{
		width:300px;
		clear:none;
	}
	DIV#contentWrapper .screenShotRightFloat{
		float: right;
		width: 216px;
		padding: 8px;
		border:1px solid #9cc486;
		background: #f5faf2;
		clear:none;
		
	}
	DIV#contentWrapper .screenShotRightFloat IMG{
		width: 200px;
	}
	DIV#contentWrapper .screenShotRightFloat h4{
		margin: 2px 0;
		padding: 0;
		text-align:left
	}
	DIV#contentWrapper .screenShotRight{
		padding:10px;
		border:1px solid #9cc486;
		background: #f5faf2;
	}
	
	DIV#contentWrapper .screenShotRight IMG{
		float:right;
		width: 200px;
		padding:0;
		margin:0;
		border:none;
	}
	DIV#contentWrapper .screenShotRight.noBorder{
		border:none;
		background:none;
	}
	DIV#contentWrapper IMG.productImage{
		float:right;
	}
	
	/* Indetation Styles */
	DIV#contentWrapper .indented{
		margin-left:30px;
	}
	
	/* Table Styles*/
	table.dataGrid{
		border-collapse:collapse;
	}
	table.dataGrid thead th{
		border-bottom: 1px solid #999;
		border-collapse:collapse;
		padding: 5px 10px;
	}
	table.dataGrid thead th.columnHead{
		margin:0 0 0 -1px;
		padding:5px 0 0 0;
		width:74px;
		text-align:center;
		color:#FFF;
		background: url(../graphics/tableHeadTabs.jpg) no-repeat bottom left;	
	}
	table.dataGrid tbody td{
		border-right: 1px solid #999;
		border-left: 1px solid #999;
		border-collapse:collapse;
		padding: 5px;
		vertical-align: top;
	}
	table.dataGrid tbody td.checkColumn{
		text-align:center;
	}
	table.dataGrid tr.even td{
		background: #ECEDED;
	}
	table.dataGrid tfoot td{
		border-top: 1px solid #999;
		font-size:.8em;
		color:#666;
	}
	
/* General clear class for use with floated elements */
span.clear{
	display:block;
	clear:both;
}