#headerSearch {
	height: 56px;
}

.searchOptions {
    box-sizing: border-box;
    display: none;
    background: #f7f7f7 url("http://www.cengagebrain.com/static/images/productOneColBg.jpg") repeat scroll 0 0;
    border-radius: 0 0 3px 3px;
    border: 1px solid #b1b1b1;
    position: absolute;
    top: 55px;
    width: 99.8%;
    text-align: center;
    padding: 8px 0;
    z-index: 1;
}

.searchOptions li {
    border-right: 1px solid #b1b1b1;
    cursor: pointer;
    float: left;
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: center;
    width: 48%;
}

.searchOptions li .fa-check-square {
    display: none;
}

.searchOptions li.last {
    border-right: none;
}

.searchOptions li.selected .fa-check-square {
    display: inline-block;
}

.searchOptions li.selected .fa-square-o {
    display: none;
}

.searchOptions li i {
    color: #008bcb;
    font-size: 14px;
}

.searchOptions li a {
    font-size: 14px;
    font-weight: bold;
    color: #575757;
    text-decoration: none;
}

.courseField,
.schoolField {
    display: none;
    position: absolute;
    top: 0;
    width: 100%;
}

.courseSearch,
.courseNavElements {
    display: none;
}

.courseSearch {
	height: 56px;
}

.courseSearch,
.productField {
	position: absolute;
	width: 100%;
}

.selectedSchool {
    background-color: #bfbfbf;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    padding: 5px 5px 5px 10px;
    position: absolute;
    right: 6px;
    top: 26px;
}

.selectedSchool i {
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    padding-left: 10px;
}

.searchOptions li .fa.fa-square-o {
    font-size: 15px;
    padding-right: 4px;
}

.courseSearch ul {
    *padding 0px 5px; /* IE 6 & 7 Fix */
    padding: 0 14px 4px 0px;
    zoom: 1;
    z-index: 9999;
    background-color: #fff;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    _border-right: 3px solid #ccc; /* IE 6 Fix */
    _border-bottom: 3px solid #ccc; /* IE 6 Fix */
    clear: both;
    padding: 10px;
    width: 419px;
    z-index: 9999;
    overflow: auto;
    position: absolute;
    list-style-type: none;
    margin: 0;
}

.courseSearch li.cantFindCourse,
.courseSearch li.courseNotFound,
.courseSearch li.schoolNotFound {
    float: left;
    margin: 0;
    padding: 15px 0 15px 6px;
    width: 80%;
    border: none;
}

.courseSearch li.cantFindCourse a,
.courseSearch li.courseNotFound a,
.courseSearch li.schoolNotFound a {
    display: inline;
    padding: 0 !important;
    margin: 0 !important;
}

.courseSearch li.cantFindCourse a:hover,
.courseSearch li.courseNotFound a:hover,
.courseSearch li.schoolNotFound a:hover,
.courseSearch li.close a:hover,
.courseSearch li.cantFindCourse:hover a,
.courseSearch li.courseNotFound:hover a,
.courseSearch li.schoolNotFound:hover a,
.courseSearch li.close:hover a {
    background-color: transparent !important;
    color: #0085b2;
}

.courseSearch ul.ui-autocomplete li.courseNotFound.ui-menu-item a.ui-state-focus,
.courseSearch ul.ui-autocomplete li.schoolNotFound.ui-menu-item a.ui-state-focus,
.courseSearch ul.ui-autocomplete li.cantFindCourse.ui-menu-item a.ui-state-focus,
.courseSearch ul.ui-autocomplete li.close.ui-menu-item a.ui-state-focus {
    background-color: transparent;
    color: #0085b2;
    text-decoration: underline;
}

.courseSearch li.close {
    float: right;
    width: 10%;
    text-align: right;
    padding: 15px 6px 15px 0;
}

.courseSearch li.close a {
    padding: 0 !important;
    margin: 0 !important;
}

.courseSearch .cantFindCourse,
.courseSearch .close {
    border: medium none;
}

.courseSearch li a {
    display: block;
    cursor: pointer;
    _height: 1px;
    margin: 5px 0;
    padding: 15px;
    text-decoration: none;
    zoom: 1;
    line-height: 14px;
}

.courseSearch li a.ui-state-focus,
.courseSearch li a.ui-state-focus span {
    background-color: #205388;
    color: #fff;
    text-decoration: none;
}

.courseSearch ul.ui-autocomplete li.courseNotFound.ui-menu-item a.ui-state-focus,
.courseSearch ul.ui-autocomplete li.schoolNotFound.ui-menu-item a.ui-state-focus,
.courseSearch ul.ui-autocomplete li.cantFindCourse.ui-menu-item a.ui-state-focus,
.courseSearch ul.ui-autocomplete li.close.ui-menu-item a.ui-state-focus {
    background-color: transparent;
    color: #0085b2;
    text-decoration: underline;
}

.courseSearch .schoolLocation,
.courseSearch .instructor {
    float: right;
}

.productField ul li.suggestRegister {
    width: 100% !important;
    float: none !important;
    text-align: left !important;
    color: #575757 !important;
    padding: 10px 0 10px 6px !important;
}

.productField ul li.suggestRegister a {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
}

.schoolField ul,
.courseField ul,
.productField ul {
  overflow: auto;
  max-height: 400px;
}

.schoolField ul li,
.courseField ul li {
    border-bottom: 1px solid #9e9e9e;
}

.schoolField ul li a,
.courseField ul li a {
    margin: 10px 0 !important;
    padding: 10px !important;
}

.schoolField ul li a span {
    font-size: 12px !important;
}

.schoolName {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 60%;
}

@media screen and (max-width: 465px) {
	form.productField ul.ui-autocomplete,
	.schoolField ul.ui-autocomplete,
	.courseField ul.ui-autocomplete {
	    width: 94% !important;
	}
	
	.courseSearch .schoolLocation,
	.courseSearch .instructor {
	    display: block;
	    float: none;
	}
	
	.selectedSchool span {
	    font-size: 10px !important;
	}
	
	.schoolName {
	    width: 99%;
	}
}

@media screen and (max-width: 410px) {
	 #headerSearch .input-group input {
    	font-size: 10px;
	}
	
	#global_search + a + a.greenWhiteButton {
		padding: 8px 0;
	}
	
	.courseSearch ul li a span,
	.productField ul li a span {
	    font-size: 10px;
	}
	
	.searchOptions {
		top: 49px;
	}
	
	.searchOptions li a {
		font-size: 12px;
	}
	
	#headerSearch .containedLink {
		font-size: 10px;
		padding: 3px 55px 3px 10px;
	}
	
	.selectedSchool span.schoolNameText {
		font-size: 10px;
	}
	
	.selectedSchool {
		padding: 4px 5px 5px 10px;
		right: 4px;
		top: 25px;
	}
	
}

@media screen and (max-width: 384px) {
	.selectedSchool span.schoolNameText {
	    display: inline-block;
	    font-size: 9px !important;
	    overflow: hidden;
	    position: relative;
	    text-overflow: ellipsis;
	    top: 1px;
	    white-space: nowrap;
	    width: 80px;
	}
	
	.selectedSchool {
		top: 24px;
		right: 3px;
	}
}