/******************************************************************************
* Components 
*
* This ITCSS layer is for discrete, self-contained pieces of UI (buttons, etc).
*
* ITCSS layers from most generic to most specific:
*  normalize -> base -> objects -> components -> utilities
******************************************************************************/

/* =========================================================================
   Mobile (default): 20px baseline, 16px base font
   ========================================================================= */
.header__wrapper,
.footer__wrapper {
	background: var(--sky-500);
	color: var(--white);
	height: 3.75rem;
	width: 100%;
}

.footer__wrapper {
	height: auto;
}

.header,
.footer {
    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;
	height: 100%;
	margin: 0 auto;
	padding: 0 0 0 0.625rem;
}

.footer {
	display: block;
	text-align: center;
	padding: 1.25rem 0;
}

.footer__links {
	padding: 0 1.25rem;
}

.footer__people {
	color: var(--grey-400);
	line-height: 1.3;
}

.header__nasa {
	border: 1px solid var(--sky-500);
	height: 2.75rem;
}

.header__jpl {
	border-right: 2px solid var(--white);
	display: none;
	font-family: Helvetica;
	padding: 0 0.625rem 0 0.3125rem;
}

.header__title {
	flex-grow: 1;
	padding-left: 0.3125rem;
}

.header__link,
.footer__link {
	border: 1px solid var(--sky-500);
	color: var(--white);
	text-decoration: none;
}

.header__link--dropdown {
	color: var(--grey-700);
}

.nav__mobile {
	cursor: pointer;
	padding: 0.625rem;
	positon: relative;
	text-align: center;
}

.nav__mobile--close {
	background: var(--sky-100);
    border-top-left-radius: 12px;
    -webkit-border-top-left-radius: 12px;
    -moz-border-radius-topleft: 12px;
    border-top-right-radius: 12px;
    -webkit-border-top-right-radius: 12px;
    -moz-border-radius-topright: 12px;
	color: var(--sky-600);
}

.nav__mobile-menu,
.nav__mobile-close {
	text-decoration: none;
}

.nav__mobile-icon {
	height: 1.5rem;
	width: 2.25rem;
}

.nav__mobile-text {
	color: var(--white);
	display: block;

    /* Don't let user select text in button */
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
}

.nav__mobile-text--close {
	color: var(--grey-700);
}

.nav__mobile-dropdown {
	background: var(--sky-100);
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-top-right-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
	color: var(--grey-600);
	line-height: 1.5625;
	margin-top: 0.625rem;
	padding-bottom: 1.25rem;
	position: absolute;
	right: 0;
	text-align: left;
	width: 100%;
}

.nav__mobile-dropdown b {
	display: block;
	font-size: 1.2rem;  /* 19.2px */
	padding-top: 0.9375rem;
}

.nav__mobile-dropdown a {
	color: var(--grey-700);
	text-decoration: none;
}

.nav__mobile-dropdown a:hover {
	text-decoration: underline;
}

.nav__mobile-dropdown-ul {
	list-style: none;
	margin: 0;
	padding: 0 1.25rem;
}

.nav {
	padding: 0.75rem 2.5rem 0 0;
	display: none;
}

.nav__item {
	display: inline-block;
	padding: 0.625rem 0.6rem;
	position: relative;
}

.nav__item:hover {
	text-decoration: underline;
}

.nav__item-arrow {
	height: 1rem;
	margin-left: -0.125rem;
	width: 1rem;
}

.nav__item--selected {
	color: var(--sky-200);
}

.nav__item--dropdown-selected {
	background: var(--sky-100);
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
	cursor: pointer;
}

.nav__dropdown {
	background: var(--sky-100);
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-top-left-radius: 0;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
	color: var(--grey-700);
	left: 0;
	list-style: none;
	padding: 1rem 0.625rem 0.625rem 0.625rem;
	position: absolute;
	top: 0.75rem;
	z-index: 5;
}

.nav__dropdown-item a { 
	border: 1px solid var(--sky-100);
	color: var(--grey-700);
	text-decoration: none;
}

.nav__dropdown-item a:hover { 
	text-decoration: underline;
}

.nav__dropdown-item {
	padding: 0.3125rem 0.1875rem;
	white-space: nowrap;
}

.hero-img {
	display: block;
	margin: 0 auto;
	width: 100%;
}

.dialog {
    align-items: center;
	background: rgba(50, 62, 68, 0.6);
	display: flex;
	height: 100%;
    justify-content: center;
	left: 0;
    position: fixed; 
	top: 0;
    width: 100%; 
    z-index: 10;
    display: none;
}

