/** Copyright 2005 Google Inc. All rights reserved. */

/* the GSearchControl CSS Classes
 * .gsc-control : the primary class of the control
 */
.gsc-control {
  width: 300px;
}

.gsc-control div {
  position: static;
}

/* control inputs
 * .gsc-search-box : the container that hosts the text input area
 * .gsc-input : the text input area
 * .gsc-keeper : the save link below savable results
 */
form.gsc-search-box {
  font-size: 13px;
  margin-top : 0px;
  margin-right : 0px;
  margin-bottom : 4px;
  margin-left : 0px;
  width: 100%;
}

/*
 * This table contains the input element as well as the search button
 * Note that the search button column is fixed width, designed to hold the
 * button div's background image
 */
table.gsc-search-box {
  border : none;
  border-spacing : 0px 0px;
  width : 100%;
}

td.gsc-search-button {
  vertical-align : middle;
  width : 36px;
}

div.gsc-search-button {
  height : 16px;
  display : inline;
  margin-left : 4px;
  padding-left : 29px;
  background-repeat: no-repeat;
  background-position: center right;
  background-image: url('search.gif');
  cursor : pointer;
}

/*
 * Given that this is sitting in a variable width tabel cell, the idea is
 * for it to consume the entire cell. The adjacent cell contains the search
 * button and that is a fixed width cell.
 */
input.gsc-input {
  padding-left : 2px;
  border-style : solid;
  border-width : 1px;
  border-color : #BCCDF0;
  width : 100%;
}

.gsc-keeper {
  color: #3366cc;
  text-decoration: underline;
  font-size: 13px;
  cursor: pointer;
  font-weight: normal;

  padding-left: 16px;
  background-repeat: no-repeat;
  background-position: 1px 3px;
  background-image: url('blue_check.gif');
}
.gsc-imageResult .gsc-keeper {
  text-decoration: none;
}

/* each section of results has a results header table
 * .gsc-resultsHeader : the header itseld
 * td.twiddleRegionCell : the section that controls twiddleing of the section to expand/collapse
 * td.configLabelCell : the twiddler that controls active configuration of a searcher (used in GlocalSearch)
 * .gsc-twiddle : the twiddle image, note, this is a div that wraps gsc-title so that standard image replacement is feasible
 * .gsc-twiddle-closed : class added to gsc-twiddle when the twiddler is in the closed state
 * .gsc-twiddle-opened : class added to gsc-twiddle when the twiddler is in the opened state
 * .gsc-title : the section's title (e.g., Web Results, etc.)
 * .gsc-stats : contains the result counts
 * .gsc-stats.gsc-partialExpand : partial expansion indicator telling you to click here to see additional results)
 */
.gsc-resultsHeader {
  clear: both;
  width: 100%;
  border-bottom: 1px solid #e9e9e9;
  margin-bottom : 4px;
}

.gsc-resultsHeader td.gsc-twiddleRegionCell{
  width: 75%;
}

.gsc-resultsHeader td.gsc-configLabelCell{
  text-align: right;
  width: 75%;
}

/*
 * note that the next three classes are all joined together
 * to implement the twiddle image. apps can substitute in their
 * own images but will need to account for the image size here
 * as well as in the left padding of the title element
 *
 * Note: uds provides the following images that work with the geometry/padding defined below
 *  to use these images simply over-ride the.gsc-twiddle-opened/-closed class and specify an alternate image
 *  or use an image of your own design
 */
.gsc-resultsHeader .gsc-twiddle{
  margin-top: 4px;
  display: inline;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: 0px 2px;
}
.gsc-resultsHeader td.gsc-twiddle-closed div.gsc-twiddle{
  background-image: url('arrow_close.gif');
}
.gsc-resultsHeader td.gsc-twiddle-opened div.gsc-twiddle{
  background-image: url('arrow_open.gif');
}

.gsc-resultsHeader .gsc-title{
  color: #676767;
  margin-right: 10px;
  padding-left: 14px;
  display: inline;
}

.gsc-resultsHeader .gsc-stats{
  color: #676767;
  font-size: 11px;
  font-weight: normal;
}

.gsc-resultsHeader .gsc-stats{
  color: #676767;
  font-size: 11px;
  font-weight: normal;
}

.gsc-resultsHeader td.gsc-twiddle-opened .gsc-stats{
  cursor: pointer;
  padding-left: 24px;
  background-repeat: no-repeat;
  background-position: center left;
}

