home *** CD-ROM | disk | FTP | other *** search
/ Chip 2004 April / CMCD0404.ISO / Software / Freeware / Programare / groupoffice-com-2.01 / controls / jscalendar / calendar-green.css < prev    next >
Cascading Style Sheet File  |  2004-03-08  |  5KB  |  229 lines
  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. }
  229.