File: xbl.css

/** BINDINGS **/
textboxmulti    { -moz-binding: url("xbl.xml#textboxmulti"); }
date            { -moz-binding: url("xbl.xml#date"); }
time            { -moz-binding: url("xbl.xml#time"); }


/** GENERAL STYLES **/
menu.datepicker-popup
                {  background-image: url("datepicker.gif");
                   background-repeat: no-repeat;
                   margin-top: 4px;  }

menu.timepicker-popup
                { background-image: url("timepicker.gif");
                  background-repeat: no-repeat;
                  margin-top: 4px; }


date > menu > hbox.menu-right
                { display: none; }

time > menu > hbox.menu-right
                { display: none; }



/** DATEPICKER **/
datepicker      { -moz-binding: url("xbl.xml#datepicker"); }

.datepicker-button-month
                { -moz-binding: url("xbl.xml#datepicker-button-month"); }

.datepicker-button-month
                { -moz-binding: url("xbl.xml#datepicker-button-month"); }

.datepicker-day { -moz-binding: url("xbl.xml#datepicker-day"); }



datepicker      { padding: 10px;
                  width: 200px;  }


.datepicker-button-month
                { xborder: transparent 1px solid;
                  width: 20px;
                  text-align: center;  }


.datepicker-button-month:hover
                { xborder: #333 1px solid;
                  background-color: #999;  }


.datepicker-header
                { font-family: Arial;
                  color: blue;
                  xfont-weight: bold;
                  text-align: center;  }

.datepicker-day
                { font-family: Arial;
                  color: #000000;
                  xborder-bottom: 1px solid black;
                  border: 1px solid transparent;
                  text-align: center;  }

.datepicker-day:hover
                { border: 1px solid #999;  }

.datepicker-day[othermonth="true"]
                { color: #aaa; }

.datepicker-day[selected="true"]
                { xborder: 1px solid black;
                  font-weight: bold;
                  background-color: #999;
                  xcolor: #ffffff;  }

.datepicker-row-body
                { xborder-top: 1px solid black;  }

.datepicker-month-name
                { font-weight: bold;
                  text-align: center;  }



/** TIMEPICKER **/

timepicker      { -moz-binding: url("xbl.xml#timepicker"); }

.timepicker-box { background-color: white;
                  font-size: 8pt;
                  xmargin: 4px;
                  padding: 2px;
                  width: 100px; }


.timepicker-head
                { text-align: center;
                  font-weight: bold;
                  xborder: 1px solid transparent;}


.timepicker-hour
                { text-align: center;
                  font-weight: normal;
                  border: 1px solid #eee;}


.timepicker-minute
                { text-align: center;
                  font-weight: normal;
                  border: 1px solid #ddd; }



.timepicker-hour:hover
                { border-color: #666; }


.timepicker-minute:hover
                { border-color: #666; }


.timepicker-hour-col
                { background-color: #eee; }

.timepicker-minute-col
                { background-color: #ddd; }



text.timepicker-minute-selected
                { text-align: center;
                  font-weight: bold;
                  background-color: #999;
                  border: 1px solid #999;
                }


text.timepicker-hour-selected
                { text-align: center;
                  font-weight: bold;
                  background-color: #999;
                  border: 1px solid #999;
                }