<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">
<xsl:stylesheet version="3.0" 
				xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
				xmlns:xs="http://www.w3.org/2001/XMLSchema"
				xmlns:ou="http://omniupdate.com/XSL/Variables"
				xmlns:fn="http://omniupdate.com/XSL/Functions"
				xmlns:v-if="https://vuejs.org/v2/api/#v-if"
				xmlns:v-for="https://vuejs.org/v2/api/#v-for"
				xmlns:v-model="https://vuejs.org/v2/api/#v-model"
				xmlns:v-bind="https://vuejs.org/v2/api/#v-bind"
				xmlns:v-on="https://vuejs.org/v2/api/#v-on"
				xmlns:ref="https://vuejs.org/v2/api/#ref"
				xmlns:ouc="http://omniupdate.com/XSL/Variables"
				exclude-result-prefixes="ou xsl xs fn ouc v-if v-on v-for v-bind v-model ref">
	
	<xsl:import href="ou-variables.xsl" />
	
	
	<xsl:output method="html" 
	version="5.0" 
	indent="yes" 
	encoding="UTF-8" 
	omit-xml-declaration="yes"  />

	<xsl:variable name="path" select="concat(substring-before($ou:path, '.'), '.shtml')" />
	<xsl:variable name="noIndex" select="concat(substring-before($path, 'index.shtml'), '')" />
	
	<!-- START DOCUMENT -->
	<xsl:template match="/document">
		<html lang="en">
			<head>
				<!-- SETUP META -->
				<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
				<meta charset="utf-8" />
				<meta http-equiv="X-UA-Compatible" content="IE=edge" />
				<meta name="viewport" content="width=device-width, initial-scale=1" />
					
				<!-- PAGE TITLE -->
				<title><xsl:value-of select="title" /></title>
				
				<!-- PAGE META -->
				<xsl:copy-of select="metadata/meta" />
				
				<!-- OG DATA -->
				<meta property="fb:app_id" content="273111086532507" />
				<meta property="og:title" content="{ouc:properties/parameter[@name='og-title']}" />
				<meta property="og:description" content="{ouc:properties/parameter[@name='og-description']}" />
				<meta property="og:image" content="{ouc:properties/parameter[@name='og-image']}" />
				<meta property="og:url" content="https://www.cscc.edu{$path}" />
				<meta property="og:type" content="website" />
				
				<!-- TWITTER -->
				<meta name="twitter:card" content="summary" />
				<meta name="twitter:site" content="@cscc_edu" />
				<meta name="twitter:title" content="{ouc:properties/parameter[@name='og-title']}" />
				<meta name="twitter:description" content="{ouc:properties/parameter[@name='og-description']}" />
				<meta name="twitter:image" content="{ouc:properties/parameter[@name='og-image']}" />
				
				<!-- Site Icon -->
	  			<link rel="shortcut icon" sizes="16x16 32x32 64x64 120x120 128x128 180x180 196x196" href="/_resources/images/icon/favicon.ico" />
				
				<!-- CANONICAL -->
				<xsl:choose>
					<xsl:when test="contains($path, 'index')">
						<link rel="canonical" href="https://www.cscc.edu{$noIndex}" />
					</xsl:when>
					<xsl:otherwise>
						<link rel="canonical" href="https://www.cscc.edu{$path}" />
					</xsl:otherwise>
				</xsl:choose>
				
							
				<!-- SITE STYLES -->
				<xsl:copy-of select="site-styles/node()" />
	
			</head>
			
			<body>
				
				<!-- SCREEN READER -->
				<xsl:copy-of select="screen-reader/node()" />
				
				<!--ALERT -->
				<xsl:copy-of select="site-alert/node()" />
				
				<!-- SITE HEADER -->
				<xsl:copy-of select="site-header/node()" />
				
				<!-- SITE NAV -->
				<xsl:copy-of select="site-nav/node()" />
				
				
				
				
				
				
				
				<main id="content" class="cd-main-content">
					<div class="container">
	
						<!-- HERO IMAGE INNER -->
						<div class="full-width-image">
							<xsl:apply-templates select="content/hero-image/node()" />
						</div>
						
						<!-- BREADCRUMB -->
						<nav aria-label="breadcrumbs">
						<xsl:copy-of select="content/breadcrumb/node()" />
						</nav>	
						<!-- CONTENT -->
						<div>
							<!-- GET CONTENT FROM <main> NODE -->
							<xsl:apply-templates select="content/main/node()" />
						</div>

					</div>
				</main>
				
				<!-- SITE CTA -->
				<xsl:copy-of select="site-cta/node()" />

				<!-- SITE FOOTER -->
				<xsl:copy-of select="footer/node()" />
				
				<!-- SITE SCRIPTS -->
				<xsl:copy-of select="site-scripts/node()" />

			</body>
		</html>
	</xsl:template>
	
	
