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