/* Classes for hiding and showing elements for mobile */

.hide_on_small { display: none; }
.show_on_small { display: block; }

/* Disable HTML font-size changes for orientation for iPhone */
html { -webkit-text-size-adjust: none; }
body { background: none; background-color: #3E6083; }
p, .right_column_text_box_body, .right_column_text_box_body p, .right_column_text_box.raw > p { font-size: 1em; }
h1 { line-height: 1.3em; }


/* Reset elements for mobile */
#home_center_column, #home_right_column, #wrapper_header_mobile, #wrapper_header_mobile img, #wrapper_middle_2, #middle_2_border, #middle_3_border, #nav_tier_3, #nav_tier_3 ul#tier_3, #nav_tier_3 ul#tier_3, #nav_tier_3 ul#tier_3 li, #home_center_top_area_mobile, #ms_content, .ms_entry, img.ms_image, #home_right_column_area, #home_center_column h3.list_title, #home_right_column h3.list_title, #home_center_column h3.list_title a, #home_right_column h3.list_title a, #home_center_column p.list_description, #home_right_column p.list_description, #home_center_bottom_area, #home_right_column_area, #home_center_bottom_area .left_column, #home_center_bottom_area .right_column, #home_center_bottom_section_2 ul.item_list li .list_content .list_text, #home_right_column_area ul.item_list li.blog_feed .list_content, #home_right_section_2 ul.item_list li p.list_description, #home_right_column_area ul.item_list li .list_content, #home_right_section_2, #home_right_section_2 ul.item_list li img, #wrapper_bottom, #footer, #footer_center, .home_section_header, #footer #footer_right, #home_right_section_2 ul.item_list li.twitter_feed .list_content, #home_center_bottom_section_1, #home_center_bottom_section_2, #home_center_bottom_area ul.item_list div.list_text, #page_content, .full_width_area { 
  width: 100%; height: auto; max-height: none; margin: 0; padding: 0; 
}

#wrapper_middle_2, #middle_2_border, #nav_tier_3, #nav_tier_3 ul#tier_3, #wrapper_header_mobile, #home_center_top_area_mobile, div.pause_image, div.play_image {
  overflow: hidden;
}
.ms_text, ul#ms_controls, .home_section_content, .home_section_header, #home_right_column_area .home_section_content, #footer {
  padding: 3%; /* padding for all main elements */
}
#home_center_top_area_mobile, #ms_content, .ms_entry, img.ms_image, ul#ms_controls {
  background-color: #262626; /* top story background color */
}
.ms_title, .ms_description {
  color: #e6e6e6; /* top story text color */
}
#home_center_column h3.list_title, #home_center_column h3.list_title a, #home_right_column h3.list_title, #home_right_column h3.list_title a { 
  font-size: 1.1em !important; white-space: normal !important;  max-height: none !important; height: auto !important; margin-bottom: 4px !important; text-decoration: none !important;
}
#home_center_column p.list_description, #home_right_column p.list_description {
  font-size: 1em !important; line-height: 1.3em !important; margin-bottom: 4px !important;
}
.ms_title, ul#ms_controls li a, #footer #jpl_title {
  font-weight: bold;
}
ul#ms_controls li.pause_btn, ul#ms_controls li.play_btn, #home_center_bottom_area, #footer #footer_center {
  float: left;
}





/* ----- MAIN NAVIGATION ----- */

.menu_button { display: block; width: 100%; height: 26px; color: #1b3c5a; font-size: 1em; text-align: center; padding: 8px 0 0 0; background-color: #4b7395; text-decoration: none; font-weight: bold; border-top: 1px solid #415268;border-bottom: 1px solid #415268; }

#nav_tier_3 ul#tier_3 li { font-size: 1.1em; margin-bottom: 1px; }
#nav_tier_3 ul#tier_3 li a.left_nav_btn, #nav_tier_3 ul#tier_3 li ul.tier_3_dropdown li a { padding: 16px 4px 14px; }

/* ----- end MAIN NAVIGATION ----- */




/* ----- INNER PAGE - SPECIFIC ----- */

#main_area { width: 89%; }

#left_column, #left_column img#main_image, .full_width_area img#main_image, #body_content, #main_area blockquote.pullquote, #right_column, .right_column_text_box, .right_column_image_div, .full_width_area ul.item_list div.list_content.large_thumb div.list_text, .full_width_area ul.item_list div.list_content.large_thumb .list_image, #middle_3_border.wallpaper #image_thumb_menu img, #page_header_banner img#page_header_graphic { 
  width: 100%; 
}
#body_content img, .raw .inline_image, .full_width_area ul.item_list div.list_content.large_thumb img { 
  max-width: 100%;
  height: auto; 
}
#left_column img#main_image, .raw .inline_image { 
  height: auto; 
}
#middle_3_border, #middle_2_border, #footer { 
  border: none; 
}
#left_column { padding-right: 0; }
#left_column img#main_image, #body_content img { margin-bottom: 8px; }

