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 .tdOtherMonthDay-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: #999999;
 157 }
 158 #datePicker .tdMonthDay-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 }
 166 #datePicker .currentWeek {
 167     background-color: #DBD5FF;
 168 }
 169 #datePicker .currentDate {
 170     background-color: #A79BE7;
 171     color: #E8FAFF;
 172 }
 173 #datePicker .tdDatePickerHighlight {
 174     background-color: #A79BE7;
 175     color: #E8FAFF;
 176 }
 177
 178 /* the DIV of times */
 179 #times {
 180         border-right: 1px solid #999;
 181     width: 2em;
 182     background-color: #FFF3D1;
 183     padding: 0px;
 184 }
 185 #times table {
 186     border-collapse: collapse;
 187     width: 100%;
 188     margin: 0px;
 189     padding: 0px;
 190     background-color: #E7D294;
 191     background-color: #FFF3D1;
 192 }
 193 #times table td {
 194     border-bottom: 1px solid #999;
 195     margin: 0px;
 196     padding: 0px;
 197     font-size: 0.8em;
 198 }
 199 .timeslot {
 200     /* height value is tied to two PHP variables in the ajax_*.html files
 201      * if you change this value then be sure to change the matching value
 202      * in those files */
 203     height: 20px;
 204     margin: 0px;
 205     padding: 0px;
 206 }
 207 .schedule {
 208     background-color: #FFF3D1;
 209     background-color: #FFF;
 210     vertical-align: top;
 211     padding: 0px;
 212     margin: 0px;
 213     border: 1px solid #999999;
 214 }
 215
 216 /* for the header row with provider names */
 217 .providerheader {
 218     text-align: center;
 219     background-color: #EDEAFF;
 220     width: 100%;
 221     overflow:hidden;
 222     border-bottom: 1px solid lightgrey;
 223     white-space: nowrap;
 224 }
 225
 226 /* for the DIV inside each TD, this DIV contains any events for a single day */
 227 .calendar_day {
 228     position: relative;
 229     height: 100%;
 230     width: 100%;
 231 }
 232
 233 /* classes specific to the WEEK view */
 234 .week_dateheader {
 235     border-left: 1px solid #999;
 236     border-right: 1px solid #999;
 237     font-size: 0.7em;
 238     font-weight: bold;
 239 }
 240 .week_currday {
 241     background-color: #DBD5FF;
 242 }
 243
 244 /* classes specific to the MONTH view */
 245 .month_daylink {
 246     width:95%;
 247     font-size: 0.8em;
 248     text-align:right;
 249     background-color: #FFF;
 250     padding:1px 2px 1px 2px;
 251 }
 252 .month_dateheader {
 253     font-size: 0.7em;
 254     width:13%;
 255 }
 256 .month_event {
 257     font-size: 0.8em;
 258     width: 100%;
 259 }
 260
 261 /* types of events */
 262 .event {
 263     position: absolute;
 264     font-size: 0.8em;
 265     width: 100%;
 266 }
 267 .event img {
 268     vertical-align:middle;
 269 }
 270 .event_in {
 271     background-color: white;
 272     z-index:1;
 273 }
 274
 275 .event_appointment {
 276     background-color: white;
 277     z-index:2;
 278     overflow: hidden;
 279     border: 1px solid #ccc;
 280 }
 281 .event_noshow {
 282     background-color: pink;
 283     z-index:2;
 284     overflow: hidden;
 285     border: 1px solid #fcc;
 286 }
 287 .event_reserved {
 288     background-color: pink;
 289     z-index:2;
 290     overflow: hidden;
 291     border: 1px solid #cfc;
 292 }
 293 .event_highlight {
 294     font-weight: bold;
 295     border-top: 1px solid #999;
 296     border-left: 1px solid #999;
 297     border-right: 2px solid #666;
 298     border-bottom: 2px solid #666;
 299     margin: -3px;
 300     background-color: black;
 301 }
 302 .event_time
 303 {
 304     cursor: pointer;
 305 }
 306 .event_time:hover
 307 {
 308     color: red;
 309 }
 310
 311 .view1 {
 312 font-size:10px;
 313 }
 314 .view2 {
 315 background-color:#94D6E7;
 316 font-size:10px;
 317 }
 318
 319 .in_start
 320 {
 321     background: transparent;
 322     z-index:2;
 323 }
 324 .event_out.event_highlight, .in_start.event_highlight {
 325     font-weight: bold;
 326     border-top: 1px solid #999;
 327     border-left: 1px solid #999;
 328     border-right: 2px solid #666;
 329     border-bottom: 2px solid #666;
 330     margin: 0px;
 331     background-color: yellow;
 332     opacity: 1;
 333     z-index: 2;
 334     cursor: pointer;
 335 }
 336
 337 .event_out{
 338     z-index: 3;
 339     background-color:#ff7533;
 340 }