You are here

calendar.css in Pretty Calendar 7

/* calendar styles */
.block-calendar {
  width: 182px;
}
#calendar-body {
  position: relative;
  width: 182px;
}
.pretty-calendar-week .calendar-value,
.calendar-daynames .calendar-value {
  color: #999;
  cursor: default;
  display: block;
  float: left;
  font-family: Arial, Tahoma, sans;
  font-size: 12px;
  height: 19px;
  line-height: 12px;
  padding: 7px 0 0;
  text-align: center;
  width: 26px;
}
.calendar-daynames .calendar-value .third-letter {
  display: none;
}
.pretty-calendar-week a {
  cursor: pointer;
  text-decoration: none;
}
.pretty-calendar-week a .calendar-value {
  color: #000;
  cursor: pointer;
  font-weight: bold;
}
.pretty-calendar-week a:hover div {
  background: url("days.png") no-repeat 0 -26px;
  color: #fff;
}
.pretty-calendar-week .pretty-calendar-today .calendar-value {
  background: url("days.png") no-repeat 0 0;
}
.pretty-calendar-week a:hover .pretty-calendar-today .calendar-value {
  background: url("days.png") no-repeat 0 -52px;
  color: #fff;
}

.pretty-calendar-day,
.pretty-calendar-weekend {
  background: url("grid.png") no-repeat 0 0;
  display: block;
  float: left;
  height: 26px;
  width: 26px;
}
.pretty-calendar-last {
  background: url("grid.png") no-repeat 0 -26px;
}
.calendar-daynames .pretty-calendar-day,
.calendar-daynames .pretty-calendar-weekend {
  background: url("grid.png") no-repeat 0 -52px;
  text-shadow: 1px 1px 0px #fff;
  text-transform: capitalize;
}
.calendar-daynames .pretty-calendar-last {
  background: none;
}

.pretty-calendar-month {
  background: transparent url("bar.png") no-repeat 0 0;
  clear: both;
  display: block;
  height: 27px;
  margin: 2px 0 5px;
  text-align: center;
  width: 182px;
}
.pretty-calendar-month a:hover div {
  background: none;
}
.pretty-calendar-month .month-title {
  float: left;
  font-family: Tahoma, Arial, sans;
  font-size: 12px;
  padding-top: 5px;
  position: relative;
  text-align: center;
  text-shadow: 1px 1px 0px #fff;
  width: 140px;
  z-index: 3;
}
.pretty-calendar-month .calendar-prev,
.pretty-calendar-month .calendar-next {
  background: transparent url("arrows.png") no-repeat 0 0;
  cursor: pointer;
  height: 16px;
  margin-top: 5px;
  width: 16px;
}
.pretty-calendar-month .calendar-prev {
  float: left;
  margin-left: 5px;
}
.pretty-calendar-month a:hover .calendar-prev {
  background: url("arrows.png") no-repeat 0 -16px;
}
.pretty-calendar-month .calendar-next {
  background: url("arrows.png") no-repeat 0 -32px;
  float: right;
  margin-right: 5px;
}
.pretty-calendar-month a:hover .calendar-next {
  background: url("arrows.png") no-repeat 0 -48px;
}

/* calendar loader styles */
.calendar_loader {
  bottom: 22px;
  height: 0px;
  left: 28px;
  position: absolute;
  width: 0px;
  z-index: 2;
}
.calendar_loader div {
  background: url("ajax-loader.gif") no-repeat;
  height: 15px;
  width: 128px;
}

/* tooltip styles */
#tiptip_holder {
  display: none;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 99999;
}
#tiptip_holder.tip_top {
  padding-bottom: 5px;
}
#tiptip_holder.tip_bottom {
  padding-top: 5px;
}
#tiptip_holder.tip_right {
  padding-left: 5px;
}
#tiptip_holder.tip_left {
  padding-right: 5px;
}
#tiptip_content {
  -moz-border-radius: 3px;
  -moz-box-shadow: 0 0 3px #999;
  -webkit-border-radius: 3px;
  -webkit-box-shadow: 0 0 3px #999;
  background-color: rgb(215,220,225);
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 3px;
  box-shadow: 0 0 3px #999;
  color: #333;
  font-size: 11px;
  padding: 4px 8px;
  text-shadow: 0 0 1px #fff;
}
#tiptip_arrow,
#tiptip_arrow_inner {
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  height: 0;
  position: absolute;
  width: 0;
}
#tiptip_holder.tip_top #tiptip_arrow {
  border-top-color: #fff;
  border-top-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_bottom #tiptip_arrow {
  border-bottom-color: #fff;
  border-bottom-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_right #tiptip_arrow {
  border-right-color: #fff;
  border-right-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_left #tiptip_arrow {
  border-left-color: #fff;
  border-left-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_top #tiptip_arrow_inner {
  border-top-color: rgb(215,220,225);
  margin-left: -6px;
  margin-top: -7px;
}
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
  border-bottom-color: rgb(215,220,225);
  margin-left: -6px;
  margin-top: -5px;
}
#tiptip_holder.tip_right #tiptip_arrow_inner {
  border-right-color: rgb(215,220,225);
  margin-left: -5px;
  margin-top: -6px;
}
#tiptip_holder.tip_left #tiptip_arrow_inner {
  border-left-color: rgb(215,220,225);
  margin-left: -7px;
  margin-top: -6px;
}
#tiptip_content ul {
  font-size: 11px;
  list-style: none;
  margin: 0;
  padding: 5px 10px;
}
#tiptip_content ul li {
  margin: 0;
  padding: 0;
}
#tiptip_content a {
  text-decoration: underline;
}
#tiptip_content .tooltip_summary {
  border-top: 1px dotted #bbb;
  margin: 0.4em 0.2em;
  padding: 0;
  text-align: right;
}

