/** DC LIGHT 1.2
 * written by Mark Carpenter
 * 2015.04.04
 **/

@import url(http://fonts.googleapis.com/css?family=Lane|Quicksand|Denk+One|Open+Sans:400italic,400);


/* BODY */
body { background: #f0f0f0; font: 100%/1.5 'Open Sans', sans-serif; margin: 0; padding: 0; color: #222; }

a { text-decoration: none; color: #44f; }

form { padding: 0; margin: 0; }

.alertbar { display: none; background: #aaf; padding: 1em; border-bottom: solid 1px #000; }
.alertbar button.dismiss-button { font-size: 1.5em; float: right;  color: #666; background-color: transparent; border-color: transparent; }
.alertbar button.dismiss-button:hover { color: #222; background-color: transparent; border-color: transparent; }
.alertbar button.dismiss-button:active { color: #000; background-color: transparent; border-color: transparent; outline-color: transparent; }
.alertbar .more-info { display: none; }
.alertbar .title { font-weight: 800; font-size: 1.2em;}
.alertbar .hint { color: #444; font-size: .8em;}
.alertbar .highlight { font-family: "Quicksand", "Open Sans", sans-serif; font-weight: 800; text-transform: uppercase;}

.button, button { padding: .2em .5em; background: #55f; color: #eee; border: 1px #55f solid; cursor: pointer; }
.button:hover, button:hover { background: #66f; color: #fff; border-color: #66f;}
.button:active, button:active, .button.selected, button.selected { background-color: #000; color: #fff; border-color: #000; }

.clickable { cursor: pointer; }

/* MAIN STRUCTURE */
.DCHeader { margin: 0; padding: 10px 5px 10px 5px;  background: #222; color: #ddd; }
.DCLogoFull { }

.DCLogo h1 { font: 3em/1.0 'Lane', sans-serif; font-weight: 800; color: #eee; margin: 0; padding: 0; text-transform: uppercase; }

.DCTagline h2 { font: 1.1em/1.0 'Lane', sans-serif; font-weight: 700; color: #eee; margin: 0; margin-top: 3px; padding: 0; text-transform: uppercase; }

.DCSubtagline h3 { font: 1em/1.15 'Open Sans', sans-serif; margin-bottom: 0; font-weight: 200; color: #888; }

.DCLogo, .DCTagline, .DCSubtagline { text-align: center; }

.DCFooter { clear: both; color: #444; }
.DCFooter a { color: #446; }

/* MENU */
.DCMenu { margin-bottom: 20px; margin-top: 20px; background: #e8e8e8; }

.DCMap { display: none; }
.DCMap img { display: none; }
.DCMap a { color: #eee; float: right; background: #222; width: 49%; padding: .5em; background: #55f; border: 1px #44f solid; }
.DCMap a i b { text-decoration: none; font-weight: 400; font-style: normal; color: #eee; color: #ddd; }

.DCMap a, .DCMainMenuLabel { height: 26px; }
.DCMainMenuLabel { padding: .5em; background: #222; width: 50%; text-align: center; cursor: pointer; background: #55f; 
 border-width: 1px 0 1px 1px; border-color: #44f; border-style: solid; }
.DCMainMenuLabel a { color: #eee; color: #ddd; }

.DCMainMenubar { clear: both; text-align: center; background: #222; background: #55f; border-bottom: 1px #44f solid;}

.DCMainMenuItem img { display: none; }

.DCMainMenuItem a { display: block; padding: .5em; }

.DCMainMenuItem + .DCMainMenuItem { border-top: 1px #44f solid; }

.DCMainMenuItem a { color: #eee; }

.DCMainMenuItemGoogleCal { display: none; }

.DCThemeMenu { font-size: .8em; margin: 10px 0 10px 20px; float: right; }

.DCMenuKey { display: none; }
.DCMenuKey { clear: both; margin: 0 5px 0 15px;  }

.DCMenuKey .DCDanceChoiceWidget { display: inline-block; width: 40%; }

.DCConfigMenu { background: #ddd; font-size: .8em; padding: 1em .5em; border-bottom: 1px solid #aaa; line-height: 2;}
.DCConfigMenuLabel a { background: #ddd; font-size: .8em; padding: .5em; display: block; border-width: 1px 0px; border-style: solid; border-color: #aaa; }

.DCWeekStartMenu { margin-top: 1em; }

.DCSizeMenu { display: none; }

/* TAG SELECTION MENU */
.DCMenuKeyOutput { margin: .3em 0; font-size: .8em; color: #aaa; }

.DCDanceChoiceWidget { color: #000; padding: .3em; max-width: 300px; }

.DCDanceChoiceWidgetButton { float: left; fill: #eee; margin-right: .5em; cursor: pointer; }
.DCDanceChoiceWidgetButton { height: 20px; width: 20px; margin-top: 2px; border: solid 1px transparent; text-align: center; font-size: .8em;  }
.DCDanceChoiceWidgetLabel { border: solid 1px transparent; padding: 0 .2em; }

.DCDanceChoiceWidgetButton.active { border: solid 1px #000; }
.DCBlues .DCDanceChoiceWidgetButton.active, .DCBlues .DCDanceChoiceWidgetLabel.active { background-color: #D2E5F5; }
.DCLindy .DCDanceChoiceWidgetButton.active { background-color: #FFDAD8; }
.DCBalboa .DCDanceChoiceWidgetButton.active { background-color: #F7FBD8; }
.DCShag .DCDanceChoiceWidgetButton.active { background-color: #FFF0D0; }
.DCTango .DCDanceChoiceWidgetButton.active { background-color: #E2D4F6; }
.DCFusion .DCDanceChoiceWidgetButton.active { background-color: #D3F9D8; }
.DCSolo_Jazz .DCDanceChoiceWidgetButton.active { background-color: #eee; }
.DCWest_Coast .DCDanceChoiceWidgetButton.active { background-color: #eee; }
.DCOther .DCDanceChoiceWidgetButton.active { background-color: #eee; }
.DCCanceled { background-color: #ff0000; }



/* CALENDAR */
.DCCalendar { width: auto; margin: 0; padding: 0; }

.DCMonth { background: #eee; border: #222 1px solid; margin-bottom: 20px; }

.DCMonthHeader { background: #222; color: #eee; text-align: center; padding: .2em 0; }
.sticky-wrapper.is-sticky .DCMonthHeader { width: 100%; }
.sticky-wrapper.is-sticky .DCWeek { width: 100%; border-width: 0 1px 1px 0; border-style: solid; border-color: #B6B6B6;}

.DCWeek {
	width: 100%;
	display: table;
	table-layout: fixed;
	box-sizing: border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

.DCDay {
	box-sizing: border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

.DCDay, .DCDayName { border: solid 1px transparent; border-bottom: 0; border-top: 0; background: #fff; }

.DCNoBorder, .DCDayNumber { border-top-color: #B6B6B6; border-top-width: 1px; border-top-style: solid;  }

.DCNoBorder, .DCDayMiddleEmpty, .DCDayBottomEmpty { background: #EEE; }

.DCDay { display: table-cell; width: 14.2857142857%;	/* 1/7 */ }

.DCDay + .DCDay { border-left-color: #B6B6B6;  }

.DCDayName { text-align: center; font-style: italic; font-size: 15px;  }

.DCDayNumber { font-size: .7em; padding-left: 3px; padding-bottom: 5px; }

.DCDaySpan2 { width: 28.57142857%; }
.DCDaySpan3 { width: 42.8571428571%; }
.DCDaySpan4 { width: 57.1428571428%; }
.DCDaySpan5 { width: 71.4285714285%; }
.DCDaySpan6 { width: 85.7142857142%; }
.DCDaySpan7 { width: 100%; }

/* EVENTS */
.DCEvent {  font-size: .8em; padding: 3px; }
.DCEvent, .DCEventName { -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
html.js .DCGoesForward, html.js .DCGoesBack { display: none; }
.LIGHTContinueRight .LIGHTArrowRight:before, .LIGHTContinueRight .LIGHTArrowRight:before,
.LIGHTContinueLeft .LIGHTArrowLeft:before, .LIGHTContinueLeft .LIGHTArrowLeft:before { -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
.DCEvent .DCEventName { background: #eef; border-width: 1px 1px 1px 2px ; border-style: solid; border-color: #bbf; overflow: hidden; padding: 2px; padding-left: 3px; }
.DCEvent .DCEventName:after { content: ""; display: table; clear: both; }
.DCEventName:hover { background-color: #ddd; border-color: #b6b6b6; }
.DCEventInfo { display: none;
	font-size: 12px;
	margin: 0;
	padding: .5em;

	color: #222;
	border-color: #bbf;
	border-width: 0 1px 1px 2px; 
	border-style: solid;
	background: #eef;
	border-color: #bbf;
}
.DCEventInfo .DCEventInfoName { display: none; }
.DCEventInfo .DCEventInfoDesc { display: block; }
.DCEventInfo .DCEventInfoButton { width: 16px; height: 16px; }
.DCEventInfo  a { color: #0000ff; }

.DCEventInfoWhere, .DCEventInfoDances, .DCEventInfoDate { display: block; }

.DCEvent .DCEventInfo a:hover { color: #22f; }
.DCEventName a { color: #000; } /* because the link isn't a link anymore, we're hijacking the whole .DCEventName to open the slider */
.DCEventNameName, .DCEventNameLocation { margin-top: 1px; }
.DCEventName .DCEventNameLocation { color: #888; }

.DCContinuationArrow { display: none; }

.DCEventName.LIGHTContinueRight { margin-right: 12px; position: relative; overflow: visible; }

.DCEventName.LIGHTContinueRight .LIGHTArrowRight {
	position: absolute;
	top: 0;
	right: 0;
}

.DCEventName.LIGHTContinueRight .LIGHTArrowRight:before {
	content:"";
	position: absolute;
	top: -1px;
	right: -24px;

	width: 0; 
	height: 0; 
	border-top: 13px solid transparent;
	border-right: 12px solid transparent;
	border-bottom: 13px solid transparent;
	border-left: 12px solid #bbf;
}

.DCEventName.LIGHTContinueRight .LIGHTArrowRight:after {
	content:"";
	position: absolute;
	top: 0;
	right: -22px;

	width: 0; 
	height: 0; 
	border-top: 12px solid transparent;
	border-right: 11px solid transparent;
	border-bottom: 12px solid transparent;
	border-left: 11px solid #eef;
}

.DCEventName.LIGHTContinueLeft { margin-left: 12px; position: relative; overflow: visible; }

.DCEventName.LIGHTContinueLeft .LIGHTArrowLeft {
	position: absolute;
	top: 0;
	left: 0;
}

.DCEventName.LIGHTContinueLeft .LIGHTArrowLeft:before {
	content:"";
	position: absolute;
	top: -1px;
	left: -25px;

	width: 0; 
	height: 0; 
	border-top: 13px solid transparent;
	border-left: 12px solid transparent;
	border-bottom: 13px solid transparent;
	border-right: 12px solid #bbf;
}

.DCEventName.LIGHTContinueLeft .LIGHTArrowLeft:after {
	content:"";
	position: absolute;
	top: 0px;
	left: -21px;

	width: 0; 
	height: 0; 
	border-top: 12px solid transparent;
	border-left: 11px solid transparent;
	border-bottom: 12px solid transparent;
	border-right: 11px solid #eef;
}

.DCEventName.LIGHTContinueRight:hover .LIGHTArrowRight:before,
.DCEventName.LIGHTContinueRight:hover .LIGHTArrowRight:after,
.DCEvent.open  .DCEventName.LIGHTContinueRight .LIGHTArrowRight:before,
.DCEvent.open .DCEventName.LIGHTContinueRight .LIGHTArrowRight:after {
	opacity: 0;
	right: 0;
	border-right-width: 0;
	border-left-width: 0;
}

.DCEventName.LIGHTContinueLeft:hover .LIGHTArrowLeft:before,
.DCEventName.LIGHTContinueLeft:hover .LIGHTArrowLeft:after,
.DCEvent.open  .DCEventName.LIGHTContinueLeft .LIGHTArrowLeft:before,
.DCEvent.open .DCEventName.LIGHTContinueLeft .LIGHTArrowLeft:after {
	opacity: 0;
	left: 0;
	border-right-width: 0;
	border-left-width: 0;
}

.DCEventName.LIGHTContinueRight:hover .LIGHTArrowRight:before,
.DCEvent.open  .DCEventName.LIGHTContinueRight .LIGHTArrowRight:before,
.DCEventName.LIGHTContinueLeft:hover .LIGHTArrowLeft:before,
.DCEvent.open  .DCEventName.LIGHTContinueLeft .LIGHTArrowLeft:before {
	-webkit-transition: all 0s; -moz-transition: all 0s; -o-transition: all 0s; transition: all 0s;
}


.DCEventName.LIGHTContinueRight:hover, .DCEventName.LIGHTContinueRight:hover,
.DCEvent.open .DCEventName.LIGHTContinueRight, .DCEvent.open .DCEventName.LIGHTContinueRight {  margin: 0; }

.DCEvent.open .DCEventName { background: #bbf;}
.DCEvent.open .DCEventNameName { font-weight: 800; }
.DCEvent.open .DCEventNameLocation { color: #000; }

.DCEvent.open:hover .DCEventName { background: #B6B6B6; border-color: #B6B6B6; border-right: ;}
.DCEvent.open:hover .DCEventInfo { background: #ddd; border-color: #B6B6B6; }

.DCDanceIcons { margin-right: 2px; display: inline-block; }
.DCDanceIcon.DCBlues { background-color: #D2E5F5; }
.DCDanceIcon.DCLindy { background-color: #FFDAD8; }
.DCDanceIcon.DCBalboa { background-color: #F7FBD8; }
.DCDanceIcon.DCShag { background-color: #FFF0D0; }
.DCDanceIcon.DCTango { background-color: #E2D4F6; }
.DCDanceIcon.DCFusion { background-color: #D3F9D8; }
.DCDanceIcon.DCSolo_Jazz { background-color: #eee; }
.DCDanceIcon.DCOther { background-color: #eee; }
.DCDanceIcon.DCWest_Coast { background-color: #eee; }

.DCTypeIcon, .DCDanceIcon {
	border: 1px solid #888; color: #888; font-size: 9px; font-weight: thin;
	padding: 0 .2em; margin: 0px 3px 0px 0px; display: inline-block; min-width: 12px;
	font-family: "Open Sans", sans-serif;
}

.DCTypeIcon { background-color: #fff; color: #888; border-color: #888; font-weight: normal; min-width: 12px; text-align: center; }

.DCToggleArrow { float: right; margin: 0 4px 2px 3px; color: #66f; }

.DCCatchall { background: red; }


/* LIGHT-specific styles */
.DCEvent.LIGHTGapFiller { padding: 0; }

@media all and (min-width: 600px) {
	.DCMainMenuLabel:hover, .DCMainMenuItem a:hover, .DCMap a:hover { background: #333; color: #fff; background: #66f;}
	.DCConfigMenuLabel a:hover { background: #ccc; color: #000; }

	.DCMenuKey span:hover { color: #444; }

}

@media all and (min-width: 1000px) {
	.alertbar { padding-left: 20%; padding-right: 20%; }

	.DCHeader { padding: 15px 10px 15px 15px;  }
	.DCLogo, .DCLogo h1 { font-size: 1.2em; display: inline; margin-bottom: 0; }
	.DCTagline, .DCTagline h2 { font-size: 1.2em; color: #ddd; font-weight: 200; display: inline; margin-bottom: 0; margin-left: .3em; }
	.DCSubtagline h3 { text-align: left; margin-top: .2em; }

	.DCMenu { float: left; width: 20%; }
	.DCMenuKey .DCDanceChoiceWidget { display: block; width: auto; margin-top: 5px; }
	.DCThemeMenu { margin: 0; padding: 10px 0; padding-right: 10px; background: #ddd; width: auto; float: none; text-align: right; border-bottom: solid 1px #aaa; }

	.DCCalendar { margin-left: 20%; margin-top: 20px; }
	.sticky-wrapper.is-sticky .DCMonthHeader { width: 80%; z-index: 100; }
	.sticky-wrapper.is-sticky .DCWeek { width: 80%; z-index: 100; }

	.LIGHTMenuStickyWrapper { float: left; width: 20%; }
	.LIGHTMenuStickyWrapper .DCMenu { width: 100%; }	
	.LIGHTMenuStickyWrapper.is-sticky .DCMenu { width: 20%; margin-top: 0; }	
}