/* This helps you change the color of the header bar in case you want white links */
#app-header {
    padding:4px 0 5px;
    background-color:#158390;
}

#app-header h1 {
    margin:10px 0;
}
/* END */


/* --------------------- User-nav includes changes to the Login / User information link */
#user-nav {
    padding-top:25px;
}
#user-nav > a {
    display:inline-block;
    margin-bottom:0;
    font-weight:normal;
    text-align:center;
    vertical-align:middle;
    cursor:pointer;
    background-image:none;
    border:1px solid transparent;
    /* white-space:nowrap; */
    padding:5px 10px;
    font-size:14px;
    line-height:1.428571429;
    border-radius:4px;
    -webkit-user-select:none;
    color:#F37524;
}

#user-nav > a:hover {
    text-decoration:none;
    color:#F37524;
}

/* Active Color of Login button once logged in */
.header-nav li a {
    color:#F37524;
}
/* END --------------------- */


/* --------------------- Page Links refers to the custom links in header */
#page-links {
    display:inline-block;
}
#page-links a {
    display:inline-block;
    padding:5px 10px;
    font-size:14px;
    color:#ffffff;
}
#page-links a:hover,
.btn-link:hover,
.btn-link {
    color:#F37524;
}
#page-links .piped-list>li:after {
    content:"|";
    color:#ffffff;
}
#page-links .piped-list>li:before {
    display:none;
    margin-right:0;
}
/* End --------------------- */


/* small bar under header on catalog home page */
#home-page .feature-region {
    background-color: #E87722;
    background-image: url(http://pub-images.canvasnetwork.com/faith-chapel/fc-catalog-2000x500.jpg); 
    height: 520px; 
    width: 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
}

/* small bar under header on listing page */
#product-page #feature {
    background-color: #E87722;
    padding-top: 20px;
}

/* changes the search bar */
#search-form.callout-region {
    background-color: #E87722;
    color: white;
    padding: 0;
}

/* changes color of the Load More and Enroll button */ 
.btn-info {
    outline: 0;
    outline-offset: 0;
    border: 0;
    border-radius: 2px;
    background: #158390;
    color: #ffffff;
}

/* changes color of the Load More and Enroll hover button */
.btn-info:hover {
    background: #b8d9dd;
    color: #158390;
}

/* changes color of "Free" on home page */
.product-flag-free {
    background-color: #158390;
}

/* changes text color at bottom of course tile on home page */
.product-tile .product-footer {
    color: #158390;
}

/* changes color of course icon on course tile on home page */
.ProductIcon__LargeCircle--course {
    background: #F37524;
}

/* changes color of program icon on course tile on home page */
.ProductIcon__LargeCircle--program {
    background-color: #F37524;
}

/* changes hover color on course tile on home page */
.product-results .product-tile:hover {
    box-shadow: inset 0px -5px 0px #F37524;
}

/* changes color of footer social media bar */
#footer-bar {
    background-color: #158390;
    padding: 18px 0 18px 0;
    margin-top: -30px;
    margin-bottom: 20px;
}

/* hides the default footer */
#app-footer .container {
    display: none;
}

/* MEDIA FORMATTING rules for responsive devices. This coding is optional but helpful for tablets and mobile devices. */

/* Media for header */
@media and (max-width: 768px) {
#page-links #app-header .header-nav {
    float: none;
    width: auto;
    }
}

/* Media for feature region */
  
@media and (max-width: 1200px) {
#home-page #feature div {
	max-width: 800px;
    }
}
   
@media and (max-width: 768px) {
#home-page #feature {
	height: 265px;
	text-align: center;
    padding: 0 2em;
    }
}

.alert-top {
	margin-bottom: 0;
}

/* END MEDIA FORMATTING */