@charset "UTF-8";

/* Responsive calculation is target / context = result */
/* Flexible grid is 12 columns, each 69px wide, with 12px-wide gutters. = 960px wide */

/* ------  BASE STYLES ------ */

a:active, a:visited, a:focus { border: none; outline: none; }

body { background: #000; color: #e4e4e4; font: normal 100%/1.4 Helvetica, Arial, sans-serif;}
.ie7 body { background: #000;	/* For IE7 bug. */ }
#page { margin: 0 auto; width: 100%; }
.interface { margin: 0 auto; width: 100%; background-color: #111; visibility: hidden;}
.main { float: left; background-color: #333; overflow: hidden; height: 100%; }
.sidebar { position: relative; float: left; background-color: #1a1c1d; overflow: hidden; }

/* text elements */
h1, h2 { font: 1.6em/1 'Dosis', Arial, sans-serif;}
h2 { font-size: 1.2em; font-weight: 500; }
h4 { color: #747474; font-weight: normal; font-size: 12px; }
h5 { color: #7aafe4; font-weight: normal; font-size: 16px; margin-bottom: 2px; }
p { color: #999a9a; font-weight: normal; font-size: 12px; line-height: 1.4em; }

/* lines */
div.hr { height: 1px; background: #1d1e1e no-repeat scroll center; margin-bottom: 16px; clear: both; }
div.hr hr { display: none; }

/* button (default used for sidebar view buttons) */
.button { box-shadow:inset 0px 1px 0px 0px #b7d2ef; background-color:#8AA4BF; background-image: linear-gradient(bottom, #4E7AA5 20%, #9FBCDB 100%); background-image: linear-gradient(to top, #4E7AA5 20%, #9FBCDB 100%); border-radius:4px; display:inline-block; color:#242526; font-family:arial; font-size:0.7em; font-weight:600; padding:6px 0; text-decoration:none; text-shadow:1px 1px 1px rgb(119, 160, 201); width: 88px; text-align: center; line-height: 1.2em; }

.no-touch .button:hover { background-color:#d5e6f8; background-image: linear-gradient(bottom, #86aed5 51%, #d5e6f8 100%); background-image: linear-gradient(to top, #86aed5 51%, #d5e6f8 100%);}

.button:active, .button.active { background-image: none; background-color: #dfeaf7; color: #242526; text-shadow: none; box-shadow: none;}
.button.active, .button.selected { pointer-events: none; cursor: default; }
.margin_right { margin-right: 1%; }

/* Curtain for fade in at beginning */
#curtain {
  width: 100%;
  height: 100%;
  background-color: black;
  position: absolute;
  z-index: 1000;
}

#about-dsn {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: calc(1em - 50vw);
  margin-top: calc(1em - 50vh);
  width: calc(100vw - 2em);
  height: calc(100vh - 2em);
  border: 1px solid #2c2f32;
  background: black;
  padding: 1em;
}

#about-dsn.on {
  display: block;
}

#about-dsn .close {
  position: absolute;
  top: 0;
  right: 0;
  background: black;
  padding: .5em;
  border-bottom-left-radius: 1em;
  border-left: 1px solid #2c2f32;
  border-bottom: 1px solid #2c2f32;
  cursor: pointer;
}

#about-dsn iframe {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

#maintenance {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -22.5em;
  margin-top: -4em;
  width: 45em;
  height: 9.5em;
  border: 1px solid #b7d2ef;
  background: black;
  padding: 2em;
  text-align: center;
}
#maintenance a {
  color:rgb(119, 160, 201);
}
@media only screen and (max-width: 50em) {
  #maintenance {
    width: 100%;
    height: auto;
    left: 0;
    margin-left: 0;
  }
}

/* ------  BASE STYLES ------ */





/* ----- MAIN AREA ----- */

/* --- banner --- */
.main .banner { position: relative; background-color: #242424;
  /* Even with prefix-free we need both gradient styles here because it only handles the prefix, not the (bottom vs. to top) */
  background-image: linear-gradient(bottom, #161617 51%, #333535 100%, #383939 100%); border-bottom: 1px solid #2c2f32;
  background-image: linear-gradient(to top, #161617 51%, #333535 100%, #383939 100%);
}
img.nasa_logo  { float: left; margin-right: 12px; }
.jpl_caltech_dsn_logo { float: left; margin-top: -2px; }
.main .timestamp1 { position: absolute; top: 11px; right: 3%; color: #a1a0a0; font-weight: normal; font-size: 0.6875em; /* 11 / 16 (from .main) */ }
.main .timestamp2 { display: none; font-weight: normal; font-size: 0.6875em; color: #a1a0a0; background: black; padding: 8px 1.7% 8px 1.7%; }
.info_button { position: absolute; top: 36px; right: 3%; width: 22px; }
.info_button img { width: 100%; }

.dsn_home_link {
  font-size: 11px;
  color: black;
  float: right;
  text-decoration: none;
  background-color: #688CAF;
  padding: 2px 5px 2px 5px;
  border-radius: 2px;
}

.banner_buttons {
  top: 20px;
  right: 3%;
  position: absolute;
}

.banner_buttons .dsn_home_link {
  float: right;
  position: relative;
  visibility: hidden;
}

.no-touch .dsn_home_link:hover {
  background-color: #7AAFE4;
}




/* --- mobile nav bar --- */
.mobile_nav_bar, .mobile_info_area { background-color: #a2bcd6; }
.mobile_nav_bar { position: relative; width: 100%;  color: #343d47; text-align: center; padding: 6px 0; }
.mobile_info_area { color: #272e35; width: 100%; border-top: 1px solid #4c5c6c; padding: 20px 4% 10px; display: none; }
.mobile_nav_bar h2 { -webkit-text-size-adjust: none; }
.mobile_nav_bar a { text-decoration: none; color: #343d47; }
.mobile_nav_bar a.info_button { position: absolute; right: 11px; top: 5px; display: block; }
.mobile_info_area p { color: #272e35; font-size: 1em; line-height: 1.4em; margin-bottom: 1em; }
.mobile_info_area ul.info_key { list-style-type: none; }
.mobile_info_area ul.info_key li { width: 23%; max-width: 140px; vertical-align: top; float: left; margin-right: 2%; }
.mobile_info_area ul.info_key li:last-child { margin-right: 0; }
.mobile_info_area ul.info_key li p { font-size: .9em; }
.mobile_info_area ul.info_key li .key_container { height: 40px; width: 40px; text-align: center; overflow: hidden; background: black; float: left; margin: 1px 6px 6px 0; }
.mobile_info_area ul.info_key li .key_container img { width: 24px; margin-top: -50px; }


/* --- main area below banner --- */
.main .section.dish_menu { background-color: black; }
.main .article .date_time { float: left; }
.main .header {
  background-color: #242424;
  background-image: linear-gradient(left, #1a1a1a 1%, #292929 60%, #181818 100%);
  background-image: linear-gradient(to right, #1a1a1a 1%, #292929 60%, #181818 100%);
}
.main .location img.flag { width: 30px; height: 19px; float: left; margin: 2px 10px 0 0; }
.main .location h1 { font-size: 1.4em; }
.main .data_warning { font-size: 15px; color: #999; position: relative; display: none; }
.main .data_warning.no_data { display: block; }
.main .figure { position: relative; min-height: 100px; overflow: hidden; }
.main .figure .nav { list-style: none; width: 100%; text-align: center; display: inline-block; }
.main .figure .nav a { font-size: 0.6875em; /* 11 / 16 */ color: #87a8c9; text-decoration: none; margin: 0 1.3986013986%; /* 10/715 */ }
.no-touch .main .figure .nav a:hover { color: #e4e4e4;}
.main .figure .nav a:active, .main .figure .nav a.selected { color: #e4e4e4; }

/* --- Dish menu headers for small screens --- */
.main .small_screen_header { width: 100%; margin-bottom: 12px; }
.main .small_screen_header .date_time { float: right; text-align: right; }

/* --- Dish menu general --- */
.main .dish_number, .main .figure.large_dish, .main .figure.small_dish { float: left; }

/* --- Dish graphics --- */
.main .dish_graphic { position: absolute; width: 100%; text-align: center; /*background: black*/; }
.main .dish_graphic a img { width: 100%; max-width: 100%; margin: 0 auto;}
/*.main .large_dish .dish_graphic img { width: 90%; }*/
.main .small_dish .dish_graphic img { width: 60%; }
.main .dish_graphic a .new {
  position: absolute;
  display: inline-block;
  bottom: calc(10px + 10%);
  right: 20%;
  margin: 0;
  padding: 0px 1px 0 1px;
  font-size: 0.625em;
  /* width: 20%; */
  line-height: 1em;
  transform: rotate(-15deg);
  color: #c9f6ff;
  background: #056e96;
  border: 1px solid #056e96;
}
@media only screen and (min-width: 1100px) {
  .main .dish_graphic a .new {
    padding: 2px 1px 0 1px;
    font-size: 0.85em;
    border: 1px solid #33a2cd;
  }
}
@media only screen and (min-width: 1800px) {
  .main .dish_graphic a .new {
    font-size: 1em;
  }
}
/* --- Signals --- */
.main .figure .dish_signals { position: relative; width: 100%; height: 100%; text-align: center; overflow: hidden; margin-bottom: 100%; }
.main .figure.small_dish .dish_signals { height: 100%; }
.main .figure .dish_signals .signal { position: absolute; left: 50%; }
.main .figure.large_dish .dish_signals .signal { width: 35%; }
.main .figure.large_dish .dish_signals .signal.data_out { width: 55%; }
.main .figure .dish_signals .signal img { margin-left: -100%; width: 100%; height: 100%;}
.main .figure.large_dish .dish_signals .data img { height: 150%; }
.main .figure .dish_signals .carrier img { height: 280%; }
.main .figure .carrier { opacity: .4; }
.main .figure.selected .carrier { opacity: .4; }
.main .figure .data { opacity: .8; }
.main .figure.selected .data { opacity: .8; }

/* Dish states */
.figure .dish_graphic a img.white,
.no-touch .figure .dish_graphic a:hover img.blue,
.figure.selected .dish_graphic a img.blue,
.figure .dish_signals img.white,
.figure.selected .dish_signals img.blue,
.figure.inactive .dish_signals img,
.figure .dish_signals .signal {
  display: none;
}
.figure .dish_graphic a img.blue,
.no-touch .figure .dish_graphic a:hover img.white,
.figure.selected .dish_graphic a img.white,
.figure.selected .dish_signals img.white,
.figure .dish_signals .signal.active_signal {
  display: inline-block;
}
.dish_spacecraft a.selected, .dish_number.selected { pointer-events: none; cursor: default; }
.main .inactive { opacity: .3; pointer-events: none; cursor: default;}
.main .inactive.new { opacity: 1; }
.main .dish_number { text-align: center; float: left; }
.main .dish_number h1 { font-size: 1.4em; }
.main .dish_number h1 a { color: #87a8c9; text-decoration: none; }
.no-touch .main .dish_number h1 a:hover { color: #e4e4e4; text-decoration: none; }
.main .dish_number.selected h1 a, .main .dish_number.selected h1 a { background-color: #cdcdcd; padding: 0 6px; color: #2c2c2c; border-radius: 2px; }

/* ----- end MAIN AREA ----- */





/* ----- SIDEBAR ----- */

/* --- global sidebar values --- */
.sidebar .nav, .sidebar .article, .sidebar .footer { padding: 12px ; /*padding: 3.92156862745%;  12 / 306 */ }
/* exception */
.sidebar_first .nav { padding: 0px; width: 100%; display: block;  overflow: hidden; }

/* --- sidebar first (inherits global button values) --- */
.sidebar_first { padding: 3.92156862745%; /* 12 / 306 */ position: relative; }
.sidebar_first .title_top { margin-bottom: 4px; }
.sidebar_first h4#title_type { float: left; }
.sidebar_first h1#title_location { margin-bottom: 12px; font-size: 1.5em; text-transform: uppercase; }
.sidebar_first #sidebar_image { border-radius: 4px; /*width: 280px; height: 190px;*/ overflow: hidden; margin-bottom: 12px; border: 1px solid #2c2f32; }
.sidebar_first #sidebar_image img { width: 100%; vertical-align: middle; }

/* header */
.sidebar_second { width: 100%; position: relative; border-top: 1px solid #2c2f32;}
.sidebar_second .header { border-bottom: 1px solid #1d1e1e; width: 99%; }
.sidebar_second .header .nav { float: left; }
.sidebar_second .header div.hr { margin: 0 -12px; /* expands past the container's padding */ }
.sidebar_second .button { background-image: none; background-color: #5b5c5d; color: #e4e4e4; font-weight: normal; font-size: 0.8em; width: 64px; box-shadow: none; text-shadow: none; border-radius: 3px; padding: 6px 0; }
.no-touch .sidebar_second .button:hover { background-color: #6a6b6b; color: #fff; }
.sidebar_second .button:active, .sidebar_second .button.selected { background-color: #cdcdcd; color: #2c2c2b; }
/* article */
/*.sidebar_second #data_readout .entries { position: absolute; top: 50px; height: 40px; overflow: auto; }*/
.sidebar_second .article { padding: 0px; }
.sidebar_second .section { clear: both; margin: 12px 12px 20px; }
.sidebar_second .section h3 {
  color: #919191; background: #333; margin-bottom: 12px;  padding: 4px 8px; font: 1.1em/1 'Dosis', Arial, sans-serif; letter-spacing: .2em;
}
.sidebar_second .entry { clear: both; margin: 0 8px 14px; }
.sidebar_second .entry h5 { margin-bottom: .2em; clear: both; font-size: 14px; }
.sidebar_second .entry p { line-height: 1.5em; clear: both; }
.sidebar_second .entry b { color: #E0E0E0; font-weight: 300; font-size: 21px; line-height: 1.2em; font-family: Helvetica, Arial, sans-serif; }
/* scrollPane styles */
.jspVerticalBar { left: 0; width: 8px; }
/* footer */
.sidebar_second .footer { border-top: 1px solid black; }
.sidebar_second .footer a { float: right; font-size: 0.8em; color: #747474; text-decoration: none; }
.sidebar_second .footer a.last { margin-left: 3%; margin-right: 12%; }
.sidebar_second .footer a.left { float: left; margin-left: 0; margin-right: 0px; color: #7aafe4; }
.no-touch .sidebar_second .footer a:hover { color: #e4e4e4; }

/* ----- end SIDEBAR ----- */




/* ----- MAP ----- */

.map { /*width: 913px; height: 511px;*/ width: 100%; position: relative; }
.map img#map_img { width: 100%; height: auto; vertical-align: middle; }
.map_overlay { position: absolute; }
.map_overlay#goldstone { left: 17.53%; top: 30.31%; }
.map_overlay#madrid { left: 48.97%; top: 27.56%; }
.map_overlay#canberra { left: 91.42%; top: 69.62%; }

.map_overlay_panel {
    position: absolute;
}
.map_overlay_panel, .map_overlay .arrow { opacity: .8; }
.map_overlay img.flag, .map_overlay_panel h1, .map_overlay_panel .date_time { float: left; }
.map_overlay h1 { margin-top: -2px; margin-bottom: 2px; color: #f3f2f2; font-weight: 300; }
.map_overlay p.date_time { font-size: .8em; line-height: 1.05em; color: #b8b8b8; margin: 4px 0 0 40px; }
.map_overlay .circle { border-radius: 50%; background: white; border: 2px solid white; position: absolute; }
.map_overlay .arrow { border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; left: -4px; }
.map_overlay .arrow_down { border-top: 7px solid #000; top: -11px; }
.map_overlay .arrow_up { border-bottom: 7px solid #000; top: 6px; }
.map_overlay .arrow_down_border { top: -10px; border-top-color: #666666; }
.map_overlay .arrow_up_border { top: 4px; border-bottom-color: #666666; }
.fancybox-skin { background: black; }
.fancybox-wrap { padding: 20px 0 0 0; }
.fancybox-inner { overflow: hidden !important; } /* Needed because it doesn't honor scrolling: 'no' on chrome. */
/* Active overlay styles */
.map_overlay.active .map_overlay_panel { border-radius: 0; border: 1px solid #A2A2A2; }
.map_overlay.active .circle { background: red; }

/* ----- end MAP ----- */





/* ----- STYLES FOR SMALL SCREENS ----- */

.main { width: 100%; }

/* Main banner */
.main .banner { width: 100%; padding: 6px 1.7% 6px 1.7%;   /* 12 / 714 (inherits width from .main) */ }
img.nasa_logo { width: 44px; margin: 5px 6px 0 2px; }
.jpl_caltech_dsn_logo { width: 250px; }
img.dsn_logo, img.jpl_caltech_logo { width: 100%; }
.main .timestamp1 { display: none; }
.main .timestamp2 { display: block; }

/* Dish menu header */
.main .section.dish_menu .location { width: 70%; float: left; position: relative; }
.main .figure.date_time { width: 50%; }
.main .article .figure.date_time { display: none; }
.main .figure.date_time .aside { position: absolute; bottom: 0; }
.main .location h1 { float: left; margin-right: 12px;  }
.main .data_warning { top: 4px; float: left; white-space: nowrap; }

/* Dish menu */
.main .section.dish_menu { padding: 20px 3.75% 12px 3.75%; /* 12/320 */ width: 100%; }

/* --- Dish graphics --- */
.main .dish_graphic { bottom: -6px; } /* Not sure why we need this offset... somewhow <a> is adding height within. -JM */

/* Signals */
.main .figure .dish_signals .signal { width: 30%; }
.main .figure .dish_signals .signal.data_out { width: 50%; }

/* Dish menu header (below the dishes) */
.main .header { padding: 10px 3.125%; /* 10/320 */ width: 100%; }
.main .header .location { display: none; }
.main .dish_number, .main .figure.large_dish, .main .figure.small_dish { width: 16%; /* 100 / 715 */ }

/* Sidebar */
.sidebar { width: 100%; }
/* Sidebar first */
.sidebar_first h1#title_location { width: 90%; }
.sidebar_first .sidebar_image { width: 100%; }
.sidebar_first .nav .button { width: 31.8%; /* 88 / 278 roughly */ min-width: 78px; margin-bottom: 8px; }
/* Sidebar second */
.sidebar_second { width: 100%; }
.sidebar_second .header { width: 100%; }
.sidebar_second .header .nav { width: 100%; }

/* Sidebar footer */
.sidebar_second .footer { height: 60px; }

/* Map */
.map img.flag, .map_overlay p.date_time { display: none; }
.map_overlay .map_overlay_panel { width: auto; padding: 5px 4px 2px; }
.map_overlay h1 { margin-right: 0; font-size: .8em; }

.map_overlay#goldstone .map_overlay_panel { right: -8px; top: 2px; }
.map_overlay#madrid .map_overlay_panel { right: -2px; top: -8px; }
.map_overlay#canberra .map_overlay_panel { right: -16px; top: 2px; }


.map_overlay .circle { width: 4px; height: 4px; left: -2px; top: -2px; }

/* Info buttons and areas */
.banner .info_button_1 {
  display: none;
}

#mobile_info_area_1 {
  height: auto;
  overflow-y: inherit;
}
#mobile_info_area_1 h2 {
  font-family: inherit;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 1em;
}
#mobile_info_area_2 {
  /* These values force the info box to full width within the container -JM */
  margin: 0 -4% 12px -4% ;
  width: 108%;
  padding-left: 5%;
  padding-right: 5%;
}


/* ----- end STYLES FOR SMALL SCREENS ----- */





/* ----- MEDIA QUERIES ----- */

@media only screen and (min-width: 480px) {
  .banner_buttons .dsn_home_link {
    visibility: visible;
  }

  /* --- Dish graphics --- */
  .main .dish_graphic { bottom: -10px; }
}

@media only screen and (min-width: 600px) {
  .main .timestamp1 { display: block; }
  .main .timestamp2 { display: none; }
  .banner_buttons {
    top: 30px;
  }
}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */

  body { overflow:hidden; }

  #page, .interface, .main, .sidebar { height: 100%; }
  .main { width: 70%; /* 714 / 1024 */ }
  .info_button { display: block; }



  /* Main banner */
  .main .banner { width: 100%; padding: 12px 1.7% 6px 1.7%;   /* 12 / 714 (inherits width from .main) */ }
  .jpl_caltech_dsn_logo { float: left; margin-top: 0; width: 312px;  /* 312 / 380 (from .branding) */ }
  img.nasa_logo { width: 56px; margin: -2px 12px 0 0; }
  img.dsn_logo { width: 312px; }
  .mobile_nav_bar { display: none; }
  .main .timestamp1 { display: none; }
  .main .timestamp2 { display: block; }
  .banner_buttons {
    top: 34px;
    right: 3%;
    position: absolute;
  }
  .banner_buttons .dsn_home_link {
    font-size: 12px;
    visibility:hidden;
  }

  /* Dish menu header */
  .small_screen_header { display: none; } /* Remove the top headers */
  .main .figure.date_time { height: 60%; width: 150px; }
  .main .article .figure.date_time { display: block; margin-left: 0; }
  .main .figure.date_time .aside { position: absolute; bottom: 0; }
  .main .figure.date_time .aside p { font-size: .8em; }
  .main .location h1 { float: none; margin-right: 0; }
  .main .data_warning { top: -30px; position: absolute; float: none; }

  /* Dish menu */
  .main .section.dish_menu { padding: 12px; /* 12/320 */ width: 100%; }
  .main .figure.small_dish { margin-right: -20px; }
  /* Signals */
  .main .figure .dish_signals .signal { width: 25%; }
  .main .figure .dish_signals .signal.data_out { width: 45%; }
  .main .figure .carrier { opacity: .4; }
  .main .figure.selected .carrier { opacity: .4; }
  .main .figure .data { opacity: .8; }
  .main .figure.selected .data { opacity: .8; }
  /* Dish menu "footer" */
  .main .header { padding: 10px; width: 100%; position: relative; }

  .main .header .location {
    float: left; display: block; width: 150px; position: relative;
    /* - we were asked to move this up. A bit of a workaround here to avoid editing the js-added markup. -JM */
    top: -90px;
  }
  .main .header .location .flag { margin-left: 2px; }

  /* --- Dish graphics --- */
  .main .dish_number.small_dish { margin-right: -20px; }
  .main .dish_number, .main .figure.large_dish, .main .figure.small_dish { width: 13.986013986%; /* 100 / 715 */ }



  /* Sidebar */
  .sidebar { width: 30%; display: inline-block; border-left: 1px solid #2c2f32; }
  .sidebar_first .sidebar_image{ width: 97%; }
  .sidebar_second { width: 100%; }
  .sidebar_second .header .nav { width: 100%; }
  /* Sidebar first */
  .sidebar_first .nav .button { width: 31.5%; /* brought down a little to prevent bounce to new line */ }
  /* Data readout area */
  .sidebar_second #data_readout { overflow: auto; width: 100%; background-image: linear-gradient(bottom, #161617 31%, #2A2B2B 100%);
  background-image: linear-gradient(to top, #161617 31%, #2A2B2B 100%);}
  /* sidebar footer */
  .sidebar_second .footer { position: fixed; width: 31.5%; /* 282 / 1024 roughly */ bottom: 0; border-top: 1px solid black; float: left; height: auto; background-color: #161718; border-left: 1px solid #2c2f32; margin-left: -1px; }



  /* Info buttons and panels */
  .banner .info_button_1 { display: block; position: relative; float: right; top: auto; right: auto; margin-left: 16px; }
  .info_button { top: 36px;}
  #mobile_info_area_1 {
    height: calc(100vh - 12px - 6px - 48px + 2px);
    overflow-y: auto;
  }
  #mobile_info_area_2 {
    /* These values force the info box to full width within the container -JM */
    margin: 0 -6% 12px -6% ; width: 112%; padding-left: 6%; padding-right: 6%;
  }

  /* Map */
  .map_overlay h1 { margin-right: 0; font-size: 1.2em; }
  .map_overlay#goldstone .map_overlay_panel { right: -8px; top: 2px; }
  .map_overlay#madrid .map_overlay_panel { right: -2px; top: -8px; }
  .map_overlay#canberra .map_overlay_panel { right: -16px; top: 2px; }

}

@media only screen and (min-width: 755px) {
  .banner_buttons .dsn_home_link {
    visibility: visible;
  }
}

@media all and (min-width: 700px) and ( max-width: 960px ) {
  .sidebar_first .nav .button { width: 99%; }
}
@media only screen and (min-width: 960px) {
  #mobile_info_area_2 {
    /* These values force the info box to full width within the container -JM */
    margin: 0 -4% 12px -4% ;
    width: 108%;
  }
  .main .timestamp1 { display: block; top: 12px; }
  .main .timestamp2 { display: none; }
  /* Map */
  .map_overlay .map_overlay_panel { padding: 8px; }
  .map_overlay#goldstone .map_overlay_panel { width: 160px; }
  .map_overlay#madrid .map_overlay_panel { width: 169px; }
  .map_overlay#canberra .map_overlay_panel { width: 160px; }
  .map_overlay .arrow { left: -4px; }
  .map_overlay h1 { font-size: 1.3em; }
  .map_overlay img.flag, .map_overlay_panel h1 { margin-right: 10px; }
  .map_overlay img.flag, .map_overlay h1, .map_overlay p.date_time { display: inline-block; }
  p.date_time { font-size: 1.1em; }
  .map_overlay#goldstone .map_overlay_panel { right: -16px; top: 2px; }
  .map_overlay#madrid .map_overlay_panel { right: -2px; top: -8px; }
  .map_overlay#canberra .map_overlay_panel { right: -16px; top: 2px; }
  .map_overlay .circle { width: 6px; height: 6px; left: -3px; top: -3px; }
}

@media only screen and (min-width: 1100px) {

  /* Large screen, non-retina */

  .main .figure .nav a { font-size: .85em; }
  .main .mobile_info_area { padding-left: 5.5em; padding-right: 30%; }
}

/* ----- end MEDIA QUERIES ----- */


/* ----- IE 8 (or below) ----- */

.ie8 .main .location h1 {
  font-size: 1em;
}