.cal {
   width:776px;
   font-family : arial;
   margin:20px 0;
   position:relative;
}

 .clearFloat {
   clear:both
}

.priorMonth , .nextMonth{ 
   color:#ccc; 
   background-color:#F7F6F2;
}
.currentMonth { 
   color: black; 
   background:#EEECDF;
}

.calCell {
    width: 14%;
    min-width:110px;
    display: table-cell;
    text-align: center;
    overflow: hidden;
    border-right: 1px solid #ccc;
    padding-bottom: 5px;
}

.calHead {
  display:table;
  width:100%;
}

.calCell.isEvents a:hover { 
   background:#AFC5FF;
}
.calCell .event .date, .calCell .event .content{
   display:none;
}

.calendarDate {
   display:block; 
   text-align:right; 
   background-color:#DFDDD1;
   padding:3px 0;
}

.calCell a.eventList {
  display:block;
  font-weight: bold;
  color:red ;
  padding-right:4px;
}

.calCell.today {
   background-color:#DFE8FF;
}

.calCell.today .calendarDate{
   color:#fff;
}
.calCell .event {
   text-align:left; margin-left:3px;
}
.calCell .event .title { 
   font-weight:normal; 
   font-size:.9em; 
   font-weight:normal;

}
 
.calCell .event .selected {
   background:#AFC5FF; 
   cursor:pointer;
}

.eventPopup {
	 position:fixed;
	 z-index:1000;
	 top:200px;
	 left:200px;
   top:40%;
   left:40%;
	 width:200px;
	 background-color:#FFFFFF;
	 border:1px solid #844144;
	 padding:10px;
	 font-family: Arial, Helvetica, sans-serif;
	 font-size:1em;
	 line-height:1.4em;
	 display:none;
}

.eventPopup .date {
  float:right;
}
.eventPopup .title { 
  font-weight:bold;
  border-bottom:1px solid #ccc;
  margin-bottom:1em;
  display:block;
}
.eventPopup .content { 
  font-family:arial;
  fxxont-size:.9em;
  margin-bottom:1em;
}
.eventPopup .close {
  float:right; 
  clear:both;
  color:#000;
  background-color:#FFD686;
  padding:3px;
}
  
.eventPopup .content {display:block; margin-left:0; padding-left:0; font-style:italic}
.eventPopup .calendarDate {display:none;}


/* mini calendar over-ride styles */
.minical {padding:10px 15px; background:white;width:196px; height:196px; position:relative; 
margin:0 0 3px 0}
.minical .calCell .event {display:none}
.minical .calCell {width:27px;height:27px}
.minical .calendarDate { text-align:left; background:none; }
.minical .calCell {border-right:white 1px solid; border-bottom:1px solid white;}
.minical .calCell.isEvents a {
color: rgb(192, 59, 59)!important;}
.minical .calCell.selected { background-color: #F7F6F2; cursor:pointer;}
.minical .calCell a:link,.calCell a:visited {text-decoration:none;}
.minical .eventPopup {top:0;left:-100px;} /* needs to be minus 250 to put on left of calendar*/
.minical {}
.minical .calCell.today{background:#DFE8FF}
.minical .minicalHeader {text-align:left;margin-bottom:10px; color:#F79100; }
.minical .calCell.isEvents {
    background: rgb(250, 248, 234);
}
#sidebar .minical .calCell.isEvents:hover, #sidebar .minical .calCell.isEvents a:hover { 
background:rgb(249, 209, 209);
}
/* -----------------------------------------------UPCOMING EVENTS---------------------------*/
/* ASSUMES THAT THE LAYOUT IS 
		EVENT
			DATE
			START (time)
			TITLE
			CONTENT
		EVENT
			DATE
			...	
*/
.upcomingEvents { 
	font-family:Arial;
        width:400px;
	
}
.upcomingEvents .event{
	border-bottom:1px solid #ccc;
	margin-bottom:1em; 
	padding-bottom:1em;
}
.upcomingEvents .date , 
.upcomingEvents .start{
	font-size:.8em; color:#888;
	display:block;
	margin-right:10px;
	float:left;
	width:60px;
}
.upcomingEvents .title { 
  	font-weight:bold;  
  	display:block;
	color:#556C96;
        width:260px; float:right;
}
.upcomingEvents .content { 
	clear:both; 
	display:block;  
	margin:0; 
	font-size:.8em;
	line-height:1.3em;
margin-left:140px;
}
.upcomingEvents_style2 {font-size:1em;  line-height:1.3em; color:#A32C30; stext-transform:uppercase;}
.upcomingEvents_style2 .timeandday {display:block; margin-top:4px;}
.upcomingEvents_style2 .event {margin-bottom:5px;}

/* this makes teh big calendar titles truncate at one line ... remove height and overflow to just show a bottom border*/

.cal .calCell span.title {
	display:inline; 
	line-height:1.1em; 
	 padding-bottom:3px;
}
.cal .calCell span.start {
	display:inline; font-size:.9em;
}

#calendarlink {text-align:right; margin-right:20px;}
#calendarlinkgoogle {text-align:center; margin-right:0px}
.cal .calNav {text-align:center; font-size:1.2em; margin:20px;}
.cal {margin:0 auto;}

.calNav a.previousMonth, .calNav a.nextMonth , #calendarlinkgoogle>a {
    border: 1px solid #ccc;
    padding: 2px 5px;
    border-radius: 6px;
    background: rgb(245, 243, 222);
    width: 4em;
    display: inline-block;
    margin: 10px 20px;
}
#calendarlinkgoogle>a {
  width:130px;
  margin-right: 0;
}