.cms-site-search-wrapper {
   display: block;
   width: 100%;
   margin: 0 auto;
   background: #fff;
   display: block;
 }

.toggle-wrapper .switch {
  position: relative;
  margin: 10px auto;
  height: 32px;
  width: 200px;
  background: #f7f7f7;
  border-radius: 3px;
   -webkit-box-shadow: 2px 2px 5px #ddd inset;
   -moz-box-shadow: 2px 2px 5px #ddd inset;
   box-shadow: 2px 2px 5px #ddd inset;
   border: 1px solid #d9d9d9;
}

.toggle-wrapper .switch-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 98px;
  line-height: 26px;
  font-size: 14px;
  color: #999;
  text-align: center;
  -webkit-text-shadow: 0 1px 1px rgba(255,255,255, 0.45);
  -moz-text-shadow: 0 1px 1px rgba(255,255,255, 0.45);
  text-shadow: 0 1px 1px rgba(255,255,255, 0.45);
  cursor: pointer;
  font-weight: normal;
  font-family: 'Trade Gothic W01 Light', arial, sans-serif;
  line-height: 1;
  padding: 9px 0;
  letter-spacing: -.02em;
}
.toggle-wrapper .switch-label:active {
  font-weight: normal;
  font-family:'Trade Gothic Next W01';
  color: #999;
}

.toggle-wrapper .switch-label-off {
  padding-left: 2px;
}

.toggle-wrapper .switch-label-on {
  padding-right: 2px;
}

/*
 * Note: using adjacent or general sibling selectors combined with
 *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
 *       See this article for more info and a potential fix:
 *       http://css-tricks.com/webkit-sibling-bug/
 */
.toggle-wrapper .switch-input {
  display: none;
}
.toggle-wrapper .switch-input:checked + .switch-label {
  font-weight: normal;
  color: #fafafa;
  color: rgba(240,240,240,0.9);
  -webkit-text-shadow: 0 1px rgba(0,0,0, 0.25);
  -moz-text-shadow: 0 1px rgba(0,0,0, 0.25);
  text-shadow: 0 1px rgba(0,0,0, 0.25);
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
  font-weight: normal;
  font-family: 'Trade Gothic W01 Light';
}
.toggle-wrapper .switch-input:checked + .switch-label-on ~ .switch-selection {
  left: 100px;
  /* Note: left: 50% doesn't transition in WebKit */
}

