/** Copyright 2005 Google Inc. All rights reserved. */ /* the GSearchControl CSS Classes * .gsc-control : the primary class of the control */ div.google_text_before { float: left; padding-top: 3px; margin-right: 3px; font-size: 0.85em; } #google_searchcontrol { } #search_result { padding: 10px; } .gsc-control { width: 99%; } .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: 1em; 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-style: none; border-width: 0px; border-spacing: 0px 0px; /* width : auto;*/ margin-bottom: 2px; } table.gsc-search-box td { vertical-align: middle; } /*table.gsc-search-box td.gsc-input { padding-right: 2px; }*/ td.gsc-search-button { width: 1%; } td.gsc-clear-button { width: 1px; } /** * undo common generic table rules * that tend to impact branding */ table.gsc-branding td, table.gsc-branding { margin: 0 0 0 0; padding: 0 0 0 0; border: none; display: none; } table.gsc-branding { border-style: none; border-width: 0px; border-spacing: 0px 0px; width: 100%; } .gsc-branding-text { color: #676767; } td.gsc-branding-text { vertical-align: top; } td.gsc-branding-text div.gsc-branding-text { padding-bottom: 2px; text-align: right; font-size: 1.0em; margin-right: 2px; } div.gsc-branding-youtube td.gsc-branding-text { vertical-align: middle; } td.gsc-branding-img-noclear { width: 51px; vertical-align: bottom; } td.gsc-branding-img { width: 65px; vertical-align: bottom; } div.gsc-branding-youtube td.gsc-branding-img-noclear { width: 55px; } div.gsc-branding-youtube td.gsc-branding-img { width: 69px; } table.gsc-branding-vertical td.gsc-branding-text div.gsc-branding-text { margin-right: 0px; text-align: center; } table.gsc-branding-vertical td.gsc-branding-img-noclear { text-align: center; } div.gsc-branding-img, div.gsc-branding-img-noclear, img.gsc-branding-img, img.gsc-branding-img-noclear { padding-top: 1px; } img.gsc-branding-img, img.gsc-branding-img-noclear { margin: 0 0 0 0; padding-right: 0; padding-left: 0; padding-bottom: 0; border: none; display: inline; } a.gsc-branding-clickable { cursor: pointer; } /*input.gsc-search-button { margin-left: 2px; font-size: 0.9em; cursor: pointer; background: #525252; color: white; border-width: 1px; }*/ div.gsc-clear-button { display: none; text-align: right; margin-left: 4px; margin-right: 4px; padding-left: 10px; background-repeat: no-repeat; background-position: center center; background-image: url('http://www.google.com/uds/css/clear.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: #676767; width: 115px; height: 16px; background: #fff; font-size: 1.0em; }*/ .gsc-keeper { color: #3366cc; text-decoration: underline; font-size: 1.1em; cursor: pointer; font-weight: normal; padding-left: 16px; background-repeat: no-repeat; background-position: 1px 3px; background-image: url('http://www.google.com/uds/css/blue_check.gif'); } /* 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-resultsHeader { width: 100%; border: 0; border-bottom: 1px solid #e9e9e9; margin-bottom: 4px; clear: both; } .gsc-resultsHeader td.gsc-twiddleRegionCell{ width: 75%; border: 0; } .gsc-resultsHeader td.gsc-configLabelCell{ text-align: right; width: 75%; border: 0; } /* * 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('http://www.google.com/uds/css/arrow_close.gif'); } .gsc-resultsHeader td.gsc-twiddle-opened div.gsc-twiddle{ background-image: url('http://www.google.com/uds/css/arrow_open.gif'); }*/ .gsc-resultsHeader .gsc-title{ color: #676767; margin-right: 10px; padding-left: 0; font-size: 1.0em; display: inline; } .gsc-resultsHeader .gsc-stats { color: #676767; font-size: 1.0em; font-weight: normal; display: inline; } .gsc-resultsHeader td.gsc-twiddle-opened .gsc-stats { display: none; } /* * .gsc-results-selector : box surrounding individual selectors for 1, more, or all results * .gsc-result-selector : an individual selector * .gsc-one-result : single result selector * .gsc-more-results : more (4) results selector * .gsc-all-results : all results (8) selector */ .gsc-results-selector { display: none; } .gsc-resultsHeader td.gsc-twiddle-closed .gsc-results-selector { display: none; } .gsc-result-selector { cursor: pointer; display: inline; font-size: 1.1em; padding-left: 13px; background-repeat: no-repeat; background-position: center left; } /* default mode is dark */ .gsc-one-result { background-image: url('http://www.google.com/uds/css/one-complex-dark.gif'); } .gsc-more-results { background-image: url('http://www.google.com/uds/css/more-complex-dark.gif'); } .gsc-all-results { background-image: url('http://www.google.com/uds/css/all-complex-dark.gif'); padding-right: 1px; } /* active mode is light */ .gsc-one-result-active .gsc-one-result { background-image: url('http://www.google.com/uds/css/one-complex-light-blue.gif'); } .gsc-more-results-active .gsc-more-results { background-image: url('http://www.google.com/uds/css/more-complex-light-blue.gif'); } .gsc-all-results-active .gsc-all-results { background-image: url('http://www.google.com/uds/css/all-complex-light-blue.gif'); } .gsc-resultsHeader .gsc-configLabel{ color: #676767; display: inline; font-size: 1.0em; 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('http://www.google.com/uds/css/settings.gif'); } /* tabbed mode of search control * .gsc-tabsArea : the box containing all of the tabs * .gsc-tabsAreaInvisible : same as above, but this is the state when search has been cleared * .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-tabsArea .gs-spacer { font-size: 1px; margin-right: 0px; overflow: hidden; } .gsc-tabsArea .gs-spacer-opera { margin-right: 0px; } .gsc-tabsAreaInvisible { display: none; } .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 .gsc-resultsHeader .gsc-title { display: none; } .gsc-tabData .gsc-resultsHeader .gsc-stats { display: none; } .gsc-tabData .gsc-resultsHeader .gsc-results-selector { display: none; } /* the results for each section * .gsc-resultsbox-{visible,invisible} : a complete-collection of results including headers * .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-resultsbox-visible { display: block; } .gsc-resultsbox-invisible { display: none; } .gsc-results { padding-bottom: 2px; width: 99%; } .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 */ .gsc-results .gsc-result img.gs-ad-marker { display: none; } .gsc-wrapper { position: relative; display: block; } .gsc-adBlock { position: relative; display: block; margin-top: 6px; margin-bottom: 4px; padding-bottom: 2px; background: #FFF8DD none repeat scroll 0 0; } .gsc-adBlock h2 { float: right; margin: 3px 5px 0; font-weight: normal; font-size: 0.9em; color: #676767; } .gsc-adBlock .gsc-ad { padding-left: 8px; padding-top: 5px; padding-right: 3px; } .gsc-adBlock .gsc-ad a { font-weight: bolder; color: #0000CC; line-height: 1.4em; } .gsc-adBlock .gsc-ad cite { font-style: normal; color: green; } .gsc-adBlock .gsc-ad span { padding-left: 8px; } .gsc-adBlockInvisible { display: none; } .gsc-adBlockVertical { position: relative; display: block; float: right; width: 30%; border-left: 1px solid #C9D7F1; } .gsc-thinWrapper { width: 69%; float: left; overflow: hidden; } .gsc-adBlockVerticalInvisible { display: none; } .gsc-adBlockVertical h2 { text-align: center; font-weight: normal; font-size: 0.9em; color: #676767; margin-top: 6px; } .gsc-adBlockVertical .gsc-ad { padding-left: 8px; padding-top: 5px; } .gsc-adBlockVertical .gsc-ad a { font-weight: bolder; color: #0000CC; line-height: 1.4em; } .gsc-adBlockVertical .gsc-ad cite { font-style: normal; color: green; display: block; } .gsc-adBlockVertical .gsc-ad span { } .gsc-ad-preview { background-image: url('http://www.google.com/images/preview.gif'); } /* Standard configuration div/form */ div.gsc-config { border: 1px solid #e9e9e9; margin-top: 0px; margin-bottom: 10px; padding-top: 2px; padding-left: 6px; padding-right: 6px; padding-bottom: 6px; } form.gsc-config { margin-bottom: 0px; } .gsc-configSetting { margin-top: 6px; } .gsc-configSetting_Label { color: #676767; } .gsc-configSettingInput { color: #676767; border: 1px solid #e9e9e9; width: 75%; } .gsc-configSettingCheckbox { color: #676767; margin-right: 6px; } .gsc-configSettingCheckboxLabel { display: inline; color: #676767; } div.gsc-configSettingSubmit { margin-top: 8px; text-align: right; } input.gsc-configSettingSubmit { display: inline; font-size: 1.0em; cursor: pointer; } /* Image Search */ .gsc-imageResult { float: left; margin-bottom: 1em; margin-right: 20px; } .gs-imageResult { width: 114px; /* default width + 1px border */ overflow: hidden; } .gs-imageResult .gs-image-box { height: 86px; /* default height + 1px border */ position: relative; } /* note, left edge is auto-set by search control */ .gs-imageResult .gs-image-box img.gs-image { position: absolute; bottom: 0px; } .gs-imageResult .gs-text-box { text-align: center; overflow: hidden; height: 4em; } .gs-imageResult .gs-snippet { overflow: hidden; line-height: 1em; cursor: pointer; white-space: nowrap; } .gs-imageResult .gs-visibleUrl { cursor: pointer; } .gs-imageResult .gs-size { color: #6f6f6f; } /* Video Search * - single line title */ .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; } /* trailing more link at the bottom of * a collection of results */ .gsc-imageResult .gsc-trailing-more-results { clear: both; } .gsc-results .gsc-trailing-more-results { margin-bottom: 10px; } .gsc-results .gsc-trailing-more-results, .gsc-results .gsc-trailing-more-results * { color: #0000cc; text-decoration: underline; } /* trailing cursor section */ .gsc-imageResult .gsc-cursor-box { clear: both; } .gsc-results .gsc-cursor-box .gsc-trailing-more-results { margin-bottom: 0px; display: none; } .gsc-results .gsc-cursor { display: inline; } .gsc-results .gsc-cursor-box { margin-bottom: 10px; text-align: center; } .gsc-results .gsc-cursor-box .gsc-cursor-page { cursor: pointer; color: #000000; text-decoration: underline; margin-right: 8px; display: inline; } .gsc-results .gsc-cursor-box .gsc-cursor-current-page { color: #A90A08; font-weight: bold; text-decoration: none; } /*** 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) * .gs-clusterUrl : for news, and other similar services, this is a cluster of additional results * 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., * .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; 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; } /* relative and absolute dates, note, news/books inlines these */ .gs-relativePublishedDate, .gs-publishedDate { color: #6f6f6f; text-decoration: none; } .gs-result a.gs-clusterUrl, .gs-result .gs-clusterUrl { color: #008000; text-decoration: underline; cursor: pointer; } .gs-newsResult .gs-publisher { color: #6f6f6f; display: inline; text-decoration: none; } /* * For news results there are two dates... * The relative date is visible while in the * search control and the published date * is visible when clipped. Why? It doesn't * make sense to say 4 hours ago for a clipped * result... */ /* establish the base style */ .gs-newsResult .gs-relativePublishedDate, .gs-newsResult .gs-publishedDate { display: inline; margin-left: 4px; } /* base styling for relative date is none */ .gs-blogResult .gs-relativePublishedDate, .gs-newsResult .gs-relativePublishedDate { display: none; } /* suppress publishedDate while in the control */ .gsc-blogResult .gs-blogResult .gs-publishedDate, .gsc-newsResult .gs-newsResult .gs-publishedDate { display: none; } /* enable relativePublishedDate while in the control */ .gsc-blogResult .gs-blogResult .gs-relativePublishedDate, .gsc-newsResult .gs-newsResult .gs-relativePublishedDate { display: inline; } .gs-newsResult .gs-location { color: #6f6f6f; display: inline; text-decoration: none; } .gs-result img.gs-image { vertical-align: middle; border: 1px solid #0000cc; } .gs-result div.gs-phone { } .gs-result .gs-directions, .gs-result .gs-directions * { color: #7777cc; font-weight: normal; text-decoration: underline; cursor: pointer; } .gs-secondary-link, .gs-secondary-link * { color: #7777cc; font-weight: normal; text-decoration: underline; cursor: pointer; } /* wrapper around user supplied to/from mode directions * normally this is disabled by default, and gs-directions is enabled * apps can easily switch this by setting display:block on the rule below, * and display:none on the rule above * e.g., add these two rules to switch local results into * alternate style driving directions * .gs-localResult .gs-directions-to-from { display : block; } * .gs-localResult .gs-directions { display : none; } */ .gs-result .gs-directions-to-from { display: none; margin-top: 4px; } .gs-result .gs-directions-to-from .gs-label { display: inline; margin-right: 4px; } .gs-result .gs-directions-to-from div.gs-secondary-link { display: inline; } .gs-result .gs-directions-to-from .gs-spacer { display: inline; margin-right: 3px; margin-left: 3px; } .gs-videoResult a.gs-publisher, .gs-videoResult .gs-publisher { color: #008000; text-decoration: none; } .gs-result a { cursor: pointer; } .gs-result .gs-address { } .gs-result .gs-snippet { } .gs-no-results-result .gs-snippet, .gs-error-result .gs-snippet { padding: 5px; margin: 5px; border: 1px solid rgb(255,204,51); background-color: rgb(255,244,194); } .gs-result .gs-watermark{ font-size: 0.9em; color: #7777cc; } div.gs-results-attribution { text-align: center; margin-bottom: 4px; } div.gs-results-attribution, div.gs-results-attribution * { font-size: 0.9em; color: #676767; text-decoration: none; } div.gs-results-attribution a { color: #0000cc; cursor: pointer; } div.gs-results-attribution a:hover { text-decoration: underline; } .gs-result .gs-metadata{ color: #676767; } /* searcher specific styling for * - web ad * - web * - local * - image (none) * - blog (none) * - video (none) */ /* webAd search specific over rides * .gs-ad-marker : disabled in control, but on in green to indicate clipped result is an ad */ .gs-localAd img.gs-ad-marker, .gs-webAd img.gs-ad-marker { padding-left: 4px; } /* default is to not show long mode visible urls * apps should selectively enable this while disabling * div.gs-visibleUrl-short */ .gs-webResult div.gs-visibleUrl-long { width: 100%; overflow: hidden; display: none; } /* local search specific over rides * - city, region displayed inline * - country supressed * - small font size for info window's */ .gs-localAd div.gs-address * { color: #676767; } .gs-localAd div.gs-street { display: inline; } div.gs-city { display: inline; } div.gs-region { display: inline; } div.gs-country { display: none; } div.gs-infoWindow * { font-size: 1.0em; } /* 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: 1.1em; } /* .gs-videoResult td .gs-image { vertical-align : middle; } .gs-videoResult td.gs-image-box { background-color : #000000; }*/ .gs-videoResult td div.gs-image-box { width: 110px; height: 78px; } .gs-videoResult td div.gs-text-box { vertical-align: top; margin-left: 4px; } /* book search specific over rides * - default image width garuntee * - appropriate cell seperation */ div.gs-book-image-box td, .gs-bookResult td { vertical-align: top; } div.gs-book-image-box, div.gs-book-image-box div { position: static; /*text-align: start;*/ } div.gs-book-image-box { width: 75px; height: 90px; } .gs-bookResult td div.gs-text-box { vertical-align: top; margin-left: 4px; } div.gs-book-image-box img { border-spacing: 0px 0px; border: none; } div.gs-book-image-box div.gs-row-1 { line-height: 7px; } div.gs-book-image-box img.gs-pages { height: 7px; width: 45px; } div.gs-book-image-box img.gs-page-edge { height: 7px; width: 11px; } div.gs-book-image-box div.gs-row-2 { } div.gs-book-image-box img.gs-image { height: 80px; border: 1px solid #a0a0a0; } .gs-bookResult .gs-author { display: inline; color: #6f6f6f; } .gs-bookResult .gs-publishedDate { display: inline; } .gs-bookResult .gs-pageCount { display: inline; color: #6f6f6f; margin-left: 4px; } .gs-bookResult .gs-id { } /* book search specific over rides * - default image width garuntee * - appropriate cell seperation */ .gs-patentResult td { vertical-align: top; } .gs-patentResult .gs-patent-number, .gs-patentResult .gs-publishedDate, .gs-patentResult .gs-author { display: inline; } .gs-patentResult .gs-image-box { padding-right: 8px; } .gs-patentResult img.gs-image { border: 1px solid #7777cc; } /* -------------------IE6 bugs--------------------------- */ * html input.gsc-input { padding-left: 2px; border-style: solid; border-width: 1px; border-color: #676767; width: 112px; height: 16px; background: #fff; } * html form.gsc-search-box { font-size: 1.0em; margin-top: 0px; margin-right: 0px; margin-bottom: 4px; margin-left: 0px; width: 170px; } /* -------------- NOVY GOOGLE VYHLADAVAC 200px --------------- */ input.gsc-search-button { margin-left: 0; width: 36px; height: 31px; padding: 0; border: none; cursor: pointer; background: url(bg-ok.png) no-repeat; /*color: transparent;*/ } input.gsc-input { width: 150px !important; /* bolo 167 */ height: 31px; margin:0; padding: 0 0 0 3px; border:none; background: url(bg-searchfield-google.png) no-repeat left top; /* bolo righ*/ } table.gsc-search-box td.gsc-input { padding-right: 0; width: 150px !important; /* bolo 167 */ } /* ------------ NOVY GOOGLE VYHLADAVAC END ------------- */ @media only screen and (max-width:640px) { input.gsc-search-button { margin-left: 0; width: 50px; height: 52px; padding: 0; border: 1px solid #ddd; cursor: pointer; background: url(bg-search.png) no-repeat center center; } input.gsc-input { width: 200px !important; height: 50px; margin:0; padding: 0 0 0 3px; border: 1px solid #ddd; border-right-width: 0px; background-color: #f8f8f8; background-image: none; } table.gsc-search-box td.gsc-input { padding-right: 0; width: 200px !important; } }