interface/themes/ajax_calendar.css

   1 /* ====================================
   2  * the style sheet for the ajax_template calendar
   3  * ====================================*/
   4
   5 a {
   6  text-decoration:none;
   7 }
   8 td {
   9  font-family: Arial, Helvetica, sans-serif;
  10 }
  11 div.tiny { width:1px; height:1px; font-size:1px; }
  12 .currentview {
  13     border: 2px solid blue;
  14     cursor: default;
  15 }
  16 #printview, #dayview, #weekview, #monthview {
  17     cursor: pointer; cursor: hand;
  18 }
  19 #functions {
  20     width: 13.5%; /* can't make this 25% for some reason */
  21     min-width: 105px;
  22     float: left;
  23     padding: 0px 5px 0px 5px;
  24     margin-right: 0%; /* added because of the width issue above */
  25 }
  26
  27 #topToolbarRight {
  28         background-color:#BBCCFF;
  29     float: right;
  30     width: 100%;
  31         border-bottom:1px solid black;
  32         border-TOP:1px solid black;
  33 }
  34 #dateNAV {
  35     float: left;
  36         font-family: Arial, Helvetica, sans-serif;
  37     font-size: 14pt;
  38 }
  39 #dateDisplay {
  40     float: left;
  41     padding-left: 10px;
  42     font-family: Arial, Helvetica, sans-serif;
  43 }
  44 #viewPicker {
  45     float: right;
  46     margin-right: 10px;
  47 }
  48 #bigCalHeader {
  49     width:70%;
  50     float: right;
  51     text-align:center;
  52     font-family: Arial, Helvetica, sans-serif;
  53     font-size: 14pt;
  54 }
  55 #providerPicker {
  56     font-family: Arial, Helvetica, sans-serif;
  57     width: 100%;
  58 }
  59 #providerPicker #pc_facility {
  60     width: 100%;
  61 }
  62 #providerPicker #pc_username {
  63     width: 100%;
  64 }
  65 #facilityColor {
  66     font-family: Arial, Helvetica, sans-serif;
  67     width: 100%;
  68     float: left;
  69 }
  70 #facilityColor table{
  71         width:100%;
  72         border-collapse: collapse;
  73 }
  74 #bottom{
  75     float:left;
  76     position: relative;
  77     width:100%;
  78  }
  79 #bigCal {
  80     overflow: hidden;
  81     background-color: #FFF3D1;
  82     border-left:1px solid black;
  83 }
  84
  85 #bigCal table {
  86     border-collapse: collapse;
  87     border: none;
  88     vertical-align:middle;
  89     width: 100%;
  90 }
  91 #bigCal td {
  92     padding: 1px;
  93     margin: 0px;
  94 }
  95
  96 #bottomLeft
  97 {
  98     width: 15%;
  99     min-width:140px;
 100     float: left;
 101     clear: left;
 102
 103 }
 104 /* these are for the small datepicker DIV */
 105 #datePicker {
 106     width: 100%;
 107 }
 108 #datePicker table {
 109         width:96%;
 110     border-collapse: collapse;
 111     margin-left: 3px;
 112 }
 113 #datePicker td {
 114         width: 19.5px;
 115     font-family: Arial, Helvetica, sans-serif;
 116     font-size: 0.7em;
 117     text-align: center;
 118     /* font-size: 9pt;  */
 119 }
 120 #datePicker .tdMonthName-small {
 121     text-align: center;
 122     font-family: Arial, Helvetica, sans-serif;
 123     font-size: 12px;
 124     font-style: normal;
 125     background-color: #FFF2E8;
 126     cursor: pointer;
 127 }
 128 #datePicker .tdDOW-small {
 129     font-family: Arial, Helvetica, sans-serif;
 130     font-size: 10px;
 131     vertical-align: top;
 132     text-align: center;
 133     border: none;
 134     padding: 2px 3px 2px 3px;
 135     background-color: #FFF2E8;
 136 }
 137 #datePicker .tdDatePicker {
 138     cursor: pointer; cursor: hand;
 139 }
 140 #datePicker .tdWeekend-small {
 141     font-family: Arial, Helvetica, sans-serif;
 142     font-size: 10px;
 143     vertical-align: top;
 144     border: none;
 145     padding: 2px 3px 2px 3px;
 146     background-color: #ffffff;
 147     color: #999999;
 148 }
 149 #datePicker .tdHoliday-small {
 150     font-family: Arial, Helvetica, sans-serif;
 151     font-size: 10px;
 152     vertical-align: top;
 153     border: none;
 154     padding: 2px 3px 2px 3px;
 155     background-color: #ffffff;
 156     color: red;
 157 }
 158 #datePicker .tdOtherMonthDay-small {
 159     font-family: Arial, Helvetica, sans-serif;
 160     font-size: 10px;
 161     vertical-align: top;
 162     border: none;
 163     padding: 2px 3px 2px 3px;
 164     background-color: #ffffff;
 165     color: #999999;
 166 }
 167 #datePicker .tdMonthDay-small {
 168     font-family: Arial, Helvetica, sans-serif;
 169     font-size: 10px;
 170     vertical-align: top;
 171     border: none;
 172     padding: 2px 3px 2px 3px;
 173     background-color: #ffffff;
 174 }
 175 #datePicker .currentWeek {
 176     background-color: #DBD5FF;
 177 }
 178 #datePicker .currentDate {
 179     background-color: #A79BE7;
 180     color: #E8FAFF;
 181 }
 182 #datePicker .tdDatePickerHighlight {
 183     background-color: #A79BE7;
 184     color: #E8FAFF;
 185 }
 186
 187 /* the DIV of times */
 188 #times {
 189         border-right: 1px solid #999;
 190     width: 2em;
 191     background-color: #FFF3D1;
 192     padding: 0px;
 193 }
 194 #times table {
 195     border-collapse: collapse;
 196     width: 100%;
 197     margin: 0px;
 198     padding: 0px;
 199     background-color: #E7D294;
 200     background-color: #FFF3D1;
 201 }
 202 #times table td {
 203     border-bottom: 1px solid #999;
 204     margin: 0px;
 205     padding: 0px;
 206     font-size: 0.8em;
 207 }
 208 .timeslot {
 209     /* height value is tied to two PHP variables in the ajax_*.html files
 210      * if you change this value then be sure to change the matching value
 211      * in those files */
 212     height: 20px;
 213     margin: 0px;
 214     padding: 0px;
 215 }
 216 .schedule {
 217     background-color: #FFF3D1;
 218     background-color: #FFF;
 219     vertical-align: top;
 220     padding: 0px;
 221     margin: 0px;
 222     border: 1px solid #999999;
 223 }
 224
 225 /* for the header row with provider names */
 226 .providerheader {
 227     text-align: center;
 228     background-color: #EDEAFF;
 229     width: 100%;
 230     overflow:hidden;
 231     border-bottom: 1px solid lightgrey;
 232     white-space: nowrap;
 233 }
 234
 235 /* for the DIV inside each TD, this DIV contains any events for a single day */
 236 .calendar_day {
 237     position: relative;
 238     height: 100%;
 239     width: 100%;
 240 }
 241
 242 /* classes specific to the WEEK view */
 243 .week_dateheader {
 244     border-left: 1px solid #999;
 245     border-right: 1px solid #999;
 246     font-size: 0.7em;
 247     font-weight: bold;
 248 }
 249 .week_currday {
 250     background-color: #DBD5FF;
 251 }
 252
 253 /* classes specific to the MONTH view */
 254 .month_daylink {
 255     width:95%;
 256     font-size: 0.8em;
 257     text-align:right;
 258     background-color: #FFF;
 259     padding:1px 2px 1px 2px;
 260 }
 261 .month_dateheader {
 262     font-size: 0.7em;
 263     width:13%;
 264 }
 265 .month_event {
 266     font-size: 0.8em;
 267     width: 100%;
 268 }
 269
 270 /* types of events */
 271 .event {
 272     position: absolute;
 273     font-size: 0.8em;
 274     width: 100%;
 275 }
 276 .event img {
 277     vertical-align:middle;
 278 }
 279 .event_in {
 280     background-color: white;
 281     z-index:1;
 282 }
 283
 284 .event_appointment {
 285     background-color: white;
 286     z-index:2;
 287     overflow: hidden;
 288     border: 1px solid #ccc;
 289 }
 290 .event_noshow {
 291     background-color: pink;
 292     z-index:2;
 293     overflow: hidden;
 294     border: 1px solid #fcc;
 295 }
 296 .event_reserved {
 297     background-color: pink;
 298     z-index:2;
 299     overflow: hidden;
 300     border: 1px solid #cfc;
 301 }
 302 .event_holiday {
 303     background-color: mediumpurple;
 304     z-index:2;
 305     overflow: hidden;
 306     border: 1px solid #cfc;
 307 }
 308 .event_highlight {
 309     font-weight: bold;
 310     border-top: 1px solid #999;
 311     border-left: 1px solid #999;
 312     border-right: 2px solid #666;
 313     border-bottom: 2px solid #666;
 314     margin: -3px;
 315     background-color: black;
 316 }
 317 .event_time
 318 {
 319     cursor: pointer;
 320 }
 321 .event_time:hover
 322 {
 323     color: red;
 324 }
 325
 326 .view1 {
 327 font-size:10px;
 328 }
 329 .view2 {
 330 background-color:#94D6E7;
 331 font-size:10px;
 332 }
 333
 334 .in_start
 335 {
 336     background: transparent;
 337     z-index:2;
 338 }
 339 .event_out.event_highlight, .in_start.event_highlight {
 340     font-weight: bold;
 341     border-top: 1px solid #999;
 342     border-left: 1px solid #999;
 343     border-right: 2px solid #666;
 344     border-bottom: 2px solid #666;
 345     margin: 0px;
 346     background-color: yellow;
 347     opacity: 1;
 348     z-index: 2;
 349     cursor: pointer;
 350 }
 351
 352 .event_out{
 353     z-index: 3;
 354     background-color:#ff7533;
 355 }
 356 .weekend-day{
 357     background: rgba(146, 115, 214, 0.33);
 358 }
 359
 360 .event_holiday{
 361     width:100% !important;
 362 }
 363