<!-- /////////////////////////////////////////////////////////////////////// END MAIN ////////////////////////////////////////////////////-->
	
	
	<!-- RECURSIVE TEMPLATE MATCH -->
	<xsl:template match="attribute()| element()| text()| comment()" >
		<xsl:copy>
			<xsl:apply-templates select="attribute()|node()" />
		</xsl:copy>
	</xsl:template>

	
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->	
<!-- /// OFFICIAL SNIPPETS /////////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->	
	

	<!-- REMOVE TIME STAMP CRUDE ON NEWS TIME -->
	<xsl:template match="span[contains(@class, 'press-time')]">
	  <xsl:value-of select="substring(., 1, string-length(.) - 15)" />
	</xsl:template>
	
	<!-- SINGLE CARD -->
	<xsl:template match="table[contains(@class, 'cscc-card-generic')]">
	
		<div class="card">
			<a href="{./tbody/tr[4]/td[1]//a/@href}"><img src="{./tbody/tr[1]/td[1]/img/@src}" alt="{./tbody/tr[1]/td[1]/img/@alt}" /></a>
			<div class="card-block">
				<!-- Title -->
				<a href="{./tbody/tr[4]/td[1]//a/@href}"><h3><xsl:value-of select="./tbody/tr[2]/td[1]" /></h3></a>
				<!-- Description -->
				<xsl:copy-of select="./tbody/tr[3]/td[1]/node()" />
				<!-- Button -->
				<a href="{./tbody/tr[4]/td[1]//a/@href}" class="btn btn-custom btn-dark-blue"><xsl:value-of select="./tbody/tr[4]/td[1]//a" /></a>
			</div>
		</div>
	</xsl:template>

	<!-- 2 CARDS with Allyant code -->
	<xsl:template match="table[contains(@class, 'cscc-card-2x')]">	
<div class="cardUL2x row no-gutters border-between">
	<ul>
		<li>
			<div class="card" role="group" aria-label="item"><a class="main-link" href="{./tbody/tr[4]/td[1]//a/@href}">
			<div class="image"><img src="{./tbody/tr[1]/td[1]/img/@src}" alt="" /></div>
				<!-- Title -->
				<h3><xsl:value-of select="./tbody/tr[2]/td[1]" /></h3>
			</a>
				<!-- Description -->
				<xsl:copy-of select="./tbody/tr[3]/td[1]/node()" />
			</div>
		</li>
		<li>
			<div class="card" role="group" aria-label="item"><a class="main-link" href="{./tbody/tr[4]/td[2]//a/@href}">
			<div class="image"><img src="{./tbody/tr[1]/td[2]/img/@src}" alt="" /></div>
				<!-- Title -->
				<h3><xsl:value-of select="./tbody/tr[2]/td[2]" /></h3>
			</a>
				<!-- Description -->
				<xsl:copy-of select="./tbody/tr[3]/td[2]/node()" />
			</div>
		</li>
	</ul>