/* Page subnav */
ul#page_subnav { height: auto; margin-bottom: 12px; display: inline-block; }
ul#page_subnav li { height: 14px; margin-bottom: 6px; }

/* Fixes for Raytheon tags */
.raw .inline_image { padding: 0 0 14px 12px; float: right !important; width: 50% !important; }
.raw .inline_image .inline_caption { width: 100%; }
#body_content .raw table td { /*padding-left: 0; padding-right: 0;*/ }
#body_content .raw table td .inline_image { width: 100% !important; }
.full_width_area .raw table td img { display: none; } /* This is to hide images in raw tables (from Raytheon) to prevent content from running off the page (i.e. Climate Day) */
/* end Fixes for Raytheon tags */

/* List content */
ul.item_list .list_text, #left_column ul.item_list li .list_text { display: inline-block; margin-left: 0; width: auto; }
ul.item_list .list_content .list_image { display: inline-block; margin-bottom: 12px; margin-right: 12px; width: 30%; height: auto; float: left; }
ul.item_list .list_content .list_image img { width: 100%; height: auto; }
ul.item_list .list_content .list_text, #left_column ul.item_list li .list_text  { width: 66%; margin-left: 0; }
#main_area ul.item_list.education_tips div.list_text { width: 100%; }
#main_area ul.item_list.education_tips .list_image { width: 100%; margin-right: 0; }

/* Sidebar */
#right_column { margin-top: 20px; }
.right_column_text_box.raw { margin-top: 20px; } /* This adds some vertical space above the sidebar content when it gets shifted below the left column with js */
div.sidebar_vertical_spacer { height: auto !important; /* The side bar gets moved into main column for mobile, so we don't want the vertical space */ }

/* Earth Wallpaper */
#page_header_banner img#page_header_graphic { width: 160%; height: auto; }
#middle_3_border.wallpaper #image_content_box { padding: 3%; width: 94%; }
#middle_3_border.wallpaper #image_content_box img#main_image { width: 99%; border: 2px solid #062C40; }
#middle_3_border.wallpaper #image_thumb_menu ul li, #middle_3_border.wallpaper #image_thumb_menu ul li:nth-child(5n+5) {
  width: 42%; margin: 0 8% 8% 0; height: 135px;
}
#middle_3_border.wallpaper #image_content_box h1 { font-size: 1.2em; }

/* Key Indicators */
#key_indicator_modules { width: 100%; }
#key_indicator_modules .ki_module { height: auto; margin-bottom: 12px; }
img.static_indicator { width: 100%; }

/* Forms */
.public_form { width: 94%; }

/* Share */
.earth_wallpaper_share { float: left; margin-left: 18px; }

/* Embedded videos */
.raw embed, .raw video { width: 100%; height: 200px; }
/* For Climate Reel */
.raw .jwPlayerPadding #container, .raw .jwPlayerPadding #container_displayarea, .raw .jwPlayerPadding #container_instreamarea, .raw .jwPlayerPadding #container_video { 
  width: 100% !important; height: 200px !important; 
}

/* Lightbox */
#lightbox-container-image-box { width: 100% !important; height: auto !important; }
#lightbox-container-image-data-box { width: 92% !important; }
#lightbox-nav-btnNext, #lightbox-nav-btnNext { height: auto !important; }
#lightbox-image { width: 100% !important; height: auto !important; }
#lightbox-container-image-data { width: 100% !important; }

/* For portait mode only */
@media screen and (max-width: 330px) {
  ul#page_subnav .vert_line { display: none; }
  ul#page_subnav li { width: 100%; } 
}

