/* =========================================================================
    HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/
   ========================================================================= */

html {
	color: #56686d;
    line-height: 1.35;
}

::-moz-selection {
    background: #b3d4fc; 
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #dee1e2;
	margin: 0.9375rem 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #bbc2c4;
    color: #2c3638;
    padding: 0.2em 0;
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 1.25rem;
}


/* =========================================================================
    Tag defaults (mobile first)
   ========================================================================= */

/**
 * Typography
 * - Baseline height: 20px
 * - Module scale: 1.2 (minor third)
 */

body {
	font-family: Helvetica Neue, Helvetica;
}

.wrapper {
    width: 90%;
    margin: 0 5%;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: source_sans_proregular, Helvetica Neue;
}

h1 { 
	font-size: 2.16rem;
	line-height: 1;
	color: #3b484c;
}
h2 { 
	padding-top: 0.9375rem;
	font-size: 1.8rem;
	line-height: 1.1;
	color: #6f3185;
}
h3 { 
	font-size: 1.5rem;
	line-height: 1.15;
	color: #2c3638;
}
h4 { 
	font-size: 1.25rem;
	line-height: 1.2;
}

ul {
	margin: 0.25rem 0 0.9375rem 0;
}

p {
	margin: 0.625rem 0 0.9375rem 0;
}

small {
	font-size: 0.875rem;
	color: #8e9a9d;
}

a,
label,
input[type=radio],
input[type=checkbox] {
	cursor: pointer;
}

label {
	font-size: 1.125rem;
}

textarea,
input[type=text],
input[type=password],
.calendar__textbox,
.scroll-box {
	background: white;
	padding: 0.3rem;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #bbc2c4;
	-webkit-box-shadow: 1px 1px 5px 0px rgba(245,245,245,1);
	-moz-box-shadow: 1px 1px 5px 0px rgba(245,245,245,1);
	box-shadow: 1px 1px 5px 0px rgba(245,245,245,1);
}

textarea {
	padding: 0.25rem 0.5rem;
	width: 20rem;
	height: 5rem;
}

.textarea-large {
	height: 10rem;
}

textarea:focus,
input[type=text]:focus,
input[type=password]:focus,
.calendar__textbox:focus {
	-webkit-box-shadow: 1px 1px 5px 0px rgba(215,250,242,1);
	-moz-box-shadow: 1px 1px 5px 0px rgba(215,250,242,1);
	box-shadow: 1px 1px 5px 0px rgba(215,250,242,1);

}

a {
	color: #66b3b0;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
	border-bottom: 1px solid #66b3b0;
}

a:active {
	color: #9853b0;
}

th, td {
	font-size: 0.75rem;
	padding: 0.5rem;
}

td {
	border: 1px solid #dee1e2;
}

.tbl-noformat td {
	font-size: 1rem;
	padding: 0;
	border: none;
}

select {
	height: 2.5rem;
	padding: 0.5rem;
	background: white;
	-webkit-box-shadow: 1px 1px 5px 0px rgba(222,222,222,1);
	-moz-box-shadow: 1px 1px 5px 0px rgba(222,222,222,1);
	box-shadow: 1px 1px 5px 0px rgba(222,222,222,1);
	border: 1px solid #bbc2c4;
	border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
}

section {
	padding-bottom: 1.25rem;
}


/* =========================================================================
    Helper classes
   ========================================================================= */

/* =========
	Buttons
   ========= */

.button,
.button--action,
.button--medium,
.button--small,
.button-symbol {
	display: inline-block;
	padding: 0.5rem 2rem;
	font-family: source_sans_prosemibold;
	font-size: 1.1rem;
	background: #84a6be;
	color: white;
	border: none;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(222,222,222,1);
	-moz-box-shadow: 2px 2px 5px 0px rgba(222,222,222,1);
	box-shadow: 2px 2px 5px 0px rgba(222,222,222,1);
}

.button--action {
	background: #de6400;
}

.button--large {
    font-size: 1.325rem;
}

