@charset "UTF-8";
/* CSS Document */


/* module blurb */
#modBlrb {
/*font-family: "Century Gothic",  Arial, Helvetica, sans-serif;*/
	font-size: 12pt;
	color: #333;
	background-color: #FFF;
	border: #CCC 5px solid;
	width: 65%;
	height: auto;
	margin: 0 auto;
	padding: 20px;
}
/*  Title in Text for smaller screens displayed by Media Queries below V  */
.title {
	font-size: 1.70em;	
/* font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;*/
	color: gray;
	line-height: 1.15em;
	display: none;
}
/* subtitle to Module Title (in paranthesis) */    
p.subttl {
	font-size: 1.3em;
/* font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;*/
	color: gray;
	line-height: 1.15em;
	display: inline-block;
}

/* discount price, when applied */
.discount {
	color:navy;
/* font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;*/
	font-size: x-large;
	font-weight:;
	font-style: italic;
	display:;	
}
/* Title - graphic */
#mdlttl {}
/* module title */
#modBlrb img {
	border: 0px;
}
/* module components container */
#mdcmpnts {
	background-color: rgba(75,75,75,0.07); 
	border: gray 2px solid; 
	text-align: center; 
	width: 90%; 
	height: auto; 
	margin: 40px auto; 
	padding: 10px;
}
/* the module cover */
#mdcmpnts .cvr {
	border: #99C 1px solid; 
	box-shadow: 4px 4px 10px -5px #666;
}
/* the cover and player divs */
#btns {
	width: 100%; 
	height: auto; 
	margin: 0 auto;
}

/* diplay: inline-block; changes below V to display: block; */
.btndvs {
	width: 49%; 
	margin: 0 auto; 
	display: inline-block;
}
/* Blurb cover, extra style, to adjust for the 3 butttons alongside */
/* * as on page style essentialGuidance.html */
.btndvs {}

/* right side buttons */
/* vertical align top included when recomposing page to work with new presentations layout site-wide format, 270916 */
#rbtndvs {
	vertical-align: top;
}

/* player buttons */
.plybtns {
	margin-bottom: 31px;
}

/* MEDIA QUERIES to respond to narrower screen widths and enable the right div (player buttons) to slide under */
/* ! .plybtns - width: auto; max-width: 100%; overrides the img rule on main.css increasing the images, so they are kept in proportion when width is reduced */

/*#btns .plybtns {width: auto; max-width: 100%;}*/
@media (max-width: 320px) {
	#rbtndvs {
		margin-top: 10px;
		}	
}
/* ! .btndvs - display: block , allows the right div to slide under */
@media (min-width: 321px) and (max-width: 480px) {
	#mdcmpnts {
		width: 90%;
		}
	.btndvs {
		display: block;
		}
	#rbtndvs {
		margin-top: 10px;
		}
	#btns .plybtns {
		width: auto; 
		max-width: 100%;
		}
}
/* display text titles on smaller screens */
@media (max-width: 480px) {
	#mdlttl {
		display: none;
		}
	.title {
		display: block;
		}
	p.subttl {
		font-size: 1.05em;
		margin-top: -20px;
		}
}

@media (max-width: 850px) {
	#modBlrb {
		width: 80%;
		}
	.btndvs {
		width: auto; 
		margin: 0 auto;
		padding: 10px;
		}
}
@media (max-width: 950px) {
	#modBlrb {
		width: 75%;
		}
}

a {
	text-decoration: none;
}