@font-face {
  font-family: "Harlow Solid Italic";
  src: url(fonts/harlow.ttf);
}

.changedate {
  text-align: right;
  font-weight: bold;
}
.calendarbody {
  background-color: rgb(230, 230, 230);
  background-image: url(backgrnd.png); 
  margin:8px;
  padding: 0px;
}


h1.upmenu {
   padding: 5px;
   margin: 0px;
   width: 100%;
   color: #AAAABB;
   background-color: #222233; 
   text-align: center;
   margin-bottom: 0.2em;
}

div.textpanel {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
  padding-top: 1em;
  border-color: red;
  border-style: solid; 
  border-width: 1px;
  background-color: rgba(250, 250, 250, 0.7);
  width:     1200px;
  max-width: 1700px;
  min-width: 400px;
}

.calendartable
{
 vertical-align: top;
 border-collapse: collapse;
 border-width: 1px;
 border-color: blue;
 border-style: solid;
 vertical-align: top;
 text-align: right;
}

table.kalendartable {
  margin: 10px; 
  border: 10px;
  border: 1px solid red;
}

.esyl_1, .e4syl_1
{
 vertical-align: top;
 border-collapse: collapse;
 border-width: 1px;
 border-color: blue;
 border-style: solid;
 vertical-align: top;
 text-align: right;
 background-color: rgba(70, 70, 250, 0.6); 
}
.esyn_1, .e4syn_1
{
 vertical-align: top;
 border-collapse: collapse;
 border-width: 1px;
 border-color: blue;
 border-style: solid;
 vertical-align: top;
 text-align: right;
 background-color: rgba(100, 100, 250, 0.6);
}
.esyn_2, .e4syn_2
{
 vertical-align: top;
 border-collapse: collapse;
 border-width: 1px;
 border-color: blue;
 border-style: solid;
 vertical-align: top;
 text-align: right;
 background-color: rgba(250, 100, 100, 0.6); 
}

.esyl_2, .e4syl_2
{
 vertical-align: top;
 border-collapse: collapse;
 border-width: 1px;
 border-color: blue;
 border-style: solid;
 vertical-align: top;
 text-align: right;
 background-color: rgba(250, 70, 70, 0.6);
}
.calendarweekrow 
{
 border-collapse: collapse;
 border-width: 1px;
 border-color: blue;
 border-style: solid;
 //vertical-align: top;
 //text-align: right;
 background-color: rgba(200, 200, 200, 1.0);
}
.calendarvertical 
{
  min-height: 1.7em;
  border:0px solid red;
  vertical-align: bottom; 
  #writing-mode: tb-rl;

  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -o-transform: rotate(-90deg);
  -sand-transform: rotate(-90deg); // Internet Explorer via http://www.useragentman.com/tests/cssSandpaper/rotateTest.html
  transform: rotate(-90deg);

  white-space:nowrap;
  display:block;
  bottom:0;
  max-width:30px;
  font-weight: normal;
  text-shadow: 0px 0px 1px #333;
  padding-bottom: 2px;
}
td.yearperiod {
  padding-bottom: 1em;
}
div.yearperiod {
  max-height:10em; 
}
div.fouryears {
  max-height:4em; 
  margin-bottom: 7px;
}
div.l2years {
  max-height: 15em;
  margin-bottom: 7px;
}
div.coloryears {
  max-height:15em; 
  margin-bottom: 7px;
}
div.starday {
  max-height:5em; 
  margin-bottom: 7px;
}
div.god {
  max-height:3em; 
}
div.dni {
  max-height:3em; 
}
div.starweek {
  max-height:10em; 
  margin-bottom: 7px;
}
div.starmonth {
  max-height:10em; 
  margin-bottom: 7px;
}
div.dayofweek 
{
  max-height:2em;
}

div.bottomspace {
  margin-bottom: 7px;
}

.calendartdleftseparator
{
 border-collapse: collapse;
 border-left-color: blue;
 border-left-style: solid;
 border-left-width:1px;
 border-right-width:0px;
 border-top-width:0px;
 border-bottom-width:0px;
}
.calendartdrightseparator
{
 border-collapse: collapse;
 border-left-color: blue;
 border-left-style: solid;
 border-left-width:0px;
 border-right-width:1px;
 border-top-width:0px;
 border-bottom-width:0px;
}
.celendarleftalign 
{
 text-align: center:
}


.calendartable.plainrowheaders th[scope=row]
{
 font-weight:normal;
 text-align:left
}

.calendartable td ul,.calendartable td ol,.calendartable td dl
{ 
  text-align:right
}

.calendartable.hlist td ul,.calendartable.hlist td ol,.calendartable.hlist td dl
{
  text-align:inherit
}

img.calendarimage {
  width: 2em; 
  padding-left:15px;
  padding-right:15px;
  padding-top:10px;
  padding-bottom:10px;
}


