/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Author: Stamatis Kritikos
	Latest update: 10th of June, 2006
	©2006, www.stamatiskritikos.com
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	*** Basic Styling ***
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
html, body {
	height: 100%; /* Height Hack 1/3 */
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	We set the page background, the font color and size, 
	center the template...
	We set the relative font size of IE5-5.5 differently 
	to everything else, and we scale it from there.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Global Whitespace Reset"
	We define padding and margin for all elements and
	we scale it from there if we need to.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
body, form, input {	
	padding: 0px;
	margin: 0px;
}
h1, h2, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address { 
	margin: 5px 0; 	
}
dd, blockquote {
	margin-left: 40px;
}
fieldset {
	padding: 10px;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Global Hyperlink Control"
	We keep the underline since users have gotten used
	to that line defining a hyperlink and we just change 
	the mouseover color.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
a:link, a:visited {
	color: #06c;
}
a:hover {
	color: #8ccc33;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Heading Settings"
	We define font size and color mostly among some 
	other more specific things.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
h1, h2, h3 {
	color: #036;
	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
}
h1 {
	font-size: 18px;
	position: relative;
}
h2 {
	font-size: 15px;
	font-weight: bold!important;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Global Image Control"
	We remove the border from all images and we scale it
	from there if we need to.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
img {
	border: 0;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	*** Layers Time ***
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Global Wrapper"
	This is our parent layer which includes them all.
	From here we mainly choose the width of our page.
	We made it fixed and appropriate for 800x600 res.
	However, if you change it, remember to also alter 
	the width for the "center" layer. If you wish to go
	for relative width, well... be careful.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#monster {
	background: #fff url("img/header.jpg") no-repeat top center;
	width: 774px;
	text-align: center; /* center tabbed menu 1/2 */
	margin: 0 auto; /* center template 2/2 */
	height: 100%; /* Height Hack 2/3 */
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Tabbed Menu"
	We mainly set the width of the tabs as a whole.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#navcontainer {
	clear: left;
	z-index: 3;
	position: relative;
	margin: 0 auto; /* center tabbed menu 2/2 */
	width: 62%;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	The blue line below the tabs.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#tabbar {
	position: relative;
	background: #1f5791 url("img/overburn.gif") no-repeat center top;
	font: bold italic 10px Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	clear:both;	 
	height:14px;	
	margin:0;	
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	The actual tabs
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#navlist {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	clear: both;
}
#navlist ul, #navlist, #navlist li  {
	margin: 0;
	padding: 0;
}
#navlist li {
	float: left;
	display: block;
padding: 1px;
	min-height: 20px; 
}
#navlist li a {
	position: relative;
	display: block;
	text-align: center;
	color: #fff;
	text-decoration: none;
	font: bold 13px Verdana, sans-serif;
}
#navlist li a.active, #navlist li a:active {
	padding-bottom: 5px;
	color: #fff; 
	background-color: #1f5791;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Site Logo" or "Site Header Graphic"
	You could put the site title in this div or insert
	an image in your html. If you want to place an old
	classic header to your site, define a background
	image within the "monster" div and insert a 
	transparent image within this div in your html with
	the height of your background image.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#tagline {
	clear: both;
	font: bold italic 86% Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	color: #036;
	margin: 0;	
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Individual Tab Control"
	We make each tab a seperate div so we can have better
	control of the tabbed assembly.
	One nice trick that we achieve this way is the use
	of one image for the two edges of the menu without
	bothering altering the width of the image.
	If you want to add more tabs, just copy and paste
	the whole code of "tabb" or "tabc", give it a name of 
	your choice and remember to define it in your html.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#taba, #tabb, #tabc, #tabd {
	padding: 4px;
	background-color: #546F9E;
}
#taba {
	background: #003366 url("img/slanter.gif");
	background-position: bottom left;
	padding-left: 25px;
	margin-right: -1px;
}
#tabb {
	background: #003366;
	margin-right: -1px;
	border-left: 1px solid #fff;
}
#tabc {
	background: #003366;
	margin-right: -1px;
	border-left: 1px solid #fff;
}
#tabd {
	background: #003366 url("img/slanter.gif");
	background-position: bottom right;
	border-left: 1px solid #fff;
	padding-right: 25px;
}
#taba:hover, #tabb:hover, #tabc:hover, #tabd:hover {
	background-color: #8ccc33;
	color: #fff!important;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Search Utility"
	You can remove the "search" div from your html if
	you don't want it to exist, or simply alter it's
	content.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#search {
	border-top: 2px solid #fff;
	border-bottom: 4px solid #1f5791;
	background: #8ccc33 url("img/gradient.gif") repeat-x;
	color: #fff;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: left;
}
#search label {
	font-weight: bold;
	color: #fff;
}
#search input.tbox {
	width: 45%;
}
#search input {
	padding: 1px;
	border-width: 1px;
	font: 12px Verdana, Arial, sans-serif;
	margin: 2px;
}
#search form {
	display: block;
	float: left;
	text-align: right;
	width: 70.5%;
	margin: 0 40px 0 0;
}
#search ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#search ul li {
	font: 10px/140% Verdana, Arial, sans-serif;
}
#search ul li a:link, #search ul li a:visited {
	color: #E3EDF4;
}
#search ul li a:hover {
	color: #fff!important;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Columns"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Left Column
	"sidemenu" div is included in here.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#left {
	width: 160px;
	float: left;
	background: #f6f6f6 url("img/bg_left.gif") no-repeat center bottom;
	color: #555;
	border-right: 1px solid #ccc;
	font-size: 11px;
	text-align: left;
	line-height: 14px;
	height: 100%; /* Height Hack 3/3 */
}
#lc {
	padding: 10px;
}
#lc p {
	padding: 0 0 10px 2px;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Side Menu"
	Remove it from your html if you don't need it.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#sidemenu {

	clear: left;
	float: left;
	width: 140px;
	margin: 0;
	padding: 0;
	font-size: 11px;
}
#sidemenu ul {	
	list-style: none;
	width: 140px;
	margin: 0 0 10px 0;
	padding: 0;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Set the following to whatever you want for the menu 
	items to have some space between them (e.g. 4px).
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#sidemenu li {
	margin-bottom: 0;
}
#sidemenu li a {
	font-weight: bold;
	height: 13px;
	text-decoration: none;
	color: #505050;
	display: block;
	padding: 6px 0 4px 10px;
	background: #fff;
	border-left: 4px solid #cccccc;
}
#sidemenu li a:hover {
	background: #fff;
	color: #286ea0;
	border-left: 4px solid #286ea0;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Center Column
	Where the main content goes...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#center {
	width: 460px;
	height: auto;
	float: left;
	background: #fff;
	color: #000;
	line-height: 16px;

	text-align: left;
}
#cc {
	padding: 10px;
}
#center p {
	padding: 0 0 10px 10px;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Right Column
	Good for headlines, ads and so on...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#right {
	width: 150px;
	float: right;
	background: #eee url("img/bg_right.gif") no-repeat center bottom;
	line-height: 14px;
	color: #444;
	font-size: 11px;
	text-align: left;
	height: 100%; /* Height Hack 3/3 */
}
#rc {
	padding: 10px;
}
#rc p {
	padding: 0 0 10px 2px;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Footer"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#footer {
	width: auto!important;
	background: #8ccc33 url("img/overburn2.gif") no-repeat center bottom;
	clear: both;
	position: relative;
	text-align: center;
	font-size: 10px;
	line-height: 0.9em;
	padding: 0;
}
#footer2 {
	width: auto!important;
	clear: both;
	position: relative;
	text-align: center;
	font-size: 10px;
	line-height: 0.9em;
	padding: 0;
}
#footer a:link, #footer a:visited {
	color: #424242;
	font-weight: bold;
}
#footer a:hover {
	color: #1f5791!important;
	font-weight: bold!important;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Footer Menu"
	This could be a nice place to fill with useful 
	shortcuts of pages within your site so they'd be
	easily accessible.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#footmenu {
	background: #1f5791;
	border-top: 4px solid #8ccc33;
	border-left: 5px solid #fff;
	border-right: 5px solid #fff;
	color: #ADADAD;
	font: 10px Arial,Verdana,Helvetica,sans-serif;
	position: relative;
	text-align: center;
	z-index: 1;
	clear: both;
	margin: 0 0 3px 0;
	padding: 3px;
}
#footmenu a:link, #footmenu a:visited {
	color: #E3EDF4;
}
#footmenu a:hover {
	color: #fff!important;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Miscellaneous Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
