#skip a {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

#skip a:focus {
	position:static;
	width:auto;
	height:auto;
}

body {
	background-color: #4e4e4e;
	color: #f1f1f1;
}

body main {
	background-color: #f1f1f1;
	color: #20282b;
}

body.community main {
	background-color: #20282b;
	color: #f1f1f1;
}

body.community .breadcrumbs li {
    float: left;
    color: #f1f1f1;
    font-size: 0.6875rem;
    cursor: default;
    text-transform: uppercase;
}

body.community h1, body.community h2, body.community h3, body.community h4, body.community h5, body.community h6 {
    color: #f1f1f1;
}

body.community .callout h1, body.community .callout h2, body.community .callout h3, body.community .callout h4, body.community .callout h5, body.community .callout h6 {
    color: #4e4e4e;
}

main:focus {
	outline: none;
}

main a {
    color: #636967;
    border-bottom: dotted 1px rgba(99, 105, 103, 1);
    transition:all .2s ease;
}

main a:hover {
    color: #636967;
    border-bottom: dotted 1px rgba(99, 105, 103, 0);
}

/**
Prevent non-links from showing as clickable
 */
main a:not([href]) {
    cursor: auto;
    color: inherit;
    border: none;
    transition: none;
}

*[role=button] {
    cursor: pointer;
}

main a:not([href]):hover {
    color: inherit;
    border-bottom: none;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
    margin-top: 1rem;
    color: #4e4e4e;
}

h1 > .passel-subhead {
	font-weight: 200;
	font-size: .5em;
	display: block;
}

h1 > .passel-subhead strong {
	text-decoration: underline;
	text-transform: uppercase;
}

h1 {
    margin-top: 0;
	font-size: 2.5rem;
}

h2{
	font-size: 2rem;
}

.lesson-title {
	margin-top: 1rem;
}

.top-bar {
	z-index: 2;
	width: 100%;
    top: 0;
    left: 0;
}

.top-bar * {
	color: #ecf1ef;
}

.top-bar, .top-bar ul {
    background-color: #57821f;
}

.top-bar a {
	color: #ecf1ef;
}

.top-bar-right form {
	padding: 0.7rem 1rem;
	line-height: 1;
}

.button {
	background-color: #57821f;
	cursor: pointer;
}

.button:hover {
	background-color: #57821f;
}

.button:active {
	background-color: #57821f;
}

.button:focus {
	background-color: #57821f;
}

.button.submit-quiz {
	background-color: #325cd6;
}

.button.danger {
	background-color: #D63D17;
}


.button.outline {
    background-color: RGBA(255,255,255,0);
    border: 1px solid RGBA(255,255,255,.8);
    border-radius: 4px;
}

.button.outline:hover {
	background-color: RGBA(255,255,255,0.8);
	border: 1px solid RGBA(255,255,255,.8);
	color: #454545;
}

.button.outline:active {
	background-color: RGBA(255,255,255,0.8);
	border: 1px solid RGBA(255,255,255,.8);
	color: #454545;
}

.button.outline:focus {
	background-color: RGBA(255,255,255,0.8);
	border: 1px solid RGBA(255,255,255,.8);
	color: #454545;
}

.top-bar-right a.button.outline {
    margin-bottom: 0;
}

.callout.primary {
	background-color: #535e62;
	color:#fff;
}

.band-image .image-container {
	width: 100%;
	text-align: center;
	padding: .5em;
}

.band-image figure {
	background-color: #fcfcfc;
	padding: .5em;
}

.band-image .center-caption {
	text-align: center;
}

.passel-hero {
	position: relative;
	background-color: #20282b;
	max-height: 300px;
	overflow: hidden;
	margin-bottom: 1em;
}

.passel-hero-img-container img {
	opacity: .6;
	width: 100%;
}

.passel-hero-text-container {
	position: absolute;
	height: 100%;
    width: 100%;
    bottom: 0;
    color: #ecf1ef;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    text-align: center;

}
.passel-hero-text-container > div{
    position: absolute;
    top: 40%;
    width: 100%;
    padding: 0 10%;
}
.passel-hero-text-container *{
	color: #ecf1ef;
}

.top-bar-left, .top-bar-right {
	font-size: .85em;
}
.logo-text {
	font-size: 1rem;
}

p, .desc-text {
	font-size: small;
}

/* Medium and up */
@media screen and (min-width: 40em) {
	.logo-text {
		font-size: 1.5rem;
	}
	.top-bar-left, .top-bar-right {
		font-size: 1em;
	}
	.passel-hero-img-container img {
		position: absolute;
		bottom: 0;
	}
	.passel-hero {
		max-height: 350px;
		height: 350px;
	}
	p, .desc-text{
		font-size: 11pt;
	}
}

/* Large and up */
@media screen and (min-width: 70em) {
	.passel-hero {
		max-height: 450px;
		height: 450px;
	}
}

.name-tag {
	border-right:1px solid #ecf1ef;
	padding: 0 1em 0 0;
	margin: 0 1em 0 0;
}

.site-title {
	display: inline-block;
	font-weight: bold;
	padding: 0.7rem 1rem;
	line-height: 1;
}

