/*Second Level Overlay*/
	/*Second Level Overlay which opens when a user selects a specific Rod and Shot/Pass Type*/
	.customclass-seclvl-overlay-class {
		position:absolute;
		display:block;
		left: 0;
		top: 0;
		width: 0;
		max-width:100%;
		border-style:solid;
		border-width:2px;
		border-color:rgb(239,240,239);
		z-index: 8; /* Sit on top */
		background-color: rgb(0,0,0); /* Black fallback color */
		background-color: rgba(255,255,255, 1);
		/*overflow: auto;  /* Enable or Disable horizontal scroll */
		overflow:auto;
		transition: 0.01s; /* 0.5 second transition effect to slide in or slide down the */	
	}


	.customclass-seclvl-overlay-header-class {
		text-align:center;
		font-size: 18px;
		font-weight:bold;
		color:white;
		height:20px;
		background-color: rgb(255, 153, 0);	
	}

	.close-customclass-secondlevel-img-class {
		position: absolute;
		display:block;
		background:none;
		height:20px;
		top: 4px;
		left: -3px;
		font-size: 25px;
		z-index:9;
		text-decoration:none;
	}


	/* Position the close button (top right corner) */
	.customclass-seclvl-overlay-class .closeCustomClassSecondLevelbtn {
		position: absolute;
		display:block;
		color:black;
		top: -4px;
		left: 5px;
		font-size: 25px;
		z-index:9;
		text-decoration:none;
	}	

	.customclass-seclvl-headervideoimg-div-class {
		position:relative;
		margin:0;
		padding:0;
	}

	.customclass-seclvl-headervideoimg-table-class {
		display: table;   /* Allow the centering to work */
		margin: 0 auto;
	}

	/*A User can pick between iframe, Video, Image within the Second Level Header.*/
	/*So we need to be ready to format whatever is built within the JS AJAX Result*/
		.customclass-seclvl-header-iframe-class {
			width:90%;
			max-width:350px;
			height:200px;
		}
	
		.customclass-seclvl-header-video-class {
			width:90%;
			max-width:350px;
			height:200px;
		}
		
		.customclass-seclvl-header-image-class {
			width:90%;
			width:auto;
			max-width:350px;
			height:200px;
		}		
	/*-------------------------------------------*/
	

	.customclass-seclvl-tabs-div-id {
		display:block;
		position:relative;
		margin:0;
		padding:0;
	}
	
	/* Style seclvl tab buttons */
	.customclass-seclvl-tab-buttons-class:hover {
		background-color: #777;
	}

	.customclass-seclvl-tab-buttons-class {
		background-color: rgb(245,245,245);
		color: black;
		float: left;
		border: none;
		outline: none;
		cursor: pointer;
		margin:0;
		padding: 2px 2px;
		font-size: 12x;
		width: 25%;
	}


	/*Once the User selects a Tab, this is the Tab Content Area*/
	.customclass-seclvl-tabcontent {
		position:relative;
		margin:0;
		padding:0;
	}

	.cc-seclvl-h3-intro-tab-title-class {
		padding-top:10px;
		text-align:center;	
	}

	.cc-seclvl-h3-resources-tab-title-class {
		padding-top:10px;		
		text-align:center;	
	}
	
	.cc-seclvl-h3-protips-tab-title-class {
		padding-top:10px;		
		text-align:center;	
	}
	
	.cc-seclvl-h3-lessons-tab-title-class {
		padding-top:10px;		
		text-align:center;	
	}


	.cc-intro-paragragh-div-class {
		margin:0;
		margin-left:5px;
		margin-right:5px;
		
		border-style:solid;
		border-width:1px;
		border-color:rgb(247,234,199);
		
		border-radius:15px;
	}
	
	.cc-intro-paragragh-div-class > p {
		font-size:14px;
		font-weight:normal;
		margin:0;
		margin-bottom:30px;
		padding-top:7px;
		padding-left:7px;
		padding-right:5px;
		padding-bottom:10px;
		background-color:rgba(81,229, 121, 1);
		color:black;
		border-radius:15px;

	}





	/*Format the List of Resources*/

	.cc-resource-div-class-x {
		display:flex;
		font-size:14px;
		position:relative;
		min-height:50px;
		max-height:150px;
		margin-left:3px;
		margin-right:3px;
		margin-bottom:5px;
		background-color:rgb(245,245,245);
		overflow:auto;
		transition:.5;				
	}
	
	.cc-resource-list-videoimg-div-class {
		display:block;
		height:100px;
		width:160px;
		margin-top:10px;
	}

	/*--Resources Types Supported---*/
		.cc-resource-list-img-class {
			max-height:90px;
			max-width:160px;		
		}
	
		.cc-resource-list-iframe-class {
			height:90px;
			width:160px;
		}

		.cc-resource-list-video-class {
			height:90px;
			width:160px;
		}		
	/*--------------------------------*/	
	
	.cc-resource-list-text-div-class {
		display:block;
		margin-top:10px;
		margin-left:5px;
		font-weight:bolder;
	}

	.cc-resource-list-title-class {
		font-weight:bold;
		color:blue;
	}


	/*Format the List of Pro Tips*/

	.cc-protip-div-class-x {
		display:flex;
		font-size:14px;
		position:relative;
		min-height:50px;
		max-height:150px;
		margin-left:3px;
		margin-right:3px;
		margin-bottom:5px;
		background-color:rgb(245,245,245);	
		overflow:auto;
		transition:.5;		
	}
	
	.cc-protip-list-videoimg-div-class {
		display:block;
		height:100px;
		width:160px;
		margin-top:10px;
	}

	/* Pro Tip Media Types*/
		.cc-protip-list-img-class {
			max-height:90px;
			max-width:160px;
		}
	
		.cc-protip-list-iframe-class {
			height:90px;
			width:160px;
		}
	
		.cc-protip-list-video-class {
			height:90px;
			width:160px;
		}
	/*-----------------------*/
	
	.cc-protip-list-text-div-class {
		display:block;
		margin-top:10px;
		margin-left:5px;
		font-weight:bold;
		padding-bottom:10px;
	}

	.cc-protip-list-title-class {
		font-weight:bold;
		color:blue;
	}

	.cc-protip-list-credit-class {
		font-weight:normal;
	}

	.cc-protip-list-descrip-class {
		margin-bottom:10px;
		font-weight:normal;
	}