</div>
	</xsl:template>		
	

	<!-- 3 CARDS -->
	<xsl:template match="table[contains(@class, 'cscc-card-3x')]">
		<div class="row no-gutters border-between">
			<div class="col-md-12 col-lg-4 {if (./tbody/tr[5]/td[1]/node()='hide') then 'd-none' else ''}">
				<div class="card">
					<a href="{./tbody/tr[4]/td[1]//a/@href}"><img src="{./tbody/tr[1]/td[1]/img/@src}" alt="{./tbody/tr[1]/td[1]/img/@alt}" /></a>
					<div class="card-block">
						<!-- Title -->
						<a href="{./tbody/tr[4]/td[1]//a/@href}"><h3><xsl:value-of select="./tbody/tr[2]/td[1]" /></h3></a>
						<!-- Description -->
						<xsl:copy-of select="./tbody/tr[3]/td[1]/node()" />
						<!-- Button -->
						<a href="{./tbody/tr[4]/td[1]//a/@href}" class="btn btn-custom btn-dark-blue {if (./tbody/tr[4]/td[1]/node()='hide') then 'd-none' else ''}"><xsl:value-of select="./tbody/tr[4]/td[1]//a" /></a>
					</div>
				</div>
			</div>
			<div class="col-md-12 col-lg-4 {if (./tbody/tr[5]/td[2]/node()='hide') then 'd-none' else ''}">
				<div class="card">
					<a href="{./tbody/tr[4]/td[2]//a/@href}"><img src="{./tbody/tr[1]/td[2]/img/@src}" alt="{./tbody/tr[1]/td[2]/img/@alt}" /></a>
					<div class="card-block">
						<!-- Title -->
						<a href="{./tbody/tr[4]/td[2]//a/@href}"><h3><xsl:value-of select="./tbody/tr[2]/td[2]" /></h3></a>
						<!-- Description -->
						<xsl:copy-of select="./tbody/tr[3]/td[2]/node()" />
						<!-- Button -->
						<a href="{./tbody/tr[4]/td[2]//a/@href}" class="btn btn-custom btn-dark-blue {if (./tbody/tr[4]/td[2]/node()='hide') then 'd-none' else ''}"><xsl:value-of select="./tbody/tr[4]/td[2]//a" /></a>
					</div>
				</div>
			</div>
			<div class="col-md-12 col-lg-4 {if (./tbody/tr[5]/td[3]/node()='hide') then 'd-none' else ''}">
				<div class="card">
					<a href="{./tbody/tr[4]/td[3]//a/@href}"><img src="{./tbody/tr[1]/td[3]/img/@src}" alt="{./tbody/tr[1]/td[3]/img/@alt}" /></a>
					<div class="card-block">
						<!-- Title -->
						<a href="{./tbody/tr[4]/td[3]//a/@href}"><h3><xsl:value-of select="./tbody/tr[2]/td[3]" /></h3></a>
						<!-- Description -->
						<xsl:copy-of select="./tbody/tr[3]/td[3]/node()" />
						<!-- Button -->
						<a href="{./tbody/tr[4]/td[3]//a/@href}" class="btn btn-custom btn-dark-blue {if (./tbody/tr[4]/td[3]/node()='hide') then 'd-none' else ''}"><xsl:value-of select="./tbody/tr[4]/td[3]//a" /></a>
					</div>
				</div>
			</div>
		</div>
	</xsl:template>
	
	<!-- 3 CARDS W BUTTON MODALS -->
	<xsl:template match="table[contains(@class, 'cardmodal-3x')]">
		<div class="row no-gutters border-between">
			<div class="col-md-12 col-lg-4">
				<div class="card">
					<xsl:copy-of select="./tbody/tr[1]/td[1]/node()" />
					<div class="card-block">
						<!-- Title -->
						<xsl:copy-of select="./tbody/tr[2]/td[1]/node()" />
						<!-- Description -->
						<xsl:copy-of select="./tbody/tr[3]/td[1]/node()" />
						<!-- Button -->
						<xsl:copy-of select="./tbody/tr[4]/td[1]/node()" />
					</div>
				</div>
			</div>
			<div class="col-md-12 col-lg-4">
				<div class="card">
					<xsl:copy-of select="./tbody/tr[1]/td[2]/node()" />
					<div class="card-block">
						<!-- Title -->
						<xsl:copy-of select="./tbody/tr[2]/td[2]/node()" />
						<!-- Description -->
						<xsl:copy-of select="./tbody/tr[3]/td[2]/node()" />
						<!-- Button -->
						<xsl:copy-of select="./tbody/tr[4]/td[2]/node()" />
					</div>
				</div>
			</div>
			<div class="col-md-12 col-lg-4">
				<div class="card">
					<xsl:copy-of select="./tbody/tr[1]/td[3]/node()" />
					<div class="card-block">
						<!-- Title -->
						<xsl:copy-of select="./tbody/tr[2]/td[3]/node()" />
						<!-- Description -->
						<xsl:copy-of select="./tbody/tr[3]/td[3]/node()" />
						<!-- Button -->
						<xsl:copy-of select="./tbody/tr[4]/td[3]/node()" />
					</div>
				</div>
			</div>
		</div>
	</xsl:template>
	
	
	<!-- 3 CARDS IMG DIFFERENT LINK -->
	<xsl:template match="table[contains(@class, 'img-linked-cscc-card-3x')]">
		<div class="row no-gutters border-between">
			<div class="col-md-12 col-lg-4 {if (./tbody/tr[5]/td[1]/node()='hide') then 'd-none' else ''}">
				<div class="card">
					<a href="{./tbody/tr[1]/td[1]//a/@href}"><img src="{./tbody/tr[1]/td[1]/a/img/@src}" alt="{./tbody/tr[1]/td[1]/a/img/@alt}" /></a>
					<div class="card-block">
						<!-- Title -->
						<a href="{./tbody/tr[1]/td[1]//a/@href}"><h3><xsl:value-of select="./tbody/tr[2]/td[1]" /></h3></a>
						<!-- Description -->
						<xsl:copy-of select="./tbody/tr[3]/td[1]/node()" />
						<!-- Button -->
						<a href="{./tbody/tr[4]/td[1]//a/@href}" class="btn btn-custom btn-dark-blue"><xsl:value-of select="./tbody/tr[4]/td[1]//a" /></a>
					</div>
				</div>
			</div>
			<div class="col-md-12 col-lg-4 {if (./tbody/tr[5]/td[2]/node()='hide') then 'd-none' else ''}">
				<div class="card">
					<a href="{./tbody/tr[1]/td[2]//a/@href}"><img src="{./tbody/tr[1]/td[2]/a/img/@src}" alt="{./tbody/tr[1]/td[2]/a/img/@alt}" /></a>
					<div class="card-block">
						<!-- Title -->
						<a href="{./tbody/tr[1]/td[2]//a/@href}"><h3><xsl:value-of select="./tbody/tr[2]/td[2]" /></h3></a>
						<!-- Description -->
						<xsl:copy-of select="./tbody/tr[3]/td[2]/node()" />
						<!-- Button -->
						<a href="{./tbody/tr[4]/td[2]//a/@href}" class="btn btn-custom btn-dark-blue"><xsl:value-of select="./tbody/tr[4]/td[2]//a" /></a>
					</div>
				</div>
			</div>
			<div class="col-md-12 col-lg-4 {if (./tbody/tr[5]/td[3]/node()='hide') then 'd-none' else ''}">
				<div class="card">
					<a href="{./tbody/tr[1]/td[3]//a/@href}"><img src="{./tbody/tr[1]/td[3]/a/img/@src}" alt="{./tbody/tr[1]/td[3]/a/img/@alt}" /></a>
					<div class="card-block">
						<!-- Title -->
						<a href="{./tbody/tr[1]/td[3]//a/@href}"><h3><xsl:value-of select="./tbody/tr[2]/td[3]" /></h3></a>
						<!-- Description -->
						<xsl:copy-of select="./tbody/tr[3]/td[3]/node()" />
						<!-- Button -->
						<a href="{./tbody/tr[4]/td[3]//a/@href}" class="btn btn-custom btn-dark-blue"><xsl:value-of select="./tbody/tr[4]/td[3]//a" /></a>
					</div>
				</div>
			</div>
		</div>
	</xsl:template>
	
	
	<!-- 3 CARDS NO BUTTONS -->
	<xsl:template match="table[contains(@class, 'no-btn-cscc-card-3x')]">
		<div class="row no-gutters border-between">
			<div class="col-md-12 col-lg-4">
				<div class="card">
					<a href="{./tbody/tr[4]/td[1]//a/@href}"><img src="{./tbody/tr[1]/td[1]/img/@src}" alt="{./tbody/tr[1]/td[1]/img/@alt}" /></a>
					<div class="card-block">
						<!-- Title -->
						<a href="{./tbody/tr[4]/td[1]//a/@href}"><h3><xsl:value-of select="./tbody/tr[2]/td[1]" /></h3></a>
						<!-- Description -->
						<xsl:copy-of select="./tbody/tr[3]/td[1]/node()" />
					</div>
				</div>
			</div>
			<div class="col-md-12 col-lg-4">
				<div class="card">
					<a href="{./tbody/tr[4]/td[2]//a/@href}"><img src="{./tbody/tr[1]/td[2]/img/@src}" alt="{./tbody/tr[1]/td[2]/img/@alt}" /></a>
					<div class="card-block">
						<!-- Title -->
						<a href="{./tbody/tr[4]/td[2]//a/@href}"><h3><xsl:value-of select="./tbody/tr[2]/td[2]" /></h3></a>
						<!-- Description -->
						<xsl:copy-of select="./tbody/tr[3]/td[2]/node()" />
					</div>
				</div>
			</div>
			<div class="col-md-12 col-lg-4">
				<div class="card">
					<a href="{./tbody/tr[4]/td[3]//a/@href}"><img src="{./tbody/tr[1]/td[3]/img/@src}" alt="{./tbody/tr[1]/td[3]/img/@alt}" /></a>
					<div class="card-block">
						<!-- Title -->
						<a href="{./tbody/tr[4]/td[3]//a/@href}"><h3><xsl:value-of select="./tbody/tr[2]/td[3]" /></h3></a>
						<!-- Description -->
						<xsl:copy-of select="./tbody/tr[3]/td[3]/node()" />
					</div>
				</div>
			</div>
		</div>
	</xsl:template>
	
	
	<!-- 4 CARDS - COMPLIANT for Allyant code -->
	<xsl:template match="table[contains(@class, 'cscc-card-4x')]">
