@charset "UTF-8";
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	/* font-family: Arial, Verdana, Helvetica, sans-serif; */
	background-color: #fff;
	margin: 0;
	padding: 0;
	color: #606060;
	font-size: 12px;
	line-height: 17px;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding: 0 10px 0 10px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
h1 {
	position: absolute;
	margin: 0;
	padding: 0;
	font-family: 'Futura Book', Futura, Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-style: oblique;
}
h2 {
	font-weight: normal;
	font-style: italic;
	font-size: 14px;
	margin: 4px 0 10px 0;
}
.h2style {
	font-weight: bold;
	font-size: 14px;
}
h3 {
	font-family: 'Futura Book', Futura, Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 130%;
	margin-bottom: 8px;
}
h4 {
	font-size: 120%;
	margin: 8px 0 8px 0; 
}
/***********************************/
/* Media-based styles */
/* */
/* */
/* MOBILE or smaller */
/* */
h1 {
	top: 2px;
	font-size: 260%;
}
h1.smaller {
	top: 0px;
	font-size: 200%;
}
h1.smallest {
	top: -1px;
	font-size: 165%;
}
h1.big {
	top: 5px;
	font-size: 300%;
}
h1.bigger {
	top: 5px;
	font-size: 320%;
}
h1.biggest {
	top: 12px;
	/* font-size: 350%; */
	font-size: 450%;
}
.TopImgShiftSome {
	position: relative;
	left: 50px;
	max-width: 270px; 	/* smallest mobile window is 320px - 50px = 270px */
	max-height: 90px;
}
.TopImgShiftMore {
	position: relative;
	left: 75px;
	max-width: 245px; 	/* smallest mobile window is 320px - 75px = 245px */
		max-height: 90px;
}
.TopImgShiftMost {
	position: relative;
	left: 120px;
	max-width: 200px; 	/* smallest mobile window is 320px - 120px = 200px */
		max-height: 90px;
}

p.Audio_1, p.Audio_2, p.Score, p.Video_1, p.BuyBook {
	font-weight: bold;
}
.NotMobile, .NotMobileInline {
	display: none;
}
.NotTablet, .NotTabletInline {
	display: none;
}
.NotLarge {
	display: block;
}
.OnlyMobile {
	display: block;
}
.OnlyMobileInline {
	display: inline;
}
.OnlyTablet {
	display: none;
}
.OnlyLarge {
	display: none;
}
.PadLeftResp {
	padding-left: 8px;
}
.PadRightResp {
	padding-left: 8px;
}
.MobileHeight35 {
	max-height: 35px;
}
.MobileHeight45 {
	max-height: 45px;
}
.NavLeft {
	font-size: 12px;
	padding: 2px 8px 6px 6px;
	margin: 0;
}
.MenuRight {
	font-family: 'Monda', Verdana, Arial, Sans-Serif;
	font-weight: normal;
	/* display: block; */
	display: none;
	padding: 0 9px;
	width: 120px;
	line-height: 16px;
}
.TitleScale {
	height: 38px;
}
.TitleScaleSmall {
	height: 33px;
}
.StoreLinks {
	clear: none;
	float: left;
	/* padding-top: 15px; */
	padding-bottom: 10px;
	margin-left: 0;
	margin-bottom: 15px;
	width: 100%;
	display: block;
}
.MedHeight {
	max-height: 160px;
}
.MobilePadLeft {
	padding-left: 3%;
}
.ToggleIcon {
	left: 10px;
}
#AmazonWidget {
	display: none;
}
#WebCredit {
	display: none;/* display: inline-block; */
}
#ProjTable {
	font-size: 11px;
}
.WhiteMobile-GrayLarge {
	background-color: white;
}
.ProjTableTitle {
	padding: 0 2px 0 4px;
	min-width: 150px;
}