.gsc-resultsHeader td.gsc-twiddle-opened .gsc-stats.gsc-small-results-active{
  background-image: url('small_results_active.gif');
}

.gsc-resultsHeader td.gsc-twiddle-opened .gsc-stats.gsc-large-results-active{
  background-image: url('large_results_active.gif');
}

.gsc-resultsHeader td.gsc-twiddle-closed .gsc-stats.gsc-partialExpand,
.gsc-resultsHeader td.gsc-twiddle-opened .gsc-stats.gsc-partialExpand,
.gsc-resultsHeader td.gsc-twiddle-closed .gsc-stats {
  padding-left: 0px;
  background-image: none;
}

.gsc-resultsHeader .gsc-stats.gsc-partialExpand{
  color: rgb(60, 85, 185);
  font-size: 12px;
  font-weight: normal;
  cursor: pointer;
}

.gsc-resultsHeader .gsc-configLabel{
  color: #676767;
  display: inline;
  font-size: 11px;
  cursor: pointer;
}

.gsc-resultsHeader td.gsc-configLabelCell span.gsc-twiddle-closed {
  padding-right: 12px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('settings.gif');
}


/* tabbed mode of search control
 * .gsc-tabsArea : the box containing all of the tabs
 * .gsc-tabHeader : an individual tab
 * .gsc-tabHeader.gsc-tabhActive : the active tab
 * .gsc-tabHeader.gsc-tabhInactive : an inactive tab
 * .gsc-tabData : the data area/box containg results and header data for each tab
 * .gsc-tabData.gsc-tabdActive : the data area for the active tab
 * .gsc-tabData.gsc-tabdInactive : the data area for inactive tabs
 */
.gsc-tabsArea {
  clear: both;
  margin-top: 6px;
  }

.gsc-tabHeader {
  display: inline;
  cursor: pointer;
  padding-left: 6px;
  padding-right: 6px;
  margin-right: 2px;
  }

.gsc-tabHeader.gsc-tabhActive {
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  border-top: 2px solid #ff9900;
  color: black;
  }

.gsc-tabHeader.gsc-tabhInactive {
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  border-top: 2px solid #e9e9e9;
  background: #e9e9e9;
  color: #676767;
  }

.gsc-tabData.gsc-tabdActive {
  display: block;
  }

.gsc-tabData.gsc-tabdInactive {
  display: none;
  }

/* tab specific results header supression
 * - no twiddle, tabbed mode runs in full expand mode
 * - no title
 * - no stats
 */
.gsc-tabData img.gsc-twiddle {
  display: none;
  }

.gsc-tabData .gsc-resultsHeader img.gsc-twiddle {
  display: none;
  }

.gsc-tabData .gsc-resultsHeader .gsc-title {
  display: none;
  }

.gsc-tabData .gsc-resultsHeader .gsc-stats {
  display: none;
  }


/* the results for each section
 * .gsc-results : the collection of results for a given searcher
 * .gsc-result : a generic result within the control. each result has this class, as well as .gsc-xxxResult where xxx is web, image, local, blog, etc.
 */
.gsc-results {
  clear: both;
  padding-bottom: 2px;
}

.gsc-result {
  margin-bottom: 10px;
}

.gsc-result .gs-title {
  height: 1.4em;
  overflow: hidden;
  }

/* specialized, result type specific, fine grained controls */
.gsc-result div.gs-watermark {
  display: none;
}

/* Ads
 * inline the title div so that we can have an adjecent ad marker
 * in the control, the ad-marker is supressed since ads are already positioned
 * underneath a results divider
 */
.gsc-webResult a div.gs-title {
  display: inline;
}
.gsc-results .gsc-result span.gs-ad-marker {
  display: none;
}

/* Local Search
 * map region for fine tuning local search results from within the control
 * .gsc-locationConfig : class used if the hosting app is bound to maps
 * .gsc-locationConfigNoMap : class used if the hosting app is not bound to maps (text controls used to scope results)
 */

div.gsc-locationConfig {
  border: 1px solid #979797;
  height: 200px;
  margin-top: 10px;
  margin-bottom: 10px;
  }

div.gsc-locationConfigNoMap {
  margin-top: 6px;
  margin-bottom: 6px;
  }

div.gsc-locationConfigNoMap .gsc-locationStringLabel {
  color: #676767;
}
div.gsc-locationConfigNoMap .gsc-locationString {
  color: #676767;
  border: 1px solid #e9e9e9;
  width: 75%;
  margin-bottom: 8px;
  }