/* For landscape mode only */
@media screen and (min-width: 330px) {
  #middle_3_border.wallpaper #image_thumb_menu ul li, #middle_3_border.wallpaper #image_thumb_menu ul li:nth-child(5n+5) {
    width: 29%; height: 140px; margin-right: 4%;
  }
  .raw embed, .raw video { height: 300px; }
  .raw .jwPlayerPadding #container, .raw .jwPlayerPadding #container_displayarea, .raw .jwPlayerPadding #container_instreamarea, .raw .jwPlayerPadding #container_video { 
    height: 250px !important; 
  }
}

/* ----- INNER PAGE - SPECIFIC ----- */
a[name="comments"]{display: none !important;} /*hide comments modules on mobile*/





/* ----- HOME PAGE - SPECIFIC ----- */

/* ----- Home Top Story----- */
.ms_text { padding-bottom: 2px; }
.ms_title { font-size: 1em; margin-bottom: .4em; }
.ms_description { font-size: .8em; }
/* Top story controls */
ul#ms_controls { max-width: 94%; margin-bottom: 4px; }
ul#ms_controls li.play_btn { display: none; }
ul#ms_controls li.num_btn { float: right; margin-left: .25em; }
ul#ms_controls li a { display: block; text-align: center; color: #b1b1b1; text-decoration: none; background-color: #555; padding: .3em .5em .5em .5em; font-size: 1.5em;
  -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; width: 15px; height: 21px;
}
ul#ms_controls li.play_btn a { padding: .3em .6em .5em .6em; }
ul#ms_controls li.pause_btn a { padding: .3em .7em .5em .5em; }
ul#ms_controls li.active a { background-color: #b5b5b5; color: #555; }
div.pause_image { background: transparent url("/assets/images/mobile/mobile_sprite.png") 0 0; width: 20px; height: 22px; }
div.play_image { background: transparent url("/assets/images/mobile/mobile_sprite.png") -20px 0; width: 20px; height: 22px; }
#ms_content a { text-decoration: none;}

/* ----- end Home Top Story ----- */

/* main content areas (other than top story) - home page */
#home_center_bottom_area, #home_right_column_area { border: none; }
#home_right_column { float: none;  background-color: #ebeff3;  }

/* All sections */
.home_section_header, .home_section_header a { font-size: 1.1em; } 
.home_section_header { width: 94%; }
#home_center_bottom_area, #home_right_column_area { margin-bottom: 12px; }


/* Center column - entire bottom area */
#home_center_bottom_area ul.item_list li h3 { white-space: normal;  max-height: none; }
#home_center_bottom_area #home_center_bottom_section_1 ul.item_list div.list_text { width: 68%; margin-left: .7em; }
#home_center_bottom_area .left_column { float: none; }
#home_center_bottom_area .right_column { float: none; }
#home_center_bottom_area #home_center_bottom_section_1 ul.item_list img { width: 28%; height: auto; }




/* Right Column - right section 2 */
#home_right_column_area ul.item_list li.blog_feed { margin-bottom: 12px; float: left; }
#home_right_column_area ul.item_list li.blog_feed img { margin-bottom: 12px; }
#home_right_column_area ul.item_list li.blog_feed .list_text { margin-bottom: 12px; }
#home_right_section_2 ul.item_list li.twitter_feed .list_content h3 a { position: relative; float: left; width: auto; }
#home_right_section_2 ul.item_list li.twitter_feed p.list_description { height: auto; }
#home_right_section_2 ul.item_list li.twitter_feed .list_text { margin-bottom: 12px; }
#home_right_section_2 ul.item_list li.twitter_feed .twitter_description { position: static; top: 0; left: 0; float: left; }

/* ----- end HOME PAGE - SPECIFIC ----- */






/* ----- Footer ----- */

#footer { font-size: .8em; width: 100%; padding-left: 0; padding-right: 0;} 
#footer #footer_center { position: relative; top: 0; text-align: center; margin-bottom: 8px; left: 0; }
#footer #footer_right { position: relative; float: none; text-align: center; top: 0; }
#footer #jpl_title { font-size: 1em; }
#footer ul.bottom_links { display: none; }

/* ----- End Footer ----- */