.dialog__box {
    background: white;
    border: 3px solid var(--grey-70);
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    max-width: 100%;
    max-height: 100%;
	min-width: 18.75rem;
    padding: 3.5rem 1rem 1rem 1rem;
    position: relative;
    width: 50%;
}

.dialog__box--small {
	max-width: 12.5rem;
}

.dialog__title {
    background: var(--fern-500);
    border-bottom: 1px solid var(--fern-500);
    -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;
    color: white;
    margin: 0;
    left: 0px;
    padding: 0.5rem 0.625rem;
    position: absolute;
    right: 0px;
    top: 0px;
}

.dialog__title--error {
    background: var(--cheese-500);
	border-bottom: 1px solid var(--cheese-700);
}

.dialog__scroll-box {
	background: var(--grey-200);
    border: 1px solid var(--grey-50);
	display: block;
    height: 11rem;
    overflow: auto;
    padding: 0.5rem;
}

.this-page {
	background: var(--cheese-300);
    border-top-right-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topright: 25px;
    border-bottom-right-radius: 100px;
    -webkit-border-bottom-right-radius: 100px;
    -moz-border-radius-bottomright: 100px;
    border-bottom-left-radius: 25px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-radius-bottomleft: 25px;
	color: var(--cheese-700);
	margin: 1.875rem 1.875rem 1.875rem 0;
	padding: 0.625rem;
}

.this-page a {
	color: var(--cheese-700);
	text-decoration: none;
}

.this-page a:hover {
	text-decoration: underline;
}

.this-page__chapters {
	padding-left: 0.625rem;
}

.info-box {
	background: var(--fern-500);
    border-top-right-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topright: 25px;
    border-bottom-right-radius: 100px;
    -webkit-border-bottom-right-radius: 100px;
    -moz-border-radius-bottomright: 100px;
    border-bottom-left-radius: 25px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-radius-bottomleft: 25px;
	color: var(--fern-100);
	margin: 0 1.25rem 1.25rem 1.25rem;
	overflow: hidden;
	padding: 1.25rem;
}

.info-box__title {
	color: var(--fern-100);
	margin-bottom: 1.25rem;
}

.card {
	background: var(--sky-100);
    border-bottom-left-radius: 25px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-radius-bottomleft: 25px;
    border-bottom-right-radius: 100px;
    -webkit-border-bottom-right-radius: 100px;
    -moz-border-radius-bottomright: 100px;
	color: var(--grey-700);
	cursor: pointer;
	display: block;
	height: 12.5rem;
	text-decoration: none;
}

.card__img {
	float: left;
	height: 12.5rem;
	margin-right: 1.25rem;
	object-fit: cover;
	width: 20%;
}

.card__title {
	color: var(--sky-500);
	margin-top: 0.625rem;
	margin: 0.625rem 1.25rem 1.25rem 0;
}

.button {
	background: var(--grey-600);
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
	color: var(--white);
	display: inline-block;
	font-family: 'Helvetica Neue Condensed Bold';
	height: 1.25rem;
	line-height: 1.25rem;
	padding: 0 0.9375rem;
	text-decoration: none;
}

.button:focus {
	background: var(--grey-700);
}

.button:hover {
	background: var(--grey-800);
}

.button--large {
	font-size: 1.2rem;  /* 19.2px */
	height: 2.5rem;
	margin: 0 auto;
	padding: 0 2.5rem;
}

.button--small {
	font-size: 0.8333125rem;  /* 13.333px */
	height: 1rem;         /* 16px */
	line-height: 1.125;   /* 15px */
}

.button--action {
	background: var(--cheese-500);
	border: 5px solid var(--cheese-400);
	display: block;
}

.button--action:focus {
	background: var(--cheese-500);
	border-color: var(--cheese-500);
}

.button--action:hover {
	background: var(--cheese-600);
}

.button--info {
	background: var(--grey-100);
	border: 2px solid var(--grey-500);
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
	color: var(--grey-600);
	display: inline-block;
	font-family: 'Palatino';
	font-size: 1rem;
	height: 1.25rem;
	width: 1.25rem;
}

.button--info:focus {
	background: var(--grey-300);
}

.button--info:hover {
	background: var(--grey-600);
	color: var(--grey-100);
}

.arrow {
	height: 1.25rem;
	margin-top: 0.25rem;
	width: 1.25rem;
}

