﻿.breadcrumb {
    padding: 0px;
	background: #D4D4D4;
	list-style: none; 
	overflow: hidden;
    margin-top: 20px;
}
.breadcrumb>li+li:before {
	padding: 0;
}
.breadcrumb li { 
	float: left; 
}
.breadcrumb li.active a {
	background: brown;                   /* fallback color */
	background: #ffc107 ; 
}
.breadcrumb li.completed a {
	background: brown;                   /* fallback color */
	background: hsla(153, 57%, 51%, 1); 
}
.breadcrumb li.active a:after {
	border-left: 30px solid #ffc107;
}
.breadcrumb li.completed a:after {
	border-left: 30px solid hsla(153, 57%, 51%, 1);
} 

.breadcrumb li a {
	color: white;
	text-decoration: none; 
	padding: 10px 0 10px 45px;
	position: relative; 
	display: block;
	float: left;
}
.breadcrumb li a:after { 
	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 hsla(0, 0%, 83%, 1);
	position: absolute;
	top: 50%;
	margin-top: -50px; 
	left: 100%;
	z-index: 2; 
}	
.breadcrumb li 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 white;
	position: absolute;
	top: 50%;
	margin-top: -50px; 
	margin-left: 1px;
	left: 100%;
	z-index: 1; 
}	
.breadcrumb li:first-child a {
	padding-left: 15px;
}
.breadcrumb li a:hover { background: #ffc107  ; }
.breadcrumb li a:hover:after { border-left-color: #ffc107   !important; }



/* numbered buttons */
#status-buttons                 {  }
/*#status-buttons a               { color:#dd4814; display:inline-block; font-size:12px; margin-right:10px; text-align:center; text-transform:uppercase; 
}*/
#status-buttons a:hover         { text-decoration:none !important;
                                   background-color:transparent !important;
}

    #status-buttons li:active {
        text-decoration: none !important;
        background-color: transparent !important;
    }

    #status-buttons > .navbar-nav > li:active, .navbar-nav > li > a:active,
     #status-buttons a:active, .navbar-nav > li:active,
    #status-buttons a:disabled, .navbar-nav > li:disabled
     {
        text-decoration: none !important;
        background-color: none !important;
    }

/* we will style the span as the circled number */
/*#status-buttons span            { background:#080808; display:block; height:30px; margin:0 auto 10px; padding-top:5px; width:30px; 
    border-radius:50%;
    color: rgb(226, 195, 184);
}*/

/* active buttons turn light green-blue*/
/*#status-buttons a.active span   {     background: #dd4814;
    color: azure; }*/

#status-buttons a.active   {     
    font-weight:bold;
    /*color:azure;*/
    color: #777;
    background: none !important;

}


.heading {
    border-bottom: 1px solid rgb(221, 149, 20);
    padding-bottom: 9px;
    position: relative;
}

.heading span {
    background: rgb(221, 72, 20) none repeat scroll 0 0;
    bottom: -2px;
    height: 3px;
    left: 0;
    position: absolute;
    width: 75px;
}

@media (max-width: 480px) {
    #status-buttons  {
      display:none;
   }
 }
