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