#breadcrumbs ul 
{ margin:0; 
	padding:0; 
	list-style:none;
	background: #ebe9f4; 
	overflow: hidden; 
	width: 100%;
	font-size: 1em;;
}
#breadcrumbs ul	li {float: left; font-family:arial, sans-serif; }
#breadcrumbs li.pageTitle
{ 
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  float: left;
  padding: 1px 0 1px 3em;
}	
#breadcrumbs ul a
{
  padding: 1px 0 1px 3em;
  float: left;
  text-decoration: none;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  color: #444;
  background-color: #d3cf37;  /*fallback color*/ 
  /* Gradient from light gray to slightly darker */
  background-image: -webkit-gradient(linear, left top, right bottom, from(#ebe9f4), to(#d3cfe7));
  background-image: -webkit-linear-gradient(left, #ebe9f4, #d3cfe7);
  background-image: -moz-linear-gradient(left, #ebe9f4, #d3cfe7);
  background-image: -ms-linear-gradient(left, #ebe9f4, #d3cfe7);
  background-image: -o-linear-gradient(left, #ebe9f4, #d3cfe7);
  background-image: linear-gradient(to right, #ebe9f4, #d3cfe7);  
}
/* Remove excess padding from home link */
#breadcrumbs ul li:first-child a{ padding-left:2em;}  

/*
This is tricksy.  The element is zero sized, with large borders.
When borders are different color, the browsers "bevel" the joins, making nice diagonals.
By making the top and bottom borders transparent, and the left border a solid color,
we produce a right-pointing arrow.
The last big trick is poisitioning. By positioning the top at 50% we insure that the top edge of the arrow 
is centered with the text.  Since we know the height of the top and bottom borders, we can set a negative margin 
to one border-width so that the point of arrow is now centered with the text.  
*/  
#breadcrumbs ul a::after,	#breadcrumbs ul a::before
{
content: " "; 
display: block; 
width: 0;
height: 0;    
border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid black;   /* Left border in a solid color */
position: absolute;                               
top: 50%;           /* Align the top of this element with the middle of the enclosing content */
left:100%;          /* Push the arrow past the right-side of the enclosing content */
margin-top: -50px;  /* Use a negative margin equal to the top border, so that the arrow is centered */ 
z-index: 2;         /* Make sure it's on top of the other arrow */ 
}

/* A blue triangle for the link */
#breadcrumbs ul a::after
{ 
  z-index: 2;
  border-left-color:#d3cfe7;
}

/*
We're creating another arrow, identical to the last one. Although we're using the "before" pseudo-element, we're using absolute positioning, and moving it all the way to the right, so it will display in the same place as the previous arrow.  We add a 1px left margin to bump it just a single pixel to the right.
*/
#breadcrumbs ul a::before
{
  border-left-color: #796cc8;
  margin-left: 1px;
}

/* Set Hover Colors */
#breadcrumbs ul a:hover{ background: #4e508c; color:#fff;}
#breadcrumbs ul a:hover::after{ border-left-color: #4e508c;}

/* Add rounded upper corners to the breadcrumbs division */
#breadcrumbs, #breadcrumbs ul
{
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}

/*/Round the home link as well */
#breadcrumbs ul li:first-child a
{
 -webkit-border-top-left-radius: 10px;
 -moz-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
}