/* img elements with a class of png24 will have the png24 filter hack applied
 * in IE browsers only.  To make this work, images MUST have a width and height
 * specified.  The minimum tag required is:
 *
 *     <img class="png24" src="<url>" width="xx" height="xx">
 */

.floatLeft {
	float: left;
}   
 
img.png24 { filter:expression(applyPNGFilter(this)) }

/* this is a full screen app.  Make sure that overflow is hidden so we don't
 * get scrollbars
 */
body {
    margin: 0px;
    padding: 0px;
    background-color: #d9d9d9;
    /* overflow: hidden; */
    font-family:Arial, Helvetica, sans-serif;
    color: #006600;
    font-size:10px;
}

ul {
    margin:0px;
    padding-left:15px;
}

/* the viewport contains the map and fills the screen.  The viewport can also
 * contain other elements and they appear inside the viewport on top of the map
 * which is what is done with this application.
 */
#viewport {
    position: relative;
    background-color: #f0f0f0;
    overflow: hidden;
    border: 1px solid #999;
    cursor: move;
    -moz-box-sizing: border-box;
}

div .transparentBackground {
    background-color: #ffffff;
    filter:alpha(opacity=90); 
    -moz-opacity:0.90;
    opacity:0.90; 
    z-index: -1;
}

/* Transparency for highlight tool */
div .transBackground {
    filter:alpha(opacity=60); 
    -moz-opacity:0.60;
    opacity:0.60; 
}

div .transparentBackGreen {
    background-color: #00CC66;
    filter:alpha(opacity=90); 
    -moz-opacity:0.90;
    opacity:0.90; 
    z-index: -1;
}

#keymap {
    position: absolute;
    bottom: 91px;
    right: 5px;
    padding:0px;
    overflow: hidden;
    filter:alpha(opacity=100);/*trick to prevent IE opacity bug*/
    z-index: 2;
    text-align:right;
    border: 1px solid #999;
}

#scaleReference {
    position: absolute;
    bottom: 38px;
	width: 190px;
	height: 45px;
    right: 5px;
    padding:0px;
    overflow: hidden;
    z-index: 50;
    border: 1px solid #999;	
}

#scalebar {
	left: 0px;
}

#keymap div {
    filter:alpha(opacity=100);/*trick to prevent IE opacity bug*/
}

#keymap img {
    filter:alpha(opacity=100);/*trick to prevent IE opacity bug*/
}

#topBar {
    position: relative;
	border: 1px solid #999;
	right:0px;
	margin:5px;
	text-align: left;
	padding-right:4px;
    z-index:4;
    cursor: auto;
	padding: 2px; 
}

#topBarInfo {
	position:relative;
	z-index: 99;
}

.topBarXY {
	position: relative;
    float: right;
	height: 14px;
	width: 72px;
	padding: 2px;
	margin-top: 3px;
	text-align:left;
	z-index:999;
	background-color: white;
}

.topBarScale {
	position: relative;
    float: right;
	height: 14px;
	width: 84px;
	padding: 2px;
	padding-left: 4px;
	margin-top: 3px;
	text-align:left;
	z-index:999;
	background-color: white;	
}

.topBarNode{
	vertical-align: middle;
}

#bottomBar {
	position: absolute;;
    left: 5px;
    bottom: 5px;
	height:26px;
	text-align:center;
    z-index: 2;
    cursor: auto;
	border: 1px solid #009900; 
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.leftSideArrow{
	float:left;
	margin-top:2px;
	margin-left:2px;
	cursor: pointer;
}

.rightSideArrow{
	float:right;
	margin-top:2px;
	margin-right:2px;
	cursor: pointer;
}		

.legendGroupDivTools {
	padding: 3px;
	position: relative;
	border-bottom: 1px solid #009900;
	border-left: 1px solid #009900;
	border-right: 1px solid #009900;
	margin-bottom:6px;
	background-color:#CDEEDE;
}

.legendTools {
	padding: 3px;
	position: relative;
	border-bottom: 1px solid #009900;
	border-left: 1px solid #009900;
	border-right: 1px solid #009900;
	margin-bottom:6px;
	background-color:#CDEEDE;
}

