/* CSS & JS from KPBSD*/

#app-header {
	background: url("https://www.hallco.org/hallcocanvas/HCSD_BackgroundHeader.png") no-repeat scroll 0 0 transparent;
}
#user-nav .Dropdown__Toggle--header, #user-nav>a {
	color: #fff;
}
.header-nav li a {
	color: #fff
}
.feature-region {
	background-image: linear-gradient(to right, #993A1C, #E07956 50%, #993A1C);
}
.header-branding .logo a {
	background: url("https://www.hallco.org/hallcocanvas/HCSD_CatalogHeader.png") no-repeat scroll 0 0 transparent;
	background-size: cover;
	height: 80px;
	width: 211px;
}
.logo {
	margin-top: 5px;
	margin-bottom: 0px;
}



.ember-view.Stickyheader {
    overflow: inherit;
}


/*HOME PAGE  - Original CSS from Canvas*/

#home-page .feature-region {
  height: 5px;
  background-image: -webkit-linear-gradient(left, #317ac4, #6E86C1 50%, #4968C6);
  background-image: linear-gradient(to right, #317ac4, #317ac4 50%, #317ac4);
  background-repeat: no-repeat;;

}


/* Modify the SEARCH BOX BACKGROUND  color*/
#search-form.callout-region {
background-image: -webkit-linear-gradient(left, #EC4B00, #FE5B00 50%, #EC4B00);
background-image: linear-gradient(to right, #EC4B00, #FE5B00 50%, #EC4B00);
background-repeat: no-repeat;
}

.form-control.search-box {
  color: grey;
}
.search-form .search-label {
  display: none;
}

/* Modify the layout of the search box*/
.search-form .search-box-wrapper {
  margin: 0 auto;
  display: block;
  width: 50%;
  padding: 0 0 0 0;
}

/* Modify the corners and size of the search box*/
.search-form .search-box {
  border-radius: 4px;
  height: 34px
}

/* Modify the layout of the search box submit icon*/
.search-form .search-submit {
color: grey;
width: 30px;
height: 30px;
top: 2px;
}


/*Remove Free Course Flag Visibility*/
.product-flag-free {
display: none;
}

/*Remove flag background*/
.jqFlag {
 display: none;
}

footer.callout-region {
display: none;
}


/*UI DROPDOWN CSS STYLE*/
/* Style select/option drop-down list */
/* http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript */

div#select_catalog_wrap {
    position:relative;
}

select#select_catalog {
    margin-right: 1em;
    border: none;
    /* width: 200px;  width can't be fixed, since we're selecting the approriate value after going to the new page and it's text needs to fit. */
    padding: 5px 35px 5px 10px;
    font-size: 16px;
    height: 34px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius:5px;
    color:#fff;
    background: #5a595c url(https://indiana.edu/~oidd/expand/drop-down-arrow-01.png) 97% center no-repeat;
    cursor:pointer;
}

/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
  select {
    background: #5a595c;
    padding: 5px;
  }
}

/* Hide default drop-down arrow in IE11+ */
select#select_catalog::-ms-expand {
    display: none;
}

/* Bring login link vertically inline with select/dropdown */
#user-nav {
    padding: 5px 5px;
    font-size: 16px;
    height: 34px;
}

/* Not displaying this label, but leave styles here in case we add it. */
.choose-catalog-label {
    display:none;
    position:absolute;
    top:-1.5em;
    margin:0;
    font-size:0.8em;
    color:#ddd;
}


/* Second-level (course detail) pages */

#product-page #feature {
    padding-top: 0;
}

/* Custom listing content styles (for HTML edit mode) */
/* ==================================================================== */

.eds-listing h2,
.eds-listing h3 {
    font-weight:bold;
    display:block;
    font-style:normal !important;
    padding-top:30px;
    border-bottom: 2px solid #000000;
    font-size: 30px;
    margin-bottom:20px;
}


.eds-listing .left {
   width:55%; float:left;
}
.eds-listing .right {
   width:40%; float:right;
}

custom.js





custom.js