/* tooltip loader styles */
.tooltip_loader {
  height: 15px;
  padding: 8px 16px;
  width: 128px;
}
.tooltip_loader div {
  background: url("ajax-loader.gif") no-repeat;
  height: 15px;
  width: 128px;
}

File

themes/gridy_182/calendar.css
View source
  1. /* calendar styles */
  2. .block-calendar {
  3. width: 182px;
  4. }
  5. #calendar-body {
  6. position: relative;
  7. width: 182px;
  8. }
  9. .pretty-calendar-week .calendar-value,
  10. .calendar-daynames .calendar-value {
  11. color: #999;
  12. cursor: default;
  13. display: block;
  14. float: left;
  15. font-family: Arial, Tahoma, sans;
  16. font-size: 12px;
  17. height: 19px;
  18. line-height: 12px;
  19. padding: 7px 0 0;
  20. text-align: center;
  21. width: 26px;
  22. }
  23. .calendar-daynames .calendar-value .third-letter {
  24. display: none;
  25. }
  26. .pretty-calendar-week a {
  27. cursor: pointer;
  28. text-decoration: none;
  29. }
  30. .pretty-calendar-week a .calendar-value {
  31. color: #000;
  32. cursor: pointer;
  33. font-weight: bold;
  34. }
  35. .pretty-calendar-week a:hover div {
  36. background: url("days.png") no-repeat 0 -26px;
  37. color: #fff;
  38. }
  39. .pretty-calendar-week .pretty-calendar-today .calendar-value {
  40. background: url("days.png") no-repeat 0 0;
  41. }
  42. .pretty-calendar-week a:hover .pretty-calendar-today .calendar-value {
  43. background: url("days.png") no-repeat 0 -52px;
  44. color: #fff;
  45. }
  46. .pretty-calendar-day,
  47. .pretty-calendar-weekend {
  48. background: url("grid.png") no-repeat 0 0;
  49. display: block;
  50. float: left;
  51. height: 26px;
  52. width: 26px;
  53. }
  54. .pretty-calendar-last {
  55. background: url("grid.png") no-repeat 0 -26px;
  56. }
  57. .calendar-daynames .pretty-calendar-day,
  58. .calendar-daynames .pretty-calendar-weekend {
  59. background: url("grid.png") no-repeat 0 -52px;
  60. text-shadow: 1px 1px 0px #fff;
  61. text-transform: capitalize;
  62. }
  63. .calendar-daynames .pretty-calendar-last {
  64. background: none;
  65. }
  66. .pretty-calendar-month {
  67. background: transparent url("bar.png") no-repeat 0 0;
  68. clear: both;
  69. display: block;
  70. height: 27px;
  71. margin: 2px 0 5px;
  72. text-align: center;
  73. width: 182px;
  74. }
  75. .pretty-calendar-month a:hover div {
  76. background: none;
  77. }
  78. .pretty-calendar-month .month-title {
  79. float: left;
  80. font-family: Tahoma, Arial, sans;
  81. font-size: 12px;
  82. padding-top: 5px;
  83. position: relative;
  84. text-align: center;
  85. text-shadow: 1px 1px 0px #fff;
  86. width: 140px;
  87. z-index: 3;
  88. }
  89. .pretty-calendar-month .calendar-prev,
  90. .pretty-calendar-month .calendar-next {
  91. background: transparent url("arrows.png") no-repeat 0 0;
  92. cursor: pointer;
  93. height: 16px;
  94. margin-top: 5px;
  95. width: 16px;
  96. }
  97. .pretty-calendar-month .calendar-prev {
  98. float: left;
  99. margin-left: 5px;
  100. }
  101. .pretty-calendar-month a:hover .calendar-prev {
  102. background: url("arrows.png") no-repeat 0 -16px;
  103. }
  104. .pretty-calendar-month .calendar-next {
  105. background: url("arrows.png") no-repeat 0 -32px;
  106. float: right;
  107. margin-right: 5px;
  108. }
  109. .pretty-calendar-month a:hover .calendar-next {
  110. background: url("arrows.png") no-repeat 0 -48px;
  111. }
  112. /* calendar loader styles */
  113. .calendar_loader {
  114. bottom: 22px;
  115. height: 0px;
  116. left: 28px;
  117. position: absolute;
  118. width: 0px;
  119. z-index: 2;
  120. }
  121. .calendar_loader div {
  122. background: url("ajax-loader.gif") no-repeat;
  123. height: 15px;
  124. width: 128px;
  125. }
  126. /* tooltip styles */
  127. #tiptip_holder {
  128. display: none;
  129. left: 0;
  130. position: absolute;
  131. top: 0;
  132. z-index: 99999;
  133. }
  134. #tiptip_holder.tip_top {
  135. padding-bottom: 5px;
  136. }
  137. #tiptip_holder.tip_bottom {
  138. padding-top: 5px;
  139. }
  140. #tiptip_holder.tip_right {
  141. padding-left: 5px;
  142. }
  143. #tiptip_holder.tip_left {
  144. padding-right: 5px;
  145. }
  146. #tiptip_content {
  147. -moz-border-radius: 3px;
  148. -moz-box-shadow: 0 0 3px #999;
  149. -webkit-border-radius: 3px;
  150. -webkit-box-shadow: 0 0 3px #999;
  151. background-color: rgb(215,220,225);
  152. border: 1px solid rgba(0,0,0,0.25);
  153. border-radius: 3px;
  154. box-shadow: 0 0 3px #999;
  155. color: #333;
  156. font-size: 11px;
  157. padding: 4px 8px;
  158. text-shadow: 0 0 1px #fff;
  159. }
  160. #tiptip_arrow,
  161. #tiptip_arrow_inner {
  162. border-color: transparent;
  163. border-style: solid;
  164. border-width: 6px;
  165. height: 0;
  166. position: absolute;
  167. width: 0;
  168. }
  169. #tiptip_holder.tip_top #tiptip_arrow {
  170. border-top-color: #fff;
  171. border-top-color: rgba(255,255,255,0.35);
  172. }
  173. #tiptip_holder.tip_bottom #tiptip_arrow {
  174. border-bottom-color: #fff;
  175. border-bottom-color: rgba(255,255,255,0.35);
  176. }
  177. #tiptip_holder.tip_right #tiptip_arrow {
  178. border-right-color: #fff;
  179. border-right-color: rgba(255,255,255,0.35);
  180. }
  181. #tiptip_holder.tip_left #tiptip_arrow {
  182. border-left-color: #fff;
  183. border-left-color: rgba(255,255,255,0.35);
  184. }
  185. #tiptip_holder.tip_top #tiptip_arrow_inner {
  186. border-top-color: rgb(215,220,225);
  187. margin-left: -6px;
  188. margin-top: -7px;
  189. }
  190. #tiptip_holder.tip_bottom #tiptip_arrow_inner {
  191. border-bottom-color: rgb(215,220,225);
  192. margin-left: -6px;
  193. margin-top: -5px;
  194. }
  195. #tiptip_holder.tip_right #tiptip_arrow_inner {
  196. border-right-color: rgb(215,220,225);
  197. margin-left: -5px;
  198. margin-top: -6px;
  199. }
  200. #tiptip_holder.tip_left #tiptip_arrow_inner {
  201. border-left-color: rgb(215,220,225);
  202. margin-left: -7px;
  203. margin-top: -6px;
  204. }
  205. #tiptip_content ul {
  206. font-size: 11px;
  207. list-style: none;
  208. margin: 0;
  209. padding: 5px 10px;
  210. }
  211. #tiptip_content ul li {
  212. margin: 0;
  213. padding: 0;
  214. }
  215. #tiptip_content a {
  216. text-decoration: underline;
  217. }
  218. #tiptip_content .tooltip_summary {
  219. border-top: 1px dotted #bbb;
  220. margin: 0.4em 0.2em;
  221. padding: 0;
  222. text-align: right;
  223. }
  224. /* tooltip loader styles */
  225. .tooltip_loader {
  226. height: 15px;
  227. padding: 8px 16px;
  228. width: 128px;
  229. }
  230. .tooltip_loader div {
  231. background: url("ajax-loader.gif") no-repeat;
  232. height: 15px;
  233. width: 128px;
  234. }