.legendGroupDivBody {
	border-bottom: 1px solid #009900;
	position: relative;

}

.legendLayerTitle {
	padding:2px;
	margin-top:5px;
}	

.legendTitleName {
	float:left;
	width:130px;
	text-align:left;
}

.legendImage {
	border: 1px solid #009900;
	background-color:#FFFFFF;
} 	

#controls {
	position:relative;
	float:right;
	right:5px;
	z-index:3;
	border: 1px solid #999;
	font-size:10px;
	cursor:default;
}

.barHeader {
    border-bottom: 1px solid #999;
	padding:5px;
	font-weight:bold;
	font-size:14px;
	
}

#controlsBody {
	padding:5px;
	height:65px;
}

.sliderOpacity{
	margin-top: 2px;
	padding-bottom: 3px;
	padding-left:5px;
	
}

.sliderScale{
}

.minimizeImage {
	z-index:1;
	position:absolute;
	right:5px;
}


/* REFERENCE */
#reference {
    width: 650px;
    height: 210px;
    position: absolute;
    right: 3px;
    bottom: 3px;
    z-index: 2;
    cursor: auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#legend {
    position: relative;
    width: 250px;
    height: 120px;
    overflow: auto;
    padding:0px;
    background-color: #ccc;
    margin: 0px;
    border: 1px solid #999;
}

#scale {
    font-family: Verdana, sans-serif;
    font-size: 1.0em;
	position: relative;
    padding:3px;
    right: 5px;
    height:10px;
    text-align: right;
}

/* CLASSES */

.label {
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
}


/* HTML TAGS */
.value {
    font-family: arial;
    font-size: 11px;
    font-weight: bold;
}

input {
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
}

select {
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    width: 155px;
}

dt {
	display:block;
	float:left;
	width:9em;
	text-align : left;
}
dd {
	display:block;	
	width:9em;
	text-align : left;
	margin-left:9.25em;
}

.searchSelect{
	width:125px;
}

.identifySelect{
	width:160px;
}

option {
	width: auto;
}

.kmTitle {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    font-weight: bold;
	font-variant: small-caps;
}

/* Toolbar */

.toolsContainer {
	font-size: 14px;
	font-weight: bold;
	padding:0px;
	margin:0px;
	background-color:red;
	height:29px;
}


/* INFO WINDOW */

#infoWindow {
	position:relative;
    float:left;
	overflow: auto;
	border: 1px solid #999;
	margin-left:10px;
	padding:5px;
	cursor:auto;
	z-index: 999;
	display:none;
}

.loaderBar{
	border: 1px solid #000;
	margin-bottom: 2px;
	margin-left: 5px;
}

.infoWindowHeader{
	font-size: 14px;
	font-weight:bold;
}

/* TOGGLES */

.toggle {
	float: right;
	margin-left: 2px;
	cursor:pointer;
}

/* SIDEBAR SYSTEM */

#sideBar {
	position:relative;
    float:left;
	overflow: scroll;
	z-index:3;
	width:200px;
	left:5px;
	border: 1px solid #999;
	font-size:10px;
	cursor:auto;
}

.sideBarContainer{
	margin:5px;
}

#arunaLoading{
	text-align:center;
}

.loadGif {
	margin-top: 65px;
}

.loadGifInfoWindow {
	margin-top: 20px;
	margin-left: 20px;
}

.loadGifIdentify {
	margin-top: 65px;
	margin-left: 75px;
}

/* LEGEND SYSTEM */

.legendGroup {
	margin-bottom: 5px;
}	

.legendGroupDivTitle {
	font-weight:bold;
	font-size:13px;
	padding-top: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid #666666;
	/*dirty hack to make IE show the border bottom of the first DIV*/
	background-color: #ffffff;
	text-align:left;
	cursor:pointer;
}

.legendTools {
}

.legendGroupText {
	
}	

