skins/jscalendar/calendar-green.css

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