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