.legendClassFeature {
	margin-top: 8px;
	margin-bottom: 4px;
	margin-left: 2px;
	text-align:right;
	height:auto;
}

.legendClassName {
	float:left;
	text-align:left;
	padding-left:5px;
	width:125px;
}

.legendLayerText {
	float:left;
	text-align:left;
	cursor:pointer;
	text-decoration:underline;
	width:125px;
}

.legendLayerTitle{
	height:auto;
	padding-bottom:10px;
}

.metaImage{
	margin-right:3px;
}	

/* SEARCH SYSTEM */

#arunaSearch {
	
}

.searchDiv {
	padding:5px;
	margin-top:5px;
	width: auto;
	background-color:#CDEEDE;
	border: 1px solid #1BA449;
}

.relative {
	position: relative;
}

.searchLoadImg {
	position: absolute;
	margin-left: 3px;
}
	
/* Advanced Query System */

.addButton{
	width: 34px;
	margin-left: 3px;
	padding-left: 1px;
}

.querySelect{
	margin-bottom: 2px;
	width: 158px;
}	

.queryInput{
	width: 150px;
	height: 14px;
	padding-left: 4px;
	padding-top: 2px;
}

.queryCategoryBox{
	margin-top: 5px;
	border: 1px solid #999;
	padding:5px;
	
}	

.queryBoxBodyDiv{
	margin-top: 4px;
}

.queryBoxHeaderDiv{
	height: 13px;
	padding-bottom: 2px;
	vertical-align:middle;
	font-size:12px;
	color: #006600;	
	font-weight: bold;		
}

.checkBoxLabel{
}

.queryCheckbox{
	vertical-align: middle;
	margin-right: 5px;
}

.smallHeaderText{
	font-weight: bold;
	font-size: 12px;
}

.queryResultsTableHead{
	font-weight:bold;
	background-color:#95DBBA;
}

.queryResultsTable{
	width: auto;
	padding: 5px;
}

.tableHolder {
	display:none;
}

.tableCellZoom {
	text-align: center;
}

.zoomToImg {
	cursor: pointer;
}

tr.even td {
	background-color: #E6F7EE;
}

tr.odd td {
    background-color:#CDEEDE;	
}

/* General class styles */

.copyrightText{
	margin-top:5px;
}

/* message box, grey border white contents */

.messageBox {
	background-color: #FFFFFF;
	border: 1px solid #999;
	padding: 5px;
	margin-bottom: 5px; 
	font-size: 11px;
	color: #666;
	position: relative;
}

.closeHolder {
}

.closeTab {
	position:relative;
	cursor:pointer;
	float:right;
	z-index: 999;	
}

.headerDiv {
	font-weight:bold;
	width:auto;
	text-align:left;	
}

.headerText {
	float:left;
	font-size:12px;
	color: #006600;	
	width:auto;
	font-weight: bold;	
}

.boldText {
	font-size: 12px;
	font-weight: bold;
}

.messageText {
	text-align: left;
	width:auto;
	margin-top:16px;
}

/* Meta Data Styles */

.metaHeaderClass{
	float:left;
	font-size:14px;
	font-weight:bold;	
	width:90%;
	text-align: left;
	position:relative;	
}

.metaDivClass {
	position: relative;
	font-weight:bold;
	text-align:right;
	height:30px;
}

.metaWindow{
	overflow: auto;
}

.metaContainer {
	position: relative;	
	border: 1px solid #999;
	padding: 5px;
	margin-bottom: 5px;
}
.metaHeader {
	font-size: 13px;
	margin-bottom: 5px;
	padding-top: 3px;
}
.nodeName{
	margin-left: 15px;
	width: 175px;
	position: relative;
	color: #333;
	float:left;
}
.nodeValue{
	color: #333;
}

.minImage{
	margin-right:5px;
	margin-bottom:1px;
	cursor: pointer;
}

/* Right control Panel Styles */

/* Navigation Panel */

.controlPanelBody{
	height: 83px;
}

#arrowNavigator {
	z-index:1;
	position:absolute;
	top:31px;
	left:0px;
}

