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 }
 127 #datePicker .tdDOW-small {
 128     font-family: Arial, Helvetica, sans-serif;
 129     font-size: 10px;
 130     vertical-align: top;
 131     text-align: center;
 132     border: none;
 133     padding: 2px 3px 2px 3px;
 134     background-color: #FFF2E8;
 135 }
 136 #datePicker .tdDatePicker {
 137     cursor: pointer; cursor: hand;
 138 }
 139 #datePicker .tdWeekend-small {
 140     font-family: Arial, Helvetica, sans-serif;
 141     font-size: 10px;
 142     vertical-align: top;
 143     border: none;
 144     padding: 2px 3px 2px 3px;
 145     background-color: #ffffff;
 146     color: #999999;
 147 }
 148 #datePicker .tdOtherMonthDay-small {
 149     font-family: Arial, Helvetica, sans-serif;
 150     font-size: 10px;
 151     vertical-align: top;
 152     border: none;
 153     padding: 2px 3px 2px 3px;
 154     background-color: #ffffff;
 155     color: #999999;
 156 }
 157 #datePicker .tdMonthDay-small {
 158     font-family: Arial, Helvetica, sans-serif;
 159     font-size: 10px;
 160     vertical-align: top;
 161     border: none;
 162     padding: 2px 3px 2px 3px;
 163     background-color: #ffffff;
 164 }
 165 #datePicker .currentWeek {
 166     background-color: #DBD5FF;
 167 }
 168 #datePicker .currentDate {
 169     background-color: #A79BE7;
 170     color: #E8FAFF;
 171 }
 172 #datePicker .tdDatePickerHighlight {
 173     background-color: #A79BE7;
 174     color: #E8FAFF;
 175 }
 176
 177 /* the DIV of times */
 178 #times {
 179         border-right: 1px solid #999;
 180     width: 2em;
 181     background-color: #FFF3D1;
 182     padding: 0px;
 183 }
 184 #times table {
 185     border-collapse: collapse;
 186     width: 100%;
 187     margin: 0px;
 188     padding: 0px;
 189     background-color: #E7D294;
 190     background-color: #FFF3D1;
 191 }
 192 #times table td {
 193     border-bottom: 1px solid #999;
 194     margin: 0px;
 195     padding: 0px;
 196     font-size: 0.8em;
 197 }
 198 .timeslot {
 199     /* height value is tied to two PHP variables in the ajax_*.html files
 200      * if you change this value then be sure to change the matching value
 201      * in those files */
 202     height: 20px;
 203     margin: 0px;
 204     padding: 0px;
 205 }
 206 .schedule {
 207     background-color: #FFF3D1;
 208     background-color: #FFF;
 209     vertical-align: top;
 210     padding: 0px;
 211     margin: 0px;
 212     border: 1px solid #999999;
 213 }
 214
 215 /* for the header row with provider names */
 216 .providerheader {
 217     text-align: center;
 218     background-color: #EDEAFF;
 219     width: 100%;
 220     overflow:hidden;
 221     border-bottom: 1px solid lightgrey;
 222     white-space: nowrap;
 223 }
 224
 225 /* for the DIV inside each TD, this DIV contains any events for a single day */
 226 .calendar_day {
 227     position: relative;
 228     height: 100%;
 229     width: 100%;
 230 }
 231
 232 /* classes specific to the WEEK view */
 233 .week_dateheader {
 234     border-left: 1px solid #999;
 235     border-right: 1px solid #999;
 236     font-size: 0.7em;
 237     font-weight: bold;
 238 }
 239 .week_currday {
 240     background-color: #DBD5FF;
 241 }
 242
 243 /* classes specific to the MONTH view */
 244 .month_daylink {
 245     width:95%;
 246     font-size: 0.8em;
 247     text-align:right;
 248     background-color: #FFF;
 249     padding:1px 2px 1px 2px;
 250 }
 251 .month_dateheader {
 252     font-size: 0.7em;
 253     width:13%;
 254 }
 255 .month_event {
 256     font-size: 0.8em;
 257     width: 100%;
 258 }
 259
 260 /* types of events */
 261 .event {
 262     position: absolute;
 263     font-size: 0.8em;
 264     width: 100%;
 265 }
 266 .event img {
 267     vertical-align:middle;
 268 }
 269 .event_in {
 270     background-color: white;
 271     z-index:1;
 272 }
 273 .event_out {
 274     background-color: lightgray;
 275     z-index:1;
 276 }
 277 .event_appointment {
 278     background-color: white;
 279     z-index:2;
 280     overflow: hidden;
 281     border: 1px solid #ccc;
 282 }
 283 .event_noshow {
 284     background-color: pink;
 285     z-index:2;
 286     overflow: hidden;
 287     border: 1px solid #fcc;
 288 }
 289 .event_reserved {
 290     background-color: pink;
 291     z-index:2;
 292     overflow: hidden;
 293     border: 1px solid #cfc;
 294 }
 295 .event_highlight {
 296     font-weight: bold;
 297     border-top: 1px solid #999;
 298     border-left: 1px solid #999;
 299     border-right: 2px solid #666;
 300     border-bottom: 2px solid #666;
 301     margin: -3px;
 302     background-color: black;
 303 }
 304 .view1 {
 305 font-size:10px;
 306 }
 307 .view2 {
 308 background-color:#94D6E7;
 309 font-size:10px;
 310 }