<div class="cardUL row no-gutters border-between">
	<ul>
		<li>
			<div class="card" role="group" aria-label="item"><a class="main-link" href="{./tbody/tr[4]/td[1]//a/@href}">
			<div class="image"><img src="{./tbody/tr[1]/td[1]/img/@src}" alt="" /></div>
				<!-- Title -->
				<h3><xsl:value-of select="./tbody/tr[2]/td[1]" /></h3>
			</a>
				<!-- Description -->
				<xsl:copy-of select="./tbody/tr[3]/td[1]/node()" />
			</div>
		</li>
		<li>
			<div class="card" role="group" aria-label="item"><a class="main-link" href="{./tbody/tr[4]/td[2]//a/@href}">
			<div class="image"><img src="{./tbody/tr[1]/td[2]/img/@src}" alt="" /></div>
				<!-- Title -->
				<h3><xsl:value-of select="./tbody/tr[2]/td[2]" /></h3>
			</a>
				<!-- Description -->
				<xsl:copy-of select="./tbody/tr[3]/td[2]/node()" />
			</div>
		</li>
		<li>
			<div class="card" role="group" aria-label="item"><a class="main-link" href="{./tbody/tr[4]/td[3]//a/@href}">
			<div class="image"><img src="{./tbody/tr[1]/td[3]/img/@src}" alt="" /></div>
				<!-- Title -->
				<h3><xsl:value-of select="./tbody/tr[2]/td[3]" /></h3>
			</a>
				<!-- Description -->
				<xsl:copy-of select="./tbody/tr[3]/td[3]/node()" />			</div>
		</li>
		<li>
			<div class="card" role="group" aria-label="item"><a class="main-link" href="{./tbody/tr[1]/td[4]/img/@src}">
			<div class="image"><img src="{./tbody/tr[1]/td[4]/img/@src}" alt="" /></div>
				<!-- Title -->
				<h3><xsl:value-of select="./tbody/tr[2]/td[4]" /></h3>			
			</a>
				<!-- Description -->
				<xsl:copy-of select="./tbody/tr[3]/td[4]/node()" />
			</div>
		</li>
	</ul>