/* */
/* TABLET (Larger than mobile) */
/* */
@media only screen and (min-width: 481px) {
p, h3 {
	padding-left: 0;
}
h1 {
	top: 7px;
	font-size: 350%;
}
h1.smaller {
	top: 5px;
	font-size: 320%;
}
h1.smallest {
	top: 3px;
	font-size: 270%;
}
h1.big {
	top: 8px;
	font-size: 390%;
}
h1.bigger {
	top: 9px;
	font-size: 410%;
}
h1.biggest {
	top: 14px;
	font-size: 530%;
}
.TopImgShiftSome {
	position: relative;
	left: 100px;
		max-height: 110px;
}
.TopImgShiftMore {
	position: relative;
	left: 160px;
		max-height: 110px;
}
.TopImgShiftMost {
	position: relative;
	left: 240px;
		max-height: 110px;
}
p.Audio_1, p.Audio_2, p.Score, p.Video_1, p.BuyBook {
	font-weight: bold;
}
.NotMobile {
	display: block;
}
.NotMobileInline {
	display: inline;
}
.NotTablet, .NotTabletInline {
	display: none;
}
.NotLarge {
	display: block;
}
.OnlyMobile, .OnlyMobileInline {
	display: none;
}
.OnlyTablet {
	display: block;
}
.OnlyLarge {
	display: none;
}
.PadLeftResp {
	padding-left: 14px;
}
.PadRightResp {
	padding-left: 14px;
}
.MobileHeight35, .MobileHeight45 {
	max-height: none;
}
.TitleScale {
	height: 48px;
}
.TitleScaleSmall {
	height: 44px;
}
.NavLeft {
	/* display: block; */
	font-size: 13px;
}
/*
.MenuRight {
	 display: block; 
}
*/
/* Padding is added to give gray box around this div */
/* width must be reduced by the padding added to left and right */
.StoreLinks {
	clear: none;
	float: left;
	/* padding-top: 20px; */
	padding-bottom: 10px;
	padding-left: 2%;
	padding-right: 2%;
	margin-bottom: 10px;
	width: 96%;
}
.MedHeight {
	max-height: 220px;
}
.MobilePadLeft {
	padding-left: 0;
}
.ToggleIcon {
	left: 0;
}
#AmazonWidget {
	display: none;
}
#WebCredit {
	display: inline-block;
}
#ProjTable {
	font-size: 11px;
}
.WhiteMobile-GrayLarge {
	background-color: #AAA;
}
.ProjTableTitle {
	padding: 0 4px 0 8px;
	min-width: 180px;
}
}
/* */
/* DESKTOP (Larger than tablet) */
/* */
@media only screen and (min-width: 769px) {
p, h3 {
	padding-left: 0;
}
h1 {
	top: 9px; 
	font-size: 400%;
}
h1.smaller {
	top: 7px;
	font-size: 370%;
}
h1.smallest {
	top: 6px;
	font-size: 310%;
}
h1.big {
	top: 11px;
	/* font-size: 410%; */
	font-size: 440%;
}
h1.bigger {
	top: 14px;
	font-size: 500%;
}
h1.biggest {
	top: 19px;
	font-size: 640%;
}
.TopImgShiftSome {
	position: relative;
	left: 150px;
	max-height: 120px;
}
.TopImgShiftMore {
	position: relative;
	left: 240px;
	max-height: 120px;
}
.TopImgShiftMost {
	position: relative;
	left: 360px;
	max-height: 120px;
}
p.Audio_1, p.Audio_2, p.Score, p.Video_1, p.BuyBook {
	font-weight: normal;
}
.NotMobile {
	display: block;
}
.NotMobileInline {
	display: inline;
}
.NotTablet {
	display: block;
}
.NotTabletInline {
	display: inline;
}
.NotLarge {
	display: none;
}
.OnlyMobile, .OnlyMobileInline {
	display: none;
}
.OnlyTablet {
	display: none;
}
.OnlyLarge {
	display: block;
}
.PadLeftResp {
	padding-left: 20px;
}
.PadRightResp {
	padding-left: 20px;
}
.MobileHeight35, .MobileHeight45 {
	max-height: none;
}
.TitleScale {
	height: 54px;  /* was 65 then 54 */
}
.TitleScaleSmall {
	height: 45px;  /* was 55 */
}
.NavLeft {
	font-size: 14px;
}
/*
.MenuRight {
	display: none;
}
*/
.StoreLinks {
	clear: both;
	float: right;
	/* padding-top: 15px; */
	padding-bottom: 10px;
	padding-left: 3%;
	padding-right: 3%;
	margin-bottom: 25px;
	width: 94%;
}
.MedHeight {
	max-height: 260px;
}
.MobilePadLeft {
	padding-left: 0;
}
.ToggleIcon {
	left: 0;
}
#AmazonWidget {
	display: block;
}
#WebCredit {
	display: inline-block;
}
#ProjTable {
	font-size: 12px;
}
.WhiteMobile-GrayLarge {
	background-color: #AAA;
}
.ProjTableTitle {
	padding: 0 4px 0 8px;
	min-width: 200px;
}
}
/* */
/* Mobile again */
/*   If I put this in the first set of Mobile css, I can't figure out how to cleanly negate it for the other media sizes */
/* */
@media only screen and (max-width: 480px) {
.ProjTableNotes {
	visibility: collapse;
	display: none;
}
}
/**************************/
/* LINKS 
*/
a img { /* removes the default blue border around an image when it is surrounded by a link */
	border: none;
}
/* ~~ Styling must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #439;
	text-decoration: underline; /* it's best to provide underlines for quick visual identification */
	border: none;
	background-color: inherit;
}
a:visited {
	color: #727;
	border: none;
	background-color: inherit;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #E00;
}
#Header a:link, #Header a:visited, #Footer a:link, #Footer a:visited {
	color: white;  /* So menu items stay white */
	text-decoration: none;
	border: none;
	background-color: inherit;
}
#Header a:hover, #Header a:active, #Header a:focus, #Footer a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #B00;
}
#NavLeft a:link, #NavLeft a:visited {
	color: #B0D0E0;  /* So menu items maintain color */
	text-decoration: none;
	border: none;/* background-color: inherit; */
}
#NavLeft a:hover, #NavLeft a:active, #NavLeft a:focus {
	color: #E00;
}
.StoreLinks a:link, .StoreLinks a:visited, .Audio_1 a:link, .Audio_1 a:visited, .Audio_2 a:link, .Audio_2 a:visited {
	color: white;  /* So menu items stay white */
	text-decoration: none;
	border: none;
	background-color: inherit;
}
.StoreLinks a:hover, .StoreLinks a:active, .StoreLinks a:focus, .Audio_1 a:hover, .Audio_1 a:active, .Audio_1 a:focus, .Audio_2 a:hover, .Audio_2 a:active, .Audio_2 a:focus {
	color: #E00;
}
.WhiteLinks a:link, .WhiteLinks a:visited {
	color: white;  /* So menu items stay white */
	text-decoration: none;
	border: none;
	background-color: inherit;
}
.LtBlueLinks a:link, .LtBlueLinks a:visited {
	color: #B0D0FF;  /* So menu items stay white */
	text-decoration: none;
	border: none;
	background-color: inherit;
}
.LtBlueLinks a:hover, .LtBlueLinks a:active, .LtBlueLinks a:focus, .WhiteLinks a:hover, .WhiteLinks a:active, .WhiteLinks a:focus {
	color: #E00;
}
/********  Rollover Captions ***********/
/*****  Z-index method works well on all platforms, but can't fade-in / out
*/
.captionFrame1 {
	display: inline-block;
}
.captionImage1 {
	position:relative;  
	z-index: 10;
}
.captionImage1:hover, .captionImage:active, .captionImage:focus {
	z-index: 0;
}
.captionText1 {
	color: #CCC;
	position:relative; top:-20px;  left: 0;
	/* height: 100%; width: 100%; */
	z-index:5;
	padding: 10px;
}
/***** For some reason the opacity method is only working on computer screens
/*****  Preferred approach because it allows an animated transition of caption
*/
.captionImage {
	/* display: inline-block: img doesn't adapt to width in Firefox */
	clear: both;
	position:relative;
	z-index: 5;
}
.captionText {
	color: #FFF;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 95%; 
	z-index: 10;
	padding: 10px 0 0 10px;
	opacity: 0.0;
	filter: alpha(opacity=0); /* For IE8 and earlier */
	cursor: pointer;
 }
 .Top {
	 top: 0;
 }
 /* This is a messy approach to control vertical spacing of photo captions */
 .captionVert20 {
	 position: absolute; 
	 top: 20%; 	margin-top: -1em;
 }
  .captionVert30 {
	 position: absolute; 
	 top: 30%; 	margin-top: -1em;
 }
 .captionVert40 {
	 position: absolute; 
	 top: 40%; 	margin-top: -1em;
 }
 .captionVert50 {
	 position: absolute; 
	 top: 50%; 	margin-top: -1em;
 }
