scripts/jscalendar-1.0/skins/aqua/theme.css

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