.button--medium {
	font-size: 1rem;
	padding: 0.5rem 1rem;
}

.button--small {
	font-size: 0.875rem;
	padding: 0.1rem 0.875rem;
}

.button:hover,
.button--action:hover,
.button--medium:hover,
.button--small:hover {
	color: white;
	background: #638EAD;
	border: none;
}

.button--action:hover {
	background: #cc5c00;
}

.button--disabled, .button--disabled:hover {
	background: #bbc2c4;
	color: #f8f9f9;
	cursor: default;
}

.button-symbol {
    padding: 0 0.5rem;
    font-family: Courier New;
	font-size: 1rem;
    font-weight: bold;
    background: #6fbd73;
    border: 2px solid #f8fafa;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
    box-shadow: none;
}

.button-symbol--del {
    background: #d86869;
}

.button-symbol:hover {
    background: #66ad6a;
}

.button-symbol--del:hover {
    background: #c25d5e;
}


/* ==============
	Dialog boxes 
   ============== */

.dialog {
	position: fixed; left: 0; top: 0; 
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url(/images/overlay.png);
	width: 100%; height: 100%;
	z-index: 10;
	display: none; 
}


.dialog__box {
	position: relative;
	padding: 3.5rem 1rem 1rem 1rem;
	width: 20rem; 
	max-width: 100%;
	max-height: 100%;
	background: white;
	border: 3px solid #8e9a9d;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
	border-radius: 20px;
}

.dialog__box--large {
	width: 40rem; 
	height: 20rem;
}

.dialog__box--no-title {
	padding-top: 1rem;
	width: 10rem;
}

.dialog__title, 
.dialog__title--warning,
.dialog__title--error {
	position: absolute; 
	left: 0px; 
	right: 0px; 
	top: 0px; 
	padding: 0.25rem 0.625rem;
	color: white;
	background: #56686d;
    border-bottom: 1px solid #56686d;
    -webkit-border-top-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
	border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topright: 15px;
	border-top-right-radius: 15px;
}

.dialog__title--warning {
	background: #c29800;
}

.dialog__title--error {
	background: #a60000;
}

.dialog__instructions {
	font-size: 1.125rem;
}

.dialog__scroll-box,
.dialog__scroll-box-med {
	padding: 0.5rem;
	height: 11rem;
	border: 1px solid #bbc2c4;
	overflow: auto;
}

.dialog__scroll-box--med {
	width: 19rem;
}

.dialog .button { 
	float: left; 
	margin-top: 0.75rem;
}

/* To fix a specificity problem */
.dialog .float-right {
	float: right;
}

.dialog .button--action { 
	float: right; 
	margin-top: 0.75rem;
}


/* ========
	Slides
   ======== */

.slick-arrow:before {
	font-weight: bold;
	font-size: 1.5rem;
	padding: 0.2rem 0.5rem 0.5rem 0.5rem;
	background: #6f3185;
	color: #f8f9f9;
}

.slick-prev:before {
    -webkit-border-top-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
	border-top-left-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomleft: 15px;
	border-bottom-left-radius: 15px;
}

.slick-next:before {
	margin-left: -5px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topright: 15px;
	border-top-right-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-bottomright: 15px;
	border-bottom-right-radius: 15px;
}

.slide {
	float: left;
	margin: 0.5rem 0.8rem 0 0;
	width: 14.5rem;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
	border-radius: 10px;
}

.slide, .slide:hover {
	border: 5px solid white;
}

.slide--highlighted {
	background: #b4ede1;
	border-color: #b4ede1;
}

.slide__img {
	width: 100%;
    -webkit-border-top-left-radius: 7px;
    -moz-border-radius-topleft: 7px;
	border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    -moz-border-radius-topright: 7px;
	border-top-right-radius: 7px;
}

