/* Stylings for the calendar display. */

#calendar {
  background-color: #fff8e1;
  border-spacing: 0px;
  margin: auto;
  margin-top: 30px;
  border: 8px ridge #CC6633;
  border-radius: 10px;
  box-shadow: 5px 4px 3px #888888;
  table-layout: fixed;
  width: 300px;
}

#calendar tr.header th {
  font-size: 28px;
  text-align: center;
  vertical-align: bottom;
}

#calendar tr.days th {
  font-size: 20px;
  text-align: center;
}
#calendar tr.days th.sunday {
  color: #CC0033;
}
#calendar tr.footer td{
  border: none;
  height: 0px;
}
#calendar th{
  color: #000000;
  text-align: center;
}
#calendar td{
  color: #000000;
  text-align: center;
  font-size: 25px;
  font-weight: bold; 
  }
#calendar a{
  color: #000000;
  }
#calendar td.target{
  border: 4px solid #FF0000;
  border-radius: 50%;
}
#calendar a.sunday {
  color: #CC0033;
  }  
#calendar tr.empty{
  visibility: hidden;
  display: none;
}
.icon{
	width: 30px;
	height: 30px;
	margin: 0 auto;
	cursor: pointer;
}
.icon.reset
{
  width: 100px;
  height: 30px;
  background: transparent url('sprite_reset.png') no-repeat top left;
  background-size: 200px 30px;
}

.icon.reset:hover { background-position: -100px 0px }

.icon.year_up
{
    background: transparent url('sprite_double_right.png') no-repeat top left;
    background-size: 60px 30px;
}

.icon.year_up:hover { background-position: -30px 0px }

.icon.year_down
{
    background: transparent url('sprite_double_left.png') no-repeat top left;
    background-size: 60px 30px;
}

.icon.year_down:hover { background-position: -30px 0px }

.icon.month_up
{
    background: transparent url('sprite_right.png') no-repeat top left;
    background-size: 60px 30px;
}

.icon.month_up:hover { background-position: -30px 0px }

.icon.month_down
{
    background: transparent url('sprite_left.png') no-repeat top left;
    background-size: 60px 30px;
}

.icon.month_down:hover { background-position: -30px 0px }

.tip
{
  cursor: pointer;
  position: relative;
}

.tooltip
{
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: inset 0px 0px 8px #000000;
  -webkit-box-shadow: inset 0px 0px 8px #000000;
  box-shadow: inset 0px 0px 6px #000000;
  border: 2px solid #000000;
  color: #990000;
  background-color: #fff8e1;
  font-size: 16px;
  font-family: arial, sans-serif;
  text-align: center;
  padding: 6px 10px 6px 10px;
  position: absolute;
  top: -50px;
  opacity: 0;
}

.tooltip.year_down
{
  left: 5px;
}

.tooltip.month_down
{
  left: -35px;
}

.tooltip.reset
{
  left: -38px;
}


.tooltip.month_up
{
  left: -37px;
}

.tooltip.year_up
{
  left: -65px;
}

.tip:hover ~ .tooltip
{
  filter: alpha(opacity=100); /* For IE8 and earlier */
  opacity: 1;
  z-index: 100 !important;
}

td { position: relative; }