/*
	css styles for minimizing bar
	
	.btn-minimize {
		width: auto;
		height: auto;
		background-color: #ffe4b2;
		cursor: pointer;
		padding: 5px 10px;
		margin-top: 10px;
		border-radius: 15px 15px 0 0;
	}
	.btn-minimize:hover { 
		background-color: #ffe4b2; 
	}
	.btn-minimize.btn-plus {
		background-color: Orange;
		color: white;
	}
	*/
	/* Overrides */
	#wrapper {
	  font-size: .9em;
	}
	
	#topLinks {
	  font-size: .8em;
	}
	#header h1 {
	  text-indent: -9999px;
	}
	
	h1 {
		margin-left: 10px;
	}
    
	#queryForm { 
		/*min-height: 150px; 
		background-color: #efefef; 
		border-color: #cccccc; */ 
		
		margin: 2px 10px; 
		padding: 5px;
	}
	
	a.info {
    	background-color: lightBlue;
    	border: 2px solid #ccc;
    	padding: 5px;
    	border-radius: 25px;
    	font-size: .5em;
    	margin-left: 20px;
    }
    
	a.info:hover {
    	background-color: orange;
    }
	
	.item {
		padding: 5px;
		height: 30px;
	}
	
	#queryParts, #dateFormContainer {
		border: 1px solid #ccc;
		padding: 20px;
		-moz-border-radius: 15px;
		border-radius: 15px 15px 15px 15px;
		/*clear: float;*/
		width: 30%;
		display: inline-block;
		vertical-align: top;
		min-height: 113px;
	}
	#additionalQueryParts {
		border: 1px solid #ccc;
		background-color: #eee;
		padding: 20px;
		-moz-border-radius: 15px;
		border-radius: 15px 15px 15px 15px;
		/*clear: float;*/
		width: 30%;
		display: inline-block;
		vertical-align: top;
		min-height: 113px;
	}
	#additionalQueryParts {
		visibility: visible;
	}
	#selectedOptions {
		color: #666;
	}
	span#val0units { color: #666; font-size: .8em; 
	}
	
	.warning {
		display: block; 
		background-color: #fcc; 
		color: #333; 
		padding: 10px; 
		text-align: center;
	}
	span.itemContainer{
		padding: 5px 0;
		float: left;
		clear: both;
	}
	span button.add_field_button {
		margin-right: 10px;
	}
	span#submitformButton.itemContainer {
		width: 100%;
		text-align: center;
	}
	span#dateInput > input { 
		margin: 5px; 
		color: darkBlue; 
		}
	span#unit { 
		color: #999999; 
		font-size: .8em; 
		font-style: italic; 
	}
	.ui-widget {
		font-family: Helvetica,Arial,sans-serif;
		font-size: 0.9em;
	}
	#submitButton, .add_field_button, #queryArrows {
		/*background-color: #ccc;*/
		background-color: #336699;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius:6px;
		color: #fff;
		font-family: 'Oswald';
		font-size: 18px;
		text-decoration: none;
		cursor: poiner;
		 border:none;
	}
	
	#submitButton:hover {
		border: none;
		background:orange;
		box-shadow: 0px 0px 1px #777;
		cursor: pointer;
	
	}
	
	
	.add_field_button {
		/*background-color: #ccc;*/
		background-color: #336699;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius:6px;
		color: #fff;
		font-family: 'Oswald';
		font-size: .8em;
		margin-left: 15px;
		margin-bottom: 5px;
		text-decoration: none;
		cursor: poiner;
		 border:none;
	}
	
	.add_field_button:hover, #queryArrows:hover {
		border: none;
		background:orange;
		box-shadow: 0px 0px 1px #777;
		cursor: pointer;
	
	}
	
	/* Loading Image */
	/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
	.modal {
		display:    none;
		position:   fixed;
		z-index:    1000;
		top:        25%;
		left:       25%;
		height:     50%;
		width:      50%;
		background: rgba( 255, 255, 255, .8 ) 
					url('/waterquality/images/loading.gif') 
					50% 50% 
					no-repeat;
	}

	/* When the body has the loading class, we turn
	   the scrollbar off with overflow:hidden */
	body.loading {
		overflow: hidden;   
	}

	/* Anytime the body has the loading class, our
	   modal element will be visible */
	body.loading .modal {
		display: block;
	}
	
	
	/* Data query results return here */
	#dataBox {  
		clear: both; 
		padding: 20px; 
	}
	
	/*  Original data list styles for table */
	table#resultList { width: 100%; }
	th { background-color: #ffffff; }
/*	tr:nth-child(even) { background-color: #efefef; }
	tr:nth-child(odd) { background-color: lightBlue;}*/
	td { text-align: center; }
	tr:hover { background-color: #FFF8DC; }
	
	.clear { clear: both;}
	.top { margin-bottom: 20px; padding: 10px 0; }
	tr:nth-child(2n+1) {
		background-color: #ffffff; 
		border-top: 1px solid #aaaaaa; 
		border-bottom: 2px solid #aaaaaa;
	}
	
	/*  Data Table plugin style overrides */
	table.dataTable tr.odd td.sorting_1, 
	table.dataTable tr.even td.sorting_1 { 
		background-color: slategray1;
	}
	table.dataTable tr.even {
		background-color: white;
	}
	table.dataTable tr.odd {
		background-color: ghostwhite;
	}
	table.dataTable a:link {
		color: #666;
		font-weight: bold;
		text-decoration:none;
	}
	table.dataTable a:visited {
		color: #999999;
		font-weight:bold;
		text-decoration:none;
	}
	table.dataTable a:active,
	table.dataTable a:hover {
		color: #bd5a35;
		text-decoration:underline;
	}
	table.dataTable tr:hover, 
	table.dataTable tr td.sorting_1:hover {  
		background-color: #FFF8DC; 
	}

 /* Style the list */
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {background-color: #ddd;}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #ccc;}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

#pushQuery {
	position: relative;
	float: right;
}

#queryArrows {
	height: 25px;
}

#queryArrows:hover {
	cursor: pointer;
}

#countDisplay {
	font-size: 1.2em;padding: 0 15px 5px;
}
tr td:first-child {
	text-align: left;
	width: 30px;
}
.ellipsis {
    white-space: nowrap;
    text-overflow: '...';
    display: block;
    overflow: hidden;
    width: 100px;
    font-size: .8em;
    font-weight: normal;
    color: #aaa;
}
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 210px;
    background-color: black;
    color: #fff;
    font-size: .8em;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    
	top: -5px;
    left: 105%; 
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

 .tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 20%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}