/*************************************************************************************************/
/* (C) 2021-20xx Iterum, LLC. All rights reserved. Iterum.llc.                                   */
/*-----------------------------------------------------------------------------------------------*/
/* This file contains css classes that are specific to the course.avyrescue.com website.       */
/* See iterum.grid.*.css and iterum.core.css, too!                                               */
/* This has VERY similar classes to the other site-specific css files.                           */
/*************************************************************************************************/

/*-----------------------------------------------------------------------------------------------*/
/* Use the following classes to display a responsive 16x9 iFrame (e.g., an embedded YouTube video).
 * VideoOuterContainer limits the size, centers the iFrame, and adds a top margin. You can use 
 * inline css or redefine VideoOuterContainer to change the margins, max width, etc. VideoNestedContainer is the responsive 
 * container that is nested in VideoOuterContainer. See shoveling_companion.php for an example.

	THIS IS MORE RECENT THAN the classes in avyrescue.com. I plan to move this to iterum someday
	(and I'd modify avyrescue.com to use the newer class).
	These classes were named VideoOuterContainer and VideoNestedContainer. I'll need to 
	change the names in avyrescue.com when I move this to iterum.

	I also have a EmbedHostedVideo() function that should get moved to iterum.
 */

.VideoOuterContainer {
	/* The default size (that YouTube uses when embedding is width="560" height="315". I use 400
	 * in this class definition, but override it in other sites (like course.avyrescue.com).
	*/
	max-width: 400px;
	margin: 10px auto;
}

.VideoNestedContainer {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

	.VideoNestedContainer .VideoResponsive {
		position: absolute;
		top: 10px;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}

.VideoOuterContainer {
	/* The default size (that YouTube uses when embedding is width="560" height="315". I use 400
	 * in the iterum definition, but override the size here.
	*/
	max-width: 560px;
}

/*************************************************************************************************/
/*************************************************************************************************/
/* Redefined Main CSS Selectors                                                                  */
/*************************************************************************************************/
/*************************************************************************************************/
/*-----------------------------------------------------------------------------------------------*/
/* Remember to look at iterum.grid.*.css and iterum.core.css, too!                               */
body {
	font-size: 15px;
}

/*************************************************************************************************/
/* Standard Links                                                                                */
/*************************************************************************************************/

/*-----------------------------------------------------------------------------------------------*/
/* This causes the links to fade in, I think. */
a, .cta cta_btn, header nav ul li a {
	transition: all .2s linear;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-o-transition: all .2s linear;
}

/*===============================================================================================*/
/* Redefined Standard Headings                                                                   */
/*===============================================================================================*/

/*-----------------------------------------------------------------------------------------------*/
h1 h2 h3 h4 {
	font-weight: bold;
	color: #333; /* Color of heading text. */
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #aaaaaa; /* Color of horizontal line below heading text. */
	margin-top: 8px; /* Limit space before the h1 heading. */
	margin-bottom: 4pt; /* Don't space below the heading style. */
}

/*-----------------------------------------------------------------------------------------------*/
h1 {
	font-size: 24px;
	font-weight: bold;
	color: #333; /* Color of heading text. */
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #aaaaaa; /* Color of horizontal line below heading text. */
	margin-top: 8px; /* Limit space before the h1 heading. */
	margin-bottom: 4pt; /* Don't space below the heading style. */
}
/*-----------------------------------------------------------------------------------------------*/
h2 {
	font-size: 21px;
	font-weight: bold;
	color: #333; /* Color of heading text. */
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #aaaaaa; /* Color of horizontal line below heading text. */
	margin-top: 8px; /* Limit space before the h1 heading. */
	margin-bottom: 4pt; /* Don't space below the heading style. */
}
/*-----------------------------------------------------------------------------------------------*/
h3 {
	font-size: 18px;
	font-weight: bold;
	color: #333; /* Color of heading text. */
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #aaaaaa; /* Color of horizontal line below heading text. */
	margin-top: 8px; /* Limit space before the h1 heading. */
	margin-bottom: 4pt; /* Don't space below the heading style. */
}
/*-----------------------------------------------------------------------------------------------*/
h4 {
	font-size: 16px;
	font-weight: bold;
	color: #333; /* Color of heading text. */
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #aaaaaa; /* Color of horizontal line below heading text. */
	margin-top: 8px; /* Limit space before the h1 heading. */
	margin-bottom: 4pt; /* Don't space below the heading style. */
}

/*************************************************************************************************/
/*************************************************************************************************/
/* Redefined Iterum Core Selectors                                                               */
/*************************************************************************************************/
/*************************************************************************************************/

.outer_frame {
	background-color: white;
}

/* These are variation to the frameWhite text box. It puts the boxes side by side and removes the 
 * top/bottom margins on the p text.This is really a "derived" iterum core class rather than a redefined class.
*/

.frameWhite.frameWhiteSideBySide {
	padding-bottom: 3px !important;
	padding-top: 3px !important;
	vertical-align: top !important;
	display: inline-block !important;
}

.frameWhiteSideBySide p {
	margin-top: 0 !important;
	text-align: left;
}

.outer_frame .box_onethird_right {
	/* I don't know if the base class needs this, but beaconreviews.com and course.avyrescue.com do.*/
	margin-top: 10px;
}

/*************************************************************************************************/
/* Toolbar (much of this is now in bigmenu.css).                                                 */
/*************************************************************************************************/
/*-----------------------------------------------------------------------------------------------*/
.toolbarStripe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 48px; /* Height of the toolbar. */
	background: #555; /* Color of the toolbar's background. It is set in two places in this file. */
}
/*-----------------------------------------------------------------------------------------------*/
.toolbarArea {
	z-index: 1;
}

