/*
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize ==========================================================
 */

/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
*/

/* =============================================================================
   Chrome Frame Prompt
   ========================================================================== */

.chromeframe { display: block; position: absolute; top: 0; z-index: 100; width: 100%; margin: 0; text-align: center; font-size: 10px; background: #FFFF07; color: black; padding: 1px; }
.chromeframe a { color: blue; font-weight: bold; text-decoration: underline; }

#au-accordion ul{
	font-size: 1.1em;
	list-style-type: none;
	padding-left: 0px;
}

#au-accordion li{
	padding-top: 3px;
}

/* layout */
#container { overflow: hidden; }
aside {
  float: right;
  position: relative;
  width: 24%;
  box-sizing: content-box; /* hack for ie9 box-sizing doubling the scrollbar width */
  -webkit-overflow-scrolling: touch;
  box-shadow:  5px 0 5px -3px #666;
  margin-top: -700px;
  font-family:  Helmet, Freesans, sans-serif; font-size: 12px; font-variant: normal;
}
#accordion-data{
	visibility: visible !important;
}
#map-container {
  top: 0;
  position:relative; z-index:0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  margin: 0;
}



/*  Sidebar  */
.datatable caption { text-align: left; padding-top: 10px; font-size: 12px; font-weight: bold; }
.table-icon { width: 16px; }
#opacitydll { margin-top: 4px; }
#opacitySlider { margin: 10px 7px 0 7px; }
footer { margin-top: 20px; }
footer hr { clear:both; width: 90%; margin: 3px auto 0; height: 3px; border-color: #bfbfbf; }
#routePane button { margin: 10px 0 7px; }
#routePane input, #routePane select { width: 80%; margin: 2px; }
.environment_div { font-size: 0.8em }
.environment-list { margin-left: 0; padding-left: 10px; }
.environment-list li { padding: 4px 5px 4px 40px; border-bottom: 1px solid #ccc; list-style: none; display: block; font-size: 0.8em;}
.environment-list-heading {padding-top: 10px;  }
.environment-water { background: url("../img/environment-water.png") no-repeat top left;}
.environment-green { background: url("../img/environment-green.jpg") no-repeat top left; }
.environment-air { background: url("../img/environment-air.png") no-repeat top left; }
.environment-land { background: url("../img/environment-land.png") no-repeat top left; }

/* Map */
#toolbar-text-output { font-size: 0.8em; position: absolute;  right: 5px; padding-top: 5px; }
#mapcontrols { float: left; }
#map { border: 1px solid #D9D9D9; }
#map div {-moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
#opacitySlider { margin: 18px auto 30px auto; width: 90%}
#elevation_chart { position: absolute; top: 65px; right: 7px; text-align: center; background: white; padding: 5px; box-shadow: 3px 3px 6px #666; }
#streetview { position: absolute; bottom: 7px; right: 7px; width: 50%; height: 40%; border: 4px solid white; }
#radius { width: 60px; }
#layerswitcher ul { margin-left: 0; padding-left: 10px; }
#layerswitcher ul li { display: block; margin: 2px 0; }
#layerswitcher input[type="checkbox"], #layerswitcher input[type="radio"] { margin-right: 5px; }
.infowin-content { overflow: hidden; }
#wmsDirectoryLayer { width: 250px; margin-left: 18px; }
.toggleLayersArea { margin-top: 10px; padding: 8px 10px 10px; }

/* Image gallery */
#housephoto { margin: 5px 0; padding: 8px 0; text-align: center; max-height: 200px; overflow: auto; }
#photo_gallery img { cursor: pointer; margin: 0 5px 5px 0; width: 30%; box-shadow: 0 3px 4px -2px black; border-top: 2px solid white; }
#housephoto button { margin-top: 8px; }
.house_photo_selected { border-top: 2px solid #547472; box-shadow: 0 0 15px #547472, 0 3px 4px -2px black; }
#map-container img
{ max-width:none!important;
}




/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }




/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
   consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */

@media screen and (max-width: 768px) {
  body { background: #fff; }

  /* map area */
  #map-container { height: auto; min-width:  290px;  }
  #toolbar { display: none !important; }

  #map { position: relative; width: 100%; float: left; height: 400px;}
  .ui-button-text-only .ui-button-text { padding: 2px 3px; }

  /* sidebar */
  aside {
    height: auto;
    min-width: 290px;
    box-shadow: none;
    background: #fff;
	position: relative;
	float: left;
	width: 100%;
	margin: 0px;
  }
  .ui-accordion-header a { padding: 1.4em 1em 1.4em 2.2em !important }

  /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */
  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}





/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {

  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: none !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }


  .print-only { display: block !important }
  .screen-only { display: none !important }

  body { background: white; }


  /* layout */
  aside { overflow: visible; box-shadow: none; width: 100%; margin: 0 auto; padding: 0; }
  #map-container, aside { position: relative; left: inherit; right: inherit; top: inherit; bottom: inherit; }
  #map-container {
    left: 0;
    top: 20px;
    bottom: 0;
    right: 0;
    height: 750px;
    width: 99%;
    border: 2px solid black;
    margin: 0 auto;
    page-break-after: always;
  }


  .selectedLocation { font-weight: bold;  }
  .selectedLocation .smallfont { display: none;  }

  #housephoto { max-height: inherit; overflow: visible; }

  /* map */
  .gmnoprint {display: none; width: 0; height: 0; }
  .leaflet-top .leaflet-control, .olControlZoom, .olControlLayerSwitcher { display: none; }

  /* jQuery Tweaks */
  .accordion h3, .ui-tabs-nav {display: none !important;}
  .accordion .ui-state-active {display: block; font-weight: bold; font-size: 12px;}
  .ui-widget-content { border: none !important; font-size: 1.1em; }
}

@media print and (orientation:landscape) {
    #map-container { height: 570px; }
}