.author {
	padding: 5px 0;
}
.clear {
	clear: both;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Forms Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
fieldset {
	margin: 1em 0;
	border-top: 1px solid #ccc;
	border-bottom: none;
	border-left: none;
	border-right: none;
}
legend {
	margin: 1em 0;
	padding: 0 .5em;
	color: #069;
	background: #f7f7f7;
	font-size: 1.3em;
	font-weight: bold;
}
label {
	width: 170px;
	padding: 0 1em;
	text-align: right;
	float: left;
}
fieldset div {
	margin-bottom: .5em;
	padding: 0;
	display: block;
}
fieldset div input, fieldset div textarea {
	width: 150px;
	border-top: 1px solid #555;
	border-left: 1px solid #555;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding: 1px;
	color: #333;
	background-color: #eee;
}
fieldset div select {
	padding: 1px;
}
div.fm-multi div {
	margin: 5px 0;
}
div.fm-multi input {
	width: 1em;
}
div.fm-multi label {
	display: block;
	width: 200px;
	padding-left: 5em;
	text-align: left;
}
#fm-submit {
	clear: both;
	padding-top: 1em;
	text-align: center;
}
#fm-submit input {
	border: 1px solid #333;
	padding: 2px 1em;
	background: #666;
	color: #fff;
	font-size: 100%;
}
input:focus, textarea:focus {
	background: #d8e2ee;
	color: #000;
}
















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

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