.slide__caption {
	font-size: 1rem;
	padding: 0.5rem;
	background: #84a6be;
	color: white;
    -webkit-border-bottom-left-radius: 7px;
    -moz-border-radius-bottomleft: 7px;
	border-bottom-left-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    -moz-border-radius-bottomright: 7px;
	border-bottom-right-radius: 7px;
}


/* ==========
	Calendar
   ========== */

.calendar__wrapper {
	position: relative;
}

.calendar__textbox { 
	float: left; 
	margin-right: 0.625rem;
	width: 10rem;
	font-size: 0.9375rem;
	color: #56686d;
	text-align: center; 
}

.calendar__icon { 
	float: left; 
	margin: -0.25em 0 -0.1875em 0;
	width: 2rem; 
	height: 2rem; 
}

.calendar__textbox:hover:not(.disabled), 
.calendar__textbox--selected,
.date-selected { 
	border: 1px solid #9dc8d4; 
	cursor: pointer; 
}

.calendar { 
	position: absolute; 
	top: 2rem;
	left: 0px;
	width: 12.5rem;
	border: 1px solid #9dc8d4; 
	display: none; 
	z-index: 5; 
}

/* Customize the YUI calendar a little bit */
.yui-skin-sam .yui-calcontainer .title { 
	font-weight: normal; color: #56686d;
	font-size: 0.9375rem;
	background: none; 
}
.yui-skin-sam .yui-calcontainer.withtitle { border: 1px solid #9dc8d4; }


/* =======
	Icons
   ======= */

.large-arrow {
	margin: 0.625rem;
	width: 7rem;
}

.icon-arrow {
	width: 1.25rem; 
	height: 1.25rem; 
	cursor: pointer;
}

.icon-info {
	width: 1.5rem; 
	height: 1.5rem; 
	cursor: pointer;
}

.icon {
	margin: 0.5rem 0.75rem 1rem 0;
	width: 3rem;
	height: 3rem;
}


/* =====================
	Images in body text
   ===================== */

.body-img--center {
	display: flex;
	justify-content: center;
	margin: 1.25rem 0;
}

.body-img--multi-center {
	display: flex;
	justify-content: center;
	margin: 1.25rem 0;
}

.body-img__img {
	max-width: 100%;
}

.body-img--float-left {
	float: left;
	margin: 0.5rem 1rem 1rem 0;
}

.body-img--float-right {
	float: right;
	margin: 0.5rem 0 1rem 1rem;
}

.body-img__caption {
	display: block;
	margin-top: 0.125rem;
	text-align: center;
}

.body-img__caption--button {
	display: block;
	margin: 0.25rem auto;
	text-align: center;
}


/* ==================
	Thumbnail images
   ================== */

.thumbnails {
	display: flex;
	flex-wrap: wrap;
	margin-top: 0.625rem;
}

.thumbnail__link:hover {
	border: none;
}

.thumbnail {
	margin: 0 1rem 1rem 0;
	height: 12.5rem;
}


/* ==============
	Scroll boxes
   ============== */

.scroll-box {
	width: 18.25rem;
	height: 15rem;
	overflow: auto;
}

.scroll-box--large {
	width: 21.5rem;
}

.scroll-list {
    margin: 0;
    padding: 0;
	font-size: 0.9375rem;
    list-style: none;
}

.scroll-list > * {
    margin-bottom: 0.3125rem;
    padding: 0.25rem 0.5rem;
    background: #d9d7ec;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.scroll-list > *:hover {
	background: #c7c3e6;
}

.scroll-list__parent {
    background: #daf2da;
}

.scroll-list__parent:hover {
	background: #b8e6b8;
}

.scroll-list__child {
    margin-left: 1.25rem;
}


/* ========
    Errors
   ======== */

input.textbox-error,
textarea.textbox-error,
.error-message,
.error-section {
	background: #ffe6e6;
	border: 2px solid #d70000;
}

.error-message,
.error-section {
	padding: 1rem;
}

.error-message,
.error-text,
.form-error {
	font-weight: bold;
	color: #d70000;
	display: none;
}

.form-error {
	margin-top: -1rem;
}


/* ======
    Misc
   ====== */

.skip-to-content {
	position: absolute;
	top: -1000px;
	left: -1000px;
	height: 1px;
	width: 1px;
	text-align: left;
	overflow: hidden;
}

.hide {
	display: none;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.alert {
	color: #d70000;
}

.red-text {
	color: #d70000;
	font-weight: bold;
}

.grey-text {
	color: #8e9a9d;
}

.green-text {
	color: #3d9950;
}

.linespace {
	line-height: 0.7;
}

.align-left {
	text-align: left;
}

.align-center {
	text-align: center;
}

.align-right {
	text-align: right;
}

.margin-right-1rem {
	margin-right: 1rem;
}

.margin-right-3rem {
	margin-right: 3rem;
}

.margin-right-5rem {
	margin-right: 5rem;
}

.margin-bottom-1rem {
	margin-bottom: 1rem;
}

.inline-block {
	display: inline-block;
}

.no-border {
	border: none;
}

.textbox-xsmall {
	width: 2rem;
}

.textbox-small {
	width: 4.5rem;
}

.textbox-med-sm {
	width: 6rem;
}

.textbox-medium {
	width: 8rem;
}

.textbox-med-lg {
	width: 11rem;
}

.textbox-large {
	width: 15rem;
}

.spacer-4rem {
	height: 1px;
	width: 4.5rem;
}

.spacer-10rem {
	height: 1px;
	width: 10rem;
}

.cursor-pointer {
	cursor: pointer;
}

.selected-text {
	color: #6f3185;
}

.border-2px {
	border-width: 2px;
	border-style: solid;
}

.warning-message,
.success-message {
	padding: 0.5rem 1rem;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
	border-radius: 5px;
}

.warning-message {
	color: #c29800;
	background: #ffeeaa;
}

.success-message {
	color: #46b05c;
	background: #daf2da;
}

.header-img__wrapper {
	position: relative;
}

.header-img {
	width: 100%;
}

.header-img__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.625rem 0.5rem;
	background: rgba(44,54,56,0.75);
}

.header-img__text {
	color: #f8f9f9;
}

.l-band { 
	color: #de6400; 
}

.p-band { 
	color: #46b05c; 
}

.ka-band { 
	color: #9853b0; 
}

.color-row {
	background: #f3f9fa;
}

.color-row--white {
	background: white;
}

/* 
   Bug fix: dialog close buttons were showing black text from an "injected 
   stylesheet, so this is to enforce the white text for buttons. 
*/
.close:focus {
	color: white;
}


/* ========================================
    Header / Footer (including navigation)
   ======================================== */

header,
footer {
	min-width: 320px;
	background: #164450;
}

header a:hover, 
footer a:hover {
	border: none;
}


.flex-nav ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.flex-nav li {
	padding: 0.625rem 0.3125rem 0.625rem 0;
}

.nav__title {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}

nav a,
nav a:hover {
	color: white;
	text-decoration: none;
}

.nav__nasa-logo img {
	width: 3.75em;
	height: 3.19em;
}


.nav__jpl {
	display: none;
	line-height: 1.3;
}

.caltech,
.caltech:hover {
	color: #efefef;
}

.nav__jpl--small,
.nav__item {
	font-size: 0.875rem; 
}

.nav__divider {
	width: 2px; height: 45px;
	margin: 0 0.5rem 0 0.2rem;
	background-color: white;
}

header h1 a {
	font-family: source_sans_proregular;
}

.flex-nav .nav__item {
	text-align: center;
	padding-left: 1rem;
}

.nav__item a {
	color: #84a6be;
}

.nav__item a:hover {
    color: #8cd0ce;	
}

.nav__item img {
	width: 2em; 
	height: 1.5em;
}

footer a {
	font-size: 0.875rem;
	color: #bbc2c4;
	text-decoration: none;
}

footer a:hover {
	color: white;
}

footer .wrapper {
    color: white;
    padding: 1.25rem 0;
	text-align: center;
}


/* ======
    Tabs
   ====== */

.tabs {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tab {
	padding: 0.625rem 0.5rem;
	color: #8e9a9d;
	background: #dee1e2;
}

.tab--selected {
	color: #6f3185;
	background: #f3f9fa;
	border-top: 2px solid #6f3185;
}

.tab:not(.tab--selected):not(.tab--disabled) {
	cursor: pointer;
}

.tab:hover:not(.tab--selected):not(.tab--disabled) {
	color: #84a6be;
	background: #d7faf2;
}

.tab-content {
	display: none;
	min-height: 15rem;
	padding: 0 1.25rem 1.25rem 1.25rem;
	background: #f3f9fa;
}


/* ======
    Main
   ====== */

.main {
	padding: 1.875rem 0;
	min-width: 320px;
}

.breadcrumbs {
	padding-bottom: 1.875rem;
}

.column-2 {
	float: left;
	padding-right: 3rem;
	min-width: 14rem;
}

.column-2--last {
	padding-right: 1rem;
}

.flex-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

/* Children of .flex-form */
.flex-form > * {
	flex: none;
	margin: 0 0.5rem 0.5rem 0;
}

/* 2 columns */
.flex-2col {
	display: flex;
	flex-wrap: wrap;
}

/* Children of .flex-tiles */
.flex-2col > * {
	flex-basis: 25rem;
	flex-grow: 1;
	width: 40%;
}

.disabled {
	color: #8e9a9d;
}


/* =========================================================================
   Media Query: mobile
   ========================================================================= */

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

	.nav__jpl a {
		font-size: 1rem;
	}

	.nav__jpl b {
		font-size: 1.1rem;
	}

	.nav__my-account {
		display: block;
	}


/* ==========
    IE Fixes
   ========== */

    nav ul li {
        display: inline;
    }

    .oldie nav a {
        margin: 0 0.7%;
    }
}


/* =========================================================================
   Media Query: tablet
   ========================================================================= */

@media only screen and (min-width: 768px) {
	
	html {
		line-height: 1.4;
	}

	body {
		font-size: 1.125rem;
	}

	.nav__jpl {
		display: block;
	}

	.nav__jpl--small {
		display: none;
	}

	.nav__divider {
		height: 50px; 
	}

	.nav__title h1 {
		line-height: 0.2;
	}

    .title {
        float: left;
    }

	footer a {
		font-size: 1rem;
	}

    .main aside {
        float: right;
		margin: 0 0 1rem 2rem;
        width: 28%;
    }

	h1 { 
		font-size: 2.376rem;
	}
	h2 { 
		font-size: 1.98rem;
	}
	h3 { 
		font-size: 1.65rem;
	}
	h4 { 
		font-size: 1.375rem;
	}

	th {
		color: #506165;
		font-size: 1rem;
	}
	td {
		font-size: 0.9375rem;
	}
	.tbl-noformat td {
		font-size: 1.125rem;
	}


	small {
		font-size: 0.875rem;
	}

	textarea {
	    resize: both;
		width: 40rem;
	}

	.tab {
		padding: 0.625rem 1rem;
	}

	.textbox-large {
		width: 17rem;
	}

/* ==============
    CSS3 Effects
   ============== */

    header,
    .main aside {
        -webkit-box-shadow: 0 5px 10px #8e9a9d;
           -moz-box-shadow: 0 5px 10px #8e9a9d;
                box-shadow: 0 5px 10px #8e9a9d;
    }
}


/* =========================================================================
   Media Query: desktop
   ========================================================================= */

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

    .wrapper {
        width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }

	.wrapper--full-screen {
		width: 90%;
	}
}


/* =========================================================================
   Helper classes
   ========================================================================= */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden:not(:focus):not(:active) {
  position: absolute;

  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.clear {
	clear: both;
}

.show {
	display: block;
}

/* =========================================================================
   Print styles
   ========================================================================= */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #2c3638 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #56686d;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}