/*Used by JusticeMap.org */

body
{
	font-family: arial, sans-serif;
}

 #map:hover
 { cursor: pointer; }
 
 .fake_link
 {
 color:#3A00EE;
 text-decoration: underline;
 }
 
 .fake_link:hover
 {
 color:#EB6D25;
 text-decoration: underline;
   cursor: pointer;
 }

/* layers */
 .highlighted
 {
   background-color: #FFFF55;
 }
 
 /* units */
 .highlighted_unit
 {
   background-color: #D9351C;
 }

.highlighted_layer
{
	background-color: #EBBD60;
	padding:4px;
}



 .header_even
 {
   /* background-color: #F9C65F; */
   background-color: #F7DDA8;
   padding:4px;
 }

 .header_odd
 {
   /* background-color:#FFCBFF; */
   background-color:#F7D9F7;
   padding:4px;
 }
 
 
 .changeunitli
 {
	display: inline;
	padding:4px;
 }
 
  
 .changeunitlihover:hover
 {
 	background-color: #FDA496;
 	padding:4px;
 }
 
  .changelayerli
 {
	display: inline;
	padding:0px;
	margin:4px;
	margin-right:2px;
	margin-left:4px;
	padding-left:6px;
	border-left:1px solid grey; 
 }
 
  
 .changelayerlihover:hover
 {
 	background-color: #FDEFD2;
 	padding:4px;
 }


 .comparetable td
 { padding:3px;  }
 
 table.comparetable2.th, table.comparetable2.td
 {
   border: 1px solid #d2d2d2;
}

 #color-palette
 {clear: both; }

 .color-button
 {
   width: 14px;
   height: 14px;
   font-size: 0;
   float: left;
   margin:2px;
   cursor: pointer;
 }





/*Smaller Screens  Use smaller fonts, and less columns/sidebars*/
/*If the width or height is small - then use this*/
/*Note some of the sidebar positioning logic is in jmap-lib.php - if (($(window).width()>640)
Ideally this would include two cases as we want to trigger mobile mode if max-width<640 or max-height<480 - thus handling landscape and portrait mode

The comma acts like an OR
 */
 @media (max-width:640px), (max-height:480px)
 {
   #instruction_div
   {width:90%; }

   #showstuff
   {width:90%; }

   #sponsors
   {width:100%;}

   #sunlogo
   { width: 95%; height: 95%;}

   #legend
   { width: 80%; padding: 10%; font-size:0.8em;}

   #demographics_data
   {
    width: 120px; padding:3px;
    /* background:#fff; font-size:0.8em;  display:none; margin-top:2px; */
     background:#fff; font-size:0.8em;  display:none; margin-top:70px;
     border: 1px solid #d2d2d2;
   }


/* This is used by density and income layers -- race just uses the default 
Might want to make it smaller for screens below 640 width
*/
  .demographics_data_income
  {
    padding:3px; 
    background:#fff;
    width:120px;
    margin-bottom:20px;
    font-size:0.7em;
    display:none;
    margin-top:70px;
  }

   .demographics_font_size
    {font-size:1.0em;}	

    .jmapheader {font-size:1.0em;}
    .jmapheader2 {font-size:1.4em;}

   #energyjustice_logo {margin-left: 0%;}

   #ejnlogo {width:95%; height: 95%;}

/*height is only 70% to ensure that small devices, don't put a navigational menu that blocks it */
    #map-canvas
    {
    margin: 0;
    padding: 0;
    height: 85%;
    }

   .header_even {font-size:1.2em;}
   .header_odd {font-size:1.2em;}

    .legend_link {display:inline;}
    /* .demographics_small {display:inline; width:100%;}  */	
    #closelink {display:none;}	
    #fulldemotable {margin-top:5px;}
    #full_demo_div {margin-top:40px;}
    
    
    #jmapintro_mobile {display:block}
    #jmapintro {display:none}
    
    #navbar {display:block}
    #header_line1, #header_line2, #header_line3 {display:none;}
    
    #question_advanced {display:inline}
    #more_navbar {float: right;}
    
    .highlighted_unit, .highlighted
		{
			background-color: #9BDAF5;
			/* this padding doesn't do anything - possibly overridden by superfish? */
			padding:4px;
		}
 }
























/*Larger Screens*/
 @media (min-width:641px) and (min-height:481px)
 {
   #instruction_div
   {width:600px;}

   #showstuff
   {width:600px;}

   #sponsors
   {width:800px;}

   #sunlogo
   {}

   #legend
   { width: 60px; padding: 5px; font-size:1.0em;}

   #demographics_data
   {
    width: 120px; padding:3px;
    background:#fff; font-size:1.0em;  display:none; margin-top:20px;
   }


  /* This is used by density and income layers -- race just uses the default 
  Might want to make it smaller for screens below 640 width
  */
  .demographics_data_income
  {
    padding:3px; 
    background:#fff;
    width:120px;
    margin-bottom:20px;
    font-size:1.0em;
    display:none;
  }

   .demographics_font_size
    {font-size:1.3em;}

   #energyjustice_logo
   {margin-left: 50px;}

   #ejnlogo {}

    .jmapheader {font-size:1.2em;}
    .jmapheader2 {font-size:1.4em;}

    #map-canvas
    {
    margin: 0;
    padding: 0;
    height: 85%;
    }

   .header_even {font-size:0.85em; }
   .header_odd {font-size:0.85em;}
   .legend_link {display:none;}
   .demographics_small {display:none;}
    #closelink {display:inline;}	
    #fulldemotable {margin-top:20px;}

    #full_demo_div {margin-top:0px;}
    #jmapintro_mobile {display:none}
    #jmapintro {display:block}
    
    
    #navbar {display:none}

		#question_advanced {display:inline}
		#more_navbar {display:inline}    
    
 }
 
 
 
 /* narrow screens */
 @media (max-width:399px)
 {
 	#question_advanced {display:none}
 }
 
 



.borderbottom
 {
 	border-bottom:1px solid #d2d2d2;
 }