/*
I'm mad as all with Mozilla for never providing an inline-block display.

Here Are 3 ways to create an inline-Block for ALL browsers:

<table style="display:inline"><tr><td></td></tr></table>

OR ( clunky, but has some hidden advantages )

<fieldset style="display:inline"></fieldset>

OR ( absolute best, and I use daily )

<span style="display:inline-block"> <div style="display:table-cell"></div> </span>

The third option works absolutely the best, and prints terrific. Only ONE flaw, is FireFox crashes the display if you try and assign, vertical-align:top

-Acker, see my name on something again soon.
*/

/* a widget using a <fieldset>
   -- bahaves like an inline-block element in every browser

   .icon   : no frame around, just a small icon nothing else
   .widget : looks like a framed <select>-alike thing
   .popup  : (temporarily set to show the popup)
*/
fieldset.icon,
fieldset.widget {
    display: inline;
    position: relative;       /* allow positioning inside */
    margin: 0px 0px -5px 0px; /* needed for FireFox */
    padding: 0;
    border: none;
    width: auto;
    vertical-align: -4px;
    cursor: pointer;
    /* background-color: #ff0000; */
    z-index: 400;
}

/* a disabled widget */
fieldset.disabled {
    opacity: 0.5;
    cursor: default;
}

/* the container inside the widget responsible for sizing */
fieldset.icon .container,
fieldset.widget .container {
    position: relative;
    top: -4px;
    display: block;
    height: 16px;
    margin: 0;
    white-space: nobreak;
    overflow: hidden;
}

fieldset.icon .container {
    width: 16px;
    padding: 2px 0px;
}

fieldset.widget .container {
    width: 120px;
    padding: 2px 5px;
    border: 1px solid #777777;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

fieldset.widget.small .container {
    width: 80px;
}

fieldset.widget.wide .container {
    width: 200px;
}

/* a right aligned trigger image */
fieldset img.trigger {
    position: absolute;
    right: 0px;
    top: 0px;
}

/* the popup window appearing on click */
fieldset .popup {
    position: absolute;
    display: none;
    top: auto;
    left: auto;
    width: 120px;
    background-color: #ffffff;
    margin: -4px 0px 0px 0px;
    padding: 5px;
    border: 1px solid #777777;
    white-space: nowrap;
    line-height: 15px;
    text-align: left;
    z-index: 300;
    -webkit-border-radius: 4px;
    -webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    -moz-border-radius: 4px;
    -moz-box-shadow: black 3px 3px 6px; /* FF 3.1 only */
}

fieldset.small .popup {
    width: 80px;
}

fieldset.wide .popup {
    width: 200px;
}

fieldset .popup.right { /* IE: double class bug */
    right: 0px;
}

/* **************** a <ul> as a popup  *********************** */
fieldset ul.popup {
    padding: 5px;
}

fieldset ul.popup li {
    padding: 2px 5px;
    margin: 0px -5px;
    list-style: none;
    height: 14px;
}

fieldset ul.popup.selectable li { /* IE: double class bug */
    padding-left: 16px;
}

fieldset ul.popup li.selected {
    background-color: #8888ff;
    color: #ffffff;
}

fieldset ul.popup.selectable li.selected { /* IE: double class bug */
    background-color: transparent;
    color: #000000;
    background-image: url(../images/bullet_black.png);
    background-repeat: no-repeat;
    background-position: center left;
}

/* make the popup window visible by setting the widget to 'expanded' also */

fieldset.expanded  {
    z-index: 401;
}

fieldset.expanded .popup {
    display: block;
}

/******************* a search popup ******************* */
fieldset.widget .popup.search {
    width: 250px;
    height: 200px;
    cursor: default;
}

.popup.search label {
    margin: 5px;
}

.popup.search input[type="text"] {
    margin: 5px 0px;
    width: 80px;
}

.popup.search img {
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
}

.popup.search hr {
    background-color: #333333;
    height: 2px;
    border: none;
}

.popup.search ul {
    position: absolute;
    left: 0px;
    right: 0px;
    top: auto;
    bottom: 0px;
    margin: 0px;
    padding:0px;
    height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}

.popup.search .popup_activity {
    position: absolute;
    right: 25px;
    top: 4px;
}

.popup.search li {
    margin: 0px;
    padding: 3px 5px;
    list-style: none;
    cursor: pointer;
}

/* a hovered <li> */
.popup.selectable li.selected:hover,
.popup li:hover {
    background-color: #ccccff;
}

/******************** a date popup **************************** */
fieldset.widget .popup.date {
    width: auto;
    height: 170px;
    cursor: default;
}

fieldset.widget .popup.date table {
    width: 110px;
    height: 160px;
    /* border: 1px solid red; */
    vertical-align: top;
}

fieldset.widget .popup.date.year {
    text-align: right;
}

fieldset.widget .popup.date .day:hover {
    background-color: #ccccff;
}

fieldset.widget .popup.date .day {
    background-color: none;
}


fieldset.widget .popup.date th {
    /* border: 1px solid blue; */
    height: 10px;
}

fieldset.widget .popup.date tr.date_row {
    height: 25px;
}

fieldset.widget .popup.date th img.prev {
    position: relative;
    right: 0px;
    top: 0px;
    /* display: inline; */
}

fieldset.widget .popup.date th img.next {
    position: relative;
    left: 0px;
    top: 0px;
    /* display: inline; */
}

fieldset.widget .popup.date th .date_display {
    position: relative;
    top: -4px;
}
/* *******************************  END WIDGETS *************************** */