/*--------------------------------------------+
 | Site: TIF Projects Map					  |
 | Part: Master styles                        |
 +--------------------------------------------*/

/* Imports
=====================================================================*/
@import "reset.css"; /* Reset styles */
@import "ie.css"; /* IE styles */


/* Fonts
======================================================================*/
body, input, select, textarea { 
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol"; }


/* Basics
======================================================================*/
a { color: #4B58A6; text-decoration: none; }
a:hover { text-decoration: underline; }
address { font-style: normal; }
blockquote, dl, ol, p, table, ul { margin-bottom: 1em; font-size: 13px; }
body { height: 100%; color: #58595b; font-size: 16px; line-height: 1.35; padding: 0; margin: 0;}
cite, em { font-style: italic; }
dt { margin-top: 1.35em; }
dt:first-child { margin: 0; }
fieldset { border: 1px solid #ddd; margin-bottom: 2em; padding: 1em 1.5em; }
h1 { color: #4b58a6; font-size: 26px; font-weight: normal; line-height: 1.08; margin-bottom: 0.1em; margin-top: 0.3em; width: 65.5%; }
h1 span, h2 span, h3 span, h4 span { font-size: 13px; font-weight: normal; margin-left: 0.5em; }
h2 { color: #4b58a6; font-size: 18px; line-height: 1.3; margin-bottom: 7px; }
h2, h3, h4, h5, h6, strong { font-weight: bold; }
h3 { color: #4b58a6; margin-top: 0.25em; }
h4 { margin: 0.25em 0 0 0; padding: 0; }
hr { background: #ddd; border: 0; clear: both; color: #ddd; height: 5px; margin: .75em 0; }
html { height: 100%; }
img {padding-right: 0px; border: none; }
legend { background: #fff; color: #352f8e; font-size: 1.7em; margin: 0 0 0 -0.5em; padding: 0.1em 0.75em 0.1em; }
legend em { color: #777; font-size: 0.7em; font-style: normal; font-weight: normal; margin-left: 0.3em; }
ol { list-style: decimal; margin-left: 1.5em; }
ol ol { list-style: lower-alpha; }
select { padding: 0.1em 0.2em; }
sub { font-size: 10px; vertical-align: sub; }
sup { font-size: 10px; vertical-align: super; }
table { border: 1px solid black; border-collapse: collapse; }
table p { margin: 0; }
td { border: 1px solid black; border-collapse: collapse; vertical-align: top; }
th { border: 1px solid black; border-collapse: collapse; }
thead th { font-size: 1em; padding: 0 0.4em 0.25em; }
ul { list-style: disc; margin-left: 0; }
ul ol li { background: none; padding: 0; }

/* Stock classes */
.l { float: left; }
.r { float: right; }
.num { text-align: right; }
ul.flat, ul.headlines { list-style: none; margin-left: 0; }
ul.flat li, ul.headlines li { background: none; margin: 0; padding: 0; }
ul.headlines li { margin-bottom: 10px; }


/* Core layout
======================================================================*/
.clear { clear: both; }
#frame { width: 100%; height: 100%; }
#page { clear: both; margin: auto; padding: 1% 1% 1% 1%; height: 90%; }

/* Columns */
.c2l, .c2r { width: 48%; }
.c2l, .c3l, .c3m { float: left; }
.c2r, .c3r { float: right; }
.c3l { margin-right: 3%; }
.c3l, .c3m, .c3r { width: 31%; }
ul.c2l, ul.c2r { list-style: none; margin-left: 0; }
.col4 .col { float: left; margin-right: 1%; width: 24%; }

/* Content */
#content {
  height: 100%;
  background: #fff;
  border: 1px solid #dddddf;
  border-bottom: 1px solid #90b1dc;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  padding: 25px;
}

.content-primary { float: top; top: 20px; left: 10px; width:85%; height: 10px; padding-bottom:20px;}
.logo-canvas{float: right; border-top:5px;}

.control-canvas {float: left; width: 10%; padding-top: 200px;}
.content-simple { margin: auto; width: 800px; padding-bottom: 20px; } 
.content-simple  p { margin-top: .25em; font-size: 15px; }
.content-simple li { font-size: 15px; margin-left: 25px; }

	/* Full layout (no secondary content) */
	.full .content { background-image: none; }
	.full .content-primary { float: none; margin: 0 auto; padding-top: 1em; width: 100%; }
	.full .content-secondary { display: none; }
	
/* Home */
.content-home { margin: auto; padding: 30px 0; width: 900px; font-size: 16px; }
.content-home h1 { width: 100%; }
.content-home h2 { font-size: 20px; font-weight: normal; margin-bottom: 0; }
.content-home h3 { font-size: 18px; }
.content-home p { font-size: 16px; margin-bottom: 1.5em; }
.content-home hr { margin-top: 0; }
.twtr-tweet p { font-size: 12px; }
.content-home .mute { font-size:14px; }
.home-left { float: left; width: 28%; padding: 0 5px; }
.home-right { float: right; width: 68%; padding-top: 15px; }

/* Header nav */
#header-nav { float: right; background: none; margin-bottom: 0.3em; padding: 0; margin: 0; list-style: none; }
#header-nav li { float: left; margin: 0 0 0 1em; white-space: nowrap; text-align: center; font-size: 15px; color: #4b58a6;  }

/* Maps */
#map_canvas { height: 400px; width:100%; float:top; }
#map_canvas img { float: top; padding-bottom: 0px; }

/* Muted text */
.mute { color: #77787b; font-size: 12px; }
p.mute { margin: 0; }

/* Text boxes */
.ezpz-hint { color: #777; font-style: italic; }
  
/* Title */
.header-btn {margin-top: 10px; }


/* footer text */
.footer { color: #77787b; font-size: 12px; }
p.footer { margin-bottom: 0.4em; }

/* search */
input, select, textarea { color: #414042; font-size: 1em; }
textarea { height: 10em; }

/* Options */
.options-h, .options-v { list-style: none; margin: 0 0 1em 0; padding: 0; }
td .options-h, td .options-v { margin: 0; }
.options-h input, .options-v input { margin-bottom: -0.05em; }
.options-h img { border-bottom: 3px solid #fff; padding: 5px; vertical-align: middle; }
.options-h li, .options-v li { background: none; clear: both; margin-bottom: 0.3em; padding: 0; }
.options-h li { display: inline; margin-right: 0.7em; white-space: nowrap; }
.options-v li { padding-left: 25px; text-indent: -25px; }
.options-v li p { margin: 0; text-indent: 0; }
.options-days li { margin-right: 0.1em; }

#time-slider { margin: 0.5em 0.5em 0.5em 0.5em; }

.tagline { font-size: 15px; }

.ui-slider-horizontal { height: 0.4em;}
.ui-slider .ui-slider-handle { height: 0.9em; width: 0.9em; }
.yellow { color: #cccc33; }
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height:18px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  left: 100px;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 14px;
  left: 1px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
#legend-left { border-top: 10px solid #F7EDF1; }
#legend-middle { border-top: 10px solid #E7CAD9; }
#legend-right { border-top: 10px solid #C7A4B5; }

#label-yellow { color: #cccc33; }
#label-green { color: #60c660; }
#label-blue { color: #7575db; }
#label-purple { color: #cc66cc; }
#label-red { color: #d73e3e; }

#resultCount { float: right; font-weight: bold; font-size: 15px; margin-top: 8px; }

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  
  align-content: center;
  border: 1px solid #888;
  width: 600px; /*Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}