body {
  /*background-color: #eee;*/
}

div.chart_container {
  height: 450px;
}
div.chart_container div[class^="chart_"] {
  width: 100%;
  height: 100%;
}

div.sections_navbar {
  width: 100px;
  float: left;
  text-align: left;

}
div.sections_navbar ul {
  list-style-type: none;
  -webkit-padding-start: 0px;
  -moz-padding-start: 0px;
  padding: 0px;
}
div.sections_navbar li {
  margin-bottom: 30px;
  cursor: pointer;
  text-align: center;
}

div.sections_navbar span {
  display: block;
  color: #000;
  font-family: Cambria,Calibri,Trebuchet MS,Helvetica,Consolas, monospace;
}

div.sections_navbar img {
  margin: 10px auto;
  width: 50px;  /* Instead of manually adjusting here, re-size the actual icons */
}

span#people, span#maps, span#art, span#cont {
  color: #0d2a77;
  font-weight: 600;
}

/*DVR: this rule is very important to allow us to turn off maps and still be able to view the rest of the slides 
  The maps icon is turned back on if the naaccord_maps module is activated.
*/

/* AG Turn this back on until I figure out why it cannot be on all the time */
li#interactive_maps {
/*  display:none; */
  display:inline;
}

div#splash {
  font-family: Helvetica, sans-serif;
  max-width: 800px; 
  padding: 20px;
  margin: 10px 10px 10px 120px; /* don't allow wrapping around sections_navbar */
  border-left: 1px solid #ddd;
}

div#splash img {
  margin: 10px;
}
  
div.flexslider {
  margin-left: 120px;
}

/* Only display the splash section initally, hide all others */
div#slider_cont, div#slider_care, div#slider_people, div#slider_art, div#map_container {
  display: none;
}
/* The larger height of this slider is to accomodate the demographics table */
div#slider_people { 
  height: 850px;
}

div#map_container {
  margin-left: 120px;
}
  
div.map_and_controls {
  width: 100%;
}
  
div#map {
  height: 800px;
  margin-right: 270px;
}

div.map_controls {
  color: #000; /* prevent gray radio button text */
  width: 250px;
  height: 650px;
  border: 1px solid gray;
  padding: 10px;
  font-family: Consolas, monospace;
  float: right;
  margin-left: 10px;
  background-color: #E3E1FA;
}

div.map_controls label{
  font-family: Helvetica, sans-serif;
  /*color: #000066; */
  color: #0d2a77;
  color: black;
  font-weight: bold;
}

div.map_controls input{
  font-family: Courier New,consolas, monospace;
}

div.map_controls img.button {
  height: 16px;
  padding: 4px;
  border: 1px solid #0255fe;
  background-color: #eee;
}

div.map_controls select {
  margin-top: 5px;
}

div.map_controls select.riskSelect {
  float: left;
  width: 100px;
}

div.map_controls div.note_box {
  margin-left: 110px;
  color: #333;
}

div.map_controls span.note {
  font-style: italic;
  font-size: 80%;
}

div#ret_popup, div#haart_popup, div#vls_popup, div#cd4_popup  {
  display: none;
}

span#ret_def_link, span#haart_def_link, span#vls_def_link, span#cd4_def_link {
  color: #0d2a77;
  color: #0000a5;
  font-weight: bold;
  cursor: pointer;
}

div.haart_def, div.vls_def, div.cd4_def, div.ret_def {
  margin-top: 5px;
  display: none;
  font-weight: normal;
  font-family: arial, sans-serif;
  font-size: 90%;
  border: 1px solid #333;
  width: 90%;
  height: 100px;
  color: #333;
  padding: 10px;
}

div.ret_def {
  display: block;
}

/*DVR: adjustment to jquery ui button styling for indicator definition dialog boxes*/
div.ui-dialog button {
  float: right;
}

img#play {
  vertical-align: center;
}

img#fwd {
}

img#loading {
  display: none;
}

div.anim_buttons {
  cursor: pointer;
  vertical-align: center;
  display: inline;
}

div.current_year {
  z-index: 1;
  position: absolute;
  bottom: 100px;
  left: 20px;
  font-size: 200%;
}

div.naaccord_logo {
  z-index: 1;
  position: absolute;
  top: 10px;
  right: 10px;
}

div.naaccord_logo img{
  height: 35%;
  width: 35%;
  float: right;  
}

div.ccasanet_logo {
  z-index: 1;
  position: absolute;
  bottom: 30px; 
  /* top: 90px; */
  right: 10px;
}

div.ccasanet_logo img {
  height: 50%;
  width: 50%;
  float: right;
}

img#casc_care_slide {
  margin: 5px auto;  
  height: 450px;
  width: 600px;
}

img#demographics_slide {
  margin: 5px auto;
  height: 750px;
  width: 525px;
  
}

h1#year_box {
  display: none;
  font-size: 200%;
}

select.year_select {
  vertical-align: top;
}

input#gen_map, input#reset_map {
  background-color: #0d2a77;
  color: #fff;
  font-weight: normal;
  font-family: Helvetica, arial, sans-serif;
  padding: 8px;
  border: 0px;
  border-radius: 3px;
  cursor: pointer;
  /* To override Drupal: */
  background-image: none;
  box-shadow: none;
  text-shadow: none;
  outline: none;
  border-image: none;
}