.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-style : none;
  border-width : 0px;
  border-spacing : 0px 0px;
  width : 100%;
  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 : 14px;
}

/**
 * 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;
}

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 : 11px;
  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;
}

div.gsc-clear-button {
  display : inline;
  text-align : right;
  margin-left : 4px;
  margin-right : 4px;
  padding-left : 10px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('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 {
  align: center;
  padding-left : 2px;
  border-style : solid;
  border-width : 2px;
  border-color : #1f5791;
  width : 98%;
}

.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('/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 {
  clear: both;
  width: 100%;
  border-bottom: 9px solid #1f5791;
  margin-bottom : 1px;
  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('/uds/css/arrow_close.gif');
}
.gsc-resultsHeader td.gsc-twiddle-opened div.gsc-twiddle{
  background-image: url('/uds/css/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;
  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 : inline;
}

.gsc-resultsHeader td.gsc-twiddle-closed .gsc-results-selector {
  display : none;
}

.gsc-result-selector {
  cursor : pointer;
  display : inline;
  font-size : 13px;
  padding-left : 13px;
  background-repeat: no-repeat;
  background-position: center left;
}

/* default mode is dark */
.gsc-one-result {
  background-image: url('/uds/css/one-complex-dark.gif');
}

.gsc-more-results {
  background-image: url('/uds/css/more-complex-dark.gif');
}

.gsc-all-results {
  background-image: url('/uds/css/all-complex-dark.gif');
  padding-right : 1px;
}

/* active mode is light */
.gsc-one-result-active .gsc-one-result {
  background-image: url('/uds/css/one-complex-light-blue.gif');
}

.gsc-more-results-active .gsc-more-results {
  background-image: url('/uds/css/more-complex-light-blue.gif');
}

.gsc-all-results-active .gsc-all-results {
  background-image: url('/uds/css/all-complex-light-blue.gif');
}

.gsc-resultsHeader .gsc-configLabel{
  color: #8bca33;
  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('/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 : 2px;
  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: 0px;
  }

.gsc-tabHeader.gsc-tabhActive {
  border-left: 1px solid #1f5791;
  border-right: 1px solid #1f5791;
  border-top: 5px solid #1f5791;
  border-bottom: 4px solid #1f5791;
  font: bold 13px Verdana, sans-serif;
  color: #FFFFFF;
  background: #1f5791;
  }

.gsc-tabHeader.gsc-tabhInactive {
  border-left: 1px solid #003366;
  border-right: 1px solid #003366;
  border-top: 2px solid #003366;
  border-bottom: 2px solid #003366;
  background: #003366;
  font: bold 13px Verdana, sans-serif;
  color: #FFFFFF;
  }

.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 {
  clear: both;
  padding-bottom: 2px;
}

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

.gsc-result .gs-title {
  height: 1.1em;
  overflow: hidden;
 font-weight: bold;
color: #006699;
  }

/* 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;
}

/* 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: 11px;
  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.1em;
  height: 1.1em;
  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: #003366;
  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 : inline;
}

.gsc-results .gsc-cursor {
  display : inline;
}

.gsc-results .gsc-cursor-box {
  margin-bottom : 10px;
}

.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 : #003366;
  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: #003366;
  text-decoration: underline;
}

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

.gs-result a.gs-visibleUrl,
.gs-result .gs-visibleUrl {
  color: #6e9f29;
 font-weight: bold;
}

/* 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 #003366;
}

.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: 10px;
  color: #7777cc;
}

div.gs-results-attribution {
  text-align : center;
  margin-bottom : 4px;
}

div.gs-results-attribution,
div.gs-results-attribution * {
  font-size : 10px;
  color : #676767;
  text-decoration : none;
}

div.gs-results-attribution a {
  color: #003366;
  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 : block;
}
.gs-webResult div.gs-visibleUrl-short {
  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: 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 .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 {}