httemplate/elements/calendar-win2k-2.css

   1 /* The main calendar widget.  DIV containing a table. */
   2
   3 .calendar {
   4   position: relative;
   5   display: none;
   6   border-top: 2px solid #fff;
   7   border-right: 2px solid #000;
   8   border-bottom: 2px solid #000;
   9   border-left: 2px solid #fff;
  10   font-size: 11px;
  11   color: #000;
  12   cursor: default;
  13   background: #d4c8d0;
  14   font-family: tahoma,verdana,sans-serif;
  15 }
  16
  17 .calendar table {
  18   border-top: 1px solid #000;
  19   border-right: 1px solid #fff;
  20   border-bottom: 1px solid #fff;
  21   border-left: 1px solid #000;
  22   font-size: 11px;
  23   color: #000;
  24   cursor: default;
  25   background: #d4c8d0;
  26   font-family: tahoma,verdana,sans-serif;
  27 }
  28
  29 /* Header part -- contains navigation buttons and day names. */
  30
  31 .calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  32   text-align: center;
  33   padding: 1px;
  34   border-top: 1px solid #fff;
  35   border-right: 1px solid #000;
  36   border-bottom: 1px solid #000;
  37   border-left: 1px solid #fff;
  38 }
  39
  40 .calendar thead .title { /* This holds the current "month, year" */
  41   font-weight: bold;
  42   padding: 1px;
  43   border: 1px solid #000;
  44   background: #847880;
  45   color: #fff;
  46   text-align: center;
  47 }
  48
  49 .calendar thead .headrow { /* Row <TR> containing navigation buttons */
  50 }
  51
  52 .calendar thead .daynames { /* Row <TR> containing the day names */
  53 }
  54
  55 .calendar thead .name { /* Cells <TD> containing the day names */
  56   border-bottom: 1px solid #000;
  57   padding: 2px;
  58   text-align: center;
  59   background: #f4e8f0;
  60 }
  61
  62 .calendar thead .weekend { /* How a weekend day name shows in header */
  63   color: #f00;
  64 }
  65
  66 .calendar thead .hilite { /* How do the buttons in header appear when hover */
  67   border-top: 2px solid #fff;
  68   border-right: 2px solid #000;
  69   border-bottom: 2px solid #000;
  70   border-left: 2px solid #fff;
  71   padding: 0px;
  72   background: #e4d8e0;
  73 }
  74
  75 .calendar thead .active { /* Active (pressed) buttons in header */
  76   padding: 2px 0px 0px 2px;
  77   border-top: 1px solid #000;
  78   border-right: 1px solid #fff;
  79   border-bottom: 1px solid #fff;
  80   border-left: 1px solid #000;
  81   background: #c4b8c0;
  82 }
  83
  84 /* The body part -- contains all the days in month. */
  85
  86 .calendar tbody .day { /* Cells <TD> containing month days dates */
  87   width: 2em;
  88   text-align: right;
  89   padding: 2px 4px 2px 2px;
  90 }
  91
  92 .calendar table .wn {
  93   padding: 2px 3px 2px 2px;
  94   border-right: 1px solid #000;
  95   background: #f4e8f0;
  96 }
  97
  98 .calendar tbody .rowhilite td {
  99   background: #e4d8e0;
 100 }
 101
 102 .calendar tbody .rowhilite td.wn {
 103   background: #d4c8d0;
 104 }
 105
 106 .calendar tbody td.hilite { /* Hovered cells <TD> */
 107   padding: 1px 3px 1px 1px;
 108   border-top: 1px solid #fff;
 109   border-right: 1px solid #000;
 110   border-bottom: 1px solid #000;
 111   border-left: 1px solid #fff;
 112 }
 113
 114 .calendar tbody td.active { /* Active (pressed) cells <TD> */
 115   padding: 2px 2px 0px 2px;
 116   border-top: 1px solid #000;
 117   border-right: 1px solid #fff;
 118   border-bottom: 1px solid #fff;
 119   border-left: 1px solid #000;
 120 }
 121
 122 .calendar tbody td.selected { /* Cell showing selected date */
 123   font-weight: bold;
 124   border-top: 1px solid #000;
 125   border-right: 1px solid #fff;
 126   border-bottom: 1px solid #fff;
 127   border-left: 1px solid #000;
 128   padding: 2px 2px 0px 2px;
 129   background: #e4d8e0;
 130 }
 131
 132 .calendar tbody td.weekend { /* Cells showing weekend days */
 133   color: #f00;
 134 }
 135
 136 .calendar tbody td.today { /* Cell showing today date */
 137   font-weight: bold;
 138   color: #00f;
 139 }
 140
 141 .calendar tbody .disabled { color: #999; }
 142
 143 .calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
 144   visibility: hidden;
 145 }
 146
 147 .calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
 148   display: none;
 149 }
 150
 151 /* The footer part -- status bar and "Close" button */
 152
 153 .calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
 154 }
 155
 156 .calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
 157   background: #f4e8f0;
 158   padding: 1px;
 159   border: 1px solid #000;
 160   background: #847880;
 161   color: #fff;
 162   text-align: center;
 163 }
 164
 165 .calendar tfoot .hilite { /* Hover style for buttons in footer */
 166   border-top: 1px solid #fff;
 167   border-right: 1px solid #000;
 168   border-bottom: 1px solid #000;
 169   border-left: 1px solid #fff;
 170   padding: 1px;
 171   background: #e4d8e0;
 172 }
 173
 174 .calendar tfoot .active { /* Active (pressed) style for buttons in footer */
 175   padding: 2px 0px 0px 2px;
 176   border-top: 1px solid #000;
 177   border-right: 1px solid #fff;
 178   border-bottom: 1px solid #fff;
 179   border-left: 1px solid #000;
 180 }
 181
 182 /* Combo boxes (menus that display months/years for direct selection) */
 183
 184 .combo {
 185   position: absolute;
 186   display: none;
 187   width: 4em;
 188   top: 0px;
 189   left: 0px;
 190   cursor: default;
 191   border-top: 1px solid #fff;
 192   border-right: 1px solid #000;
 193   border-bottom: 1px solid #000;
 194   border-left: 1px solid #fff;
 195   background: #e4d8e0;
 196   font-size: smaller;
 197   padding: 1px;
 198 }
 199
 200 .combo .label {
 201   text-align: center;
 202   padding: 1px;
 203 }
 204
 205 .combo .active {
 206   background: #d4c8d0;
 207   padding: 0px;
 208   border-top: 1px solid #000;
 209   border-right: 1px solid #fff;
 210   border-bottom: 1px solid #fff;
 211   border-left: 1px solid #000;
 212 }
 213
 214 .combo .hilite {
 215   background: #408;
 216   color: #fea;
 217 }