</div>
	</xsl:template>	
	
	
	<!-- 1 COLUMN -->
	<xsl:template match="table[contains(@class, 'cscc-column')]">
		<div class="row w-100 no-gutters">
			<xsl:for-each select="./tbody/tr">
				<xsl:for-each select="./td">
					<div class="{'col-xs-12'}"><!--./@class,--> 
						<xsl:apply-templates select="./node()" />
					</div><!--/span-->
				</xsl:for-each>
			</xsl:for-each>
		</div>
	</xsl:template>
	
	
	<!-- 2by1 2x COLUMNS LEFT -->
	<xsl:template match="table[contains(@class, 'left-cscc-columns')]">
		<div class="row w-100 no-gutters">
			<xsl:for-each select="./tbody/tr">
				<div class="{'col-xs-12 col-sm-8'}">
					<xsl:apply-templates select="./td[1]/node()" />
				</div>
				<div class="{'col-xs-12 col-sm-4'}">
					<xsl:apply-templates select="./td[2]/node()" />
				</div>
			</xsl:for-each>
		</div>
	</xsl:template>
	
	
	<!-- 1by2 2x COLUMNS RIGHT -->
	<xsl:template match="table[contains(@class, 'right-cscc-columns')]">
		<div class="row w-100 no-gutters">
			<xsl:for-each select="./tbody/tr">
				<div class="{'col-xs-12 col-sm-4'}">
					<xsl:apply-templates select="./td[1]/node()" />
				</div>
				<div class="{'col-xs-12 col-sm-8'}">
					<xsl:apply-templates select="./td[2]/node()" />
				</div>
			</xsl:for-each>
		</div>
	</xsl:template>
	
	
	<!-- 2 COLUMNS -->
	<xsl:template match="table[contains(@class, 'cscc-columns-2x')]">
		<div class="row w-100">
			<xsl:for-each select="./tbody/tr">
				<xsl:for-each select="./td">
					<div class="{'col-xs-12 col-sm-6'}"><!--./@class,--> 
						<xsl:apply-templates select="./node()" />
					</div><!--/span-->
				</xsl:for-each>
			</xsl:for-each>
		</div>
	</xsl:template>
	
	
	<!-- Event Box -->
	<xsl:template match="table[contains(@class, 'event-box')]">
		<div class="events-container">
			<xsl:for-each select="./tbody/tr">
				<xsl:for-each select="./td">
					<div class="{'event-item'}"><!--./@class,--> 
						<xsl:apply-templates select="./node()" />
					</div><!--/span-->
				</xsl:for-each>
			</xsl:for-each>
		</div>
	</xsl:template>		
	
	<!-- 2x extra space -->
	<xsl:template match="table[contains(@class, 'cscc-columns-2x-spaced')]">
		<div class="row w-100 no-gutters column-custom">
			<xsl:for-each select="./tbody/tr">
				<xsl:for-each select="./td">
					<div class="{'col-xs-12 col-sm-6'}"><!--./@class,--> 
						<xsl:apply-templates select="./node()" />
					</div><!--/span-->
				</xsl:for-each>
			</xsl:for-each>
		</div>
	</xsl:template>
	
	
	<!-- 3 COLUMNS -->
	<xsl:template match="table[contains(@class, 'cscc-columns-3x')]">
		<div class="row w-100 no-gutters">
			<xsl:for-each select="./tbody/tr">
					<xsl:for-each select="./td">
						<div class="{'col-xs-12 col-sm-6 col-md-4'}"><!--./@class,--> 
							<xsl:apply-templates select="./node()" />
						</div><!--/span-->
					</xsl:for-each>
			</xsl:for-each>
		</div>
	</xsl:template>
	
	
	<!-- 3 COLUMNS BUCKETS -->
	<xsl:template match="table[contains(@class, 'cscc-columns-3x-buckets')]">
		<div class="row w-100 no-gutters">
			<xsl:for-each select="./tbody/tr">
					<xsl:for-each select="./td">
						<div class="{'col-md-12 col-lg-4'}"><!--./@class,--> 
							<xsl:apply-templates select="./node()" />
						</div><!--/span-->
					</xsl:for-each>
			</xsl:for-each>
		</div>
	</xsl:template>
	
	
	<!-- 4 COLUMNS -->
	<xsl:template match="table[contains(@class, 'cscc-columns-4x')]">
		<div class="row w-100 no-gutters">
			<xsl:for-each select="./tbody/tr">
				<xsl:for-each select="./td">
					<div class="{'col-sm-12 col-md-6 col-lg-3'}"><!--./@class,--> 
						<xsl:apply-templates select="./node()" />
					</div><!--/span-->
				</xsl:for-each>
			</xsl:for-each>
		</div>
	</xsl:template>
	
	
	<!-- ACCORDIAN -->
	<xsl:template match="table[contains(@class, 'cscc-accordian')]">
		
		<xsl:variable name="id" select="position()" />
		<xsl:variable name="accord" select="tfoot/tr/td[1]/node()" />

		<div class="accordion" id="accordion{$id}{$accord}_full" >		
			<xsl:for-each select="./tbody/tr">
				<div class="card">
					<div class="card-header" id="accordion{$id}{$accord}_heading_{position()}">
						<h3>
						<button class="mb-0 collapsed" data-toggle="collapse" href="#collapse_{$id}{$accord}_{position()}" aria-expanded="false" >
							<xsl:value-of select="td[1]" />
						</button>
						</h3>
					</div>
					<div id="collapse_{$id}{$accord}_{position()}" class="collapse" data-parent="#accordion{$id}{$accord}_full" aria-labelledby="accordion{$id}{$accord}_heading_{position()}">
						<div class="card-block">
							<xsl:apply-templates select="td[2]/node()" />
						</div>
					</div>
				</div>
			</xsl:for-each>
		</div>
	</xsl:template>	
	
	
	<!-- FAQ -->
	<xsl:template match="table[contains(@class, 'cscc-faq')]">
		
		<xsl:variable name="id" select="position()" />
		<xsl:variable name="accord" select="tfoot/tr/td[1]/node()" />

		<div class="accordion" id="accordion{$id}{$accord}_full" role="tablist" aria-multiselectable="true">		
			<xsl:for-each select="./tbody/tr">
				<div class="card" itemscope="true" itemprop="mainEntity" itemtype="https://schema.org/Question">
					<div class="card-header" role="tab" id="accordion{$id}{$accord}_heading_{position()}">
						<span itemprop="name">
							<a class="mb-0 collapsed" data-toggle="collapse" href="#collapse_{$id}{$accord}_{position()}" aria-expanded="false" aria-controls="#collapse_{$id}{$accord}_{position()}">
								<xsl:value-of select="td[1]" />
							</a>
						</span>
					</div>
					<div id="collapse_{$id}{$accord}_{position()}" class="collapse" data-parent="#accordion{$id}{$accord}_full" aria-labelledby="accordion{$id}{$accord}_heading_{position()}" itemscope="true" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
						<div class="card-block" itemprop="text">
							<xsl:apply-templates select="td[2]/node()" />
						</div>
					</div>
				</div>
			</xsl:for-each>
		</div>
	</xsl:template>
	
	
	<!-- ACCORDIAN FILTERS -->
	<xsl:template match="table[contains(@class, 'cscc-accordian-filters')]">
		
		<xsl:variable name="id" select="position()" />
		<xsl:variable name="accord" select="tfoot/tr/td[1]/node()" />
		

		<div class="accordion" id="accordion{$id}{$accord}_full" role="tablist" aria-multiselectable="true">		
			<xsl:for-each select="./tbody/tr">
				
				<xsl:variable name="category" select="td[3]/node()" />
				<xsl:variable name="scholarship" select="td[4]/node()" />

				<div class="card" data-scholarship="{$scholarship}" data-category="{$category}" v-if="matchConditions === true" ref="accordItem_{position()}">

					<div class="card-header" role="tab" id="accordion{$id}{$accord}_heading_{position()}">
						<a class="mb-0 collapsed" data-toggle="collapse" href="#collapse_{$id}{$accord}_{position()}" aria-expanded="false" aria-controls="#collapse_{$id}{$accord}_{position()}">
							<xsl:value-of select="td[1]" />
						</a>
					</div>
					<div id="collapse_{$id}{$accord}_{position()}" class="collapse" data-parent="#accordion{$id}{$accord}_full" aria-labelledby="accordion{$id}{$accord}_heading_{position()}">
						<div class="card-block">
							<xsl:apply-templates select="td[2]/node()" />
						</div>
					</div>
				</div>
				
			</xsl:for-each>
		</div>
	</xsl:template>
	
	
	<!-- TABS -->
	<xsl:template match="table[contains(@class, 'cscc-tabgroup')]">
		<xsl:variable name="id" select="position()" />
			<ul class="nav nav-tabs" role="tablist">	
				<xsl:for-each select="./tbody/tr">
					<li class="nav-item">
						<a class="nav-link {if (position()=1) then 'active' else ''}" href="#tabs-{$id}-{position()}" data-toggle="tab" role="tab" aria-controls="#{$id}-{position()}">
							<span><xsl:value-of select="td[2]" /></span>
							<xsl:value-of select="td[1]" />
						</a>
					</li>
				</xsl:for-each>
			</ul>
			<div class="tab-content">
				<xsl:for-each select="./tbody/tr">
					<div class="tab-pane {if (position()=1) then 'active' else ''}" id="tabs-{$id}-{position()}" role="tabpanel">
						<xsl:apply-templates select="td[3]/node()" />
					</div>
				</xsl:for-each>
			</div>
	</xsl:template>
	
	
	<!-- 4x News -->
	<xsl:template match="table[contains(@class, 'cscc-4x-news')]">
		<xsl:variable name="id" select="position()" />
		<div class="row no-gutters xtra-padding 4x-news">
			<xsl:for-each select="./tbody/tr">
				<div class="col-md-12 col-lg-6 side-text">
					<a href="{./td[1]//a/@href}">
						<img src="{./td[4]/img/@src}" />
						<div>
							<h3><xsl:value-of select="td[2]" /></h3>
							<p><xsl:value-of select="td[3]" /></p>
						</div>
					</a>
				</div>
			</xsl:for-each>
			<!-- <xsl:for-each select="./tfoot/tr">
				<div class="col-sm-12 justify-content-center">
					<br />
					<a href="{./td[1]//a/@href}" class="btn btn-custom btn-dark-blue"><xsl:value-of select="td[1]//a" /></a>
				</div>
			</xsl:for-each> -->
			
		</div>
	</xsl:template>
	
	
	<!-- 16x9 VIDEO -->
	<xsl:template match="table[contains(@class, 'cscc-video-16x9')]">
		<div class="embed-responsive embed-responsive-16by9">
		  <iframe class="embed-responsive-item" src="{./tbody/tr[1]/td[1]//a/@href}" allowfullscreen="true" title="{./tbody/tr[2]/td[1]}"></iframe>
		</div>
		<p class="video-caption"><xsl:value-of select="./tbody/tr[2]/td[1]" /></p>
	</xsl:template>
	
	
	<!-- 4x3 VIDEO -->
	<xsl:template match="table[contains(@class, 'cscc-video-4x3')]">
		<div class="embed-responsive embed-responsive-4by3">
		  <iframe class="embed-responsive-item" src="{./tbody/tr[1]/td[1]//a/@href}" allowfullscreen="true"></iframe>
		</div>
		<p class="video-caption"><xsl:value-of select="./tbody/tr[2]/td[1]" /></p>
	</xsl:template>
	
	
	<!-- HIGHCHART -->
	<xsl:template match="table[contains(@class, 'cscc-bar-graph')]">
		<xsl:variable name="id" select="position()" />
		
		<h2><xsl:value-of select="./thead/tr[1]/th[1]" /></h2>
		
		<!-- CHART -->
		<div id="chart-{$id}" class="chart" 
			 data-orientation="{./tfoot/tr[2]/td[1]/table/tbody/tr[1]/td[1]}" 
			 data-type="{./tfoot/tr[2]/td[1]/table/tbody/tr[1]/td[2]}" 
			 data-axis-x="{./tfoot/tr[2]/td[1]/table/tbody/tr[1]/td[3]}"  
			 data-axis-y="{./tfoot/tr[2]/td[1]/table/tbody/tr[1]/td[4]}"
			 data-stack="{./tfoot/tr[2]/td[1]/table/tbody/tr[1]/td[5]}" 
			 style="min-width: 310px; max-width: 100%; height: 480px; margin: 0 auto"></div>	
		
		<!-- DATA -->
		<table id="data-{$id}" class="chart-data-hide">
			<thead>
				<xsl:for-each select="./thead/tr[2]" >
					<tr>
						<xsl:for-each select="./th">
							<th><xsl:value-of select="./node()" /></th>
						</xsl:for-each>
					</tr>
				</xsl:for-each>
			</thead>
			<tbody>
				<xsl:for-each select="./tbody/tr">
					<tr>
						<xsl:for-each select="./th">
							<th><xsl:value-of select="./node()" /></th>
						</xsl:for-each>
						<xsl:for-each select="./td">
							<td><xsl:value-of select="./node()" /></td>
						</xsl:for-each>
					</tr>
				</xsl:for-each>
			</tbody>
		</table>

	</xsl:template>
	
	
	<!-- HIGHCHART LINE GRAPH -->
	<xsl:template match="table[contains(@class, 'cscc-line-graph')]">
		<xsl:variable name="id" select="position()" />
		
		<h2><xsl:value-of select="./thead/tr[1]/th[1]" /></h2>
		
		<!-- CHART -->
		<div id="chart-{$id}" class="chart" 
			 data-graph-type="{./tfoot/tr[2]/td[1]/table/tbody/tr[1]/td[1]}" 
			 data-type="{./tfoot/tr[2]/td[1]/table/tbody/tr[1]/td[2]}" 
			 data-axis-x="{./tfoot/tr[2]/td[1]/table/tbody/tr[1]/td[3]}"  
			 data-axis-y="{./tfoot/tr[2]/td[1]/table/tbody/tr[1]/td[4]}"
			 data-stack="{./tfoot/tr[2]/td[1]/table/tbody/tr[1]/td[5]}" 
			 style="min-width: 310px; max-width: 100%; height: 480px; margin: 0 auto"></div>	
		
		<!-- DATA -->
		<table id="data-{$id}" class="chart-data-hide">
			<thead>
				<xsl:for-each select="./thead/tr[2]" >
					<tr>
						<xsl:for-each select="./th">
							<th><xsl:value-of select="./node()" /></th>
						</xsl:for-each>
					</tr>
				</xsl:for-each>
			</thead>
			<tbody>
				<xsl:for-each select="./tbody/tr">
					<tr>
						<xsl:for-each select="./th">
							<th><xsl:value-of select="./node()" /></th>
						</xsl:for-each>
						<xsl:for-each select="./td">
							<td><xsl:value-of select="./node()" /></td>
						</xsl:for-each>
					</tr>
				</xsl:for-each>
			</tbody>
		</table>

	</xsl:template>
	
	
	<!-- MAJORS -->
	<xsl:template match="table[contains(@class, 'cscc-majors')]">
		<div class="xtra-padding grey-back">
			<br/>
			<h2>Majors</h2>
			<div class="row no-gutters align-items-center">
				<div class="col-sm-12 col-md-8">
					<p><xsl:value-of select="./tbody/tr[2]/td[2]/node()" /></p>
				</div>
				<div class="col-sm-12 col-md-4"><!-- DEGREE TYPES BUTTON -->