.icon {
	height: 1rem;
	width: 1rem;
}

.icon--small {
	height: 0.8333125rem;  /* 13.333px */
	width: 0.8333125rem;  /* 13.333px */
}

.icon-loading {
	height: 3.75rem;
	width: 3.75rem;
}

.accordion__title {
	align-items: center;
	background-color: var(--sky-600);
    border-top-left-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 100px;
	cursor: pointer;
	display: flex;
	font-family: 'Helvetica Neue Condensed Bold';
	height: 2.5rem;
	line-height: 2.5rem;
	margin: 1px 0 0 0;
	padding-left: 0.625rem;
	padding-right: 0.625rem;
	position: relative;
}

.accordion__title:hover {
	background-color: var(--sky-700);
}

.accordion__title--small {
	background: var(--fern-500);
	font-size: 1.1875rem;  /* 19px */
	height: 2rem;          /* 32px */
	line-height: 2rem;     /* 32px */
}

.accordion__title--closed {
    border-bottom-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 100px;
}

.accordion__title--small:hover {
	background-color: var(--fern-600);
}

.accordion__arrow {
	position: absolute;
	right: 0.5rem;
}

.accordion__arrow--small {
	margin-top: 0.125rem;
	position: absolute;
	right: 0.5rem;
}

.accordion__button {
	color: var(--white);
}

.accordion {
	background: var(--grey-200);
	font-size: 0.8333125rem;  /* 13.333px */
	padding: 1.25rem;
}

.accordion--small {
	background: var(--white);
	padding: 0.625rem;
}

.map-info {
	background: white;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
	box-shadow: 1px 0 10px var(--sky-500);
	display: none;
	font-family: 'Helvetica Neue Condensed Bold';
	left: 3.125rem;
	padding: 0.625rem;
	position: absolute;
	top: 0.625rem;
	z-index: 10;
}

.map-legend {
	bottom: 10px;
	left: 10px;
	position: absolute;
	z-index: 3;
}

.map-legend__title {
	color: white;
	margin-bottom: -3px;
	text-shadow: 1px 1px 3px var(--grey-700);
	z-index: 10;
}

.map-legend__box {
	background: white;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
	display: block;
	padding: 0.625rem;
	z-index: 9;
}

.map-legend__table {
	margin: 0;
}

.map-legend__table tr {
	background: white;
}

.map-legend__table td {
	padding: 0 0.25rem;
}

.map__data-legend {
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
	bottom: 20px; 
	display: none;
	right: 10px;
	position: absolute;
	width: 12.5rem;
	z-index: 3;
}

.leaflet-popup-content {
	color: var(--grey-700);
	font-size: 1rem;
}

.leaflet-popup-content h2 {
	color: var(--grey-600);
	font-family: 'Helvetica Neue Condensed Bold';
	font-size: 1.4375rem;   /* 23px */
	margin-bottom: 0;
}

.leaflet-popup-content ul {
	padding-left: 1.1875rem;  /* 19px, to match Leaflet's pop-up padding */
}

.leaflet-popup-content small {
	color: var(--grey-600);
	font-size: 0.8125rem;
}

.leaflet-popup-content__scroll-box {
	background: var(--grey-200);
    border: 1px solid var(--grey-50);
	display: block;
	max-height: 15.625rem;
    overflow: auto;
    padding: 0.5rem;
}


/* =========================================================================
   Tablet: 25px baseline, 20px font
   ========================================================================= */
