@import "colors";

@import "structure";

.jquery-calendar-container {
  
  nav {
	
	padding-bottom: 10px;
	
	.prv {
	
	}
	
	.nxt {
	  margin-left: 10px;
	}
	
  }
  
  .jquery-calendar {
	
	.row {
	  margin: 0;
	  height: $day_height;
	}
	
	.calendar-week .grid-cell {
	  
	  border: 1px solid $grey;
	  
	}
	
	.grid-cell {
	  display: inline-block;
	  float: left;
	  height: 100%;
	  padding: 0;
	  position: relative;
	  width: $column-width;
	  
	  &.previous-month, &.next-month {
		
		background-color: $bg_dark_grey;
		
		.number {
		  color: $dark_grey;
		}
		
	  }
	  
	  .number {
		color: $day_color;
		
		position: absolute;
		top: 0;
		left: 0;
		
		width: $number_size;
		height: $number_size;
		line-height: $number_size;
		text-align: center;
	  }
	  
	  &.events {
		
		&:hover {
		  background: $selected_bg;
		}
		
		cursor: pointer;
		background: $bg_grey;
		
		.number {
		  background: $selected_bg;
		  color: $selected_fg;
		  border: 0;
		}
		
	  }
	  
	  &.today {
		.number {
		  background: $today_bg;
		  color: $today_fg;
		  border: 0;
		}
	  }
	  
	}
	
	.calendar-week-header {
	  height: auto;
	  .grid-cell {
		padding-bottom: 10px;
		height: auto;
	  }
	}
	
  }
}