<button type="button" class="btn btn-custom btn-white btn-degree-types" data-toggle="modal" data-target="#degreeTypes" style="margin-top: 2rem !important;">
  What type of degree or certificate do you need?
</button>

<!-- DEGREE TYPES MODAL -->
<div class="modal fade degree-types-modal" id="degreeTypes" tabindex="-1" role="dialog" aria-labelledby="degreeTypesLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title h3" id="degreeTypesLabel">Degree and Certificate Types</h2>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

       	<h3 class="h4">Associate of Science Degree</h3>
		<p>The A.S. degree fulfills the requirements for the first two years of a bachelor of science, with guaranteed credit transfer to any Ohio public and many private colleges/universities. </p>

		<h3 class="h4">Associate of Arts Degree</h3>
		<p>The A.A. degree fulfills the requirements for the first two years of a bachelor of arts, with guaranteed credit transfer to any Ohio public institution and many private colleges/universities. </p>

		<h3 class="h4">Associate of Applied Science Degree</h3>
		<p>An A.A.S. degree provides skills and credential to enter the workforce immediately, with select transfer options to continue on for a bachelor’s degree in the same discipline. </p>

		<h3 class="h4">Associate of Technical Studies Degree</h3>
		<p>Combines two or more programs into one two-year degree. Some departments offer predesigned A.T.S. degrees, or you can work with your advisor and program chair(s) to design a custom major. </p>

		<h3 class="h4">Certificate</h3>
		<p>A certificate provides intensive study (usually 1-2 semesters) in a specific discipline. Earning a certificate does not qualify you to transfer to complete a bachelor’s degree, although some certificates combine to lead to an associate degree.</p>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-custom btn-dark-blue" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div></div>
			</div>
			<div id="show-majors" data-major="{./tbody/tr[1]/td[2]/node()}" data-pathway="" data-department=""></div>
			<br/>
		</div>
	</xsl:template>
	
	
	<!-- DEPARTMENTS -->
	<xsl:template match="table[contains(@class, 'cscc-department')]">
		<div class="degrees-list-container">
			<h2>Programs and Certificates</h2>
			<div id="show-majors" data-major="" data-pathway="" data-department="{./tbody/tr[1]/td[2]/node()}"></div>
		</div>
	</xsl:template>
	
	
	<!-- PATHWAY -->
	<xsl:template match="table[contains(@class, 'cscc-pathway')]">
		<div class="xtra-padding grey-back">
			<br/>
			<h2>Majors</h2>
			<div class="row no-gutters align-items-center">
				<div class="col-sm-12 col-md-8">
					<p><xsl:value-of select="./tbody/tr[2]/td[2]/node()" /></p>
				</div>
				<div class="col-sm-12 col-md-4"><!-- DEGREE TYPES BUTTON -->