#sliderDiv {
	position:relative;
	top:3px;
    padding-left:55px;
	padding-right:0px;
}

#geoPosition {
	position:relative;
	text-align:left;
	margin: 1px;
	padding-left:75px;
	padding-top:5px;
	padding-bottom:5px;
	background-color:#CDEEDE;
	border: 1px solid #1BA449;
	z-index: 0; 
}

div .arrowDiv {
    position:absolute;
    width:20px;
	height:20px;
	z-index:300;
	background-image:url(../../images/a_pixel.gif);
}

div .arrowDivDiag {
    position:absolute;
    width:16px;
	height:16px;
	z-index:300;
	background-image:url(../../images/a_pixel.gif);
}

#geoPositionReference {
	position:relative;
	margin:4px;
	margin-right:auto;
	margin-left:auto;
    padding:0px;
    border: 0px solid #999;
    
}

/* font styles */
.bigHeaderText{
	font-size: 14px;
	font-weight:bold;	
}

/* Help Box */
.helpBoxHeader{
	font-size: 14px;
	font-weight:bold;
}
.helpBoxClose{
	float: right;
	cursor: pointer;
}

.helpBoxContainer{
	border: 1px solid #999;
	padding: 5px;
}

.helpBoxBody{
	color: #666666;
}

.searchTab{
	width: 34px;
	margin-left: 3px;
	position: absolute;
}

/* Aruna Nav Bar */

#wrapper {
	width: 51px;
	position: relative;
	float:right;
	margin-right: 25px;
	margin-top: 20px;
	z-index: 99;
}

.centerWrapper {
	position: relative;
	height:15px;
}

#sliderUp {
	left: 18px;
	margin-bottom: 3px;
	background-image: url(/images/navbar/slider_up.png);
}

#sliderLeft {
	margin-right: 3px;
	float:left;
	background-image: url(/images/navbar/slider_left.png);
}

#sliderReset {
	margin-right: 3px;
	float:left;
	background-image: url(/images/navbar/slider_reset.png);
}

#sliderRight {
	float:right;
	background-image: url(/images/navbar/slider_right.png);
}

#sliderDown {
	margin-top: 3px;
	left:18px;
	background-image: url(/images/navbar/slider_down.png);
}

#sliderOut
{
	width: 15px;
	height: 15px;
	left: 18px;
	margin-top: 3px;
	position: relative;
	background-image: url(/images/navbar/slider_out.png);
	z-index: 1;
}

#sliderIn
{
	width: 15px;
	height: 15px;
	left: 18px;
	margin-bottom:3px;
	margin-top:6px;
	position: relative;
	background-image: url(/images/navbar/slider_in.png);
	z-index: 1;
}

.sliderButton {
	width: 15px;
	height: 15px;
	position: relative;
	z-index: 1;	
	cursor: pointer;
}

.sliderCap {
	width: 15px;
	left: 18px;
	height:1px;
	line-height:1px;
	position: relative;
	background-image: url(/images/navbar/slider_cap.png);
	z-index: 1;
}

.slider {
	width: 15px;
	left: 18px;
	cursor:pointer;
	position: relative;
	background-image: url(/images/navbar/slider_vert_bck.png);
	z-index: 1;
}

.indicator {
	width: 15px;
	height: 15px;
	background-image: url(/images/navbar/slider_vert_tab.png);
	position: absolute;
	font-size: 1px;
	overflow: hidden;
	cursor:n-resize;
	border: none;
	position: relative;
	z-index: 2;
}

/* Legend 2 Styles */

#arunaLegend {
	width:300px;
	position:relative;
}

.legendGroupTab {
	cursor: pointer;
}

.legendGroupFad {
	margin-right:3px;
	margin-left: 1px;
	cursor: pointer;
}

.legendGroupSpan {
	text-decoration:underline;
	cursor: pointer;
}

.legendFadDiv {
	background-color: #498ABA;
	background-image: url(/images/backgrounds/legendFadeBack.png);
	position:absolute;
	width: 104px;
	height: 13px;
}

