@import url(baseStyle.css);

/* ====================== baseStyle Overrides ======================== */
#leftMaster {
	width: 180px;
	padding-left: 8px;}
#rightMaster {
	width: 580px;
	position: relative;
	padding-right: 20px;}

#col1 {
	float: left;
	width: 116px;
	padding-top: 2px;}
#col2 {
	float: right;
	width: 464px;
	padding-top: 10px;}

#Filter {
	top: 0px;
	right: 15px;
	z-index: 800;
	position: absolute;}


/* ====================== Ajax Calendar ======================== */
#Calendars {width: 180px;}

table.Calendar {
	width: 180px;
	margin-bottom: 12px;}

td.CalendarMonthHeader {
	color: #FFFFFF;
	font-size: 14px;
	padding: 4px 0px;
	font-weight: bold;
	text-align: center;
	border-bottom: 2px solid #FFFFFF;
	background: #000000 url(/Common/Img/backgrounds/bkgndCalendarMonth.gif) repeat-x left bottom;}

.CalendarDays {background-color: #FFFFFF;}

.CalendarDays td {
	width: 26px;
	border: 1px solid #FFFFFF;
	border-collapse: collapse;}

.DayToday {
	color: #FFFFFF;
	font-size: 12px;
	padding: 3px 0px;
	font-weight: bold;
	text-align: center;
	background-color: #000000;}
.DayToday a {
	width: 24px;
	color: #FFFFFF;
	display: block;
	text-decoration: none;}

.DayWithNoEvent {
	color: #000000;
	font-size: 12px;
	padding: 3px 0px;
	font-weight: bold;
	text-align: center;
	background-color: #E0E0E0;}

.DayWithEvent {
	color: #FFFFFF;
	font-size: 12px;
	padding: 3px 0px;
	font-weight: bold;
	text-align: center;
	background-color: #B31542;}
.DayWithEvent a {
	width: 24px;
	color: #FFFFFF;
	display: block;
	text-decoration: none;}

td.DayToday a:hover, td.DayWithEvent a:hover {color: #FFFFFF;}

.BlankCell {
	height: 20px;
	background-color: #E0E0E0;}

.pagingMonths {
	text-align: center;
	padding: 0px 0px 14px 0px;}


/* ====================== Tab Formatting ======================== */
.menuEventCalendar {height: 26px;}

.menuEventCalendar div {
	float: left;
	padding: 6px 0px;
	margin: 0px 2px 0px 0px;
	background-color: #393939;}
.menuEventCalendar div a {
	margin: 0px;
	color: #FFFFFF;
	font-size: 12px;
	padding: 6px 10px;
	font-weight: bold;
	text-decoration: none;}

.pageDateEvents .menuEventCalendar div.menuDate, .pageCategoryEvents .menuEventCalendar div.menuCategory, .pageVenueEvents .menuEventCalendar div.menuVenue{background-color: #EBEBEB;}
.pageDateEvents .menuEventCalendar div.menuDate a, .pageCategoryEvents .menuEventCalendar div.menuCategory a, .pageVenueEvents .menuEventCalendar div.menuVenue a {color: #000000;}


.txtEventsDisplay {
	color: #000000;
	text-align: center;}

#MonthTabs, #CategoryTabs, #VenueLTabs {padding-top: 12px;}
#MonthTabs ul, #CategoryTabs ul, #VenueLTabs ul {
	margin: 0px;
	list-style-type: none;}

li.CalendarTabActive, li.CalendarTabInactive {
	padding: 0px;
	color: #FFFFFF;
	cursor: pointer;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	margin: 0px 2px 2px 0px;
	background: #1F5391 none;}
li.CalendarTabActive {
	color: #000000;
	margin-right: 0px;
	background: #EBEBEB none;}

li .MonthTab {
	display: block;
	padding: 5px 0px 5px 0px;}
li.CalendarTabActive .MonthTab {}

.pageCategoryEvents #CategoryTabs ul li#Tab1 {background-color: #1F5391;}
.pageCategoryEvents #CategoryTabs ul li#Tab2 {background-color: #692B8A;}
.pageCategoryEvents #CategoryTabs ul li#Tab3 {background-color: #4D705B;}
.pageCategoryEvents #CategoryTabs ul li#Tab4 {background-color: #AD4974;}


/* ====================== Event Desc Styling ======================== */
.EventList {vertical-align: top;}

#CalendarData .category1 {
	padding-left: 85px;
	background: #EBEBEB url(../Img/backgrounds/thumbEmotionalSupport.gif) no-repeat 14px 26px;}
#CalendarData .category2 {
	padding-left: 85px;
	background: #EBEBEB url(../Img/backgrounds/thumbEducation.gif) no-repeat 14px 26px;}
#CalendarData .category3 {
	padding-left: 85px;
	background: #EBEBEB url(../Img/backgrounds/thumbNutrition.gif) no-repeat 14px 26px;}
#CalendarData .category4 {
	padding-left: 85px;
	background: #EBEBEB url(../Img/backgrounds/thumbStress.gif) no-repeat 14px 26px;}

.CalendarHeader {
	margin: 0px 0px 2px 0px;
	background-color: #EBEBEB;
	padding: 15px 15px 20px 25px;}
.CurrentMonthHeader {
	display: none;
	color: #000000;
	font-size: 14px;
	font-weight: bold;}
.CalendarTitleHeader {
	color: #000000;
	display: block;
	font-size: 14px;
	font-weight: bold;}
.CalendarTitleMessage {
	color: #3F3F3F;
	font-size: 11px;}

.EventActive, .EventInactive {
	clear: both;
	background-color: #EBEBEB;
	padding: 15px 15px 10px 25px;}
.EventActive {border: 1px solid #000000;}

.EventDate {
	color: #000000;
	display: block;
	font-size: 11px;
	font-weight: bold;}
.EventName {
	color: #000000;
	display: block;
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 10px;}
.EventDescription {
	color: #000000;
	display: block;
	font-size: 11px;}

.TDEventDescription {height: 20px;}
	

/* ====================== Drop Down Styling ======================== */
.DropDownLabel {
	float: left;
	width: 80px;
	color: #000000;
	padding: 6px 0px 0px 0px;}

.FilterDropdown {
	height: 23px;
	width: 140px;
	color: #FFFFFF;
	font-size: 11px;
	margin-left: 90px;
	padding: 7px 0px 0px 10px;
	background: #FFFFFF url(../Img/backgrounds/bkgndDownArrow.gif) no-repeat right top;}

.FilterDropdownList {
	right: 6px;
	width: 290px;
	height: 200px;
	display: none;
	font-size: 11px;
	overflow-y: auto;
	position: absolute;
	border: 1px solid #000000;
	background-color: #393939;}

.FilterDropdownUL {
	margin: 0px;
	list-style-type: none;}
.FilterDropdownUL li {
	padding: 0px;
	cursor: pointer;
	background-image: none;}
.FilterDropdownUL li a {
	color: #FFFFFF;
	display: block;
	padding: 4px 4px 4px 6px;}
.FilterDropdownUL li a:hover {
	color: #B31542;
	text-decoration: none;
	background-color: #000000;}


.RegistrationReservation {
	display: block;
	float: right;
	padding-right: 35px;
}


.calendarNavigation {
	display: inline; }
.nextArrow, .prevArrow { cursor: pointer; }


/* ====================== RSVP/Registrations ======================== */

.toggleRegistrationActions {
    padding: 5px 0 0 0;
}

.toggleRegistrationActions a {
    font-weight: bold;
}
.calendarRegistrationForm {
    margin: 12px auto 12px 24px;
}

.calendarRegistrationForm table {
    border-collapse: collapse;
}

.calendarRegistrationForm table td {
    padding: 3px;
}

.calendarRegistrationForm input {
    width: 180px;
}

.calendarRegistrationForm textarea {
    width: 180px;
    height: 40px;
}

.calendarRegistrationForm .reg-button input {
    width: auto;
}

.calendarRegistrationForm .number-attending input {
    width: 50px;
}

.calendarRegistrationForm .card-security-code input {
    width: 50px;
}

.calendarRegistrationForm .regHeader td {
    padding: 0 0 4px 0;
    text-decoration: underline;
}
.calendarRegistrationMessage {
    margin: 24px auto 12px 18px;
    color: Red;
    font-weight: bold;
}

.registrationCompleted {
    width: 85%;
    margin: 16px auto;
    padding: 10px 12px;
    background-color: #B3F5BD;
    border: 1px solid #7FFA92;
}

.registrationCompleted .reg-completed-header {
    text-decoration: underline;
    font-weight: bold;
}

.registrationCompleted  .reg-completed-msg {
    margin: 12px auto;
}

.registrationCompleted table {

}

.registrationCompleted table td {
    padding: 3px 5px;
}

.registrationCompleted table td.label {
    font-weight: bold;
}