#content .fa-plus { color: #fff; }

#month-year         { margin-left: 4px; display: inline-block; }

.calendar-view      { width: 100%; padding: 3px; }

.info				{
						padding: 3px;
    					position:relative; /*this is the key*/
    					z-index:24;
    					color: black;
    				}

.info span			{ display: none; }

.info:hover span	{ 	/*the span will display just on :hover state*/
    					display: block;
    					position: absolute;
    					top: 2em; left: 2em; width: 15em;
    					border:1px solid #0cf;
    					background-color:#cff; color:#000;
    					text-align: center;
    				}


#schedule-container		{ width: 611px; height: 368px; display: block; background: url(images/background-schedule.gif) 0px 21px no-repeat; }

.dow-header				{ float: left; width: 80px; background-color: white; padding: 3px 0; margin-right: 3px; background-color: #731F3A; color: white; text-align: center; }

.dow					{ position: relative; float: left; width: 80px; height: 336px; margin: 3px 3px 0 0; }

.scheduled-class		{ float: left; position: absolute; left: 0px; width: 78px; background-color: #aabbcc; border: 1px solid black; display: block; overflow: hidden; font-size: 80%; }

.popup-header 			{ padding: 3px; text-align: center; font-size: large; background-color: #731F3A; color: white; font-weight: bolder; }

table.schedule-details tr td { font-size: 10px; }

.small					{ font-size: 9px; }

.day-header             { background-color: #731F3A; color: white; padding: 3px; }
.today                  { background-color: #E9C660; } /* #255B93; */

.upcoming-events    { 
                        background  : url(images/upcoming-events.gif) top left no-repeat;
                        font-size   : 12pt; 
                        font-weight : bolder; 
                        height      : 70px;
                        text-indent : -99999px; 
                        width       : 178px;
                    }

.event-name         {   font-weight: bolder; }
.class-name,
.workshop-name,                 
.location,
.instructor-name
                { font-size: 10pt; font-weight: bolder; color: #265370; }

.class-listing          { color: black; font-size: 9px; text-decoration: none; font-family: verdana, arial, helvetica, sans-serif; line-height: 12px; display: block; margin-bottom: 4px; padding: 2px; }
.class-listing:hover    { text-decoration: underline; }
.class-listing .time    { font-style: italic; color: #F3733B; font-family: verdana, arial, helvetica, sans-serif; }

.workshop-listing       { color: black; font-size: 9px; text-decoration: none; font-family: verdana, arial, helvetica, sans-serif; font-weight: bolder; line-height: 12px; display: block; margin-bottom: 4px; padding: 2px; }
.workshop-listing:hover { text-decoration: underline; }
.workshop-listing .time { font-style: italic; color: green; font-family: verdana, arial, helvetica, sans-serif; }

.additional-instructor-photo { margin-left: 5px; }

@media screen and (max-width: 320px) {

    .additional-instructor-photo { display: block; margin-left: 0; margin-top: 5px; }
}