/* Note to me (so you can ignore this). Remember to update the source file when changing this one!!*/

.hidden_box{
	font-size	: 9pt;
	margin-bottom	: 25px;
}

.hidden_closed_section{
}

.hidden_open_section{
}

.hidden_title {
	cursor		: pointer;
	cursor		: hand;
}

.figure a:visited {
	color: #333;
	}

.figure a {
	text-decoration: none;
	}

.figure a:hover {
	color: #06c;
	text-decoration: none;
	}
	
.jtags_box, .figure, .related {
	text-align			: right;
	background-color	: #f8f8f8;
	border				: 1px solid #ddd;
	border-radius		: 8px;
	padding				: 12px;
}

.related {
	font-size 	: 10pt; 
}

.related_header {
	font-weight		: bold;
	margin			: 0;
}

.figure {
	font-weight		: bold;
	line-height		: 0;
	display			: flex;
	flex-direction: column; 
    width: min-content;
	position		: relative;
	z-index			: 1; /*needed so it didn't get buried behind blockquotes and such */
}

.figure_text {
	font-size		: 17px;
	line-height		: 19px;
	position		: relative;
	top				: 4px;
}


.figure_license {
	font-size		: 14px;
	font-weight		: normal;
	color			: #888;
}

.figure_text a, .figure_text a:visited {
	color			: #D08400;
}

a .figure_img {
	border			: 2px solid #f07700;
}
.figure_img {
	margin-left		: auto;
	margin-right	: auto;
	border			: 1px solid #888;
	border-radius	: 4px;
}

.callout_quote_top, .callout_quote_bottom { 
	position		: absolute;
	width			: 30px;
}
.callout_quote_top {
	transform		: rotate(180deg);
	top				: 0;
	left			: -15px;
}

 .callout_quote_bottom { 
	right			: -15px;
	bottom			: 0;
 }
.callout, .jtag_blockquote {
	position		: relative;
	font-size		: 22px;
	line-height		: 27px;
	color			: #333;
	margin-bottom	: 10px;
	background		: #f3f3f3;
	border-radius	: 10px;
	padding			: 17px;
}

.jtag_blockquote {
	font-size		: 19px;
	line-height		: 27px;
	color			: #333;
	background		: #f3f3f3;
	border-radius	: 10px;
	padding			: 17px;
	display			: block;
	width			: 90%;
	margin			: 35px auto 35px auto;
	text-align		: justify;
	position		: relative;
}

.jtag_blockquote .jtag_source {
	position		: absolute;
	bottom			: -22px;
	right			: 0;
	font-size		: 14px;
	text-align		: right;
}

.tip h2,.tip h3 {
	margin			: 0 0 10px 0;
}	
.tip {
	background		: linear-gradient(#ffffff,#f7f7f7); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	font-family		: arial;
	color			: #00161D;
	font-size		: 12pt;
	font-weight		: bold;
	font-style		: italic;
	border			: 2px solid #70A0AE; 
	border-radius		: 8px; 
	padding			: 15px;
}

#jtagsPopBox {
	font-size		: 11pt;
	border			: 1px solid #777;
	background 		: #FFFFe2;
	padding			: 30px;
	max-width		: 400px;
	display			: none;
	position		: absolute;
	z-index			: 1111;
	border-radius	: 6px;
}

#jtagsPopContent h3 {
	margin			: 6px 0 8px 0;
}

.definition_holder{
	display			: none;
}


.def_link a,.pop_link a {
	color			: #40AD45;
}

.def_link hover,.pop_link hover {
	color			: #53D95A;
}

.def_no_link {
	color			: #40AD45;
}

.jtags_centered_box {
	margin-top		: 15px;
	margin-bottom		: 15px;
}

.enlarge_image_button {
	width			: 34px;
	height			: 32px;
	position		: absolute;
	display			: none;
	border			: 0;
}

.link_image_button {
	width			: 34px;
	height			: 32px;
	position		: absolute;
	display			: none;
	border			: 0;
}

.nav_check {
	border			: 1px solid #666666;
	width			: 16px;
	height			: 16px; 
	margin-right		: 7px; 
	margin-top		: 4px;
	background		: white;
}

.nav_check_hover {
	background		: url('check_dot_off.gif') no-repeat 50% 50%;
}

.nav_checked {
	background		: url('check_dot.gif') no-repeat 50% 50%;
}

.jtag_checklist_box {
	border			: 1px solid #b5b5b5; 
	border-radius		: 8px; 
	-moz-border-radius	: 8px; 
	-webkit-border-radius	: 8px; 
	padding			: 15px;
	margin-left		: 25px;
	margin-right		: 25px;
	margin-top		: 45px;
	margin-bottom		: 45px;
	background		: #fcfcfc;
}

#jtag_nav_home {
	background		: #f4f4f4;
	font-size		: 9pt;
	text-transform		: uppercase;
	padding			: 4px;
	border-radius		: 3px; 
	-moz-border-radius	: 3px; 
	-webkit-border-radius	: 3px;
	border			: 1px solid #888; 
	text-align		: center;
}
#jtag_nav_home {
	width			: 100%;
	margin-left		: auto;
	margin-right		: auto;
}
#jtag_nav_home_title{
	margin-left		: auto;
	margin-right		: auto;
	font-weight		: bold;
	text-align		: center;
	width			: 90%;
	font-size		: 12pt;
	border-bottom		: 1px solid #888;
	padding-bottom		: 3px;
	margin-bottom		: 3px;
}
#jtag_nav_path {
	width			: 500px;
	margin-left		: auto;
	margin-right		: auto;
	font-size		: 10pt;
}
#jtag_nav_path_prev, #jtag_nav_path_next {
	width			: 200px;
}
#jtag_nav_path_prev
{
	text-align		: right;
}
#jtag_nav_path_next
{
	text-align		: left;
}


#video_pop_blocker {
	display			: none;

}
/* Have to do this weirdly so the video is the proper size. Has to be visible in the dom, but hide it with overflow */
.a_video {
	display			: inline-block;
	position		: absolute;
	top 			: -5000px;
	left 			: -5000px;
}
#video_pop_player .a_video {
	position		: relative;
	top				: 0;
	left			: 0;
}
.video_thumb {
	position		: relative;
}
.video_play_button, .video_thumb img {
	width			: inherit;
}

.video_play_button:hover {
	opacity			: .8;
}

.video_play_button{
	position		: absolute;
	top				: 0;
	left			: 0;
	width			: 100%;
	height			: 100%;
	opacity			: .5;
	cursor			: pointer;
}

.thumbs_row {
	display: flex; 
	flex-wrap: wrap;
	row-gap: 20px;
}
.thumbs_row .figure {
	vertical-align	: top;
}

.jtag_banner {
	width: 100%;
	display: flex;
	overflow: hidden; 
	background-size:cover; 
	border: 1px solid #888; 
	border-top-left-radius:10px; 
	border-top-right-radius:10px; 	
	justify-content: left;
	align-items: center;
	margin: 100px 0 0 0;
}
.jtag_banner_text {
	background: rgba(0,0,0,.6);
	padding: 7px 40px;
	font-size: 33px;
	color: #efefef;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	margin-top: 10%
}