/*************************************************************************************************/
/* Header class
/*-----------------------------------------------------------------------------------------------*/
/* The Header contains the logo and menu bar. It changes based on its width.                     */
/*************************************************************************************************/
/*-----------------------------------------------------------------------------------------------*/
header {
	height: 48px; /* Height of the toolbar. */
	max-width: 950px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background: #555; /* Color of the toolbar's background. It is set in two places in this file. */
}
	/*-----------------------------------------------------------------------------------------------*/
	/* The logo on the left side of the header.                                                      */
	header .logo {
		/* 
			Prevent the button from being in the wrong location during loading and decided on the size. 
			We change this in adjustMenu(). 
			11/2019: I removed this. It caused the logo and menu to shift when the window size
			changed. 
		display: none;

		*/
		float: left;
		margin-left: 0;
	}
/* Remove the logo's left margin when the window is narrow.                                 */
@media (max-width:750px) {
	header .logo {
		margin-left: 0;
		vertical-align: top;
	}
}
/*---------------------------------------------*/
header a {
	text-decoration: none;
	color: #ffffff;
}

	header a:link {
		text-decoration: none;
		color: #ffffff;
	}

	header a:visited {
		text-decoration: none;
		color: #ffffff;
	}

header nav ul li a {
	text-decoration: none;
	color: #1155cc /* Google's link color */
}

	header nav ul li a:hover {
		color: #1155cc /* Google's link color */
	}

/*************************************************************************************************/
/* Expand/Collapse and Pending/Completed buttons
/*************************************************************************************************/

/*-----------------------------------------------------------------------------------------------*/
.expand_collapse_button, .pending_completed_button {
	cursor: pointer;
	margin-right: 4px;
	position: relative;
	/* Lower the button a bit. */
	top: 1px;
}

/*-----------------------------------------------------------------------------------------------*/
.button_description {
	/* 21px results in the same indent as the second icon in headings. It looks clean. */
	margin-left: 21px;
	margin-right: 4px;
	position: relative;
	/* Lower the button a bit. */
	top: 2px;
	width: 18px;
}

/*************************************************************************************************/
/* Image Classes
/*************************************************************************************************/

.triangle_image {
	max-width: 120px;
}

.triangle_bullets {
	padding-left: 130px !important;
}

.image_new_row {
	clear: both;
}

/*************************************************************************************************/
/*************************************************************************************************/
/* MORE                                                                                          */
/*************************************************************************************************/
/*************************************************************************************************/

.yellowHighlight {
	background-color: yellow;
}

/*---------------------------------------------*/
/*  Footer. Contains the copyright and such.   */
/*---------------------------------------------*/
footer {
	padding: 5px 0;
	border-top: 1px #dedede solid;
	color: #222222; /* Text color used throughout website. */
	background: #f0f0f0;
	text-align: center;
	margin-left: auto; /* Center footer */
	margin-right: auto; /* Center footer */
}
	/*---------------------------------------------*/
	footer .copyright {
		font-size: 8pt;
	}

