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: 100%
  63 }
  64 #providerPicker #pc_facility {
  65     width: 94%;
  66 }
  67 #providerPicker #pc_username {
  68     width: 94%;
  69 }
  70 #facilityColor {
  71     font-family: Arial, Helvetica, sans-serif;
  72     width: 100%;
  73     float: left;
  74 }
  75 #facilityColor table{
  76         width:96%;
  77         border-collapse: collapse;
  78 }
  79 #bigCal {
  80     width:85%;
  81     height: 80%;
  82     overflow: auto;
  83     float: right;
  84     background-color: #FFF3D1;
  85     position: relative;
  86         border-left:1px solid black;
  87 }
  88 #bigCal table {
  89     border-collapse: collapse;
  90     border: none;
  91     vertical-align:middle;
  92     width: 100%;
  93 }
  94 #bigCal td {
  95     padding: 1px;
  96     margin: 0px;
  97 }
  98
  99 #bottomLeft
 100 {
 101     width: 14%;
 102     float: left;
 103
 104 }
 105 /* these are for the small datepicker DIV */
 106 #datePicker {
 107     width: 100%;
 108 }
 109 #datePicker table {
 110         width:96%;
 111     border-collapse: collapse;
 112     margin-left: 3px;
 113 }
 114 #datePicker td {
 115         width: 19.5px;
 116     font-family: Arial, Helvetica, sans-serif;
 117     font-size: 0.7em;
 118     text-align: center;
 119     /* font-size: 9pt;  */
 120 }
 121 #datePicker .tdMonthName-small {
 122     text-align: center;
 123     font-family: Arial, Helvetica, sans-serif;
 124     font-size: 12px;
 125     font-style: normal;
 126     background-color: #FFF2E8;
 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 .event_out {
 275     background-color: lightgray;
 276     z-index:1;
 277 }
 278 .event_appointment {
 279     background-color: white;
 280     z-index:2;
 281     overflow: hidden;
 282     border: 1px solid #ccc;
 283 }
 284 .event_noshow {
 285     background-color: pink;
 286     z-index:2;
 287     overflow: hidden;
 288     border: 1px solid #fcc;
 289 }
 290 .event_reserved {
 291     background-color: pink;
 292     z-index:2;
 293     overflow: hidden;
 294     border: 1px solid #cfc;
 295 }
 296 .event_highlight {
 297     font-weight: bold;
 298     border-top: 1px solid #999;
 299     border-left: 1px solid #999;
 300     border-right: 2px solid #666;
 301     border-bottom: 2px solid #666;
 302     margin: -3px;
 303     background-color: black;
 304 }
 305 .view1 {
 306 font-size:10px;
 307 }
 308 .view2 {
 309 background-color:#94D6E7;
 310 font-size:10px;
 311 }