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: 1%;
 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     text-align: center;
 214 }
 215 .schedule {
 216     background-color: #FFF3D1;
 217     background-color: #FFF;
 218     vertical-align: top;
 219     padding: 0px;
 220     margin: 0px;
 221     border: 1px solid #999999;
 222     width: 25em;
 223
 224 }
 225
 226 /* for the header row with provider names */
 227 .providerheader {
 228     text-align: center;
 229     background-color: #EDEAFF;
 230     width: 100%;
 231     overflow:hidden;
 232     border-bottom: 1px solid lightgrey;
 233     white-space: nowrap;
 234 }
 235
 236 /* for the DIV inside each TD, this DIV contains any events for a single day */
 237 .calendar_day {
 238     position: relative;
 239     height: 100%;
 240     width: 100%;
 241 }
 242
 243 /* classes specific to the WEEK view */
 244 .week_dateheader {
 245     border-left: 1px solid #999;
 246     border-right: 1px solid #999;
 247     font-size: 0.7em;
 248     font-weight: bold;
 249 }
 250 .week_currday {
 251     background-color: #DBD5FF;
 252 }
 253
 254 /* classes specific to the MONTH view */
 255 .month_daylink {
 256     width:95%;
 257     font-size: 0.8em;
 258     text-align:right;
 259     background-color: #FFF;
 260     padding:1px 2px 1px 2px;
 261 }
 262 .month_dateheader {
 263     font-size: 0.7em;
 264     width:13%;
 265 }
 266 .month_event {
 267     font-size: 0.8em;
 268     width: 100%;
 269 }
 270
 271 /* types of events */
 272 .event {
 273     position: absolute;
 274     font-size: 0.8em;
 275     width: 100%;
 276 }
 277 .event img {
 278     vertical-align:middle;
 279 }
 280 .event_in {
 281     background-color: white;
 282     z-index:1;
 283     white-space: nowrap;
 284     width: 100%;
 285     overflow: hidden;
 286     text-overflow: ellipsis;
 287     border: 1px solid #000000;
 288 }
 289
 290 .event_appointment {
 291     background-color: white;
 292     z-index:2;
 293     overflow: hidden;
 294     border: 1px solid #ccc;
 295     white-space: nowrap;
 296     width: 100%;
 297     overflow: hidden;
 298     text-overflow: ellipsis;
 299     border: 1px solid #000000;
 300 }
 301 .event_noshow {
 302     background-color: pink;
 303     z-index:2;
 304     overflow: hidden;
 305     border: 1px solid #fcc;
 306 }
 307 .event_reserved {
 308     background-color: pink;
 309     z-index:2;
 310     overflow: hidden;
 311     border: 1px solid #cfc;
 312 }
 313 .event_holiday {
 314     background-color: mediumpurple;
 315     z-index:2;
 316     overflow: hidden;
 317     border: 1px solid #cfc;
 318 }
 319 .event_highlight {
 320     font-weight: bold;
 321     border-top: 1px solid #999;
 322     border-left: 1px solid #999;
 323     border-right: 2px solid #666;
 324     border-bottom: 2px solid #666;
 325     margin: -3px;
 326     background-color: black;
 327     white-space: nowrap;
 328     overflow: hidden;
 329     text-overflow: ellipsis;
 330     border: 1px solid #000000;
 331 }
 332 .event_time
 333 {
 334     cursor: pointer;
 335 }
 336 .event_time:hover
 337 {
 338     color: red;
 339 }
 340
 341 .view1 {
 342     font-size:10px;
 343 }
 344 .view2 {
 345     background-color:#94D6E7;
 346     font-size:10px;
 347 }
 348
 349 .in_start
 350 {
 351     background: transparent;
 352     z-index:2;
 353 }
 354 .event_out.event_highlight, .in_start.event_highlight {
 355     font-weight: bold;
 356     border-top: 1px solid #999;
 357     border-left: 1px solid #999;
 358     border-right: 2px solid #666;
 359     border-bottom: 2px solid #666;
 360     margin: 0px;
 361     background-color: yellow;
 362     opacity: 1;
 363     z-index: 2;
 364     cursor: pointer;
 365 }
 366
 367 .event_out{
 368     z-index: 3;
 369     background-color:#ff7533;
 370 }
 371 .weekend-day{
 372     background: rgba(146, 115, 214, 0.33);
 373 }
 374
 375 .event_holiday{
 376     width:100% !important;
 377 }
 378