.toggle-wrapper .switch-selection {
  display: block;
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  width: 98px;
  height: 28px;
  background: #65bd63;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
  background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
  background-image: -o-linear-gradient(top, #9dd993, #65bd63);
  background-image: linear-gradient(to bottom, #9dd993, #65bd63);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  -mozbox-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  -webkit-transition: left 0.15s ease-out;
  -moz-transition: left 0.15s ease-out;
  -o-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
}
.toggle-wrapper .switch-red .switch-selection {
  background: #880000;
  background-image: -webkit-linear-gradient(top, #aa0000, #880000);
  background-image: -moz-linear-gradient(top, #aa0000, #880000);
  background-image: -o-linear-gradient(top, #aa0000, #880000);
  background-image: linear-gradient(to bottom, #aa0000, #880000);
}








/* input css */

.search-bar {
	display: block;
	width: 100%;
	padding: 10px 10px 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 960px;
	margin: 0 auto;
}

.search-bar .search,
.search-bar .toggle-wrapper {
   width: 100%;
   display: block;
}

.form-search {
   display: block;
}

.form-search input[type="text"],
.form-search input[type="search"] {
   color: #333 !important;
   font-family: 'Trade Gothic W01 Light';
   font-size: 16px;
   padding: 0 !important;
   width: 78%;
   height: 100% !important;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   line-height: 1.25em;

   background: #f7f7f7;
   border: 1px solid #d9d9d9;
   -webkit-box-shadow: 2px 2px 5px #ddd inset;
   -moz-box-shadow: 2px 2px 5px #ddd inset;
   box-shadow: 2px 2px 5px #ddd inset;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   height: 35px;
   outline: none;
   padding: 6px 6px 6px !important;
   display: inline-block;
   float: left;

   -webkit-appearance: none;
}

.form-search input[type="text"]:hover,
.form-search input[type="search"]:hover,
.form-search input[type="text"]:focus,
.form-search input[type="search"]:focus {
   border: 1px solid #c7c7c7;
}

.form-search input[type="submit"] {
   height: 34px;
   border: 0 none;
   background-color: #aa0000;
   background-image: url('https://www.stonybrook.edu/css/images/search-box-icon.png');
   background-repeat: no-repeat;
   background-position: 50%;

   background: url('https://www.stonybrook.edu/css/images/search-box-icon.png') no-repeat 50% 50%,
               -webkit-linear-gradient(top, #aa0000, #880000);
   background: url('https://www.stonybrook.edu/css/images/search-box-icon.png') no-repeat 50% 50%,
               -moz-linear-gradient(top, #aa0000, #880000);
   background: url('https://www.stonybrook.edu/css/images/search-box-icon.png') no-repeat 50% 50%,
               -o-linear-gradient(top, #aa0000, #880000);
   background: url('https://www.stonybrook.edu/css/images/search-box-icon.png') no-repeat 50% 50%,
               linear-gradient(top, #aa0000, #880000);

   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   cursor: pointer;
   text-indent: -9999px;
   color: #a00;
   position: relative;

   outline: none;

   display: inline-block;
   width: 21%;
   margin: 0 0 0 1%;
}

.form-search input[type="submit"]:hover {
   background-color: #990000;
   background-image: url('https://www.stonybrook.edu/css/images/search-box-icon.png');
   background-repeat: no-repeat;
   background-position: 50%;

   background: url('https://www.stonybrook.edu/css/images/search-box-icon.png') no-repeat 50% 50%,
               -webkit-linear-gradient(top, #990000, #880000);
   background: url('https://www.stonybrook.edu/css/images/search-box-icon.png') no-repeat 50% 50%,
               -moz-linear-gradient(top, #990000, #880000);
   background: url('https://www.stonybrook.edu/css/images/search-box-icon.png') no-repeat 50% 50%,
               -o-linear-gradient(top, #990000, #880000);
   background: url('https://www.stonybrook.edu/css/images/search-box-icon.png') no-repeat 50% 50%,
               linear-gradient(top, #990000, #880000);
}

div.searchWrap {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

span.search-sb {
	display: block;
	color: #fff;
	background-color: #900;
	width: auto;
	text-align: center;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	z-index: 10;
	padding: 6px 16px 8px;
	line-height: 1;

	text-decoration: none;
	font-size: 11px;
	font-family: 'Trade Gothic Next W01', arial;
	font-weight: 400;
	font-size: 12px;
	text-transform: uppercase;
	-webkit-border-radius: 0 0 14px 14px;
	-moz-border-radius: 0 0 14px 14px;
	border-radius: 0 0 14px 14px;
	border: 0 none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	background: -webkit-linear-gradient(top, #990000, #880000);
	background: -moz-linear-gradient(top, #990000, #880000);
	background: -o-linear-gradient(top, #990000, #880000);
	background: linear-gradient(top, #990000, #880000);
}

span.search-sb:before {
	content: "\f0d8";
	padding-right: 8px;
	font-family: FontAwesome;
}


@media only screen and (min-width: 960px) {

   .search-bar .search,
   .search-bar .toggle-wrapper {
      width: 100%;
      display: block;
      font-size: 1.4em;
   }

   .search-bar .search {
      float: right;
      width: 240px;
   }

   .search-bar .toggle-wrapper {
      float: right;
	  width: auto;
	  margin: 0 1% 0 0;
   }

   .search-bar .toggle-wrapper .switch {
      margin: 0 28px 0 0;
      float: right;
   }

   .search-bar .toggle-wrapper .switch:before,
   .search-bar .toggle-wrapper .switch:after {
      position: absolute;
      top: 9px;
      font-size: 17px;
      font-family: 'Trade Gothic W01 Light', arial, sans-serif;
      line-height: 1;
      letter-spacing: -.02em;
      text-shadow: 0 1px 0 #fff;
      color: #777;
   }

   .search-bar .toggle-wrapper .switch:before {
      content: "Search";
      left: -60px;
   }

   .search-bar .toggle-wrapper .switch:after {
      content: "for";
      right: -30px;
   }

   .form-search input[type="text"],
   .form-search input[type="search"] {
      width: 70%;
   }

   .form-search input[type="submit"] {
	  margin: 0 0 0 2%;
      width: 28%;
   }

}