/**
 * forms-search.css
 * 
 * Global styles for the search form and the modal which appears below it when the user starts typing. To illustrate the modal in this prototype, it currently opens when the user clicks inside it and the search form auto-populates with "apple".
 * 
 * Index
 * 
 * - Search Form Container (Contains: Select Element, Input field, Search button)
 * - Select Element
 * - Search Input Field
 * - Placeholders
 * - Search Button
 * - Search Modal: Positioning and Styling
 * - Search Modal: General Content
 * - Search Modal content: Left side
 * - Search Modal content: Right side
 * 
 */

/*-----------------------------------------------------------------------
# Search Form Container
------------------------------------------------------------------------*/

.search-form {
  border: 1px solid #979797;
  width: 760px;
  display: inline-block;
  border-radius: 4px;
}

.search-form form > * { float: left; }

/*-----------------------------------------------------------------------
# Select Element
------------------------------------------------------------------------*/

.search-form .select-element {
  margin: 0;
  width: 11%;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  height: 36px;
}

.select-element { background-color: #fff; }

.search-form .select-element .ui-selectmenu-button.ui-button {
  border: none;
  border-radius: 0;
  padding: 0 2px 0 16px;
}

.search-form .select-element .ui-selectmenu-icon.ui-icon { margin-right: 12px; }

/*-----------------------------------------------------------------------
# Search Input Field
------------------------------------------------------------------------*/

.search-form input[type="search"] {
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
  padding: 0 15px;
  width: 83%;
  height: 36px;
}

/*-----------------------------------------------------------------------
# Placeholders
------------------------------------------------------------------------*/

input[type="search"]::-webkit-input-placeholder {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

input[type="search"]:-ms-input-placeholder {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

input[type="search"]::-ms-input-placeholder {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

input[type="search"]::placeholder {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

/*-----------------------------------------------------------------------
# Search button
------------------------------------------------------------------------*/

.search-form button {
  background: #fff url(../../../img/icons/icn-search-blue.png) center center no-repeat;
  border: none;
  cursor: pointer;
  display: block;
  height: 36px;
  width: 6%;
  border-radius: 0 4px 4px 0;
}

.search-form button:hover,
.search-form button:active
{
  background: #fff url(../../../img/icons/icn-search-blue-hover.png) center center no-repeat;
}


/*-----------------------------------------------------------------------
# Search Modal: Positioning and Styling
------------------------------------------------------------------------*/

.search-form-container { position: relative; }

.menu-search {
  z-index: 9999;
  position: absolute;
  width: 520px;
  left: 84px;
  top: 38px;
}

/*-----------------------------------------------------------------------
# Search Modal: General Content
------------------------------------------------------------------------*/

.header-nav .menu-search a { display: block; }

/* Gives a 16px padding to all content within the modal */
.menu-search .search-left, .menu-search .search-right { padding: 16px; }

/* Styles links: active and hover states */
.search-left a span, .search-right a { color: #2375BB; }
.search-left a span:hover, .search-left a span:active, .search-right a:hover, .search-right a:active { color: #005394; }

.menu-search a:not(.see-all) { text-align: left; }

/*-----------------------------------------------------------------------
# Search Modal content: Left side
------------------------------------------------------------------------*/

.search-left {
  float: left;
  width: 40%;
}

.search-left a { 
  color: #454545; 
  line-height: 2;
  display: block;
}

.search-left span {
  font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

/*-----------------------------------------------------------------------
# Search Modal content: Right side
------------------------------------------------------------------------*/

.search-right .section { margin: 0 0 12px 0; }

.search-right {
  float: right;
  width: 60%; 
  border-left: 1px solid #eeeeee;
}

/* Vertical aligns all the images in the search dropdown */
.search-right .span-2-of-12 { position: relative; height: 48px; }

.search-right .span-2-of-12 img { 
  position: relative; 
  top: 50%;
  transform: translateY(-50%);
}

/* Styles "See all" link at the bottom of this section */
.menu-search .see-all { width: 100%; text-align: center; }