/* With all the colors being here, you will be able to do Themes for your website.*/
/* Added in on April 24, 2026 */
/* By: Wayne Barron /cffcs.com */
:root{
    --breadcrumb-a: #333;
    --breadcrumb-active: #111;
    --breadcrumb-linear: linear-gradient(#333, #111);
    --breadcrumb-hoverBG: #222;
    --breadcrumb-hoverBG-linear: linear-gradient(145deg, #333, #222);
    --breadcrumb-afterBG: #555;
    --breadcrumb-afterlinear: linear-gradient(135deg, #777, #333);
    --breadcrumb-beforelinear: linear-gradient(#333, #300);
    --breadcrumb-flatBG: #333333;
    --breadcrumb-flatC: #eee;
    --breadcrumb-flatBGafter: #3b5998;
    --breadcrumb-flatBGbefore: #111;
}

.breadcrumb {
    text-align: center; /*Removed from body and placed here where it belongs.*/
	/*centering*/
	display: inline-block;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	border-radius: 5px;
	/*Let's add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
	counter-reset: flag; 
}

.breadcrumb a {
	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	font-size: 12px;
	line-height: 36px;
	color: white;
	/*need more margin on the left of links to accommodate the numbers*/
	padding: 0 10px 0 60px;
	background: var(--breadcrumb-a);
	background: var(--breadcrumb-linear);
	position: relative;
}
/*since the first link does not have a triangle before it, we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
	padding-left: 46px;
	border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.breadcrumb a:first-child:before {
	left: 14px;
}
.breadcrumb a:last-child {
	border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
	padding-right: 20px;
}

/*hover/active styles*/
.breadcrumb a.active, .breadcrumb a:hover{
	background: var(--breadcrumb-active);
	background: var(--breadcrumb-linear);
}
.breadcrumb a.active:after, .breadcrumb a:hover:after {
	background: var(--breadcrumb-hoverBG);
	background: var(--breadcrumb-hoverBG-linear);
}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {
	content: ';
	position: absolute;
	top: 0; 
	right: -18px; /*half of square's length*/
	/*same dimension as the line-height of .breadcrumb a */
	width: 36px; 
	height: 36px;
	/*as you see, the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if squares: 
	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
	if diagonal required = 1; length = 1/1.414 = 0.707*/
	transform: scale(0.707) rotate(45deg);
	/*we need to prevent the arrows from getting buried under the next link*/
	z-index: 1;
	/*background same as links, but the gradient will be rotated to compensate for the transform applied*/
	background: var(--breadcrumb-after);
	background: var(--breadcrumb-afterlinear);
	/*stylish arrow design using box shadow*/
	box-shadow: 
		2px -2px 0 2px rgba(0, 0, 0, 0.4), 
		3px -3px 0 2px rgba(255, 255, 255, 0.1);
	/*
		5px - for rounded arrows and 
		50px - to prevent hover glitches on the border created using shadows*/
	border-radius: 0 5px 0 50px;
}


/*we don't need an arrow after the last link*/
.breadcrumb a:last-child:after {
	content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb a:before {
	content: counter(flag);
	counter-increment: flag;
	/*some styles now*/
	border-radius: 100%;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin: 8px 0;
	position: absolute;
	top: 0;
	left: 30px;
	background: var(--breadcrumb-a);
	background: var(--breadcrumb-beforelinear);
	font-weight: bold;
}


.flat a, .flat a:after {
	background: var(--breadcrumb-flatBG);
	color: var(--breadcrumb-flatC);
	transition: all 0.7s;
}
.flat a:before {
	background: var(--breadcrumb-flatBGbefore);
	box-shadow: 0 0 0 1px #00c;
}
.flat a:hover, .flat a.active, 
.flat a:hover:after, .flat a.active:after{
	background: var(--breadcrumb-flatBGafter);
}

<!--START"breadcrumb"-->
<div class="breadcrumb flat">
<a></a><a>--</a>
<a href="http://localhost/cs/Main.asp?Type=Cat&CatID=1" title="Classic ASP : Category | CFF Coding Source">
<span title="Classic ASP : Category | CFF Coding Source">Classic ASP</span>
</a>
  
<a href="http://localhost/cs/Main.asp?Type=SubCat&SCID=1" title="Forms : Sub-Category | CFF Coding Source">
<span title="Forms : Sub-Category | CFF Coding Source">Forms</span>
</a>
  
<span title="Bootstrap Tags Input (Classic ASP and SQL Server Database) : Code Entry | CFF Coding Source">
<a>Bootstrap Tags Input (Classic ASP and SQL Server Database)</a>
</span>
 </div>
<!--END"breadcrumb"-->