.dark.callout {
	background-color: #4e4e4e;
    color: #fff;
}

.dark.callout a {
	color: #fff;
}


/* Give adjacent bands some room between them */
.container-content .band + .band {
    margin-top: 2em;
}

/* Unless they are in a row, and already have that managed */
.row .container-content .band + .band {
    margin-top: 0;
}

.breadcrumbs {
	margin: 1rem 0 1rem 0;
}

.quiz .results {
	display: none;
}

.quiz .question-text {
	margin-bottom: .5em;
	
	border-bottom: 1px solid rgba(99, 105, 103, 1);
}

.quiz.submitted .results {
	display: block;
}

.quiz .question-answer {
    padding: .25em;
}

.quiz .feedback-text {
    display: none;
}

.quiz .question-answer.incorrect {
    background-color: #FCE6DE;
}

.quiz .question-answer.incorrect .feedback-text {
    display: block;
}

.quiz .quiz-question .is-correct-result {
    display: none;
}

.quiz .quiz-question.correct .is-correct-result {
    display: block;
    background-color: #e1faea;
    padding: .25em;
}

.node-content {
	font-size: 1.25em;
}

/*
A11y contrast overrides
*/
.is-invalid-label {
	color: #dc3a00;
}
.breadcrumbs a {
	color: #446716;
}
body.community .breadcrumbs a {
color: #8fc549;
}
.button.success {
	color: #fefefe;
	background-color: #008900;
}
.button.warning {
	color: #fefefe;
	background-color: #a06b00;
}
.button.alert {
	color: #fefefe;
	background-color: #dc3800;
}

.lesson-nav > nav > ul > li {
	font-size: 1.25em;
	font-weight: bold;
}

.lesson-nav > nav > ul > li > ul > li{
	font-size: 1rem;
	font-weight: normal;
}

.lesson-nav a.current {
	color: #8fc549;
}

.lesson-nav ul {
    list-style-type: none;
    margin-left: 0;
}

.lesson-nav ul ul {
	margin-left: 1.25em;
	list-style-type: disc;
}

.passel-text-hidden {
    font-size: 0;
    width: 1px;
    height: 1px;
    display: inline-block;
    overflow: hidden;
    position: absolute!important;
    border: 0!important;
    padding: 0!important;
    margin: 0!important;
    clip: rect(1px,1px,1px,1px)
}

.passel-pagination {
	margin-top: 2em;
}

span[aria-label="disabled"] {
	opacity: .4;
}

/**
.top-bar fix for flex layout, see https://github.com/zurb/foundation-sites/issues/8409
 */
.top-bar .top-bar-left, .top-bar .top-bar-right { flex: none; }
#responsive-menu {
	width: 100%;
}
.top-bar .top-bar-left {
	float: left;
}
.top-bar .top-bar-right {
	float: right;
}

/* Allow menu to wrap */
.menu-wrap {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

/* Content in a button-group should wrap and mobile widths */
.button-group {
    flex-wrap: wrap;
}

button { cursor:pointer; }

/* Glossary terms */
.glossary-term-container {
	position: relative;
	display: inline;
}

.glossary-term-tooltip {
	display:none;
}

.glossary-term-tooltip.active {
	display:block;
	position: absolute;
	top: 1.5em;
	background-color: #fff;
	border: 1px solid black;
	border-radius: .25em;
	width: auto;
	padding-left: 1em;
	padding-right: 1em;
	max-width: 350px;
	min-width: 250px;
	font-size: 1rem;
	font-weight: normal;
	z-index: 2;
}

.glossary-term-tooltip.right {
	right: -1em;
}

.glossary-term-tooltip.left {
	left: -1em;
}

.glossary-term {
	border-bottom: 1px solid #000;
	font-weight: bold;
	display: inline;
}

.text-band-style--credit-block {
	border-top: 1px solid rgba(99, 105, 103, 1);
	padding-top: .5em;
	text-align: center;
	font-size: .75em;
	font-style: italic;
}

footer {
	background-color: #4e4e4e;
	color: #fff;
}
footer .attribution {
    font-size: .75em;
}
footer .logos {
    display: block;
}
footer .logos img {
    height: 50px;
    margin-bottom: 1em;
}
.expand-section {
	padding-top: 3em;
	padding-bottom: 4em;
}

dialog {
	display: none;
}
dialog[open] {
	width: 90%;
}

.close-video-dialog {
	position: absolute;
	top: .75em;
	right: .75em;
}

.dialog-content-container {
	margin-top: 1.25em;
}

dialog::backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.8);
}

/* Tooltip container */
.display-tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.display-tooltip .display-tooltiptext {
	visibility: hidden;
	width: 200px;
	background-color: #555;
	color: #fff;
	text-align: center;
	padding: 5px;
	border-radius: 6px;

	/* Position the tooltip text */
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -60px;

	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 0.3s;
}

/* Tooltip arrow */
.display-tooltip .display-tooltiptext::after {

	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.display-tooltip:hover .display-tooltiptext {
	visibility: visible;
	opacity: 1;
}