.captionVert60 {
	 position: absolute; 
	 top: 60%; 	margin-top: -1em;
 }
.captionVert70 {
	 position: absolute; 
	 top: 70%; 	margin-top: -1em;
 }
.captionVert80 {
	 position: absolute; 	
	 top: 80%; 	margin-top: -1em;
 }
.captionVert85 {
	 position: absolute; 	
	 top: 85%; 	margin-top: -1em;
 }
.captionVert90 {
	 position: absolute; 	
	 top: 90%; 	margin-top: -1em;
 }
.captionText:hover /*, .captionText:active, .captionText:focus */  {
	opacity: 1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}
/******************************/
.toTopBox {
	display: block;
	float: left;
	clear: both;
	width: 100%;
}
.toTopTri {
	display: block;
	float: right;
	clear: both;
	padding: 0px 4px 3px 4px;
	margin: 0px 4px 4px 4px;
}
a.toTopTri {
	width : 9px;
	height : 9px;
	background: url("/graphics/Dings/tri_up_ltrblue.gif") no-repeat center top;
}
a.toTopTri:hover {
	width : 9px;
	height : 9px;
	background: url("/graphics/Dings/tri_up_red.gif") no-repeat center top;
}
/******************************/
/*  Drop-down Menu 
/*     from http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
*/
#Header nav ul ul {
	display: none; 	/* Hide sub-menus */
}
#Header nav ul li:hover > ul {
	display: block; 	/* Display sub-menus on hover */
}
/************/
#Header nav ul {
	padding: 0 7px 0 7px;
	list-style: none;
	position: relative;
	display: inline-table; 
	/* display: inline; */
}
#Header nav ul:after {
	content: "";
	clear: both;
	display: block;
}
/************/
#Header nav ul li {
	float: left;
}
/* nav ul li:hover {
/* 	background: #909090; /* get rid of this */
/* }
*/
#Header nav ul li:hover a {
	color: red; /* 14-02-24 white */
}
#Header nav ul li a {
	/* display: block; 	/* CB 14-02-24 nullifying NotTabletInline? *?
	/* padding: 25px 40px; */
	padding: 0px 7px 4px 7px; 
	/* color: #999;  /* removed for Top Menu */
	text-decoration: none;
}
/************/
#Header nav ul ul {
	background: #AAA;
	padding: 0;
	position: absolute;
	top: 100%;
}
#Header nav ul ul li {
	float: none;
	line-height: 120%;
	border-top: 1px solid #808080;
	border-bottom: 1px solid #A0A0A0;
	position: relative;
}
#Header nav ul ul li a {
	/* padding: 15px 40px; */
	/* width: 110px; */
	left: -60px;
	padding: 0 7px 0px 7px;
	/* color: #fff;	/* removed for Top Menu */
}
#Header nav ul ul li a:hover {
	background: #909090;
}
#Header nav ul ul ul {
	position: absolute;
	left: 100%;
	top: 0;
}
/************/
.DropMenu {
	font-family: 'Monda', Verdana, Arial, Sans-Serif;
	font-weight: normal;
	/* display: none; */
	display: block;
	padding: 0 9px;
	width: 120px;
	/* background-color: #AAA; /* necessary? */
}
/******************************/
/*  General Formatting Classes 
*/
.PadTop {
	padding-top: 15px;
}
.PadTopMore {
	padding-top: 30px;
}
.PadRight {
	padding-right: 15px;
}
.PadBottom {
	padding-bottom: 15px;
}
.PadBottomMore {
	padding-bottom: 30px;
}
.PadLeft {
	padding-left: 15px;
}
.PadLeftMore {
	padding-left: 30px;
}
.PadNone {
	padding: 0 0 0 0;
}
.MarginTop {
	margin-top: 15px;
}
.MarginTopMore {
	margin-top: 30px;
}
.MarginRight {
	margin-right: 15px;
}
.MarginBottom {
	margin-bottom: 15px;
}
.MarginBottomMore {
	margin-bottom: 30px;
}
.MarginLeft {
	margin-left: 15px;
}
.MarginNone {
	margin: 0 0 0 0;
}
.CenterBlock {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.smallfont {
	font-size: 0.7em;
}
.largefont {
	font-size: 1.1em;
}
.Bold {
	font-weight:bold;
}
.displayInline {
	display: inline;
}
.floatLeft {
	float: left;
}
.floatRight {
	float: right;
}
.ClearBoth {
	clear:both;
}
.ClearNone {
	clear: none;
}
.Border25 {
	margin: 25px;
	border-style: solid;
	border-color: #AAA;
}
.Border20 {
	margin: 20px;
	border-style: solid;
	border-color: #AAA;
}
.Border15 {
	margin: 15px;
	border-style: solid;
	border-color: #AAA;
}
/******************************/
/*  Specific Formatting Classes 
*/
.Header {
	background-color: #AAA;
}
.HeaderMenuLeft {
	font-family: Monda, Verdana, Arial, Sans-Serif;
	font-weight: bold;
	font-size: 14px;
	display: inline;
	height: 100%;
	padding: 4px 6px 4px 0px;
	margin: 0;
}
.SubHeader {
	color: #AAA;
	/* background-color: #E11; */
	background-color: #D00022; /* to match gradient of TitleRed */
}
.TitleWhite {
	color: #AAA;
	background-color: white;
	border-bottom-style: solid;
	border-bottom-color: #E11;
	border-bottom-width: 2px;
}
.TitleRed {
	color: #AAA;
	/* background-color: #E11; */
	background: -webkit-linear-gradient(#FF2010, #D00022); /* For Safari */
	background: -o-linear-gradient(#FF2010, #D00022); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#FF2010, #D00022); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#FF2010, #D00022); /* Standard syntax */
}
/* UNUSED
.TitleTall {
	min-height: 65px;
}
.TitleMedium {
	min-height: 50px;
}
.TitleShort {
	min-height: 35px;
}
*/
.NavLeft {
	display: block;
	background-color: black;
	/* line-height: 17px; */
	list-style-type: none;
}
.NavActive {
	color: white;
	font-weight: bold;
}
.Audio, .Audio_1, .Audio_2, .Video_1 {
	background-color: #ccc;
	color: white;
}
h3.Audio_1 {
	color: #206717;
	font-family: "Futura Book", Futura-Book, Verdana, Arial, Helvetica, sans-serif;
}
h3.Audio_2 {
	color: #660099;
	font-family: "Futura Book", Futura-Book, Verdana, Arial, Helvetica, sans-serif;
}
a.StoreProduct {
	display: block;
}
/*
,StoreProduct td {
	height: 100px;
	vertical-align:middle;
}
.StoreProduct td a {
	display: block;
	height: 100px;
	width: 100%;
	vertical-align:middle;
	text-decoration: none;
}
*/
/**********************************************************************/
/*  For Sliding Div's - as in Question and Answer
*/
.ToggleIcon {
	position: relative;
	top: -2px;
	width: 13px;
	padding: 0;
	display: inline;
	float: left;
}
.ClosedIcon {
	display: inline;
}
.OpenIcon {
	display: none;
}
.QA {
	padding: 10px 0 12px 0;
	clear: both;
}
.Q {
	position: relative;
	left: 6px;
	display: inline;
	float: left;
	width: 94%;
}
.A {
	position: relative;
	left: 28px;
	display: none;
	clear: both;
	width: 92%;
	font-style: italic;
}
.A-Normal {
	position: relative;
	left: 6px;
	display: none;
	clear: both;
	width: 94%;
}
/**********************************************************************/
/*  videoWrapper tames YouTube iframes
*/
.videoWrapperFlush {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
}
/* videoWrapper allows YouTube iframes to adjust size as viewport changes */
.videoWrapperFlush iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.videoWrapperPad {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
}
/* videoWrapper allows YouTube iframes to adjust size as viewport changes */
/* width is 95% because 100% pushed it to edge */
.videoWrapperPad iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 95%;
	height: 100%;
}
/**************************************/
/* Used to create white space on page 
*/
.Height40 {
	clear: both;
	min-height: 40px;	height: 40px;
}
.Height60 {
	clear: both;
	min-height: 60px;	height: 60px;
}
.Height80 {
	clear: both;
	min-height: 80px;	height: 80px;
}
.Height100 {
	clear: both;
	min-height: 100px;	height: 100px;
}
.Height150 {
	clear: both;
	min-height: 150px; 	height: 150px;
}
.Height200 {
	clear: both;
	min-height: 200px;	height: 200px;
}
.Height250 {
	clear: both;
	min-height: 250px;	height: 250px;
}
.Height300 {
	clear: both;
	min-height: 300px;	height: 300px;
}
.Height400 {
	clear: both;
	min-height: 400px;	height: 400px;
}
/**********************************************************************/
/*  COLORS
*/
.Black {
	color: black;
}
.GrayDark {
	color: #555;
}
.GrayMedium {
	color: #888;
}
.GrayLight {
	color: #AAA;
}
.GrayLighter {
	color: #CCC;
}
.Red {
	color: #E11;
}
.White {
	color: #F0F0F0;
}
.Reviews {
	color: #880000 !important;
}
.FilmInfo {
	color: #C00080 !important;
}
.FilmNotes {
	color: #6655aa !important;
}
.LinerNotes {
	color: #4DADAB !important;
}
h3.Video_1 {
	color: #C63000 !important;
	font-family: "Futura Book", Verdana, Arial, Helvetica, sans-serif;/* font-size:125%; */
}
.BuyCD {
	color: #4040d0 !important;/* margin-bottom: 0; */
}
.BuyDVD {
	color: #a040d0 !important;
}
.BuyBook {
	color: #407060 !important;
}
.BuyScore {
	color: white;
	background-color: #ccc;
}
h3.BuyScore {
	color: #E000B0 !important;
}
.Video {
		color: #C63000 !important;
}
.DownloadVideo {
	color: #cc3000 !important;
}
.DownloadSoundtrack {
	color: #007090 !important;
}
.ProdNotes {
	color: #cc4400 !important;
}
.CarterNotes {
	color: #002070 !important;
}
.FilmStills {
	color: #d58033 !important;
}
.Links {
	color: #e0a022 !important;
}
.iTunes {
	color: #B2153C !important;/* padding-top: 11px;
	padding-bottom: 10px; */
}
.WMA {
	color: #660099 !important;
}
.Score {
	color: #E000B0 !important;
}
.StoreLinks {
	background-color: #ccc;
}
.StoreProduct {
	background-color: #b0b0b0;
}
/*
/* Background classes
*/
.BlackBG {
	background-color: black;
}
.GrayDarkBG {
	background-color: #555;
}
.GrayMediumBG {
	background-color: #888;
}
.GrayLightBG {
	background-color: #AAA;
}
.GrayLighterBG {
	background-color: #CCC;
}
.DarkBkgrd {
	background-color: #7f7f7f;
}
.LiteBkgrd {
	background-color: #f0f0f0;
}
.WhiteBkgrd {
	background-color: #FFFFFF;
}
.GreenBkgrd {
	background-color: #c0ffd7;
}
.PeriwinkleBkgrd {
	background-color: #CCC6FA;
}
.PinkBkgrd {
	background-color: #ffddee;
}
/**********************************************************************/
/*  Commerce Styles
*/
.DownloadAmazon {
	font-family: "Futura Book", Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	/* font-size: 115%; */
	color: #eee;
	background-color: #007090 !important;
	vertical-align: middle;
	padding: 4px;
}
.DownloadiTunes {
	font-family: "Futura Book", Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	/* font-size: 115%; */
	color: #eee;
	background-color: #700090 !important;
	vertical-align: middle;
	padding: 4px;
}
.BuyCDAmazon {
	font-family: "Futura Book", Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	/* font-size: 115%; */
	color: #eee;
	background-color: #4040d0 !important;
	vertical-align: middle;
	padding: 4px;
}
.BuySheetMusicAmazon {
	font-family: "Futura Book", Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	/* font-size: 115%; */
	color: #eee;
	background-color: #E000B0 !important;
	vertical-align: middle;
	padding: 4px;
}
/* Project Table Classes */
.ProjTableHeader {
	font-weight: bold;
	height: 24px;
}
.ProjTableImg {
	min-width: 50px;
	min-height: 50px;
	vertical-align: middle;
}
.ProjTableTitle {
	vertical-align: middle;
}
.ProjTableType {
	padding: 0 4px 0 4px;
	vertical-align: middle;
	background-color: #f0f0f0;
}
.ProjTableDate {
	padding: 0 4px 0 4px;
	text-align: center;
	vertical-align: middle;
}
.ProjTableNotes {
	padding: 0 4px 0 4px;
	vertical-align: middle;
	background-color: #f0f0f0;
}
/**************/
/***** IDs ****/
/**************/
/* duplicates open Toggle class settings - can I avoid duplication? */
/* maybe just highlight the appropriate question - don't worry about opening? */
/* 
/*	Removed this because it was affecting the entry in its normal form
#Unreleased_ScoresA {		
	position: relative;
	left: 6px;
	display: inline;
	float: left;
	width: 94%;
}
*/
#Header {
	position: fixed;
	/* color: white; */
	width: inherit;
	/* max-width: 1232px; */
	max-width: 1100px;
	height: 23px; /* This plus vertical padding makes entire height */
	padding-top: 4px;
	margin: 0;
	vertical-align: baseline;
	z-index: 100;
}
#HeaderSpacer { /* This takes up the same space as the Header (because element flow ignores the Header as fixed */
	position: relative;
	height: 27px;
	clear: both;
	width: 100%;
	display: block;
}
#SubHeader {
	position: fixed;
	width: inherit;
	/* max-width: 1232px; */
	max-width: 1100px;
	height: 27px;
	padding: 0;
	margin: 0;
	z-index: 10; /* By setting this below z-index of Title, it is hidden beneath the Title until the user scrolls down */
}
#Home {
	display: inline-block;
	width: 14px;
	height: 12px;
	background: url("/graphics/Badges-Icons/HomeDoorWhiteRed_1.png") no-repeat 0 0;
	background-clip: content-box;
}
#Home:hover {
	background-position: 0 -13px;
}
#Home span {
	position: absolute;
	top: -999em;
}
#Title {
	color: #AAA;
	position: relative;
	z-index: 70;
}
#TitleLeft {
	height: inherit;  /* does this do anything? */
}
#NavLeft {
	/* position: relative; */
	z-index: 20;
}
#MenuRight {
		background-color: #999999;
}
#TopImg {
	/* position: relative; */
	padding: 0;
	margin: 0;
	z-index: 1;
}
#Box_2_White {
	background-color: white;
}
#Col_2 {
	background-color: white;
}
#Col_3 {
	background-color: white;
}
#Quotes {
	width: 75%;
	padding: 10px 10px 5px 15px;
}
#Footer {
	position: fixed; 	/* stick to bottom of screen */
	bottom: 0; 			/* stick to bottom of screen */
	font-family: Monda, Verdana, Arial, Sans-Serif;
	background-color: #AAA;
	min-height: 35px; 	/* add height so that small screen buttons aren't too close to bottom */
	/* width: 100%;  */
	width: inherit;
	max-width: 1100px; /* same as Header */
	padding: 0;
	margin: 0;
	z-index: 30;
}
#FooterNav {
	display: inline-block;
 	float: left:
}
#FooterSpacer { /* This takes up the same space as the Footer (because element flow ignores the Footer as fixed */
	position: relative;
	height: 35px;
	clear: both;
	width: 100%;
	display: block;
}

#WebCredit {
	position: relative;
	top: 8px;
	right: 12px;
	float: right;
	color: #D8D8D8;
}
#Share {
	position: relative;
	top: 8px;
	right: 12px;
	float: right;
	z-index: 40;
}