div.slide_buttons {
  text-align: center;
}

.slide_buttons input{
  border:1px solid #d1dcdf; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;font-weight:bold; color: #0000a5;
  background-color: #f2f5f6; background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f5f6), to(#c8d7dc));
  background-image: -webkit-linear-gradient(top, #f2f5f6, #c8d7dc);
  background-image: -moz-linear-gradient(top, #f2f5f6, #c8d7dc);
  background-image: -ms-linear-gradient(top, #f2f5f6, #c8d7dc);
  background-image: -o-linear-gradient(top, #f2f5f6, #c8d7dc);
  background-image: linear-gradient(to bottom, #f2f5f6, #c8d7dc);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f2f5f6, endColorstr=#c8d7dc);

  background-color: #bbb;
  border: 1px solid #333;
  color: #333;
  font-weight: bold;
  padding: 8px;
  margin-left: -2px;
  margin-right: -2px;
  display: inline;
  border-radius: 0px;
}

.slide_buttons input:hover{
  border:1px solid #b6c7cc;
  background-color: #d4dee1; background-image: -webkit-gradient(linear, left top, left bottom, from(#d4dee1), to(#a9c0c8));
  background-image: -webkit-linear-gradient(top, #d4dee1, #a9c0c8);
  background-image: -moz-linear-gradient(top, #d4dee1, #a9c0c8);
  background-image: -ms-linear-gradient(top, #d4dee1, #a9c0c8);
  background-image: -o-linear-gradient(top, #d4dee1, #a9c0c8);
  background-image: linear-gradient(to bottom,#d4dee1,#a9c0c8);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d4dee1, endColorstr=#a9c0c8);
  cursor: pointer;
}

div.slide_buttons input.chosen {
  background-color: #0d2a77;
  color: #fff;
  background-image: none;
  outline: none;
  text-shadow: none;
  box-shadow: none;
}

/* DVR: need to override Drupal theme defaults */
.slide_buttons input[type='button'] {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.slide_buttons input[type='button']:hover {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

/* DVR: removing rounded buttons for now, don't look good when re-sizing to small screen
div.slide_buttons .right_end_button {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

div.slide_buttons .left_end_button {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

div.slide_buttons .right_end_button:hover {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

div.slide_buttons .left_end_button:hover{
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
*/
h2.title {
  text-align: center;
  font-family: Cambria, sans-serif;
  color: #000;
  padding-bottom: 4px;
}

h3.slide_title {
  text-align: center;
  font-family: Cambria, sans-serif;
  display:none;
}

ul.slides p {
  margin-top: 100px;
  text-align: center;
}

.info {
  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  background: white;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  border-radius: 5px;
}
div.leaflet-top, div.leaflet-control {
  margin-top: 100px;
}

/* Make sure the leaflet map controls don't appear on top of the Drupal admin menu overlay */
.leaflet-top,
.leaflet-bottom {
	z-index: 100; /* DVR: was 1000 in leaflet.css */
	}

.info h4 {
  margin: 0 0 5px;
  color: #777;
}

.legend {
  text-align: left;
  line-height: 18px;
  color: #555;
}

.legend i {
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 8px;
  opacity: 0.7;
}

.legend .circle {
  border-radius: 50%;
  width: 6px;
  height: 6px;
  border: 1px solid black;
  vertical-align: middle;
  margin-top: 5px;
}

/* DVR: code for adjusting responsiveness is overriding the base theme's media queries defined in responsive.css  */

/* Smaller Then Desktop
================================================== */
@media only screen and (max-width: 959px) {
}

/* Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
}


/* Mobile (Portrait & Landscape)
================================================== */
@media only screen and (max-width: 767px) {
}

/* Mobile (Landscape)
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {

  div#map_container {
    /*margin: 0px;*/
  }
  div.map_controls {
    float: none;
	/*margin: 5px auto; */
	width: auto;
	height: auto;
  }
  div#map {
    margin: 5px;
	margin-top: 10px;
	width: 100%;
	height: 600px;
  }
}

/* Mobile (Portrait only)
================================================== */
@media only screen and (max-width: 479px) {
  div.sections_navbar {
    width: 100%;
	display: inline-block;
	float: none;
	text-align: center;
  }
  div.sections_navbar ul {
    width: 100%;
    display: inline-block;
	list-style-type: none;
	border-bottom: 1px solid #ddd;
  }
  div.sections_navbar li {
    display: inline-block;
  }
  div.sections_navbar span {
    display: none; 
  }
  div.sections_navbar img {
    display: inline-block;
	margin: 8px;
  }
  div.flexslider {
    margin: 5px;
  }
  div#splash {
    margin: 10px;
    border: 0px;
  }
  div#map_container {
    margin: 0px;
  }
  div.map_controls {
    float: none;
	margin: 5px auto; 
	width: auto;
	height: auto;
  }
  div#map {
    margin: 5px;
	width: 100%;
	height: 600px;
  }
}