<button type="button" class="btn btn-custom btn-white btn-degree-types" data-toggle="modal" data-target="#degreeTypes" style="margin-top: 2rem !important;">
  What type of degree or certificate do you need?
</button>

<!-- DEGREE TYPES MODAL -->
<div class="modal fade degree-types-modal" id="degreeTypes" tabindex="-1" role="dialog" aria-labelledby="degreeTypesLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title h3" id="degreeTypesLabel">Degree and Certificate Types</h2>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

       	<h3 class="h4">Associate of Science Degree</h3>
		<p>The A.S. degree fulfills the requirements for the first two years of a bachelor of science, with guaranteed credit transfer to any Ohio public and many private colleges/universities. </p>

		<h3 class="h4">Associate of Arts Degree</h3>
		<p>The A.A. degree fulfills the requirements for the first two years of a bachelor of arts, with guaranteed credit transfer to any Ohio public institution and many private colleges/universities. </p>

		<h3 class="h4">Associate of Applied Science Degree</h3>
		<p>An A.A.S. degree provides skills and credential to enter the workforce immediately, with select transfer options to continue on for a bachelor’s degree in the same discipline. </p>

		<h3 class="h4">Associate of Technical Studies Degree</h3>
		<p>Combines two or more programs into one two-year degree. Some departments offer predesigned A.T.S. degrees, or you can work with your advisor and program chair(s) to design a custom major. </p>

		<h3 class="h4">Certificate</h3>
		<p>A certificate provides intensive study (usually 1-2 semesters) in a specific discipline. Earning a certificate does not qualify you to transfer to complete a bachelor’s degree, although some certificates combine to lead to an associate degree.</p>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-custom btn-dark-blue" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div></div>
			</div>
			<div id="show-majors" data-major="" data-pathway="{./tbody/tr[1]/td[2]/node()}" data-department=""></div>
			<br/>
		</div>
	</xsl:template>
	
	
	<!-- CAROUSEL -->
	<xsl:template match="table[contains(@class, 'cscc-carousel')]">
		<div id="cscc-caro" class="carousel slide" data-ride="carousel" data-interval="false">
			<div class="carousel-inner">
				<xsl:variable name="id" select="position()" />
				<xsl:for-each select="./tbody/tr">
					<div class="carousel-item {if (position()=1) then 'active' else ''}">
					  	<img class="d-block w-100" src="{./td[2]//img/@src}" alt="{./td[1]}" />
						<p class="slideshow-caption">
    						<xsl:value-of select="td[1]" />
  						</p>
					</div>
				</xsl:for-each>
			</div>
			<a class="carousel-control-prev" href="#cscc-caro" role="button" data-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="carousel-control-next" href="#cscc-caro" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
	</xsl:template>
	
	
	<!-- GREEN ALERT -->
	<xsl:template match="table[contains(@class, 'cscc-green-alert')]">
		<div class="green-back">
			<!-- Content -->
			<xsl:copy-of select="./tbody/tr[2]/td[1]/node()" />
		</div>
	</xsl:template>

	
	<!-- HEADSHOT GALLERY -->
	<xsl:template match="table[contains(@class, 'cscc-headshots-gallery')]">
		<div class="headshots-gallery">		
			<xsl:for-each select="./tbody/tr">
				<div class="headshot">
					<img class="picture" src="{td[3]/img/@src}" alt="{td[3]/img/@alt}" />
					<p class="name"><xsl:value-of select="td[1]" /></p>
					<p class="title"><xsl:value-of select="td[2]" /></p>
					
					<xsl:variable name="isLink" select="td[4]"  />
					<xsl:variable name="phoneNum" select="td[5]"  />
					<xsl:variable name="campusRoom" select="td[6]"  />
					
      				<xsl:if test="contains($isLink, '@')" >
						<p class="email"><a href="mailto:{td[4]}"><xsl:value-of select="td[4]" /></a></p>
					</xsl:if>
					
					<xsl:if test="not(contains($isLink, '@'))" >
						<p class="title pt-1 font-weight-bold"><xsl:value-of select="td[4]" /></p>
					</xsl:if>
					
					<xsl:if test="string-length($phoneNum) &gt; 0">
						<p class="phone"><a href="tel:{td[5]}"><xsl:value-of select="td[5]" /></a></p>
					</xsl:if>
					
					<xsl:if test="string-length($campusRoom) &gt; 0">
						<p class="room"><xsl:value-of select="td[6]" /></p>
					</xsl:if>
					
				</div>
			</xsl:for-each>
		</div>
	</xsl:template>
	
	
	<!-- HEADSHOT GALLERY FLEXIBILE -->
	<xsl:template match="table[contains(@class, 'cscc-headshots-gallery-flex')]">
		<div class="headshots-gallery">		
			<xsl:for-each select="./tbody/tr">
				<div class="headshot">
					<img class="picture" src="{td[3]/img/@src}" alt="{td[3]/img/@alt}" />
					<p class="name"><xsl:value-of select="td[1]" /></p>
					<p class="content"><xsl:value-of select="td[2]/node" /></p>
				</div>
			</xsl:for-each>
		</div>
	</xsl:template>
	
	
	<!-- FLEX CARDS -->
	<xsl:template match="table[contains(@class, 'cscc-flex-cards-3x')]">
		<div class="trainings">
			<xsl:for-each select="./tbody/tr">
				<div class="training-item">
					
					<xsl:variable name="hasCredits" select="td[5]"  />

					<a href="{td[4]/a/@href}"><img src="{td[3]/img/@src}" alt="{td[3]/img/@alt}" width="100%" height="auto" /></a>
					<div class="item-content">
						<h4><a href="{td[4]/a/@href}"><xsl:value-of select="td[1]" /></a></h4>
						<p><xsl:value-of select="td[2]" /></p>
					</div>
					
					<xsl:if test="string-length($hasCredits) &gt; 0" >
						<div class="credit-container">
							<p><xsl:value-of select="td[5]" /></p>
						</div>
					</xsl:if>
				</div>
			</xsl:for-each>
		</div>
	</xsl:template>
	

	
	
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->	
<!-- /// OFFICIAL SNIPPETS END /////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->	
		
</xsl:stylesheet>
