calendar.css 5.8 KB

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