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