@media only screen and (min-width: 885px) {

	.header__wrapper {
		height: 4.6875rem;
	}

	.footer {
		padding: 1.5625rem 0;
	}

	.header__nasa {
		height: 3.4375rem;
	}

	.header__jpl {
		display: block;
		font-size: 0.9375rem;
	}

	.header__jpl-text {
		font-size: 1.09375rem;  /* 17.5px */
	}

	.header__title {
		padding-left: 0.625rem;
	}

	.nav__mobile {
		display: none;
	}

	.nav {
		display: block;
	}

	.dialog__box {
		padding-top: 4.5rem;
	}

	.info-box {
		margin: 0 1.5625rem 1.5625rem 1.5625rem;
		padding: 1.5625rem;
	}

	.info-box__title {
		margin-bottom: 1.5625rem;
	}

	.info-box__list {
		margin-left: 13.5rem;
	}

	.info-box__img {
		margin-bottom: 0;
	}

	.card {
		height: 12.5rem;
	}

	.card__img {
		margin-right: 1.5625rem;
		height: 12.5rem;
		width: 12.5rem;
	}

	.card__title {
		margin-top: 0.75rem;
		margin: 0.75rem 1.5625rem 1.5625rem 0;
	}

	.button {
		height: 1.5625rem;
		line-height: 1.5625rem;
	}

	.button--large {
		font-size: 1.5rem;    /* 24px */
		height: 3.125rem;
		padding: 0 3.125rem;
	}

	.button--small {
		font-size: 1.0416875rem;  /* 16.667px */
		height: 1.25rem;        /* 20px */
		line-height: 1.2;     /* 20px */
	}

	.button--info {
		border-width: 3px;
		font-size: 1.25rem;
		height: 1.5625rem;
		width: 1.5625rem;
	}

	.accordion__title {
		height: 3.125rem;
		line-height: 3.125rem;
	}

	.accordion__title--small {
		font-size: 1.5rem;    /* 24px */
		height: 2.5rem;       /* 40px */
		line-height: 2.5rem;  /* 40px */
	}
	
	.accordion {
		font-size: 1.0416875rem;  /* 16.667px */
		padding: 1.5625rem;
	}

	.accordion--small {
		padding: 0.78125rem;
	}

	.accordion__arrow--small {
		margin-top: 0.25rem;
	}

	.arrow {
		height: 1.5625rem;
		margin-top: 0.3125rem;
		width: 1.5625rem;
	}

	.icon {
		height: 1.25rem;
		width: 1.25rem;
	}

	.icon--small {
		height: 1.0416875rem;  /* 16.667px */
		width: 1.0416875rem;  /* 16.667px */
	}

}


/* =========================================================================
   Desktop: 30px baseline, 23px font
   ========================================================================= */
@media only screen and (min-width: 1060px) {

	.header__wrapper {
		height: 5.625rem;
	}

	.footer {
		padding: 1.875rem 0;
	}

	.header__jpl {
		display: block;
		font-size: 1.1979375rem;  /* 19.167px */
		line-height: 1.19;  /* 22.8px */
		padding: 0 1.25rem 0 0.3125rem;
	}

	.header__jpl-text {
		font-size: 1.40625rem;  /* 22.5px */
	}

	.header__title {
		padding-left: 1.25rem;
	}

	.header__nasa {
		height: 4.25rem;
	}

	.nav__mobile {
		display: none;
	}

	.nav {
		display: block;
		padding-right: 3.125rem;
		padding-top: 1rem;
	}

	.nav__item {
		padding: 0.75rem;
	}

	.info-box {
		margin: 0 1.875rem 1.875rem 1.875rem;
		padding: 1.875rem;
	}

	.info-box__title {
		margin-bottom: 1.875rem;
	}

	.card {
		height: 15rem;
	}

	.card__img {
		margin-right: 1.875rem;
		height: 15rem;
		width: 15rem;
	}

	.card__title {
		margin-top: 0.9375rem;
		margin: 0.9375rem 1.875rem 1.875rem 0;
	}

	.button {
		height: 1.875rem;
		line-height: 1.875rem;
	}

	.button--large {
		font-size: 1.725rem;  /* 27.6px */
		height: 3.75rem;
		padding: 0 3.75rem;
	}

	.button--small {
		font-size: 1.1979375rem;  /* 19.167px */
		height: 1.4375rem;        /* 23px */
		line-height: 1.1478;      /* 22px */
	}

	.button--info {
		font-size: 1.4375rem;
		height: 1.875rem;
		width: 1.875rem;
	}

	.accordion__title {
		height: 3.75rem;
		line-height: 3.75rem;
	}

	.accordion__title--small {
		font-size: 1.75rem;      /* 28px */
		height: 2.8125rem;       /* 45px */
		line-height: 2.8125rem;  /* 45px */
	}

	.accordion {
		font-size: 1.1979375rem;  /* 19.167px */
		padding: 1.875rem;
	}

	.accordion--small {
		padding: 0.9375rem;
	}

	.accordion__arrow--small {
		margin-top: 0.375rem;
	}

	.arrow {
		height: 1.875rem;
		margin-top: 0.375rem;
		width: 1.875rem;
	}

	.icon {
		height: 1.4375rem;
		width: 1.4375rem;
	}

	.icon--small {
		height: 1.1979375rem;  /* 19.167px */
		width: 1.1979375rem;  /* 19.167px */
	}

}