body, input {
   font-family: Verdana, Tahoma, Helvetica, sans-serif;
   font-size: 12pt;
}

tr {
   vertical-align: top;
}

ul.breadcrumb-trail {
   margin: 0 0 0.4em 2.5em;
   padding: 0;
   text-indent: -2.0em;
   list-style: none
}

ul.breadcrumb-trail li+li:before { content: "\27a2\a0" }

ul.breadcrumb-trail > li {
   display: inline;
   margin: 0;
   font-size: 12pt;
   white-space: nowrap;
}

table#body {
   width: 100%;
}

table#body > tbody > tr {
   vertical-align: top;
}

col.left-side-col {
   width: 20%;
}

col.content-col {
   width: 70%;
}

col.right-side-col {
   width: 10%;
}

td#left-side {
   width: 8%;
}

td#content {
   width: 92%;
}

td#left-side ul {
   margin: 0 0 0 8px;
   padding: 0;
   list-style: none;
}

td#left-side ul > li {
   margin: 0 0 12pt 0;
   padding: 0;
}

h1 { margin: 0.2em 0 0 1em; font-size: 150%; font-family: Verdana, sanserif; font-weight: normal }

h1#calendar-name {
   margin: 0;
   text-align: center;
   font-size: 24pt;
   font-weight: normal;
}

img.month-calendar, span.month-name {
   width: 317px;
}

img.month-calendar {
   height: 254px;
}

span.month-name {
   position: absolute;
   display: block;
   margin: 25px auto 0 auto;
   font-family: Verdana;
   font-size: 24pt;
   color: #000000;
   text-align: center;
   text-decoration: none;
}

table#top-nav, table#month-calendar {
   width: 100%;
   border-collapse: collapse;
}

col.top-nav-col { # evenly spaced
   width: 35%;
}

col.top-nav-left {
   width: 35%;
}

col.top-nav-middle {
   width: 40%;
}

col.top-nav-right {
   width: 20%;
}

td#today {
   text-align: center;
}

td#what-day-of-the-week-is-it {
   text-align: center;
}

td#top-nav-left, td#top-nav-right {
   white-space: nowrap;
}

td#top-nav-left {
   text-align: left;
   padding: 0 1em 0 0;
}

td#top-nav-right {
   text-align: right;
   padding: 0 0 0 1em;
}

table#month-calendar > thead > tr > th {
   border-style: outset;
   border-color: #333333;
   text-align: center;
}

table#month-calendar > tbody > tr > td {
   border-style: inset;
   border-color: #333333;
   text-align: right;
}

col.dow-col {
   width: 14%;
}

tr.week-row {
   vertical-align: top;
}

td#current-date {
   background-color: #00cc00;
   font-weight: bold;
}

td#param-date {
   background-color: #ffff00;
   font-weight: bold;
}

#daydiff {
   margin: 0 0 0 0;
   text-align: center;
   font-size: 8pt;
   font-weight: normal;
}

.days-between {
   font-size: xx-small;
}

# default media - ~300px

   table#top-nav {
      font-size: 9pt;
   }

   caption#calendar-caption {
      margin: 0 0 6pt 0;
      font-size: 12pt;
      font-weight: normal;
   }

   table#month-calendar > thead > tr > th, table#month-calendar > tbody > tr > td {
      border-width: 2px;
   }

   tr.week-row {
      height: 30px;
   }

   tr.week-row > td {
      padding: 0 1px 0 0;
      font-size: 10pt;
   }

@media (max-width: 199px) {

   .large-screen-only {
      display: none;
   }

}

@media (min-width: 600px) {

   table#top-nav {
      font-size: 10pt;
   }

}

@media (min-width: 800px) {

   table#month-calendar > thead > tr > th, table#month-calendar > tbody > tr > td {
      border-width: 6px;
   }

   table#top-nav {
      font-size: 12pt;
   }

   caption#calendar-caption {
      font-size: 16pt;
      font-weight: bold;
   }

}

@media (min-height: 600px) {

   tr.week-row {
      height: 100px;
   }

   tr.week-row > td {
      padding: 4px 6px 0 0;
      font-size: 12pt;
   }

   #daydiff {
      margin: 2em 0 0 0;
      font-size: 10pt;
   }

}

@media (min-height: 800px) {

   tr.week-row {
      height: 140px;
   }

   #daydiff {
      margin: 3em 0 0 0;
      font-size: 12pt;
   }

}

@media screen and (orientation:portrait) {

  #container {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    overflow: scroll;
    line-height: 1.4em;
  }

}