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     float: right;
  29     width: 100%;
  30     border-bottom:1px solid black;
  31 }
  32 #dateNAV {
  33     float: left;
  34     font-family: Arial, Helvetica, sans-serif;
  35     font-size: 14pt;
  36 }
  37 #dateDisplay {
  38     float: left;
  39     padding-left: 10px;
  40     font-family: Arial, Helvetica, sans-serif;
  41 }
  42 #viewPicker {
  43     float: right;
  44     margin-right: 10px;
  45 }
  46 #bigCalHeader {
  47     width:70%;
  48     float: right;
  49     text-align:center;
  50     font-family: Arial, Helvetica, sans-serif;
  51     font-size: 14pt;
  52 }
  53 #providerPicker {
  54     font-family: Arial, Helvetica, sans-serif;
  55     width: 100%;
  56 }
  57 #providerPicker #pc_facility {
  58     width: 100%;
  59 }
  60 #providerPicker #pc_username {
  61     width: 100%;
  62 }
  63 #facilityColor {
  64     font-family: Arial, Helvetica, sans-serif;
  65     width: 100%;
  66     float: left;
  67 }
  68 #facilityColor table{
  69     width:100%;
  70     border-collapse: collapse;
  71 }
  72 #bottom{
  73     float:left;
  74     position: relative;
  75     width:100%;
  76 }
  77 #bigCal {
  78     overflow: hidden;
  79     background-color: #FFF3D1;
  80     border-left:1px solid black;
  81 }
  82
  83 #bigCal table {
  84     border-collapse: collapse;
  85     border: none;
  86     vertical-align:middle;
  87     width: 100%;
  88 }
  89 #bigCal td {
  90     padding: 1px;
  91     margin: 0px;
  92 }
  93
  94 #bottomLeft
  95 {
  96     width: 15%;
  97     min-width:140px;
  98     float: left;
  99     clear: left;
 100
 101 }
 102 /* these are for the small datepicker DIV */
 103 #datePicker {
 104     width: 100%;
 105 }
 106 #datePicker table {
 107     width:96%;
 108     border-collapse: collapse;
 109     margin-left: 3px;
 110 }
 111 #datePicker td {
 112     width: 19.5px;
 113     font-family: Arial, Helvetica, sans-serif;
 114     font-size: 0.7em;
 115     text-align: center;
 116     /* font-size: 9pt;  */
 117 }
 118 #datePicker .tdMonthName-small {
 119     text-align: center;
 120     font-family: Arial, Helvetica, sans-serif;
 121     font-size: 12px;
 122     font-style: normal;
 123     background-color: #FFF2E8;
 124     cursor: pointer;
 125 }
 126 #datePicker .tdDOW-small {
 127     font-family: Arial, Helvetica, sans-serif;
 128     font-size: 10px;
 129     vertical-align: top;
 130     text-align: center;
 131     border: none;
 132     padding: 2px 3px 2px 3px;
 133     background-color: #FFF2E8;
 134 }
 135 #datePicker .tdDatePicker {
 136     cursor: pointer; cursor: hand;
 137 }
 138 #datePicker .tdWeekend-small {
 139     font-family: Arial, Helvetica, sans-serif;
 140     font-size: 10px;
 141     vertical-align: top;
 142     border: none;
 143     padding: 2px 3px 2px 3px;
 144     background-color: #ffffff;
 145     color: #999999;
 146 }
 147 #datePicker .tdHoliday-small {
 148     font-family: Arial, Helvetica, sans-serif;
 149     font-size: 10px;
 150     vertical-align: top;
 151     border: none;
 152     padding: 2px 3px 2px 3px;
 153     background-color: #ffffff;
 154     color: red;
 155 }
 156 #datePicker .tdOtherMonthDay-small {
 157     font-family: Arial, Helvetica, sans-serif;
 158     font-size: 10px;
 159     vertical-align: top;
 160     border: none;
 161     padding: 2px 3px 2px 3px;
 162     background-color: #ffffff;
 163     color: #999999;
 164 }
 165 #datePicker .tdMonthDay-small {
 166     font-family: Arial, Helvetica, sans-serif;
 167     font-size: 10px;
 168     vertical-align: top;
 169     border: none;
 170     padding: 2px 3px 2px 3px;
 171     background-color: #ffffff;
 172 }
 173 #datePicker .currentWeek {
 174     background-color: #DBD5FF;
 175 }
 176 #datePicker .currentDate {
 177     background-color: #A79BE7;
 178     color: #E8FAFF;
 179 }
 180 #datePicker .tdDatePickerHighlight {
 181     background-color: #A79BE7;
 182     color: #E8FAFF;
 183 }
 184
 185 /* the DIV of times */
 186 #times {
 187     border-right: 1px solid #999;
 188     width: 2em;
 189     background-color: #FFF3D1;
 190     padding: 0px;
 191 }
 192 #times table {
 193     border-collapse: collapse;
 194     width: 100%;
 195     margin: 0px;
 196     padding: 0px;
 197     background-color: #E7D294;
 198     background-color: #FFF3D1;
 199 }
 200 #times table td {
 201     border-bottom: 1px solid #999;
 202     margin: 0px;
 203     padding: 0px;
 204     font-size: 0.8em;
 205 }
 206 .timeslot {
 207     /* height value is tied to two PHP variables in the ajax_*.html files
 208      * if you change this value then be sure to change the matching value
 209      * in those files */
 210     height: 20px;
 211     margin: 0px;
 212     padding: 0px;
 213 }
 214 .schedule {
 215     background-color: #FFF3D1;
 216     background-color: #FFF;
 217     vertical-align: top;
 218     padding: 0px;
 219     margin: 0px;
 220     border: 1px solid #999999;
 221     width: 25em;
 222
 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     white-space: nowrap;
 283     width: 100%;
 284     overflow: hidden;
 285     text-overflow: ellipsis;
 286     border: 1px solid #000000;
 287 }
 288
 289 .event_appointment {
 290     background-color: white;
 291     z-index:2;
 292     overflow: hidden;
 293     border: 1px solid #ccc;
 294     white-space: nowrap;
 295     width: 100%;
 296     overflow: hidden;
 297     text-overflow: ellipsis;
 298     border: 1px solid #000000;
 299 }
 300 .event_noshow {
 301     background-color: pink;
 302     z-index:2;
 303     overflow: hidden;
 304     border: 1px solid #fcc;
 305 }
 306 .event_reserved {
 307     background-color: pink;
 308     z-index:2;
 309     overflow: hidden;
 310     border: 1px solid #cfc;
 311 }
 312 .event_holiday {
 313     background-color: mediumpurple;
 314     z-index:2;
 315     overflow: hidden;
 316     border: 1px solid #cfc;
 317 }
 318 .event_highlight {
 319     font-weight: bold;
 320     border-top: 1px solid #999;
 321     border-left: 1px solid #999;
 322     border-right: 2px solid #666;
 323     border-bottom: 2px solid #666;
 324     margin: -3px;
 325     background-color: black;
 326     white-space: nowrap;
 327     overflow: hidden;
 328     text-overflow: ellipsis;
 329     border: 1px solid #000000;
 330 }
 331 .event_time
 332 {
 333     cursor: pointer;
 334 }
 335 .event_time:hover
 336 {
 337     color: red;
 338 }
 339
 340 .view1 {
 341     font-size:10px;
 342 }
 343 .view2 {
 344     background-color:#94D6E7;
 345     font-size:10px;
 346 }
 347
 348 .in_start
 349 {
 350     background: transparent;
 351     z-index:2;
 352 }
 353 .event_out.event_highlight, .in_start.event_highlight {
 354     font-weight: bold;
 355     border-top: 1px solid #999;
 356     border-left: 1px solid #999;
 357     border-right: 2px solid #666;
 358     border-bottom: 2px solid #666;
 359     margin: 0px;
 360     background-color: yellow;
 361     opacity: 1;
 362     z-index: 2;
 363     cursor: pointer;
 364 }
 365
 366 .event_out{
 367     z-index: 3;
 368     background-color:#ff7533;
 369 }
 370 .weekend-day{
 371     background: rgba(146, 115, 214, 0.33);
 372 }
 373
 374 .event_holiday{
 375     width:100% !important;
 376 }
 377