/* 05/19/16 for use with my fluid leaflet, mapbox-gl, and OL maps, all fluid maps use bootstrap
	everywhere i use height: 100% it is necessary for the map to display, remove anyone and there is no map
	08/16/16 start using on production pages
	09/01/16 use min-width, max-width in @media queries rather than min-device-width, max-device-width, follow bootstrap @media queries
	11/02/17 collapsible side bars
*/

/* openlayers overrides */
/*.olControlPermalink {font-size: 16px; bottom: 2em; right: 20em;}*/
div.olControlMousePosition {font-weight: bold; color: blue}

/* jquery */
/* keeps autocomplete and dialog on to of the map rather than under the map */
.ui-autocomplete {z-index: 1010;}
.ui-dialog {z-index: 1011;}

/* follow bootstrap link color, needed for links inside ui-widget, such as  #report  */
.ui-widget-content a { color: #337ab7; }
.ui-widget-content a:hover, a:focus {
	color: #23527c;
	text-decoration: underline;
}

/* on smaller screens gives me more room to keep the tabs heading on a single line rather than the second tab rolling under the first, for example col-md-2, search, last search */
.ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding: 5px; }

/* smaller padding inside the tab panel  */
.ui-tabs .ui-tabs-panel { padding: 5px; }

/* bootstrap */
/* toolbar dropdown menus */
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu { visibility: visible; }
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu, .nav-pills .dropdown-menu, .dropdown-menu { margin-top: 0; }

/* modify column padding for my maps, 15px --> 5px */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  padding-right: 5px;
  padding-left: 5px;
}

/* minimize the use of element css */
ul{
	list-style-type: none;
	padding-left: 0px;
	/*display: inline;*/
}

html,body {
	height:100%;
}

#body{
	height:100%;
	overflow-x: hidden;
}

#content{
	height:80%;
}

#map-container {
	height:100%;
}

#map {
	height: 100%;
}

/* generally I do not like scroll bars, on OL maps with last search i need a vertical scroll bar to show all the results */
/* height is set to auto in phone media queries, without that there is a big empty space 300px  between the search and the map o iphones and maybe on other small devices height is set to needs to be autothat is why there is a override in the media queries */
.sidecol {
	height:100%;
	overflow:auto;
	/*overflow-y: hidden;
	overflow-x: hidden;*/
}

/* formerrly .body_title */
.title2 {
	padding:5px;
	font-size: 16px;
	font-weight: bold;
	color:#0066FF;
}

.title3 {
	padding:5px;
	font-size: 16px;
	font-weight: bold;
	color:#165C7D;
}

.header_title {
	font-size: 24px;
	color: #005491;
}

.copyright {
	text-align:center;
	font-size: 12px;
}

.center {text-align:center;}
.bold {font-weight: bold;}
.margintop10 { margin-top: 10px; }
.margintop5 { margin-top: 5px; }
/* bootstrap col default padding is 15px on maps i am using 5px, .paddinglr10 gives me a little more padding on the outside of a row */
.paddinglr10 { padding-left: 10px; padding-right: 10px; }
.padding5 { padding: 5px; }

/* 09/27/16 eliminate these classes , radio button search_options, 10/05/16 i believe they are eliminated  */
/*.paddingl5 {padding-left: 5px;}*/
/*.paddingt5 {padding-top: 5px;}*/

/* 09/27/16 transition to these classes*/
.paddingleft5 { padding-left: 5px; }
.paddingtop5 { padding-top: 5px; }

/* 09/27/16 id="loginDialog" used in a variry of inhouse pages */ 
.paddingright10{ padding-right: 10px; }

.font13 {font-size: 13px;}
.font12 {font-size: 12px;}

/* psudo link, 08/27/15 follow the look of bootstrap links */
.plink {
	color: #337ab7;
	text-decoration: none;
	cursor: pointer;
}
.plink:hover {
	color: #23527c;
	text-decoration-line: underline;
}

/* 12/05/16 start to use on mapbox-gl sites during load, currently am using image /_images/big_spinning.gif, see /apps/parks */
.spinner {
	z-index: 5001;
	position: fixed;
	top: 40%;
	left: 40%;
}

/* last search, used on many OL maps */
.last {
	cursor: pointer;
	margin-bottom: .5em;
	font-size: .9em;
 }
.last:hover {background-color:#c3daf9;}

/* used with OL maps */
.layertree ul { margin-left: 0; padding-left: 5px; }
.layertree ul li { display: block; padding-top: 5px; }
.layertree input[type="checkbox"], .layertree input[type="radio"] { margin-right: 5px; }

/* used to hide elements on mobile devices */
.hideme { }
.hideme_tablet {}
.hideme_phone {}

/* 11/02/17 the following is for collapsible side bars, first added to parcel.html, tested on /template/collapse.html */
/* http://www.broculos.net/2015/08/how-to-build-collapsible-sidebars-with.html */
.collapsed {
	display: none; /* hide it for small displays */
}
.fa-xx {
	font-size: 18px;
	color:#330099
}
.toggle_left {
	position: absolute;
	left: 5px;
	top: 60%;
	z-index: 1001;
	padding: 5px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	background-color: #cccccc;
}
.toggle_right {
	position: absolute;
	right: 5px;
	top: 60%;
	z-index: 1001;
	padding: 5px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	background-color: #cccccc;
}

/* 09/01/16 follow the size of bootstrap @media queries */
/* see http://pieroxy.net/blog/pages/css-media-queries/test-features.html, px dimensions width, to get the width of the browser window which is what these media queries use*/

/* Medium devices ( 992px to 1199px ), ipad landscape, some desktop */
@media (min-width: 992px) and (max-width: 1199px) {
	.hideme {display:none;}
	.collapsed {display: block;}
	#sidebar-left.collapsed {margin-left: -20%;}
	#sidebar-right.collapsed {margin-right: -20%;}
}

/* Small devices (tablets, 768px to 991px), tablets portrait */
@media (min-width: 768px) and (max-width: 991px) {
	.hideme {display:none;}
	.hideme_tablet {display:none;}
	#map-container { height:800px; }
	/*#list { height:800px;}*/
}

/* small devices, up to 767px */
@media screen and (max-width: 767px) {
	.hideme {display:none;}
	.hideme_tablet {display:none;}
	.hideme_phone {display:none;}
	.header_title { font-size: 16px; }
	.sidecol { height: auto; }
	#list { height:150px;}
	#map-container { height:300px; }	
}	

@media (max-device-width: 480px) and (orientation: landscape) {
	
}