#Full					{ display: none; }
#Mobile					{ display: none; padding-top: 5px; }

.adIsDesktop			{}
.adIsMobile				{}

.mobileJSHeader			{ padding: 8px; text-align:center; font: bold 12pt "GothamRounded-Medium", Arial, serif; color: #ffde00; 
							background-image: url('https://www.jazzstandards.com/images/blackbarMobile.gif'); background-repeat: repeat-x;
							border-left-width: 1px; border-left-color: #ffde00; border-left-style: solid; border-right-width: 1px; border-right-color: #ffde00; border-right-style: solid; }	
.mobileJSBody			{ font-family: Verdana; color: #402010; background-color: #FFEBB2; text-align:left; border: 3px solid #ffde00; padding: 10px 10px 10px 10px; }
.mobileJSNoVertPad		{ padding-top: 0; padding-bottom: 0; }
.mobileJSSpacer			{ height: 6px; }
.mobileMainDiv			{ margin: 0; }
.mobileContentsMoreLess	{ color: #400000; text-decoration: underline; float: right; font-weight: bold; }
#mobileMainDivContents	{ margin: -2px 0 0 0; }
#iFrameDiv				{ width: 289px; margin: 0 auto; }
#mobileVideo			{ display: none; margin-bottom: 10px; }
#mobileAudioPreface		{ display: none; text-align: center; }
#mobileComments			{ position: absolute; bottom: 10px; left: 10px; width: 300px; }
#mobileHomeImage		{ opacity: 0.5; width: 100%; height: auto; }
.JSiTunesBody			{ width: 289px; margin: 0 auto; }
.JSComment				{ display: none; font-family: Verdana; font-size: 10pt; color: #FFBE00; text-align: left; }
.JSComment a			{ color: #FFDE00; }
.JSFooter				{ font-size: 10pt; }
body					{ margin: 0; }


/* #Media Queries
================================================== */


/* #Base 960 grid
================================================== */

		.IsDesktop                                  { display: block; }
		.IsMobile                                   { display: none; }
		
		.menuBar									{ cursor: pointer; width: 100%; display: block; position: fixed; top: 0; left: 0; margin: 0;
				        								border-top-style: solid; border-top-color: #100000; border-top-width: 2px; z-index: 5; }
		.menuOptions								{ width: 283px; position: fixed; top: 0; left: 0; display: none; z-index: 5; }
		.menuOption									{ cursor: pointer; width: 120px; height: 30px;  float: left; margin-top: -1px;
				               							padding: 10px; background-color: #100000;
				               							border-color: #ffde00; border-style: solid; border-width: 1px; }
		.menuOption p								{ font: bold 14pt "GothamRounded-Medium", Arial, serif;
														text-align: center; color: #ffde00;
														position : relative; margin-top: 7px; }
		.menuOptionLeft								{ margin-right: -1px; }
		.menuOptionPair								{ clear: left; position: relative; }
		.menuOptionFullWidth						{ width: 261px; }
		.logo										{ float: left; width: 100%; height: auto; }  
		.mobileJSCdButtons							{ text-align: center; }
		.JSNavigation								{ padding: 1px; height: 35px; width: 20px; }
		.JSTitleBlock								{ margin-bottom: 6px; }
		.JSRecommendationText						{ font-size: xx-small; }
		.JSRecommendationTitle						{ font-size: x-small; }				

/* #SuperDesk1
================================================== */
	/* Note: Design for a width of 1280px */
	@media only screen and (min-width: 1380px) 
	{
		.IsDesktop                                  { display: block; }
		.IsMobile                                   { display: none; }
	}

/* #SuperDesk2
================================================== */
	/* Note: Design for a width of 1120px */

	@media only screen and (min-width: 1220px) and (max-width: 1379px) 
	{
		.IsDesktop                                  { display: block; }
		.IsMobile                                   { display: none; }
	}        

/* #Tablet (Portrait) - Add item to this and not the mobile definitions, below, for all handheld devices
================================================== */
	/* Note: Design for a width of 768px */

	@media only screen and (min-width: 768px) and (max-width: 959px) {

		h1                                          { margin: 0 0 10px 0; font-size: 22px; line-height: 26px; color: #700000; }
		h2                                          { margin: 0; font-size: 20px; line-height: 24px; font-style: italic; color: #400000; }
		div, td, p, .JSBody							{ font-size: 16px; line-height: 22px; }
		ul, ol                                      { font-size: 16px; line-height: 26px; }
		p                                           { margin: 0; margin-bottom: 10px; }
		
		.IsDesktop                                  { display: block; }
		.IsMobile                                   { display: none; }
		
		.mobileJSCdButtons							{ text-align: center; margin-top: 15px; }
		.JSTitleBlock								{ margin-bottom: 2px; }
		.JSRecommendationText						{ font-size: smaller; line-height: 18px; }
		.JSRecommendationTitle						{ font-size:inherit; line-height: 18px; }
		.JSContentsLine								{ height: 30px; }
		.JSComment p								{ font-size: 10pt; }
		.JSFooter p									{ font-size: 10pt; }
	}

/*  #Mobile (Portrait) - Add items to this and not the mobile definition, below, for all mobile devices
	To faciliate the previous statement, 320px is before 480px
================================================== */
	/* Note: Design for a width of 320px */

	@media only screen and (max-width: 767px) {

		h1                                          { margin: 0 0 10px 0; font-size: 30px; line-height: 36px; color: #700000; }
		h2                                          { margin: 0; font-size: 25px; line-height: 30px; font-style: italic; color: #400000; }
		div, td, p, .JSBody							{ font-size: 16px; line-height: 22px; }
		ul, ol                                      { font-size: 16px; line-height: 26px; }
		p                                           { margin: 0; margin-bottom: 10px; }
		
		.IsDesktop                                  { display: none; }
		.IsMobile                                   { display: block; }

		.mobileJSCdButtons							{ text-align: center; margin-top: 15px; }
		.JSTitleBlock								{ margin-bottom: 6px; }
		.JSRecommendationText						{ font-size: smaller; line-height: 18px; }
		.JSRecommendationTitle						{ font-size:inherit; line-height: 18px; }
		.JSContentsLine								{ height: 30px; }
		.JSComment p								{ font-size: 10pt; }
		.JSFooter p									{ font-size: 10pt; }
	}

/* #Mobile (Landscape)
================================================== */
	/* Note: Design for a width of 480px */

	@media only screen and (min-width: 480px) and (max-width: 767px) {

		h1                                          { margin: 0 0 10px 0; font-size: 20px; line-height: 26px; color: #700000; }
		h2                                          { margin: 0; font-size: 25px; line-height: 30px; font-style: italic; color: #400000; }
		div, td, p, .JSBody							{ font-size: 16px; line-height: 22px; }
		ul, ol                                      { font-size: 16px; line-height: 26px; }
		p                                           { margin: 0; margin-bottom: 10px; }
		
		.IsDesktop                                  { display: none; }
		.IsMobile                                   { display: block; }

		.mobileJSCdButtons							{ text-align: center; margin-top: 15px; }
		.JSTitleBlock								{ margin-bottom: 6px; }
		.JSRecommendationText						{ font-size: smaller; line-height: 18px; }
		.JSRecommendationTitle						{ font-size:inherit; line-height: 18px; }
		.JSContentsLine								{ height: 30px; }
		.JSComment p								{ font-size: 10pt; }
		.JSFooter p									{ font-size: 10pt; }
	}
	
/* Google search CSS
=================================================== */