/*-------------------- The widget box --------------------*/

#degree-finder {

  padding: 10px !important;

  border: 1px solid #666 !important;

  /* Backgrounds */

  background: #EAE3BB !important;

  /* Shadow */

  -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4) !important;

  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */

  -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4) !important;

  /* Firefox 3.5 - 3.6 */

  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4) !important;

  /* Radius */

  -moz-border-radius: 4px !important;

  -webkit-border-radius: 4px !important;

  border-radius: 4px !important;

  -webkit-background-clip: padding-box !important;

}

/*-------------------- The widget title --------------------*/

#degree-finder h1,

#degree-finder h2,

#degree-finder h3,

#degree-finder h4,

#degree-finder h5,

#degree-finder h6 {

  padding: 0 0 0 24px !important;

  font-family: 'Open Sans', sans-serif !important;

  text-rendering: optimizeLegibility !important;

  -webkit-font-smoothing: antialiased !important;

  color: #F06D18 !important;

  font-size: 28px !important;

  line-height: 28px !important;

  font-weight: 800 !important;

  text-transform: uppercase !important;

  border-bottom: none;

  padding-bottom: none;

}

/*-------------------- The rows with select boxes and numbers 1-3 --------------------*/

#degree-finder .degree,

#degree-finder .category,

#degree-finder .subject {

  margin: 25px 0 !important;

}

/*-------------------- The select boxes --------------------*/

#degree-finder .degree select,

#degree-finder .category select,

#degree-finder .subject select {

  width: 180px !important;

  height: 40px !important;

  padding: 0 6px !important;

  border: 1px solid #ccc !important;

  vertical-align: top !important;

  cursor: pointer !important;

  /* Font */

  font-family: 'Open Sans', sans-serif !important;

  text-rendering: optimizeLegibility !important;

  -webkit-font-smoothing: antialiased !important;

  line-height: 40px !important;

  color: #656565 !important;

  font-size: 13px !important;

  /* Backgrounds */

  background: #fff !important;

  background-color: #fff !important;

  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e6e6e6)) !important;

  /* Saf4+, Chrome */

  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6) !important;

  /* Chrome 10+, Saf5.1+ */

  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6) !important;

  /* FF3.6+ */

  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6) !important;

  /* IE10 */

  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6) !important;

  /* Opera 11.10+ */

  background-image: linear-gradient(top bottom, #ffffff, #e6e6e6) !important;

  /* W3C */

  /* Shadow */

  -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.4) !important;

  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */

  -moz-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.4) !important;

  /* Firefox 3.5 - 3.6 */

  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.4) !important;

}

/*-------------------- hack to make the select boxes respond to line-hight --------------------*/

#degree-finder input,

#degree-finder select {

  box-sizing: border-box !important;

  -moz-box-sizing: border-box !important;

  -webkit-box-sizing: border-box !important;

}

/*-------------------- The numbers 1-3 --------------------*/

#degree-finder .input-group-addon {

  padding: 4px 10px !important;

  margin: 0 5px 0 0px !important;

  border: 2px solid #7f8083 !important;

  /* Font */

  font-family: 'Open Sans', sans-serif !important;

  text-rendering: optimizeLegibility !important;

  -webkit-font-smoothing: antialiased !important;

  font-size: 16px !important;

  font-weight: 800 !important;

  color: #656565 !important;

  line-height: 40px !important;

  /* Backgrounds */

  background: #fff !important;

  background-color: #fff !important;

  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d3cccc)) !important;

  /* Saf4+, Chrome */

  background-image: -webkit-linear-gradient(top, #ffffff, #d3cccc) !important;

  /* Chrome 10+, Saf5.1+ */

  background-image: -moz-linear-gradient(top, #ffffff, #d3cccc) !important;

  /* FF3.6+ */

  background-image: -ms-linear-gradient(top, #ffffff, #d3cccc) !important;

  /* IE10 */

  background-image: -o-linear-gradient(top, #ffffff, #d3cccc) !important;

  /* Opera 11.10+ */

  background-image: linear-gradient(top bottom, #ffffff, #d3cccc) !important;

  /* W3C */

  /* Shadow */

  -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.4) !important;

  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */

  -moz-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.4) !important;

  /* Firefox 3.5 - 3.6 */

  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.4) !important;

  /* Radius */

  -moz-border-radius: 50% !important;

  -webkit-border-radius: 50% !important;

  border-radius: 50% !important;

  -webkit-background-clip: padding-box !important;

}

/*-------------------- The submit button --------------------*/

#degree-finder .btn {

  width: 100% !important;

  height: 50px !important;

  border: 1px solid #7f8083 !important;

  vertical-align: top !important;

  /* Font */

  font-family: 'Open Sans', sans-serif !important;

  text-rendering: optimizeLegibility !important;

  -webkit-font-smoothing: antialiased !important;

  line-height: 30px !important;

  font-size: 24px !important;

  color: #e54845 !important;

  font-weight: 800 !important;

  text-transform: uppercase !important;

  /* Backgrounds */

  background: #fff;

  background-color: #fff !important;

  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#c6c6c6)) !important;

  /* Saf4+, Chrome */

  background-image: -webkit-linear-gradient(top, #ffffff, #c6c6c6) !important;

  /* Chrome 10+, Saf5.1+ */

  background-image: -moz-linear-gradient(top, #ffffff, #c6c6c6) !important;

  /* FF3.6+ */

  background-image: -ms-linear-gradient(top, #ffffff, #c6c6c6) !important;

  /* IE10 */

  background-image: -o-linear-gradient(top, #ffffff, #c6c6c6) !important;

  /* Opera 11.10+ */

  background-image: linear-gradient(top bottom, #ffffff, #c6c6c6) !important;

  /* W3C */

  /* Shadow */

  -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.4) !important;

  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */

  -moz-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.4) !important;

  /* Firefox 3.5 - 3.6 */

  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.4) !important;

  /* Radius */

  -moz-border-radius: 5px !important;

  -webkit-border-radius: 5px!important;

  border-radius: 5px !important;

  -webkit-background-clip: padding-box !important;

}

#degree-finder .btn:hover {

  cursor: pointer !important;

  /* Backgrounds */

  background: #fff !important;

  background-color: #fff !important;

  background-image: -webkit-gradient(linear, left top, left bottom, from(#c6c6c6), to(#ffffff)) !important;

  /* Saf4+, Chrome */

  background-image: -webkit-linear-gradient(top, #c6c6c6, #ffffff) !important;

  /* Chrome 10+, Saf5.1+ */

  background-image: -moz-linear-gradient(top, #c6c6c6, #ffffff) !important;

  /* FF3.6+ */

  background-image: -ms-linear-gradient(top, #c6c6c6, #ffffff) !important;

  /* IE10 */

  background-image: -o-linear-gradient(top, #c6c6c6, #ffffff) !important;

  /* Opera 11.10+ */

  background-image: linear-gradient(top bottom, #c6c6c6, #ffffff) !important;

  /* W3C */

  /* Shadow */

  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4) !important;

  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */

  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4) !important;

  /* Firefox 3.5 - 3.6 */

  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4) !important;

}