.legendFadTab {
	width: 13px;
	height: 13px;
	background-color:red;
	background-image: url(/images/buttons/smallTab.png);
	position: relative;
	overflow: hidden;
	border: none;	
	z-index: 1;
	cursor: pointer;
}

/* legend layer */
.legendLayerWrapper {
	margin-left:13px;
}

.legendLayerCell {
	margin-top: 3px;
}

.legendLayerTab {
	cursor: pointer;
	margin-right: 3px;
}

.legendLayerSpan {
	cursor: pointer;
	text-decoration:underline;
}

.lgLoaderBar {
	border: 1px solid #000;
}

/* Legend class */

.legendClassCell{
	margin-top: 3px;
	margin-left: 13px;
}

.legendClassImg{
	border: 1px solid #000;
	margin-right: 3px;
}

/* General JQuery Styles */
.alignCenter{
	text-align:center;
}

.center{
	text-align:center;
}

.padTop{
	padding-top: 5px;
}

/* ---------->>> jtip <<<---------------------------------------------------------------*/

#JT_arrow_left{
	background-image: url(/images/jtip/arrow_left.gif);
	background-repeat: no-repeat;
	background-position: left top;
	position: absolute;
	z-index:101;
	left:-12px;
	height:23px;
	width:10px;
    top:-3px;
}

#JT_arrow_right{
	background-image: url(../../images/arunaHelp/arrow_right.gif);
	background-repeat: no-repeat;
	background-position: left top;
	position: absolute;
	z-index:101;
	height:23px;
	width:11px;
    top:-2px;
}

#JT {
	position: absolute;
	z-index:100;
	border: 2px solid #CCCCCC;
	background-color: #fff;
}

#JT_copy{
	padding:10px 10px 10px 10px;
	color:#333333;
}

.JT_loader{
	background-image: url(../../images/arunaHelp/loader.gif);
	background-repeat: no-repeat;
	background-position: center center;
	width:100%;
	height:12px;
}

#JT_close_left{
	background-color: #CCCCCC;
	text-align: left;
	padding-left: 8px;
	padding-bottom: 5px;
	padding-top: 2px;
	font-weight:bold;
}

#JT_close_right{
	background-color: #CCCCCC;
	text-align: left;
	padding-left: 8px;
	padding-bottom: 5px;
	padding-top: 2px;
	font-weight:bold;
}

#JT_copy p{
margin:3px 0;
}

#JT_copy img{
	padding: 1px;
	border: 1px solid #CCCCCC;
}

.jTip{
	float:right;
	cursor:help;
	border: 0px;
}

.helpDiagram{
	display:inline;
	float:right;
	margin:0px 0px 2px 7px;
}

.helpHeaderBox {
	border: 1px solid #999;
	width: 160px;
	position: relative;
	padding: 5px;
	font-size: 14px;
	font-weight:bold;
}

/* JavaScript Warning */
#JSWarning {
background-color: red;	
position:absolute;
left:50px;
top:50px;
width:500px;
height:400px;
z-index: 999;
}

/*
 * Scratch pad
 */
.buttonHolder{
	height: 20px;
	width: 20px;
	margin-right: 2px;
	border: 1px solid #999;
	display:inline;
	cursor: pointer;
} 

.marker{
	display: none;
}

/*
 * Polygon Tool
 */

.clickPoint {
    position: absolute;
    background-color: white;
    width: 9px;
    height: 9px;
	margin-left: -5px;
	margin-top: -5px;
    border: 1px solid #999;
    cursor: pointer;
	z-index: 99;		
}

.linePixel {
    position: absolute;
    background-color: blue;
    width: 5px;
    height: 5px;
	margin-left: -2px;
	margin-top: -2px;
	
    filter:alpha(opacity=60); 
    -moz-opacity:0.60;
    opacity:0.60;
	z-index: 98;		 		
}

.sketch {
	z-index: 97;
}

#userAdmin{
	
    background-color: #d9d9d9;
 
	font-family:Arial, Helvetica, sans-serif;
	color: #006600;
	font-size:20px;
}