Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!

The Foxes Den - Booking Calendar CSS

By: NiallASD on Mar 9th, 2014  |  syntax: None  |  size: 6.66 KB  |  views: 52  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. /*******************************************************************************/
  2.  
  3. /*  The Foxes Den   -   C O L O R    S K I N          ****************************/
  4.  
  5. /*******************************************************************************/
  6.  
  7. /* For better compatibility, please change here only folowing properties:      */
  8.  
  9. /*
  10.  
  11. *        background , background-color, background-repeat, background-image,  background-repeat, background-position
  12.  
  13. *        border
  14.  
  15. *        box-shadow, -moz-box-shadow, -webkit-box-shadow
  16.  
  17. *        border-radius, -moz-border-radius, -webkit-border-radius
  18.  
  19. *        color
  20.  
  21. *        font-weight
  22.  
  23. *        text-shadow
  24.  
  25. *        text-transform
  26.  
  27. *
  28.  
  29. */
  30.  
  31. /* Full Calendar Frame */
  32.  
  33. .datepick-inline {
  34.  
  35. }
  36.  
  37. /* Background of one calendar month */
  38.  
  39. .datepick-inline .datepick{
  40.  
  41.   background:  transparent;
  42.  
  43. }
  44.  
  45. /* Previous & Next links  and TITLE BACKGROUND */
  46.  
  47. .datepick-inline .calendar-links {
  48.  
  49.   background-color: #2d1616;
  50.  
  51. }
  52.  
  53. /* Prev - Next Text */
  54.  
  55. .datepick-inline .calendar-links .datepick-prev a,
  56.  
  57. .datepick-inline .calendar-links .datepick-next a,
  58.  
  59. .datepick-inline .calendar-links .datepick-prev a:hover,
  60.  
  61. .datepick-inline .calendar-links .datepick-next a:hover{
  62.  
  63.     color: #e0cd81;
  64.  
  65.     font-weight: bold;
  66.  
  67. }
  68.  
  69. /* Month Titles */
  70.  
  71. .datepick-inline .datepick-header {
  72.  
  73.         font-size: 21px;
  74.  
  75.   color: #e0cd81;
  76.  
  77.   font-weight: bold;
  78.  
  79. }
  80.  
  81. /* Week Titles */
  82.  
  83. div.datepick-inline .datepick-title-row th{
  84.  
  85.         font-size: 18px;
  86.  
  87.     color: #2d1616;
  88.  
  89.     font-weight: bold;    
  90.  
  91.     text-transform: uppercase;    
  92.  
  93. }
  94.  
  95. /* Cell border*/
  96.  
  97. .block_hints .block_free, .block_hints .block_time, .block_hints .block_booked, .block_hints .block_pending, .block_hints .block_check_in_out,
  98.  
  99. .datepick-inline .datepick-days-cell{
  100.  
  101.         font-size: 18px;
  102.  
  103.         font-weight: bold;
  104.  
  105.     color:#a9964c;
  106.  
  107. }
  108.  
  109. /*  Dates Cells       **********************************************************/
  110.  
  111. /*******************************************************************************/
  112.  
  113. /* A V A I L A B L E - BACKGROUND */
  114.  
  115. .block_hints .block_free,
  116.  
  117. .block_hints .block_time,
  118.  
  119. .block_hints .block_check_in_out div.check-in-div,                             /* Item  for the LEGEND */
  120.  
  121. .block_hints .block_check_in_out div.check-out-div,                             /* Item  for the LEGEND */
  122.  
  123. .datepick-inline .date_available,
  124.  
  125. .datepick-inline .timespartly.check_in_time div.check-in-div,                   /* Define the COLOR fot the check  in / out times the same as available*/
  126.  
  127. .datepick-inline .timespartly.check_out_time div.check-out-div {
  128.  
  129.   background: none repeat scroll 0 0 #e3d288;
  130.  
  131. }
  132.  
  133. /* A V A I L A B L E  and UNSELECTABLE - Text */
  134.  
  135. .block_hints .block_free,
  136.  
  137. .datepick-inline .date_available,
  138.  
  139. .datepick-inline .date_available.datepick-unselectable{
  140.  
  141.   color: #CCCCCC;                                                               /* This style for the uvailbale date, when we are select the dates */
  142.  
  143. }
  144.  
  145. /* A V A I L A B L E  - Text A */
  146.  
  147. .block_hints .block_free a,
  148.  
  149. .block_hints .block_time,
  150.  
  151. .datepick-inline .date_available a{
  152.  
  153.     color:#2d1616;
  154.  
  155.     font-weight: bold;
  156.  
  157.         font-size: 18px;
  158.  
  159. }
  160.  
  161. /*******************************************************************************/
  162.  
  163. /* T I M E   S L O T S */
  164.  
  165. .block_hints .block_time,
  166.  
  167. .datepick-inline .timespartly{
  168.  
  169.   background-image: url("../../img/clock_fill.png");
  170.  
  171.   background-repeat: no-repeat;
  172.  
  173.   background-position:100% 100%;
  174.  
  175. }
  176.  
  177. /*******************************************************************************/
  178.  
  179. /* A P P R O V E D  - BACKGROUND */
  180.  
  181. .block_hints .date_approved.block_check_in_out,
  182.  
  183. .block_hints .block_booked,
  184.  
  185. .datepick-inline .date_approved  {
  186.  
  187.     background-color: #e3d288;
  188.  
  189. }
  190.  
  191. /* A P P R O V E D  -  T E X T /including partially booked - timeslots/ */
  192.  
  193. .block_hints .date_approved.block_check_in_out,  
  194.  
  195. .block_hints .block_booked,
  196.  
  197. .datepick-inline .date_approved,  
  198.  
  199. .block_hints .block_booked a,
  200.  
  201. .datepick-inline .date_approved a{
  202.  
  203.     color: #e3d288;
  204.  
  205.     font-weight: bold;
  206.  
  207. }
  208.  
  209. /* CHECK IN and CHECK OUT  Borders for the approved cells - the COLOR have to be the SAME as BACKGROUND of this cell*/
  210.  
  211. .block_hints .date_approved.block_check_in_out div.check-in-div,                /* Item  for the LEGEND */
  212.  
  213. .datepick-inline .date_approved.timespartly.check_in_time div.check-in-div{
  214.  
  215. }
  216.  
  217. .block_hints .date_approved.block_check_in_out div.check-out-div,               /* Item  for the LEGEND */
  218.  
  219. .datepick-inline .date_approved.timespartly.check_out_time div.check-out-div{
  220.  
  221. }
  222.  
  223. /*******************************************************************************/
  224.  
  225. /* P E N D I N G  - BACKGROUND */
  226.  
  227. .block_hints .date2approve.block_check_in_out,
  228.  
  229. .block_hints .block_pending,
  230.  
  231. .datepick-inline .date2approve  {
  232.  
  233.   background-color: #77AAFF;
  234.  
  235. }
  236.  
  237. /* P E N D I N G  -  T E X T /including partially booked - timeslots/ */
  238.  
  239. .block_hints .date2approve.block_check_in_out,
  240.  
  241. .block_hints .block_pending,
  242.  
  243. .datepick-inline .date2approve,
  244.  
  245. .block_hints .block_pending a,
  246.  
  247. .datepick-inline .date2approve a {
  248.  
  249.     color: #e3d288;
  250.  
  251.     font-weight: bold;
  252.  
  253.     text-shadow: 0 -1px 0 #55e;
  254.  
  255. }
  256.  
  257. /* CHECK IN and CHECK OUT  Borders for the approved cells - the COLOR have to be the SAME as BACKGROUND of this cell*/
  258.  
  259. .block_hints .date2approve.block_check_in_out div.check-in-div,                 /* Item  for the LEGEND */
  260.  
  261. .datepick-inline .date2approve.timespartly.check_in_time div.check-in-div{
  262.  
  263. }
  264.  
  265. .block_hints .date2approve.block_check_in_out div.check-out-div,                /* Item  for the LEGEND */
  266.  
  267. .datepick-inline .date2approve.timespartly.check_out_time div.check-out-div{
  268.  
  269. }
  270.  
  271. /*******************************************************************************/
  272.  
  273. /* S E L E C T E D   Dates - Background */
  274.  
  275. .datepick-inline .datepick-one-month .datepick .datepick-current-day {
  276.  
  277.   background-color: #555;
  278.  
  279. }
  280.  
  281. /* S E L E C T E D   Dates - Text color */
  282.  
  283. .datepick-inline .datepick-one-month .datepick .datepick-current-day a{
  284.  
  285.     color: #EEEEEE;
  286.  
  287.     text-shadow: 0 -1px 0 #000000;
  288.  
  289. }
  290.  
  291. /*******************************************************************************/
  292.  
  293. /* C e l l   O V E R   Dates - Background */
  294.  
  295. .datepick-inline .datepick .datepick-days-cell-over{
  296.  
  297.     background:#a9964c;
  298.  
  299. }
  300.  
  301. /* C e l l   O V E R   Dates - Text color */
  302.  
  303. .datepick-inline .datepick .datepick-days-cell-over a:hover,
  304.  
  305. .datepick-inline .datepick .datepick-days-cell-over a{    
  306.  
  307.     color: #eee;
  308.  
  309.     text-shadow: 0 -1px 0 #888;
  310.  
  311. }
  312.  
  313. /*******************************************************************************/