/* Abriviated class names used:
   .tl  title
   .b   bool
   .o   radio
   .i   int
   .r   real
   .d   date
   .t   time
   .dtd datetime-day
   .dth datetime-hour
   .dtm datetime-min
   .s   string
   .m   image
   .upl upload
   .em  email
   .url hyperlink

   .ro    read-only
   .mdt   mandatory (with data)
   .mde   mandatory (empty)
*/


/*= General =================================================================*/

.guppy .clickable
{
  cursor: pointer;  /* Correct name */
  cursor: hand;     /* IE name */
}


.guppy span.clickable
{
  text-decoration: underline;
}


/*= Field settings ==========================================================*/

.guppy span.tl
{
  color: #0000FF;
}

.guppy input
{
  xborder: 1px solid #404040;
}

.guppy input.b
{
  border: none;
}

.guppy input.i,
.guppy input.r
{
  text-align: right;
}

.guppy input.dth,
.guppy input.dtm
{
  text-align: right;
}

.guppy input.upl
{
}

.guppy input.ro
{
  color: #404040;
  border: none;
  border-bottom: 1px solid #D0D0D0;
}


.guppy input.mde
{
  background-image: url("mandatory.gif");
  background-repeat: no-repeat;
  background-position: center right;
}


.guppy input.mdt
{
}


.guppy span.action
{
  margin: 2px 6px;
}


.guppy button
{
  font: arial, sans-serif;
  font-size: 9pt;
}


.guppy div.hint
{
  border: 1px solid gray;
}


.guppy div.card div.htmlarea td
{
  padding: 0px;
}


/*= Component settings ======================================================*/

.guppy table.component
{
  border-top: 1px solid #A0A0A0;
  border-right: 1px solid #A0A0A0;
  border-bottom: 2px solid #A0A0A0;
  border-left: 1px solid #A0A0A0;
  margin-bottom: 10px;
}


.guppy table.component td
{
  vertical-align: top;
}


.guppy table.component td.header
{
  border-collapse: collapse;
  padding: 0px;
}


.guppy table.component td.buttons
{
  padding: 0px;
}


  /* Component header (tab) */

.guppy table.ctab
{
  width: 100%;
}

.guppy table.ctab,
.guppy table.ctab td
{
  border-collapse: collapse;
  padding: 0;
  margin: 0;
}

.guppy td.ctab1
{
  border-bottom: 1px solid black;
  background-color: #4000A0;
  width: 10px;
}

.guppy td.ctab2
{
  border-bottom: 1px solid black;
  background-color: #4000A0;
  color: white;
  font-weight: bold;
  width: 0px;
}

.guppy td.ctab3
{
  border-bottom: 1px solid black;
  background-color: #4000A0;
  width: 10px;
}

.guppy td.ctab4
{
  border-bottom: 1px solid black;
  background-color: #4000A0;
}


.guppy table.guppy-pane
{
  margin: 4px;
}


.guppy div.card td
{
  padding: 2px 4px 2px 4px;
}

  /* Buttons */

.guppy td.buttons select
{
  font: arial, sans-serif;
  font-size: 9pt;
}


.guppy td.buttons
{
  border-top: 1px solid #A0A0A0;
}


.guppy td.buttons td
{
  vertical-align: baseline;
}

  /* Islands */
.guppy fieldset
{
  margin-top: 10px;
}


/*= Grid settings ===========================================================*/


.guppy table.grid
{
  border-collapse: collapse;
}


.guppy .grid th
{
  border: 1px solid #A0A0A0;
  font: verdana, sans-serif;
  font-size: 10pt;
  background-color: #B0B0C0;
  padding: 1px 3px;
}


  /* (must supply table.component to override earlier 'td' setting) */
.guppy table.component .grid td
{
  border: 1px solid #A0A0A0;
  padding: 0px 2px;
  vertical-align: top;
}


.guppy .grid input
{
  border: 1px solid red; /* Bug in IE makes this necessary to enforce the "none" below ... */
  border: none;
}


.guppy .grid span.action
{
  white-space: nowrap;
}


/*= Tree component ==========================================================*/

div.tree-component
{
  margin: 6px;
}

table.tree
{
  margin: 0px;
}

  /* (must supply table.component to override earlier 'td' setting) */
table.component table.tree td
{
  padding: 0px 4px ;
}


table.tree td.selected
{
  background-color: #E0E0E0;
}

/*= Menu settings ===========================================================*/

.guppy table.toolbar
{
  border-collapse: collapse;
  border: 1px solid black;
  background-color: #B0B0C0;
  width: 100%;
}


.guppy table.toolbar,
.guppy table.toolbar td,
{
  padding: 0px;
}


.guppy .toolbar table.menu td
{
  padding: 2px 5px;
  cursor: pointer;  /* Correct name */
  cursor: hand;     /* IE name */
}

.guppy .toolbar table.menu td.normal
{
}


.guppy .toolbar table.menu td.active
{
  color: #B0B0C0;
  background-color: #4000A0;
}


/*=[ Menu handling ]==========================================================*/

  /* Surrounding DIV tag */
div.psmenu {
  position: absolute;
  visibility: hidden;
  font: arial, sans-serif;
  font-size: 10pt;

  border-top:       1px solid #D0D0D0;
  border-left:      1px solid #D0D0D0;
  border-right:     1px solid black;
  border-bottom:    1px solid black;
  border-collapse:  collapse;

  background-color: #E0E0E0;
}


  /* Make sure there's no spacing between the rows in the menu (use padding instead) */
div.psmenu table,
div.psmenu tr,
div.psmenu td {
  border-collapse: collapse;
  border: none;
  margin: none;
}

  /* Menu item row (off) */
.psmenu-menuItem {
  cursor: pointer;
  cursor: hand;
}

  /* Menu item row (on) 
     - we could colorize the whole row here, but the icon graphics is not good on blue background */
.psmenu-menuItemOn {
  cursor: pointer;
  cursor: hand;
}


  /* Some space around the icon */
.guppy table.component td.psmenu-icon {
  __padding: 2px 2px;
  vertical-align: middle;
  text-align: center;
}

  /* Colorize menu items */
.psmenu-menuItemOn td.psmenu-title {
  background-color: darkblue;
  color:            white;
}

  /* Some space around the menu item title */
div.psmenu td.psmenu-title {
  padding: 2px 5px;
}

/*= Context menu settings ===================================================*/