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