.blueborder 
{
 vertical-align: top;
 border-collapse: collapse;
 border-width: 1px;
 border-color: blue;
 border-style: solid;
 vertical-align: top;
 text-align: left;
 padding-left: 1em;
 padding-top: 1em;
 padding-bottom: 1em;
}
.oldbg
{
 vertical-align: top;
 border-collapse: collapse;
 border-width: 1px;
 border-color: blue;
 border-style: solid;
 vertical-align: top;
 text-align: right;
 font-family: "Izhitsa", "Times New Roman", "Times", "serif";
}
.oldbgr
{
 font-family: "Izhitsa", "Times New Roman", "Times", "serif";
}
td.name
{
 vertical-align: top;
 border-collapse: collapse;
 border-width: 1px;
 border-color: blue;
 border-style: solid;
 vertical-align: top;
 text-align: right;
}
td.transl
{
 vertical-align: top;
 border-collapse: collapse;
 border-width: 1px;
 border-color: blue;
 border-style: solid;
 vertical-align: top;
 text-align: right;
}

div.month {
 float: left;
 margin-left: 4px;
 margin-top:  3px;
}

div.inform {
 border: 1px solid red;
 max-width: 540px;
 padding: 0.5em;
}

div.calendartype {
          border-style: solid;
          border-width: 1px;
          border-color: white;
          position: relative;
          display: inline;
          float: left;
          border-top-right-radius: 1em;
          background-color: rgba(230, 230, 230, 1);
}
div.openclosebutton {
          border-style: solid;
          border-width: 1px;
          border-color: blue;
          background-color: lightgray;
          font-weight: bold;
          width: 2em;
          height: 2em;
          border-radius: 1em; 
          text-align: center;
          line-height: 2em;
          cursor: hand;
          cursor: pointer;
}
div.openclosebutton-closed {
          float: left;
          display: none;
          cursor: hand;
          cursor: pointer;
}
a.openclosebutton:hover div {
          background-color: blue;
          color: white;
          font-weight: bold;
}
div.openclosebutton-position {
          position: absolute;
          top: 0px;
          right: 0px;
          display: inline-block;
}
        
div.clearfloat {
          clear: both;
}
.calendartypetitle {
          border-style: none;
          text-shadow: 0px 0px 1px #333; 
          display: inline-block;
}
a.details {
        //text-decoration: none;
        color: rgb(0,0,200);
}
a.details:hover {
        text-decoration: underline;
        font-weight: bold;
        cursor: pointer;
        cursor: hand;
}
div.details {
        border-style: solid;
        border-width: 1px;
        border-color: blue;
        display: block;
}
.details {
         vertical-align: top;
         text-align: left;
}
td.detailsleft {
         padding-right: 1em;
}
td.detailsright {
         padding-left: 1em;
}
a.period {
         text-decoration: none;
}
a.period:hover {
         text-decoration: underline;
}
td.today {
         background-color: rgb(0, 0, 255);
         color: lightgray;
}
td.subota {
         background-color: rgb(173, 216, 230);
}
td.nedelya {
         background-color: rgb(153, 196, 230);;
}

table.shortdata {
         display: inline;
         border-collapse: collapse;
}
th.shortdata, td.shortdata {
         cellspacing: 0px; 
         callpadding: 0px;
         padding: 0px; 
         margin: 0px;
         border-collapse: collapse;
         //border: 1px solid red;
}
.bold {
         font-weight: bold;
}
.nobr { white-space:nowrap; }

a.up, a.down {
        text-decoration: none;
        color: gray;
}
a.up:hover {
        text-decoration: none;
        font-weight: bold;
        cursor: hand;
        color: rgb(0,0,200);
}
a.down:hover {
        text-decoration: none;
        font-weight: bold;
        cursor: hand;
        color: rgb(200,0,0);
}
div.footer {
 border: 0px;
 border-top-width: 2px;
 border-top-style: solid;
 border-top-color: blue;
 clear: both;
 background-color: rgb(0, 0, 30);
 min-height: 20em;
 margin: 0px; 
 padding: 0px;
}
div.footerfloat {
  float: left;
  margin-right: 3em;
  margin-left: 1em;
}
.footer {
  font-size: small;
  text-decoration: none;
  color: lightblue;
}
a.footer:hover {
  text-decoration: underline;
}

div.treemonths {
  display: block;
}
div.calendartype#grcal {
  margin-top: 1em;
}
div.fullmonths {
  display: none;
}

/* Larger than mobile */
@media (min-width: 400px) {
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
}

/* Larger than tablet */
@media (min-width: 750px) {
  /* End Mobile */
  div.treemonths {
    display: none;
  }
  /* Start Desktop */
  div.fullmonths {
    display: block;
  }
  div.calendartype#grcal {
    margin-left: 1em;
    margin-top:  0em;
  }
}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}