/* Image Search
 * - support for horizontal and vertical orientation
 * - title, url, and size supression
 */
.gsc-results.gsc-imageResult .gsc-imageResult.horizontal{
  float: left;
  width: 65px;
  margin-bottom: 4px;
  margin-right: 8px;
  text-align: center;
}

.gsc-results.gsc-imageResult .gsc-imageResult.vertical{
  float: none;
  margin-bottom: 4px;
  margin-right: 8px;
  text-align: left;
}

.gsc-results.gsc-imageResult .gsc-imageResult.horizontal .gsc-keeper {
  background-position: center;
}

.gsc-imageResult .gs-title {
  display: none;
}
.gsc-imageResult .gs-visibleUrl {
  display: none;
}
.gsc-imageResult .gs-size {
  display: none;
}

/* Video Search
 * - metadata, publisher small font
 * - single line title
 */

.gsc-videoResult .gs-videoResult .gs-metadata {
  font-size: 11px;
}

.gsc-videoResult .gs-videoResult .gs-title {
  line-height: 1.3em;
  height: 1.3em;
  overflow: hidden;
  }

.gsc-videoResult .gs-videoResult .gs-snippet {
  line-height: 1.3em;
  max-height: 2.6em;
  overflow: hidden;
  }

/*** End of Control, Begin Results ***/

/* generic, cross cutting result style
 * - in the form of .gs-result .gs-xxx where xxx is the generic style
 * .gs-title : typically the first line of a result, typically a link, image results over ride this, since for image results, the image is the link
 * .gs-divider : typically seperates results from ads
 * .gs-visibleUrl : typically the last line of a result, displayed in green. sometimes a link (like in blog search)
 * img.gs-image : an actial image in a result
 * .gs-phone : a phone number
 * .gs-address : an address (includes street, city, region, country)
 * .gs-streetAddress : a street (including #)
 * .gs-city : a city
 * .gs-region : a region (zip code, area, etc.)
 * .gs-country : a country
 * .gs-snippet : snippetized content
 * .gs-watermark : indicator that user selected this result
 * .gs-metadata : generic metadata, e.g., audio uses this class for top songs for an artist
 * .gs-image-box : generic container for a result's image (within a table)
 * .gs-text-box : generic container for a result's text content (within a table). Note that this class, and image-box are only used in video
 */
.gs-result .gs-title,
.gs-result .gs-title * {
  color: #0000cc;
  font-weight: normal;
  text-decoration: underline;
}

.gs-divider {
  padding-bottom: 8px;
  text-align: center;
  color: #676767;
}

.gs-result a.gs-visibleUrl,
.gs-result .gs-visibleUrl {
  color: #008000;
  text-decoration: none;
}

.gs-result img.gs-image {
  border: 1px solid #0000cc;
}

.gs-result .gs-phone {
  color: #008000;
}

.gs-result a.gs-publisher,
.gs-result .gs-publisher {
  color: #008000;
  text-decoration: none;
}

.gs-result a {
  cursor: pointer;
}

.gs-result .gs-address {
}

.gs-result .gs-snippet {
}

.gs-result .gs-watermark{
  font-size: 10px;
  color: #7777cc;
}

.gs-result .gs-metadata{
  color: #676767;
}

/* searcher specific styling for
 * - web ad
 * - web (none)
 * - local
 * - image (none)
 * - blog (none)
 * - video (none)
 * - audio
 */

/* webAd search specific over rides
 * .gs-ad-marker : disabled in control, but on in green to indicate clipped result is an ad
 */
.gs-webAd span.gs-ad-marker {
  padding-left: 4px;
  color: #008000;
  text-decoration: none;
}

/* local search specific over rides
 * - city, region displayed inline
 * - country supressed
 * - small font size for info window's
 */

div.gs-city {
  display: inline;
}

div.gs-region {
  display: inline;
}

div.gs-country {
  display: none;
}

div.gs-infoWindow * {
  font-size: 11px;
  }

/* video search specific over rides
 * - align the table data
 * - default image width garuntee
 * - appropriate cell seperation
 */

/* todo(markl): workaround until gre in gmail fixes his styles */
.gs-videoResult * {
  font-size: 13px;
  }

.gs-videoResult td {
  vertical-align: top;
  }

.gs-videoResult td div.gs-image-box {
  min-width: 110px;
  }

.gs-videoResult td div.gs-text-box {
  margin-left: 10px;
  }