@charset "utf-8";

/* This is necessary for IE & Edge, otherwise the vertical scrollbar overlaps the content. */
@-ms-viewport{
	width: auto !important;
}

/* This allows words to be broken to wrap on all elements. */
*{
	word-wrap: break-word;
}

body{
	background: #404040;
	background-image: url(../images/background.jpg);
	background-size: 100%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
	text-align: center;
}
@media screen and (max-width: 720px){
	body{
		background-image: url(../images/background-narrow.jpg);
	}
}

h1{
	color: #696969;
	margin: 0px auto 25px auto;
	color: #ffffff;
	text-shadow: 0 0 5px rgba(0,0,0,1);
}
@media screen and (max-width: 720px){
	h1{
		margin-bottom: 20px;
	}
}

h2{
	color: #696969;
	text-align: center;
}

p{
	margin: 15px auto;
}

p a:link, p a:visited{
	color: #517a92;
	text-decoration: none;
	font-weight: bold;
}

p a:hover{
	opacity: 0.7;
}

ul, ol{
	margin-top: 8px;
}

li{
	margin-bottom: 15px;
}

/* This is the site's title, displayed above the icon menu on the homepage only. */
.mainHeader{
	text-align: left;
	margin: 15px auto 15px auto;
	padding: 0px 15px 0px 15px;
	font-size: 40px;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 0 10px rgba(0,0,0,1);
}
@media screen and (max-width: 450px){
	.mainHeader{
		font-size: 20px;
	}
}

.mainHeaderText{
	display: inline-block;
	position: relative;
	vertical-align: center;
}

/* This is a transparent white circle that sits off to the side of the adjacent text, and slides back and forth across the text to create a shine pass effect. */
.mainHeaderFlash{
	position: absolute;
	top: 0px;
	left: -60px;
	z-index: 5;
	background: radial-gradient(circle, #ffffff, transparent);
	opacity: 0.0;
	height: 100%;
width: 25px;
	/* This references an animation which lasts 6 seconds and repeats infinitely. */
	animation: transitAccrossText 8s infinite;
}
@media screen and (max-width: 700px){
	.mainHeaderFlash{
		width: 30px;		
	}
}
/* This is the animation for the white circle. Nothing happens for the first 75% of the animation duration. Between 75% and 85% of the duration the white circle moves to the right end of the text. And for the remainder of the duration it comes back to the starting point. */
@keyframes transitAccrossText{
	0%{
		left: -10px;
	}
	90%{
		opacity: 0.0;			
	}
	91%{
		opacity: 1;
		left: -10px;
	}
	97%{
		left: 100%;
	}
	99%{
		opacity: 1;			
	}
	100%{
		left: -10px;		
	}	
}

/* These are the wide buttons at the bottom of the widgets that go back to the home page. */
.wideButton{
	background-color: #517a92;
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	width: 15%;
	margin: 40px 15px 0px 0px;
	border-radius: 20px;
	height: auto;
	padding: 6px 8px 6px 8px;
}
@media screen and (max-width: 720px){
    .wideButton{
		width: 30%;
    }
}

.wideButton:hover, .wideButton:hover{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}

.leftArrow {
	float: left;
	font-weight: bold;
}


/* These are the paragraph headers within widget pages. */
.purpose{
	font-weight: bold;
	font-size: 18px;
	margin: 40px 0px 0px 0px;
	color: #696969;
}

/* This is container for the HTML, CSS, and JS links. */ 
.getCode{
	float: right;
	color: #696969;
	border-left: 1px solid #517a92;
	border-bottom: 1px solid #517a92;
	margin-left: 10px;
	margin-bottom: 10px;
	padding: 0px 10px 10px 10px;
	text-align: left;
	text-decoration: none;
	background-color: #ffffff;
}

.getCode a, .getCode a:visited{
	color: #517a92;
	cursor: pointer;
	text-decoration: none;
}

.getCode a:hover{
	opacity: 0.8;
}

/* This is the style wherever text is displayed which is meant to look like code. */ 
.codeText{
	font-family: "Courier New", Courier, monospace;
}

/* This are the tips within widget explanations. */
.codeTip{
	font-style: italic;
}

.spacedList li{
	margin-bottom: 0px;
}

footer{
	margin-top: 550px;
	padding: 12px;
	background-color: #404040;
	color: #ffffff;
	font-size: 12px;
	text-align: center;
}
@media screen and (max-width: 1600px){
    footer{
		margin-top: 300px;
    }
}
@media screen and (max-width: 720px){
    footer{
		margin-top: 100px;
    }
}

footer a{
	color: #ffdf00;
}

.footerColumn{
	text-align: left;
	margin-left: 10px;
	margin-right: 10px;
	display: inline-block;
}
@media screen and (max-width: 720px){
    .footerColumn{
		margin: 12px;
		display: block;	
    }
}

.FAQquestion, .updateInstance{
	font-style: italic;
	font-weight: bold;
	font-size: 18px;
	margin: 40px auto 10px auto;
}

/* This is used for in-body function calls which open widgetPages. */
.openPageFunction{
	font-weight: bold;
	cursor: pointer;
	color: #517a92;
}

.openPageFunction:hover{
	opacity: 0.7;
}

.lineBreak{
	margin: 60px auto 20px auto;
	width: 100%;
	height: 1px;
	background-color: #d3d3d3;
}


/* This is used in the loadMore example only. */
.exampleContent{
	font-size: 28px;
	font-weight: bold;
	font-style: italic;
	font-family: Arial, Helvetica, Sans-serif;
	color: #006400;
	text-align: center;
	margin: 0px;
	background-color: #f0f0f0;
}


/* These are the example scrollBlock contents in the reveal-by-scroll widget. */
.innerBlock{
	margin: 20px auto 80px auto;
	text-align: center;
}