/*************************************************************************************************/
/* Temporary message (that can be displayed below the heading, or maybe it's below the breadcrumbs).

/*-----------------------------------------------------------------------------------------------*/
.tempMessage {
	display: block; /* It might have been hidden. */
	height: 25px;
	line-height: 25px; /* A trick to center one line vertically. Must be same as the height. */
	background-color: #B5123F; /* A more subtle color: #dddddd; */
	color: #333333;
	box-sizing: border-box;
	border-width: 1px;
	border-style: solid;
	border-color: #999999;
	font-size: 15px;
	text-align: center;
	/* The following are from the breadCrumbs. */
	margin-left: auto;
	margin-right: auto;
	max-width: 945px;
	padding: 0 10px;
	overflow: hidden;
	white-space: nowrap;
}

/* Hide the temp message is the screen is too narrow. */
@media (max-width:600px) {
	.tempMessage {
		display: none;
	}
}

/*-----------------------------------------------------------------------------------------------*/
/* todo0: I'm using this in AvyRescue.com and roperescuetraining.com, maybe more. However the
 * margin-left is 20px in rrt.com and 30px in avy.com.
 * Maybe add to iterum and then override that one property in the sites. */
ol {
	margin-top: 8px;
	margin-left: 20px;
	color: #222222; /* Color of text in bulleted lists. */
}

/*-------------------------------------------------------------------------------------------------
 * This class creates a "right triangle" (aka "arrow") bulleted list. I think it works better than
 * the bulletsCustom in the Iterum core css. However, it does have some oddities. First, the gap
 * between the bullet and the text is a bit wide (see comment about "span," below). Second, the
 * bullet's vertical position can't be changed, so it appears too low on big fonts and too high
 * on small fonts. You can fix this by changing the size of the bulletTriangle. Be careful tweaking
 * this, as it affects the bigmenu.css menus.
 *
 * todo0 I AM USING THESE IN course.avyrescue.com and beaconreviews.com and roperescuetraining.com. 
	I should move to iterum's files, however I'm concerned about the triangle bullet (it's a little
	ugly and would need to be in all sites). I could add a class name and add it to the sites that
	I want to use it.
 */
ul {
	margin-top: 8px !important; /* This is margin before the list begins. */
	margin-left: 20px !important; /* This is indent before the bullet. */
	list-style-position: outside;
	list-style-image: url("/images/BulletGray.gif");
}

	/* If the bullets are nested, reduce the top margin. */
	ul li ul, ol li ul, ul li ol {
		margin-top: 0 !important;
		padding-left: 0 !important;
	}

	ul li.spaceAfter {
		margin-bottom: 5px
	}

/* todo0: I want to add this, to give a little more space between rows, but it messes up the bigmenu.css. I tried to force the margin to 0 there, but didn't get it to work. 
	ul li {
		margin-bottom: 5px;
	}
		*/

/* You can enable the following and include the text that is between the li elements in span
 * elements to narrow the gap between the bullet and the start of the text, which I want. However,
 * this also moves the arrows in the drop-down menus, which I don't want.
	ul span {
		position: relative;
		left: -4px; 
	}
*/

/**************************************************************************************************
 * Other
 *************************************************************************************************/

/*-----------------------------------------------------------------------------------------------*/
.noJavascript {
	display: block;
	width: 100%;
	height: 30px;
	line-height: 30px; /* A trick to center one line vertically. Must be same as the height. */
	background-color: red;
	color: white;
	font-size: 20px;
	text-align: center;
}

/*-----------------------------------------------------------------------------------------------*/
/* The popup window that displays a "Loading" message . */
.popup_window {
	background-color: #f3f3f3;
	border: 1px solid #ccc;
	border-radius: 15px;
	display: none;
	height: auto;
	left: 50%;
	padding: 10px;
	position: fixed;
	text-align: center;
	top: 50%;
	width: auto;
	z-index: 9998; 
}

	.popup_window p {
		font-size: 24pt; 
		font-weight: bold; 
		margin: 20px 20px 20px 20px;
	}

/*-----------------------------------------------------------------------------------------------*/
/* The instructions on the expanding/collapsing, pending/completed icons. */
.iconInstructions {

}