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   z-index:2;
  16 }
  17
  18 .calendar table {
  19   border-top: 1px solid #000;
  20   border-right: 1px solid #fff;
  21   border-bottom: 1px solid #fff;
  22   border-left: 1px solid #000;
  23   font-size: 11px;
  24   color: #000;
  25   cursor: default;
  26   background: #d4c8d0;
  27   font-family: tahoma,verdana,sans-serif;
  28 }
  29
  30 /* Header part -- contains navigation buttons and day names. */
  31
  32 .calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  33   text-align: center;
  34   padding: 1px;
  35   border-top: 1px solid #fff;
  36   border-right: 1px solid #000;
  37   border-bottom: 1px solid #000;
  38   border-left: 1px solid #fff;
  39 }
  40
  41 .calendar .nav {
  42   background: transparent url(menuarrow.gif) no-repeat 100% 100%;
  43 }
  44
  45 .calendar thead .title { /* This holds the current "month, year" */
  46   font-weight: bold;
  47   padding: 1px;
  48   border: 1px solid #000;
  49   background: #847880;
  50   color: #fff;
  51   text-align: center;
  52 }
  53
  54 .calendar thead .headrow { /* Row <TR> containing navigation buttons */
  55 }
  56
  57 .calendar thead .daynames { /* Row <TR> containing the day names */
  58 }
  59
  60 .calendar thead .name { /* Cells <TD> containing the day names */
  61   border-bottom: 1px solid #000;
  62   padding: 2px;
  63   text-align: center;
  64   background: #f4e8f0;
  65 }
  66
  67 .calendar thead .weekend { /* How a weekend day name shows in header */
  68   color: #f00;
  69 }
  70
  71 .calendar thead .hilite { /* How do the buttons in header appear when hover */
  72   border-top: 2px solid #fff;
  73   border-right: 2px solid #000;
  74   border-bottom: 2px solid #000;
  75   border-left: 2px solid #fff;
  76   padding: 0px;
  77   background-color: #e4d8e0;
  78 }
  79
  80 .calendar thead .active { /* Active (pressed) buttons in header */
  81   padding: 2px 0px 0px 2px;
  82   border-top: 1px solid #000;
  83   border-right: 1px solid #fff;
  84   border-bottom: 1px solid #fff;
  85   border-left: 1px solid #000;
  86   background-color: #c4b8c0;
  87 }
  88
  89 /* The body part -- contains all the days in month. */
  90
  91 .calendar tbody .day { /* Cells <TD> containing month days dates */
  92   width: 2em;
  93   text-align: right;
  94   padding: 2px 4px 2px 2px;
  95 }
  96 .calendar tbody .day.othermonth {
  97   font-size: 80%;
  98   color: #aaa;
  99 }
 100 .calendar tbody .day.othermonth.oweekend {
 101   color: #faa;
 102 }
 103
 104 .calendar table .wn {
 105   padding: 2px 3px 2px 2px;
 106   border-right: 1px solid #000;
 107   background: #f4e8f0;
 108 }
 109
 110 .calendar tbody .rowhilite td {
 111   background: #e4d8e0;
 112 }
 113
 114 .calendar tbody .rowhilite td.wn {
 115   background: #d4c8d0;
 116 }
 117
 118 .calendar tbody td.hilite { /* Hovered cells <TD> */
 119   padding: 1px 3px 1px 1px;
 120   border-top: 1px solid #fff;
 121   border-right: 1px solid #000;
 122   border-bottom: 1px solid #000;
 123   border-left: 1px solid #fff;
 124 }
 125
 126 .calendar tbody td.active { /* Active (pressed) cells <TD> */
 127   padding: 2px 2px 0px 2px;
 128   border-top: 1px solid #000;
 129   border-right: 1px solid #fff;
 130   border-bottom: 1px solid #fff;
 131   border-left: 1px solid #000;
 132 }
 133
 134 .calendar tbody td.selected { /* Cell showing selected date */
 135   font-weight: bold;
 136   border-top: 1px solid #000;
 137   border-right: 1px solid #fff;
 138   border-bottom: 1px solid #fff;
 139   border-left: 1px solid #000;
 140   padding: 2px 2px 0px 2px;
 141   background: #e4d8e0;
 142 }
 143
 144 .calendar tbody td.weekend { /* Cells showing weekend days */
 145   color: #f00;
 146 }
 147
 148 .calendar tbody td.today { /* Cell showing today date */
 149   font-weight: bold;
 150   color: #00f;
 151 }
 152
 153 .calendar tbody .disabled { color: #999; }
 154
 155 .calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
 156   visibility: hidden;
 157 }
 158
 159 .calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
 160   display: none;
 161 }
 162
 163 /* The footer part -- status bar and "Close" button */
 164
 165 .calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
 166 }
 167
 168 .calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
 169   background: #f4e8f0;
 170   padding: 1px;
 171   border: 1px solid #000;
 172   background: #847880;
 173   color: #fff;
 174   text-align: center;
 175 }
 176
 177 .calendar tfoot .hilite { /* Hover style for buttons in footer */
 178   border-top: 1px solid #fff;
 179   border-right: 1px solid #000;
 180   border-bottom: 1px solid #000;
 181   border-left: 1px solid #fff;
 182   padding: 1px;
 183   background: #e4d8e0;
 184 }
 185
 186 .calendar tfoot .active { /* Active (pressed) style for buttons in footer */
 187   padding: 2px 0px 0px 2px;
 188   border-top: 1px solid #000;
 189   border-right: 1px solid #fff;
 190   border-bottom: 1px solid #fff;
 191   border-left: 1px solid #000;
 192 }
 193
 194 /* Combo boxes (menus that display months/years for direct selection) */
 195
 196 .calendar .combo {
 197   position: absolute;
 198   display: none;
 199   width: 4em;
 200   top: 0px;
 201   left: 0px;
 202   cursor: default;
 203   border-top: 1px solid #fff;
 204   border-right: 1px solid #000;
 205   border-bottom: 1px solid #000;
 206   border-left: 1px solid #fff;
 207   background: #e4d8e0;
 208   font-size: 90%;
 209   padding: 1px;
 210   z-index: 100;
 211 }
 212
 213 .calendar .combo .label,
 214 .calendar .combo .label-IEfix {
 215   text-align: center;
 216   padding: 1px;
 217 }
 218
 219 .calendar .combo .label-IEfix {
 220   width: 4em;
 221 }
 222
 223 .calendar .combo .active {
 224   background: #d4c8d0;
 225   padding: 0px;
 226   border-top: 1px solid #000;
 227   border-right: 1px solid #fff;
 228   border-bottom: 1px solid #fff;
 229   border-left: 1px solid #000;
 230 }
 231
 232 .calendar .combo .hilite {
 233   background: #408;
 234   color: #fea;
 235 }
 236
 237 .calendar td.time {
 238   border-top: 1px solid #000;
 239   padding: 1px 0px;
 240   text-align: center;
 241   background-color: #f4f0e8;
 242 }
 243
 244 .calendar td.time .hour,
 245 .calendar td.time .minute,
 246 .calendar td.time .ampm {
 247   padding: 0px 3px 0px 4px;
 248   border: 1px solid #889;
 249   font-weight: bold;
 250   background-color: #fff;
 251 }
 252
 253 .calendar td.time .ampm {
 254   text-align: center;
 255 }
 256
 257 .calendar td.time .colon {
 258   padding: 0px 2px 0px 3px;
 259   font-weight: bold;
 260 }
 261
 262 .calendar td.time span.hilite {
 263   border-color: #000;
 264   background-color: #766;
 265   color: #fff;
 266 }
 267
 268 .calendar td.time span.active {
 269   border-color: #f00;
 270   background-color: #000;
 271   color: #0f0;
 272 }